Responsive Web Design Projects - Build a Product Landing Page

Hello

Whenever I run the test, it still has 3 failures (they are in the print).

I don’t know what else to do, can anyone help me??
HELP

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36

Challenge: Responsive Web Design Projects - Build a Product Landing Page

Link to the challenge:

Please post your code

This is my NAV, that’s right, 100% VW and pinned to the top of the page.

<nav id="nav-bar">
            <svg id="logo" width="162" height="37" viewBox="0 0 162 37" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M162 21.64V26.64H157V21.64H162Z" fill="#4FFF4B"/>
                <path d="M20.412 1.368V6.3H13.716V26.64H7.56001V6.3H0.864014V1.368H20.412Z" fill="white"/>
                <path d="M35.8495 6.336C38.1535 6.336 40.0015 7.104 41.3935 8.64C42.7855 10.152 43.4815 12.24 43.4815 14.904V26.64H37.3615V15.732C37.3615 14.388 37.0135 13.344 36.3175 12.6C35.6215 11.856 34.6855 11.484 33.5095 11.484C32.3335 11.484 31.3975 11.856 30.7015 12.6C30.0055 13.344 29.6575 14.388 29.6575 15.732V26.64H23.5015V0H29.6575V9.252C30.2815 8.364 31.1335 7.656 32.2135 7.128C33.2935 6.6 34.5055 6.336 35.8495 6.336Z" fill="white"/>
                <path d="M66.6954 16.272C66.6954 16.848 66.6594 17.448 66.5874 18.072H52.6554C52.7514 19.32 53.1474 20.28 53.8434 20.952C54.5634 21.6 55.4394 21.924 56.4714 21.924C58.0074 21.924 59.0754 21.276 59.6754 19.98H66.2274C65.8914 21.3 65.2794 22.488 64.3914 23.544C63.5274 24.6 62.4354 25.428 61.1154 26.028C59.7954 26.628 58.3194 26.928 56.6874 26.928C54.7194 26.928 52.9674 26.508 51.4314 25.668C49.8954 24.828 48.6954 23.628 47.8314 22.068C46.9674 20.508 46.5354 18.684 46.5354 16.596C46.5354 14.508 46.9554 12.684 47.7954 11.124C48.6594 9.564 49.8594 8.364 51.3954 7.524C52.9314 6.684 54.6954 6.264 56.6874 6.264C58.6314 6.264 60.3594 6.672 61.8714 7.488C63.3834 8.304 64.5594 9.468 65.3994 10.98C66.2634 12.492 66.6954 14.256 66.6954 16.272ZM60.3954 14.652C60.3954 13.596 60.0354 12.756 59.3154 12.132C58.5954 11.508 57.6954 11.196 56.6154 11.196C55.5834 11.196 54.7074 11.496 53.9874 12.096C53.2914 12.696 52.8594 13.548 52.6914 14.652H60.3954Z" fill="white"/>
                <path d="M92.8719 13.68C94.3359 13.992 95.5119 14.724 96.3999 15.876C97.2879 17.004 97.7319 18.3 97.7319 19.764C97.7319 21.876 96.9879 23.556 95.4999 24.804C94.0359 26.028 91.9839 26.64 89.3439 26.64H77.5719V1.368H88.9479C91.5159 1.368 93.5199 1.956 94.9599 3.132C96.4239 4.308 97.1559 5.904 97.1559 7.92C97.1559 9.408 96.7599 10.644 95.9679 11.628C95.1999 12.612 94.1679 13.296 92.8719 13.68ZM83.7279 11.592H87.7599C88.7679 11.592 89.5359 11.376 90.0639 10.944C90.6159 10.488 90.8919 9.828 90.8919 8.964C90.8919 8.1 90.6159 7.44 90.0639 6.984C89.5359 6.528 88.7679 6.3 87.7599 6.3H83.7279V11.592ZM88.2639 21.672C89.2959 21.672 90.0879 21.444 90.6399 20.988C91.2159 20.508 91.5039 19.824 91.5039 18.936C91.5039 18.048 91.2039 17.352 90.6039 16.848C90.0279 16.344 89.2239 16.092 88.1919 16.092H83.7279V21.672H88.2639Z" fill="white"/>
                <path d="M107.458 0V26.64H101.302V0H107.458Z" fill="white"/>
                <path d="M121.064 26.928C119.096 26.928 117.32 26.508 115.736 25.668C114.176 24.828 112.94 23.628 112.028 22.068C111.14 20.508 110.696 18.684 110.696 16.596C110.696 14.532 111.152 12.72 112.064 11.16C112.976 9.576 114.224 8.364 115.808 7.524C117.392 6.684 119.168 6.264 121.136 6.264C123.104 6.264 124.88 6.684 126.464 7.524C128.048 8.364 129.296 9.576 130.208 11.16C131.12 12.72 131.576 14.532 131.576 16.596C131.576 18.66 131.108 20.484 130.172 22.068C129.26 23.628 128 24.828 126.392 25.668C124.808 26.508 123.032 26.928 121.064 26.928ZM121.064 21.6C122.24 21.6 123.236 21.168 124.052 20.304C124.892 19.44 125.312 18.204 125.312 16.596C125.312 14.988 124.904 13.752 124.088 12.888C123.296 12.024 122.312 11.592 121.136 11.592C119.936 11.592 118.94 12.024 118.148 12.888C117.356 13.728 116.96 14.964 116.96 16.596C116.96 18.204 117.344 19.44 118.112 20.304C118.904 21.168 119.888 21.6 121.064 21.6Z" fill="white"/>
                <path d="M142.473 6.264C143.889 6.264 145.125 6.552 146.181 7.128C147.261 7.704 148.089 8.46 148.665 9.396V6.552H154.821V26.604C154.821 28.452 154.449 30.12 153.705 31.608C152.985 33.12 151.869 34.32 150.357 35.208C148.869 36.096 147.009 36.54 144.777 36.54C141.801 36.54 139.389 35.832 137.541 34.416C135.693 33.024 134.637 31.128 134.373 28.728H140.457C140.649 29.496 141.105 30.096 141.825 30.528C142.545 30.984 143.433 31.212 144.489 31.212C145.761 31.212 146.769 30.84 147.513 30.096C148.281 29.376 148.665 28.212 148.665 26.604V23.76C148.065 24.696 147.237 25.464 146.181 26.064C145.125 26.64 143.889 26.928 142.473 26.928C140.817 26.928 139.317 26.508 137.973 25.668C136.629 24.804 135.561 23.592 134.769 22.032C134.001 20.448 133.617 18.624 133.617 16.56C133.617 14.496 134.001 12.684 134.769 11.124C135.561 9.564 136.629 8.364 137.973 7.524C139.317 6.684 140.817 6.264 142.473 6.264ZM148.665 16.596C148.665 15.06 148.233 13.848 147.369 12.96C146.529 12.072 145.497 11.628 144.273 11.628C143.049 11.628 142.005 12.072 141.141 12.96C140.301 13.824 139.881 15.024 139.881 16.56C139.881 18.096 140.301 19.32 141.141 20.232C142.005 21.12 143.049 21.564 144.273 21.564C145.497 21.564 146.529 21.12 147.369 20.232C148.233 19.344 148.665 18.132 148.665 16.596Z" fill="white"/>
            </svg>
    
            <ul>
               
               <a class="nav-link" href="#box3"><li>Noticias</li></a>
               <a class="nav-link" href="#wrapper"><li>Dicas</li></a>
               <a class="nav-link" href="#footer"><li>Envie seu e-mail</li></a> 
            </ul>
    
            <div id="busca">
                <input type="search" name="search" id="search" placeholder="Busca">
            
                <svg id="btn" width="70" height="44" viewBox="0 0 70 44" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M0 0H66C68.2091 0 70 1.79086 70 4V40C70 42.2091 68.2091 44 66 44H0V0Z" fill="#9E6DC2"/>
                    <path d="M34 29C38.4183 29 42 25.4183 42 21C42 16.5817 38.4183 13 34 13C29.5817 13 26 16.5817 26 21C26 25.4183 29.5817 29 34 29Z" stroke="#F2E7FA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M44 31L39.65 26.65" stroke="#F2E7FA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
            </div>
            
        </nav>

