Hi @Yuliia and welcome to the community 
Amazing work on this exercise. 
I have only two small simplifications:
<img> element. <picture> doesn’t add anything useful in this case.<source> element. The browser will use the fallback <img> when the first condition doesn’t match.I hope that helps. Feel free to ask question. 
Happy New Year,
Michael
Good day. Thanks for checking the code! I will consider the advice.
Happy New Year,
Yuliia
bonjour! je souhaite être évaluer sur “page de démarrage de Mozilla” s’il vous plait merci beaucoup
Mozilla splash page /* header and body setup */ html {
font-family: 'Open Sans', sans-serif;
background: url(pattern.png);
}
body {
width: 100%;
max-width: 1200px;
margin: 0 auto;
background-color: white;
position: relative;
}
/* Header styling */
header {
height: 150px;
}
header img {
width: 100px;
position: absolute;
right: 32.5px;
top: 32.5px;
}
h1 {
font-size: 50px;
line-height: 140px;
margin: 0 0 0 32.5px;
}
/* main section and video styling */
main {
background: #ccc;
}
article {
padding: 20px;
}
h2 {
margin-top: 0;
}
p {
line-height: 2;
}
iframe {
float: left;
margin: 0 20px 20px 0;
max-width: 100%;
}
/* further info links */
.further-info {
clear: left;
padding: 40px 0;
background: #c13832;
box-shadow: inset 0 3px 2px rgba(0,0,0,0.5),
inset 0 -3px 2px rgba(0,0,0,0.5);
}
.further-info a {
width: 25%;
display: block;
float: left;
}
.further-info img {
max-width: 100%;
}
.clearfix {
clear: both;
}
/* Red panda image */
.red-panda img {
display: block;
max-width: 100%;
}
</style>
<main>
<article>
<!-- insert iframe from youtube -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/ojcNcvb1olg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<h2>Rocking the free web</h2>
<p>Mozilla are a global community of technologists, thinkers, and builders, working together to keep the Internet alive and accessible, so people worldwide can be informed contributors and creators of the Web. We believe this act of human collaboration across an open platform is essential to individual growth and our collective future.</p>
<p>Click on the images below to find more information about the cool stuff Mozilla does. <a href="https://www.flickr.com/photos/mathiasappel/21675551065/">Red panda picture</a> by Mathias Appel.</p>
</article>
<div class="further-info">
<!-- insert images with srcsets and sizes -->
<a href="https://www.mozilla.org/en-US/firefox/new/">
<img srcset="firefoxlogoonly120png 120png,
firefoxlogoonly400png 400png" sizes="(max width: 480px) 120px, 400px" src="img/firefoxlogoonlyRGB.png" alt="un renard orange sur une boule bleu">
</a>
<a href="https://www.mozilla.org/">
<img srcset="mozilladinosaurhead120png 120png,
mozilladinosaurhead400png 400png" sizes="(max width:480px) 120px, 400px" src="img/mozilladinosaurhead.png" alt="un tete de dinosaur">
</a>
<a href="https://addons.mozilla.org/">
<img srcset="firefoxaddons120jpg 120jpg,
firefoxaddons400jpg 400jpg" sizes="(max width:480px) 120px, 400px" src="img/firefoxaddons.jpg">
</a>
<a href="https://developer.mozilla.org/en-US/">
<img srcset="mdn.svg 120px" sizes="(max-width: 480px) 120px, 400px" src="img/mdn.svg" >
</a>
<div class="clearfix"></div>
</div>
<div class="red-panda">
<!-- insert picture element -->
<picture>
<source media="(min-width: 1200jpg)" srcset="redpanda1200.jpg">
<source media="(max-width: 600jpg)" srcset="redpanda600.jpg">
<img src="img/redpanda.jpg" alt="un panda roux">
</picture>
</div>
</main>
Nice work! Here are a few comments:
srcset the pixel values need to have a “w” at the end not the file extension. For example srcset="firefox-logo120.png 120w, firefox-logo400.png 400w" .<img>. srcset and sizes aren’t needed since it’s a vector graphic that scales automatically. (One of the great advantages of SVG.)<picture> if the big image and the fallback image are the same, you could leave out the <source> with the big image since the browser will automatically use the fallback image.I hope that helps,
Michael
bonjour @mikoMK! merci ca aide beaucoup surtout que je n’ai pas totalement saisi le svg 
Hello!
For some reason always 400px images are loaded, no matter browser or window size.
Please tell me the reason
https://virginia-wolfi.github.io/
Hello @Valchonok_virginia_wolfi
i guess you use chrome or any chromioum based browser if that the case then check this comment
read the chrome part of the comment
and you can use firefox to make sure that chrome is the cause of it
hope it help and have a nice day 
Hello, I just completed the “Mozilla splash page” assessment and would appreciate a marking guide. I hope for your any feedback. Thanks! My code on https://github.com/BISCVITE30/test-from-MDN--second-section-
Hello guys, can you please evaluate my code?
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Mozilla splash page</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<style>
/* header and body setup */
html {
font-family: 'Open Sans', sans-serif;
background: url(pattern.png);
}
body {
width: 100%;
max-width: 1200px;
margin: 0 auto;
background-color: white;
position: relative;
}
/* Header styling */
header {
height: 150px;
}
header img {
width: 100px;
position: absolute;
right: 32.5px;
top: 32.5px;
}
h1 {
font-size: 50px;
line-height: 140px;
margin: 0 0 0 32.5px;
}
/* main section and video styling */
main {
background: #ccc;
}
article {
padding: 20px;
}
h2 {
margin-top: 0;
}
p {
line-height: 2;
}
iframe {
float: left;
margin: 0 20px 20px 0;
max-width: 100%;
}
/* further info links */
.further-info {
clear: left;
padding: 40px 0;
background: #c13832;
box-shadow: inset 0 3px 2px rgba(0,0,0,0.5),
inset 0 -3px 2px rgba(0,0,0,0.5);
}
.further-info a {
width: 25%;
display: block;
float: left;
}
.further-info img {
max-width: 100%;
}
.clearfix {
clear: both;
}
/* Red panda image */
.red-panda img {
display: block;
max-width: 100%;
}
</style>
<header>
<h1>Mozilla</h1>
<!-- insert <img> element, link to the small
version of the Firefox logo -->
<img src="pictures/firefox_logo-only_RGB_120px.png" >
</header>
<main>
<article>
<!-- insert iframe from youtube -->
<h2>Rocking the free web</h2>
<p>Mozilla are a global community of technologists, thinkers, and builders, working together to keep the Internet alive and accessible, so people worldwide can be informed contributors and creators of the Web. We believe this act of human collaboration across an open platform is essential to individual growth and our collective future.</p>
<p>Click on the images below to find more information about the cool stuff Mozilla does. <a href="https://www.flickr.com/photos/mathiasappel/21675551065/">Red panda picture</a> by Mathias Appel.</p>
</article>
<div class="further-info">
<!-- insert images with srcsets and sizes -->
<a href="https://www.mozilla.org/en-US/firefox/new/">
<img srcset="pictures/firefox_logo-only_RGB_400px.png 400w,
pictures/firefox_logo-only_RGB_120px.png 120w"
sizes="(max-width:400px) 360px,
(max-width:120px) 80px,
1200px
src="pictures/firefox_logo-only_RGB.png"
alt="logo firefox"/>
</a>
<a href="https://www.mozilla.org/">
<img srcset="pictures/mozilla-dinosaur-head-400px.png,
pictures/mozilla-dinosaur-head-120px.png"
sizes="(max-width: 400px) 360px,\
(max-width: 120px) 80px,
1200px"
src="pictures/mozilla-dinosaur-head.png"
alt= "mozila dinosaur head"/>
</a>
<a href="https://addons.mozilla.org/">
<img srcset="pictures/firefox-addons-120px.jpg 120w"
sizes="(max-width:120px) 80px
400px"
src="pictures/firefox-addons.jpg"
alt="firefox addons"/>
</a>
<a href="https://developer.mozilla.org/en-US/">
<img src="pictures/mdn.svg"
alt="line head"/>
</a>
<div class="clearfix"></div>
</div>
<div class="red-panda">
<!-- insert picture element -->
<picture>
<source media="(max-width: 600px)" srcset="pictures/red-panda-600px.jpg"/>
<img src="pictures/red-panda.jpg" alt="red panda"/>
</picture>
</div>
</main>