And this is his CSS

nav{
    background: #290742;
    position: fixed;
    top:0;
    min-height: 75px;
    padding: 0px 20px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    

    <header id="header">
        <nav id="nav-bar">
            <svg id="logo" width="162" height="37" viewBox="0 0 162 37" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M162 21.64V26.64H157V21.64H162Z" fill="#4FFF4B"/>
                <path d="M20.412 1.368V6.3H13.716V26.64H7.56001V6.3H0.864014V1.368H20.412Z" fill="white"/>
                <path d="M35.8495 6.336C38.1535 6.336 40.0015 7.104 41.3935 8.64C42.7855 10.152 43.4815 12.24 43.4815 14.904V26.64H37.3615V15.732C37.3615 14.388 37.0135 13.344 36.3175 12.6C35.6215 11.856 34.6855 11.484 33.5095 11.484C32.3335 11.484 31.3975 11.856 30.7015 12.6C30.0055 13.344 29.6575 14.388 29.6575 15.732V26.64H23.5015V0H29.6575V9.252C30.2815 8.364 31.1335 7.656 32.2135 7.128C33.2935 6.6 34.5055 6.336 35.8495 6.336Z" fill="white"/>
                <path d="M66.6954 16.272C66.6954 16.848 66.6594 17.448 66.5874 18.072H52.6554C52.7514 19.32 53.1474 20.28 53.8434 20.952C54.5634 21.6 55.4394 21.924 56.4714 21.924C58.0074 21.924 59.0754 21.276 59.6754 19.98H66.2274C65.8914 21.3 65.2794 22.488 64.3914 23.544C63.5274 24.6 62.4354 25.428 61.1154 26.028C59.7954 26.628 58.3194 26.928 56.6874 26.928C54.7194 26.928 52.9674 26.508 51.4314 25.668C49.8954 24.828 48.6954 23.628 47.8314 22.068C46.9674 20.508 46.5354 18.684 46.5354 16.596C46.5354 14.508 46.9554 12.684 47.7954 11.124C48.6594 9.564 49.8594 8.364 51.3954 7.524C52.9314 6.684 54.6954 6.264 56.6874 6.264C58.6314 6.264 60.3594 6.672 61.8714 7.488C63.3834 8.304 64.5594 9.468 65.3994 10.98C66.2634 12.492 66.6954 14.256 66.6954 16.272ZM60.3954 14.652C60.3954 13.596 60.0354 12.756 59.3154 12.132C58.5954 11.508 57.6954 11.196 56.6154 11.196C55.5834 11.196 54.7074 11.496 53.9874 12.096C53.2914 12.696 52.8594 13.548 52.6914 14.652H60.3954Z" fill="white"/>
                <path d="M92.8719 13.68C94.3359 13.992 95.5119 14.724 96.3999 15.876C97.2879 17.004 97.7319 18.3 97.7319 19.764C97.7319 21.876 96.9879 23.556 95.4999 24.804C94.0359 26.028 91.9839 26.64 89.3439 26.64H77.5719V1.368H88.9479C91.5159 1.368 93.5199 1.956 94.9599 3.132C96.4239 4.308 97.1559 5.904 97.1559 7.92C97.1559 9.408 96.7599 10.644 95.9679 11.628C95.1999 12.612 94.1679 13.296 92.8719 13.68ZM83.7279 11.592H87.7599C88.7679 11.592 89.5359 11.376 90.0639 10.944C90.6159 10.488 90.8919 9.828 90.8919 8.964C90.8919 8.1 90.6159 7.44 90.0639 6.984C89.5359 6.528 88.7679 6.3 87.7599 6.3H83.7279V11.592ZM88.2639 21.672C89.2959 21.672 90.0879 21.444 90.6399 20.988C91.2159 20.508 91.5039 19.824 91.5039 18.936C91.5039 18.048 91.2039 17.352 90.6039 16.848C90.0279 16.344 89.2239 16.092 88.1919 16.092H83.7279V21.672H88.2639Z" fill="white"/>
                <path d="M107.458 0V26.64H101.302V0H107.458Z" fill="white"/>
                <path d="M121.064 26.928C119.096 26.928 117.32 26.508 115.736 25.668C114.176 24.828 112.94 23.628 112.028 22.068C111.14 20.508 110.696 18.684 110.696 16.596C110.696 14.532 111.152 12.72 112.064 11.16C112.976 9.576 114.224 8.364 115.808 7.524C117.392 6.684 119.168 6.264 121.136 6.264C123.104 6.264 124.88 6.684 126.464 7.524C128.048 8.364 129.296 9.576 130.208 11.16C131.12 12.72 131.576 14.532 131.576 16.596C131.576 18.66 131.108 20.484 130.172 22.068C129.26 23.628 128 24.828 126.392 25.668C124.808 26.508 123.032 26.928 121.064 26.928ZM121.064 21.6C122.24 21.6 123.236 21.168 124.052 20.304C124.892 19.44 125.312 18.204 125.312 16.596C125.312 14.988 124.904 13.752 124.088 12.888C123.296 12.024 122.312 11.592 121.136 11.592C119.936 11.592 118.94 12.024 118.148 12.888C117.356 13.728 116.96 14.964 116.96 16.596C116.96 18.204 117.344 19.44 118.112 20.304C118.904 21.168 119.888 21.6 121.064 21.6Z" fill="white"/>
                <path d="M142.473 6.264C143.889 6.264 145.125 6.552 146.181 7.128C147.261 7.704 148.089 8.46 148.665 9.396V6.552H154.821V26.604C154.821 28.452 154.449 30.12 153.705 31.608C152.985 33.12 151.869 34.32 150.357 35.208C148.869 36.096 147.009 36.54 144.777 36.54C141.801 36.54 139.389 35.832 137.541 34.416C135.693 33.024 134.637 31.128 134.373 28.728H140.457C140.649 29.496 141.105 30.096 141.825 30.528C142.545 30.984 143.433 31.212 144.489 31.212C145.761 31.212 146.769 30.84 147.513 30.096C148.281 29.376 148.665 28.212 148.665 26.604V23.76C148.065 24.696 147.237 25.464 146.181 26.064C145.125 26.64 143.889 26.928 142.473 26.928C140.817 26.928 139.317 26.508 137.973 25.668C136.629 24.804 135.561 23.592 134.769 22.032C134.001 20.448 133.617 18.624 133.617 16.56C133.617 14.496 134.001 12.684 134.769 11.124C135.561 9.564 136.629 8.364 137.973 7.524C139.317 6.684 140.817 6.264 142.473 6.264ZM148.665 16.596C148.665 15.06 148.233 13.848 147.369 12.96C146.529 12.072 145.497 11.628 144.273 11.628C143.049 11.628 142.005 12.072 141.141 12.96C140.301 13.824 139.881 15.024 139.881 16.56C139.881 18.096 140.301 19.32 141.141 20.232C142.005 21.12 143.049 21.564 144.273 21.564C145.497 21.564 146.529 21.12 147.369 20.232C148.233 19.344 148.665 18.132 148.665 16.596Z" fill="white"/>
            </svg>
    
            <ul>
               
               <a class="nav-link" href="#box3"><li>Noticias</li></a>
               <a class="nav-link" href="#wrapper"><li>Dicas</li></a>
               <a class="nav-link" href="#footer"><li>Envie seu e-mail</li></a> 
            </ul>
    
            <div id="busca">
                <input type="search" name="search" id="search" placeholder="Busca">
            
                <svg id="btn" width="70" height="44" viewBox="0 0 70 44" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M0 0H66C68.2091 0 70 1.79086 70 4V40C70 42.2091 68.2091 44 66 44H0V0Z" fill="#9E6DC2"/>
                    <path d="M34 29C38.4183 29 42 25.4183 42 21C42 16.5817 38.4183 13 34 13C29.5817 13 26 16.5817 26 21C26 25.4183 29.5817 29 34 29Z" stroke="#F2E7FA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M44 31L39.65 26.65" stroke="#F2E7FA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
            </div>
            
                        
            
        </nav>
        <div id="box1">
            <h1>Veja o guia definitivo para conquistar seus objetivos como DEV em 2022</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br> 
                Nibh nibh eu in aliquet ut adipiscing neque. Sed volutpat 
                <br> aenean sit vitae, sed tristique placerat hac. </p>
            
            
                <div class="veja">
                    <a href="/index-2.html"><p id="veja">Veja mais</p></a>
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M1 8H15" stroke="#4FFF4B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M8 1L15 8L8 15" stroke="#4FFF4B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        
                </div>
                    
        </div>
        
        <div id="box2">
            <img id="header-img" src="https://images.unsplash.com/photo-1560415755-bd80d06eda60?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=991&q=80" alt="imagem em cores violetas mostrando um notebook semi aberto com o visual studio code aberto.">
        </div>
    </header>
    
    <section id="section">

        
        <div id="box3">

            <h2>Noticias</h2>
            <!-- <img src="unsplash_m_HRfLhgABo.png" alt=""> -->
            <div id="media"><iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/37SwqREHRGI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
            

            <p class="pp">Janeiro 04, 2022</p>
            <a href="https://bit.ly/3Csiy4b" target="_blank"><h2>Começando no ReactJS em 2022</h2></a>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh nibh eu in aliquet <br> ut adipiscing neque. Sed volutpat aenean sit vitae, sed tristique nibh nibh eu in <br> aliquet ut adipiscing neque. Sed volutpat aenean sit vitae, sed tristique. Sed volutpat aenean.</p>
        </div>

        <div id="box4">
            <p>Janeiro 04, 2022</p>
            <a href="https://bit.ly/3SXw6LZ" target="_blank"><h2> Conheça as principais técnicas para conseguir <br> uma vaga internacional em programação</h2></a>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh nibh eu in aliquet ut adipiscing neque. Sed volutpat aenean sit vitae, sed tristique.</p>


            <p id="p-2">Janeiro 04, 2022</p>
            <a href="https://bit.ly/3EDm5j2" target="_blank"><h2>Veja a evolução do Front-end na prática</h2></a>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh nibh eu in aliquet ut adipiscing neque. </p>
        </div>
    </section>


    <section id="wrapper">
        <div class="wrapper">
            
            <div> 
                <img src="unsplash_ourQHRTE2IM.png" alt="">
                <p>Janeiro 04, 2022</p>
                <a href="https://bit.ly/3fYGwMV" target="_blank"><h2>10 dicas para conseguir a vaga desejada</h2></a>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh nibh eu in aliquet ut adipiscing neque. Sed volutpat aenean sit vitae, sed tristique. </p>
            </div>
            
            <div>
                <img src="unsplash_5Ntkpxqt54Y.png" alt="">
                <p>Janeiro 04, 2022</p>
                <a href="https://bit.ly/3EDxRKc" target="_blank"><h2>Deixe seu código mais semântico com essas dicas</h2></a>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh nibh eu in aliquet ut adipiscing neque. Sed volutpat aenean sit vitae, sed tristique. </p>

            </div>
            
            
            <div>
                <img src="unsplash_0VGG7cqTwCo.png" alt="">
                <p>Janeiro 04, 2022</p>
                <a href="https://bit.ly/3SZyAcK" target="_blank"><h2>Use essas dicas nas suas aplicações mobile</h2></a>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh nibh eu in aliquet ut adipiscing neque. Sed volutpat aenean sit vitae, sed tristique. </p>

            </div>
          </div>
    </section>


    <footer id="footer">
        <form id="form" action="https://www.freecodecamp.com/email-submit" target="_blank">
            <label for="email">E-mail</label>
            <input type="email" placeholder="Digite seu e-mail"
            name="email" id="email">
            <input type="submit" id="submit">
        </form>

        <div id="up">
            <a  href="#header"><svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8 15L8 1" stroke="#4FFF4B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M1.03485 8.00024L8.03485 1.00024L15.0349 8.00024" stroke="#4FFF4B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                </a>
        </div>
        
        
    </footer>

</body>
</html>

css:

CSS:

/* --------------- ESPECIFICAÇÕES ----------------------------- */

*{
margin: 0%;
padding: 0%;
box-sizing: border-box;
}

:root{
font-size: 62,5%;
}

body{
font-size: 1.6rem;
font-family: ‘Roboto’;
}

/* --------------- NAV BAR ----------------------------- */

nav{
background: #290742;
position: fixed;
top:0;
min-height: 75px;
padding: 0px 20px;
display: flex;
justify-content: space-around;
align-items: center;
width: 100vw;

}

nav ul li{
font-size: 1.2rem;
list-style: none;
}

ul{
display: flex;
}

li{
padding: 2rem;
}

a h2:hover{
color: #9E6DC2;
transition: .8s;
}

a:hover{
color: #9E6DC2;
transition: .8s;
}

a{
text-decoration: none;
color: white;
font-weight: 310;
}

#search{
width: 230px;
height: 44px;
background: #170027;
border-radius: 4px 0px 0px 4px;
border: #170027;
color: white;
}

#search::placeholder{
padding-left: 25px;
}

/* DIV DO INPUT DE BUSCA */

#busca{
display: flex;
cursor: pointer;
}

/* --------------- CONTEÚDO DO HEADER ----------------------------- */

header{
width: 100%;
height: 32.6rem;
display: flex;
align-items: center;
background-color: #290742;
}

#box1{
display: flex;
flex-direction: column;
width: 57rem;
height: 31.1rem;
padding-left: 5.9rem;
}

#box2{
width: 57rem;
height: 28.6rem;
margin-top: 150px;
}

#box1 h1{
font-family: ‘Poppins’;
font-style: normal;
font-weight: 700;
font-size: 2.5rem;
line-height: 5.4rem;
color: #9E6DC2;
margin-top: 80px;
}

p{
font-family: ‘Roboto’;
font-style: normal;
font-weight: 350;
font-size: 1.2rem;
line-height: 27px;
color: white;
padding-top: 18px;
}

#veja{
font-family: ‘Roboto’;
font-style: normal;
font-weight: 700;
font-size: 18px;
line-height: 27px;
color: #9E6DC2;
}

#box2 img{
width: 570px;
height: 346px;
}

/* VEJA MAIS E VETOR DE SETA */

.veja{
width: 7.5rem;
height: 2.7rem;
display: flex;
align-items: center;
justify-content: space-around;
align-items: baseline;
cursor: pointer;
}

/* --------------- CONTEÚDO DA PÁGINA ----------------------------- */

section{
display: flex;
padding-top: 6rem;
}

section p {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 350;
font-size: 17px;
line-height: 27px;
color: black;
padding-top: 18px;
}

h2{
font-family: ‘Poppins’;
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 36px;
color: #290742;
}

.pp{
font-family: ‘Roboto’;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
}

#box3{
width: 57rem;
display: flex;
flex-direction: column;
padding-left: 5.8rem;
}

/* #box3 img{
width: 570px;
height: 346px;
margin-top: 1.5rem;
} */

#box4{
width: 57rem;
display: flex;
flex-direction: column;

}

/* MARGIN-TOP DO SEGUNDO P: JANEIRO 04 2022 */

h2{
margin-top: 1.5rem;
}

#p-2{
margin-top: 1rem;
}

/* --------------- CONTEÚDO DA PÁGINA - GRID ----------------------------- */

.wrapper {
display: flex;
}

.wrapper img{
width: 20rem;

}

.wrapper div{
display: flex;
flex-direction: column;
width: 28rem;
}

.wrapper div img{
align-self: center;
}

.wrapper h2{
margin-left: 60px;
}

.wrapper p{
margin-left: 60px;
}

/* --------------- FOOTER ----------------------------- */

footer{
width: 100%;
height: 10rem;
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
background: #290742;
margin-top: 100px;
}

label{
color: white;
}

#email{
width: 230px;
height: 44px;
margin-top: 10px;
background: #170027;
border-radius: 4px 0px 0px 4px;
color: white;
border: #170027;
}

#email::placeholder{
padding-left: 10px;
}

#submit{
width: 111px;
height: 44px;
margin-top: 10px;
background: #170027;
border-radius: 3px;
color: white;
border: #170027 1px solid;

cursor: pointer;
}

textarea:focus, input:focus, select:focus {
box-shadow: 0 0 0 0;
border: 0 none;
outline: 0;
}

#up{
align-self: flex-end;
margin-right: 100px;
align-items: center;
justify-content: center;
}/* --------------- ESPECIFICAÇÕES ----------------------------- */

*{
margin: 0%;
padding: 0%;
box-sizing: border-box;
}

:root{
font-size: 62,5%;
}

body{
font-size: 1.6rem;
font-family: ‘Roboto’;
}

/* --------------- NAV BAR ----------------------------- */

nav{
background: #290742;
position: fixed;
top:0;
min-height: 75px;
padding: 0px 20px;
display: flex;
justify-content: space-around;
align-items: center;
width: 100vw;

}

nav ul li{
font-size: 1.2rem;
list-style: none;
}

ul{
display: flex;
}

li{
padding: 2rem;
}

a h2:hover{
color: #9E6DC2;
transition: .8s;
}

a:hover{
color: #9E6DC2;
transition: .8s;
}

a{
text-decoration: none;
color: white;
font-weight: 310;
}

#search{
width: 230px;
height: 44px;
background: #170027;
border-radius: 4px 0px 0px 4px;
border: #170027;
color: white;
}

#search::placeholder{
padding-left: 25px;
}

/* DIV DO INPUT DE BUSCA */

#busca{
display: flex;
cursor: pointer;
}

/* --------------- CONTEÚDO DO HEADER ----------------------------- */

header{
width: 100%;
height: 32.6rem;
display: flex;
align-items: center;
background-color: #290742;
}

#box1{
display: flex;
flex-direction: column;
width: 57rem;
height: 31.1rem;
padding-left: 5.9rem;
}

#box2{
width: 57rem;
height: 28.6rem;
margin-top: 150px;
}

#box1 h1{
font-family: ‘Poppins’;
font-style: normal;
font-weight: 700;
font-size: 2.5rem;
line-height: 5.4rem;
color: #9E6DC2;
margin-top: 80px;
}

p{
font-family: ‘Roboto’;
font-style: normal;
font-weight: 350;
font-size: 1.2rem;
line-height: 27px;
color: white;
padding-top: 18px;
}

#veja{
font-family: ‘Roboto’;
font-style: normal;
font-weight: 700;
font-size: 18px;
line-height: 27px;
color: #9E6DC2;
}

#box2 img{
width: 570px;
height: 346px;
}

/* VEJA MAIS E VETOR DE SETA */

.veja{
width: 7.5rem;
height: 2.7rem;
display: flex;
align-items: center;
justify-content: space-around;
align-items: baseline;
cursor: pointer;
}

/* --------------- CONTEÚDO DA PÁGINA ----------------------------- */

section{
display: flex;
padding-top: 6rem;
}

section p {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 350;
font-size: 17px;
line-height: 27px;
color: black;
padding-top: 18px;
}

h2{
font-family: ‘Poppins’;
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 36px;
color: #290742;
}

.pp{
font-family: ‘Roboto’;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
}

#box3{
width: 57rem;
display: flex;
flex-direction: column;
padding-left: 5.8rem;
}

/* #box3 img{
width: 570px;
height: 346px;
margin-top: 1.5rem;
} */

#box4{
width: 57rem;
display: flex;
flex-direction: column;

}

/* MARGIN-TOP DO SEGUNDO P: JANEIRO 04 2022 */

h2{
margin-top: 1.5rem;
}

#p-2{
margin-top: 1rem;
}

/* --------------- CONTEÚDO DA PÁGINA - GRID ----------------------------- */

.wrapper {
display: flex;
}

.wrapper img{
width: 20rem;

}

.wrapper div{
display: flex;
flex-direction: column;
width: 28rem;
}

.wrapper div img{
align-self: center;
}

.wrapper h2{
margin-left: 60px;
}

.wrapper p{
margin-left: 60px;
}

/* --------------- FOOTER ----------------------------- */

footer{
width: 100%;
height: 10rem;
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
background: #290742;
margin-top: 100px;
}

label{
color: white;
}

#email{
width: 230px;
height: 44px;
margin-top: 10px;
background: #170027;
border-radius: 4px 0px 0px 4px;
color: white;
border: #170027;
}

#email::placeholder{
padding-left: 10px;
}

#submit{
width: 111px;
height: 44px;
margin-top: 10px;
background: #170027;
border-radius: 3px;
color: white;
border: #170027 1px solid;

cursor: pointer;
}

textarea:focus, input:focus, select:focus {
box-shadow: 0 0 0 0;
border: 0 none;
outline: 0;
}

#up{
align-self: flex-end;
margin-right: 100px;
align-items: center;
justify-content: center;
}

looks like you have the wrong stylesheet name
You need styles.css instead

The stylesheet is already in the HTML

I am not sure I understood you. Have you fixed your stylesheet name?

My link is correct, the problem is when I run the code in FreeCodeCamp, the last three requests do not appear as correct, but my NAVBAR is fixed and visible on 100% of the screen (even changed to 100vw it is wrong) and I have media on my page. So I don’t know why it’s going wrong. I would like some help from support here.

This is wrong.

Just like you were told here.


style.css is the wrong filename - the filename in the href attribute must be styles.css.

Did you fix this mistake yet?

yes, but that is already correct, as you can see in the print. Can someone join the landing page challenge and paste me code?? I’ll send him here again so they can do that. I spent all day on this and I can’t solve it lol

helllp

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    

    <header id="header">
        <nav id="nav-bar">
            <svg id="logo" width="162" height="37" viewBox="0 0 162 37" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M162 21.64V26.64H157V21.64H162Z" fill="#4FFF4B"/>
                <path d="M20.412 1.368V6.3H13.716V26.64H7.56001V6.3H0.864014V1.368H20.412Z" fill="white"/>
                <path d="M35.8495 6.336C38.1535 6.336 40.0015 7.104 41.3935 8.64C42.7855 10.152 43.4815 12.24 43.4815 14.904V26.64H37.3615V15.732C37.3615 14.388 37.0135 13.344 36.3175 12.6C35.6215 11.856 34.6855 11.484 33.5095 11.484C32.3335 11.484 31.3975 11.856 30.7015 12.6C30.0055 13.344 29.6575 14.388 29.6575 15.732V26.64H23.5015V0H29.6575V9.252C30.2815 8.364 31.1335 7.656 32.2135 7.128C33.2935 6.6 34.5055 6.336 35.8495 6.336Z" fill="white"/>
                <path d="M66.6954 16.272C66.6954 16.848 66.6594 17.448 66.5874 18.072H52.6554C52.7514 19.32 53.1474 20.28 53.8434 20.952C54.5634 21.6 55.4394 21.924 56.4714 21.924C58.0074 21.924 59.0754 21.276 59.6754 19.98H66.2274C65.8914 21.3 65.2794 22.488 64.3914 23.544C63.5274 24.6 62.4354 25.428 61.1154 26.028C59.7954 26.628 58.3194 26.928 56.6874 26.928C54.7194 26.928 52.9674 26.508 51.4314 25.668C49.8954 24.828 48.6954 23.628 47.8314 22.068C46.9674 20.508 46.5354 18.684 46.5354 16.596C46.5354 14.508 46.9554 12.684 47.7954 11.124C48.6594 9.564 49.8594 8.364 51.3954 7.524C52.9314 6.684 54.6954 6.264 56.6874 6.264C58.6314 6.264 60.3594 6.672 61.8714 7.488C63.3834 8.304 64.5594 9.468 65.3994 10.98C66.2634 12.492 66.6954 14.256 66.6954 16.272ZM60.3954 14.652C60.3954 13.596 60.0354 12.756 59.3154 12.132C58.5954 11.508 57.6954 11.196 56.6154 11.196C55.5834 11.196 54.7074 11.496 53.9874 12.096C53.2914 12.696 52.8594 13.548 52.6914 14.652H60.3954Z" fill="white"/>
                <path d="M92.8719 13.68C94.3359 13.992 95.5119 14.724 96.3999 15.876C97.2879 17.004 97.7319 18.3 97.7319 19.764C97.7319 21.876 96.9879 23.556 95.4999 24.804C94.0359 26.028 91.9839 26.64 89.3439 26.64H77.5719V1.368H88.9479C91.5159 1.368 93.5199 1.956 94.9599 3.132C96.4239 4.308 97.1559 5.904 97.1559 7.92C97.1559 9.408 96.7599 10.644 95.9679 11.628C95.1999 12.612 94.1679 13.296 92.8719 13.68ZM83.7279 11.592H87.7599C88.7679 11.592 89.5359 11.376 90.0639 10.944C90.6159 10.488 90.8919 9.828 90.8919 8.964C90.8919 8.1 90.6159 7.44 90.0639 6.984C89.5359 6.528 88.7679 6.3 87.7599 6.3H83.7279V11.592ZM88.2639 21.672C89.2959 21.672 90.0879 21.444 90.6399 20.988C91.2159 20.508 91.5039 19.824 91.5039 18.936C91.5039 18.048 91.2039 17.352 90.6039 16.848C90.0279 16.344 89.2239 16.092 88.1919 16.092H83.7279V21.672H88.2639Z" fill="white"/>
                <path d="M107.458 0V26.64H101.302V0H107.458Z" fill="white"/>
                <path d="M121.064 26.928C119.096 26.928 117.32 26.508 115.736 25.668C114.176 24.828 112.94 23.628 112.028 22.068C111.14 20.508 110.696 18.684 110.696 16.596C110.696 14.532 111.152 12.72 112.064 11.16C112.976 9.576 114.224 8.364 115.808 7.524C117.392 6.684 119.168 6.264 121.136 6.264C123.104 6.264 124.88 6.684 126.464 7.524C128.048 8.364 129.296 9.576 130.208 11.16C131.12 12.72 131.576 14.532 131.576 16.596C131.576 18.66 131.108 20.484 130.172 22.068C129.26 23.628 128 24.828 126.392 25.668C124.808 26.508 123.032 26.928 121.064 26.928ZM121.064 21.6C122.24 21.6 123.236 21.168 124.052 20.304C124.892 19.44 125.312 18.204 125.312 16.596C125.312 14.988 124.904 13.752 124.088 12.888C123.296 12.024 122.312 11.592 121.136 11.592C119.936 11.592 118.94 12.024 118.148 12.888C117.356 13.728 116.96 14.964 116.96 16.596C116.96 18.204 117.344 19.44 118.112 20.304C118.904 21.168 119.888 21.6 121.064 21.6Z" fill="white"/>
                <path d="M142.473 6.264C143.889 6.264 145.125 6.552 146.181 7.128C147.261 7.704 148.089 8.46 148.665 9.396V6.552H154.821V26.604C154.821 28.452 154.449 30.12 153.705 31.608C152.985 33.12 151.869 34.32 150.357 35.208C148.869 36.096 147.009 36.54 144.777 36.54C141.801 36.54 139.389 35.832 137.541 34.416C135.693 33.024 134.637 31.128 134.373 28.728H140.457C140.649 29.496 141.105 30.096 141.825 30.528C142.545 30.984 143.433 31.212 144.489 31.212C145.761 31.212 146.769 30.84 147.513 30.096C148.281 29.376 148.665 28.212 148.665 26.604V23.76C148.065 24.696 147.237 25.464 146.181 26.064C145.125 26.64 143.889 26.928 142.473 26.928C140.817 26.928 139.317 26.508 137.973 25.668C136.629 24.804 135.561 23.592 134.769 22.032C134.001 20.448 133.617 18.624 133.617 16.56C133.617 14.496 134.001 12.684 134.769 11.124C135.561 9.564 136.629 8.364 137.973 7.524C139.317 6.684 140.817 6.264 142.473 6.264ZM148.665 16.596C148.665 15.06 148.233 13.848 147.369 12.96C146.529 12.072 145.497 11.628 144.273 11.628C143.049 11.628 142.005 12.072 141.141 12.96C140.301 13.824 139.881 15.024 139.881 16.56C139.881 18.096 140.301 19.32 141.141 20.232C142.005 21.12 143.049 21.564 144.273 21.564C145.497 21.564 146.529 21.12 147.369 20.232C148.233 19.344 148.665 18.132 148.665 16.596Z" fill="white"/>
            </svg>
    
            <ul>
               
               <a class="nav-link" href="#box3"><li>Noticias</li></a>
               <a class="nav-link" href="#wrapper"><li>Dicas</li></a>
               <a class="nav-link" href="#footer"><li>Envie seu e-mail</li></a> 
            </ul>
    
            <div id="busca">
                <input type="search" name="search" id="search" placeholder="Busca">
            
                <svg id="btn" width="70" height="44" viewBox="0 0 70 44" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M0 0H66C68.2091 0 70 1.79086 70 4V40C70 42.2091 68.2091 44 66 44H0V0Z" fill="#9E6DC2"/>
                    <path d="M34 29C38.4183 29 42 25.4183 42 21C42 16.5817 38.4183 13 34 13C29.5817 13 26 16.5817 26 21C26 25.4183 29.5817 29 34 29Z" stroke="#F2E7FA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M44 31L39.65 26.65" stroke="#F2E7FA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
            </div>
            
        </nav>
        
        <div id="box1">
            <h1>Veja o guia definitivo para conquistar seus objetivos como DEV em 2022</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br> 
                Nibh nibh eu in aliquet ut adipiscing neque. Sed volutpat 
                <br> aenean sit vitae, sed tristique placerat hac. </p>
            
            
                <div class="veja">
                    <a href="/index-2.html"><p id="veja">Veja mais</p></a>
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M1 8H15" stroke="#4FFF4B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M8 1L15 8L8 15" stroke="#4FFF4B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        
                </div>
                    
        </div>
        
        <div id="box2">
            <img id="header-img" src="https://images.unsplash.com/photo-1488590528505-98d2b5aba04b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="imagem em cores violetas mostrando um notebook semi aberto com o visual studio code aberto.">
        </div>
    </header>
    
    <section id="section">

        
        <div id="box3">

            <h2>Noticias</h2>
            <!-- <img src="unsplash_m_HRfLhgABo.png" alt=""> -->
            <div id="media"><iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/37SwqREHRGI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
            

            <p class="pp">Janeiro 04, 2022</p>
            <a href="https://bit.ly/3Csiy4b" target="_blank"><h2>Começando no ReactJS em 2022</h2></a>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh nibh eu in aliquet <br> ut adipiscing neque. Sed volutpat aenean sit vitae, sed tristique nibh nibh eu in <br> aliquet ut adipiscing neque. Sed volutpat aenean sit vitae, sed tristique. Sed volutpat aenean.</p>
        </div>

        <div id="box4">
            <p>Janeiro 04, 2022</p>
            <a href="https://bit.ly/3SXw6LZ" target="_blank"><h2> Conheça as principais técnicas para conseguir <br> uma vaga internacional em programação</h2></a>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh nibh eu in aliquet ut adipiscing neque. Sed volutpat aenean sit vitae, sed tristique.</p>


            <p id="p-2">Janeiro 04, 2022</p>
            <a href="https://bit.ly/3EDm5j2" target="_blank"><h2>Veja a evolução do Front-end na prática</h2></a>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh nibh eu in aliquet ut adipiscing neque. </p>

            <iframe id="media" width="560" height="315" src="https://www.youtube.com/embed/Ejkb_YpuHWs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
    </section>


    <section id="wrapper">
        <div class="wrapper">
            
            <div> 
                <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="">
                <p>Janeiro 04, 2022</p>
                <a href="https://bit.ly/3fYGwMV" target="_blank"><h2>10 dicas para conseguir a vaga desejada</h2></a>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh nibh eu in aliquet ut adipiscing neque. Sed volutpat aenean sit vitae, sed tristique. </p>
            </div>
            
            <div>
                <img src="https://images.unsplash.com/photo-1529661197280-63dc545366c8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=871&q=80" alt="">
                <p>Janeiro 04, 2022</p>
                <a href="https://bit.ly/3EDxRKc" target="_blank"><h2>Deixe seu código mais semântico com essas dicas</h2></a>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh nibh eu in aliquet ut adipiscing neque. Sed volutpat aenean sit vitae, sed tristique. </p>

            </div>
            
            
            <div>
                <img src="https://images.unsplash.com/photo-1526498460520-4c246339dccb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="">
                <p>Janeiro 04, 2022</p>
                <a href="https://bit.ly/3SZyAcK" target="_blank"><h2>Use essas dicas nas suas aplicações mobile</h2></a>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh nibh eu in aliquet ut adipiscing neque. Sed volutpat aenean sit vitae, sed tristique. </p>

            </div>
          </div>
    </section>


    <footer id="footer">
        <form id="form" action="https://www.freecodecamp.com/email-submit" target="_blank">
            <label for="email">E-mail</label>
            <input type="email" placeholder="Digite seu e-mail"
            name="email" id="email">
            <input type="submit" id="submit">
        </form>

        <div id="up">
            <a  href="#header"><svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8 15L8 1" stroke="#4FFF4B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M1.03485 8.00024L8.03485 1.00024L15.0349 8.00024" stroke="#4FFF4B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                </a>
        </div>
        
        
    </footer>

</body>
</html>
/* --------------- ESPECIFICAÇÕES ----------------------------- */

*{
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
}

:root{
    font-size: 62,5%;
}

body{
    font-size: 1.6rem;
    font-family: 'Roboto';
}

/* --------------- NAV BAR ----------------------------- */

nav{
    background: #290742;
    position: fixed;
    top:0;
    min-height: 75px;
    padding: 0px 20px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    
}

nav ul li{
    font-size: 1.2rem;
    list-style: none;
}

ul{
    display: flex;  
}

li{
    padding: 2rem;
}

a h2:hover{
    color: #9E6DC2;
    transition: .8s;
}

a:hover{
    color: #9E6DC2;
    transition: .8s;
}

a{
    text-decoration: none;
    color: white;
    font-weight: 310;
}

#search{
    width: 230px;
    height: 44px;
    background: #170027;
    border-radius: 4px 0px 0px 4px;
    border: #170027;
    color: white;
}



#search::placeholder{
    padding-left: 25px;
}


/* DIV DO INPUT DE BUSCA */

#busca{
    display: flex;
    cursor: pointer;
}

/* --------------- CONTEÚDO DO HEADER ----------------------------- */


header{
    width: 100%;
    height: 32.6rem;
    display: flex;
    align-items: center;
    background-color: #290742;
}

#box1{
    display: flex;
    flex-direction: column;
    width: 57rem;
    height: 31.1rem;
    padding-left: 5.9rem;
}

#box2{
    width: 57rem;
    height: 28.6rem;
    margin-top: 150px;
}



#box1 h1{
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 5.4rem;
    color: #9E6DC2;
    margin-top: 80px;
}

p{
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 350;
    font-size: 1.2rem;
    line-height: 27px;
    color: white;
    padding-top: 18px;
}

#veja{
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 27px;
    color: #9E6DC2;
}

#box2 img{
    width: 570px;
    height: 346px;   
}

/* VEJA MAIS E VETOR DE SETA */

.veja{
    width: 7.5rem;
    height: 2.7rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
    align-items: baseline;
    cursor: pointer;
}


/* --------------- CONTEÚDO DA PÁGINA ----------------------------- */


section{
    display: flex;
    padding-top: 6rem;
}

section p {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 350;
    font-size: 17px;
    line-height: 27px;
    color: black;
    padding-top: 18px;
}

h2{
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 36px;
    color: #290742;
}

.pp{
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
}

#box3{
    width: 57rem;
    display: flex;
    flex-direction: column;
    padding-left: 5.8rem;
}

/* #box3 img{
    width: 570px;
    height: 346px;
    margin-top: 1.5rem;
} */

#box4{
    width: 57rem;
    display: flex;
    flex-direction: column;

}


/* MARGIN-TOP DO SEGUNDO P: JANEIRO 04 2022 */


h2{
    margin-top: 1.5rem;
}


#p-2{
    margin-top: 1rem;
}


#media{
    margin-top: 15px;
}

/* --------------- CONTEÚDO DA PÁGINA - GRID ----------------------------- */

.wrapper {
    display: flex;
  }

  .wrapper img{
    width: 20rem;
    
  }
  
.wrapper div{
    display: flex;
    flex-direction: column;
    width: 28rem;
}

.wrapper div img{
    align-self: center;
}

.wrapper h2{
    margin-left: 60px;
}

.wrapper p{
    margin-left: 60px;
}






/* --------------- FOOTER ----------------------------- */

footer{
    width: 100%;
    height: 10rem;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #290742;
    margin-top: 100px;
}

label{
    color: white;
}

#email{
    width: 230px;
    height: 44px;
    margin-top: 10px;
    background: #170027;
    border-radius: 4px 0px 0px 4px;
    color: white;
    border: #170027;
}

#email::placeholder{
    padding-left: 10px;
}

#submit{
    width: 111px;
    height: 44px;
    margin-top: 10px;
    background: #170027;
    border-radius: 3px;
    color: white;
    border: #170027 1px solid;

    cursor: pointer;
}

textarea:focus, input:focus, select:focus {
    box-shadow: 0 0 0 0;
    border: 0 none;
    outline: 0;
}


#up{
    align-self: flex-end;
    margin-right: 100px;
    align-items: center;
    justify-content: center;
}

the correction is
<link rel="stylesheet" href="styles.css">

This is wrong.

Please slow down and actually listen to what we are saying.

style and styles are different words.

My god, sorry!

Really was wrong, thank you very much! Now the only thing that is wrong is the media consultation.

“Your Product Landing Page should use at least one media query.”

I didn’t really understand what this means, because as I’m from Brazil, I translate most things on Google Translate, so some words come out a little weird and I can’t understand what it really means.

But once again, sorry for the lack of attention!

You need something like this.

It was something that was on my face! It is clear. @media, thanks!!!
you are a very kind guy