zdnet.css

:root {
    --tassio: 10px;
}

body {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-areas: "cabecalho" "destaque" "adsensemenor" "resto";
    grid-template-rows: 11.5vh 44.5vh 16vh 1fr;
    grid-template-columns: 1fr;
    /*background-color: rgb(8, 14, 20);*/
}


/* ------------------------------------------- Inicio Cabecalho ------------------------------------------- */

body header {
    grid-area: cabecalho;
    display: grid;
    grid-template-areas: "lingua" "barranavegacao";
    grid-template-rows: 20px 60px;
    z-index: 2;
}

#lingua {
    grid-area: lingua;
}

#barra-navegacao {
    background-color: #212121;
    grid-area: barranavegacao;
    display: flex;
    flex-direction: row;
    align-items: center;
}

nav {
    width: 85vw;
}

nav ul {
    display: flex;
    flex-direction: row;
    list-style: none;
    flex-wrap: wrap;
    color: white;
    padding: 0;
    margin: 0;
    justify-content: flex-end;
    justify-items: center;
}

nav ul li {
    text-transform: uppercase;
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 1.25em;
    font-family: "Proxima Nova", sans-serif;
    text-decoration: none;
    margin-right: 1vw;
}

#logo {
    display: block;
    background: url('../img/logo.svg') no-repeat center center;
    height: 120px;
    width: 120px;
}

#busca {
    display: flex;
    flex-flow: column;
    height: 60px;
    width: 60px;
    background-color: orangered;
    justify-content: center;
    align-items: center;
    margin-left: 1vw;
}

#busca i {
    color: white;
    width: 30px;
    height: 30px;
}

#manchete-destaque article {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

#manchete-destaque h2 {
    font-size: clamp(1rem, 2vw, 1.5rem);
    border-left: 1px solid red;
    margin: 0px;
    margin-left: 1vw;
    padding-left: 1vw;
}

#manchete-destaque p {
    border-left: 1px solid red;
    margin: 0px;
    margin-left: 1vw;
    padding-left: 1vw;
}

#manchete-destaque ul {
    border-left: 1px solid red;
    padding-top: 3vh;
    margin: 0px;
    margin-left: 1vw;
    margin-bottom: 2vh;
    padding-left: 2vw;
}

#ultimas-noticias {
    grid-area: resto;
}

#adsense-maior {
    grid-area: resto;
}

#adsense-menor {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 10px;
}

#adsense-domal {
    object-fit: cover;
}

#ultimas-noticias h2 {
    width: 100%;
    line-height: 0.1em;
    border-bottom: 1px solid black;
    text-align: center;
    margin: 10px 0 20px;
}

#ultimas-noticias span {
    background-color: #fff;
    padding: 0 10px;
}

#just-image {
    width: 53px;
    height: 70px;
}

#ultimas-noticias {
    display: grid;
}

#ultimas-noticias article img {
    align-self: flex-start;
}

#ultimas-noticias article h3 {
    margin: 0;
}

#ultimas-noticias article p {
    margin: 0;
}

#justin {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
}

#justin section {
    width: 40vw;
    margin-bottom: 2vh;
    display: grid;
    grid-template-areas: "imagem titulo" "imagem tempo";
    grid-template-rows: repeat(1fr);
}

#justin section h3 {
    grid-area: titulo;
}

#justin section img {
    grid-area: imagem;
}

#justin section p {
    grid-area: tempo;
}


/* ------------------------------------------- Fim Cabecalho ------------------------------------------- */


/* ------------------------------------------- Inicio Destaque ------------------------------------------- */

#manchete-destaque {
    z-index: 1;
    display: grid;
    grid-area: destaque;
    grid-template-areas: "box1 box2 box3" "box1 box2 box4";
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 155px 155px;
}

#box1 {
    grid-area: box1;
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.171), rgb(0, 0, 0, 1)), url('../img/istock-524942947.jpg');
}

#box2 {
    grid-area: box2;
    color: #fff;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.171), rgb(0, 0, 0, 1)), url("../img/cybersecurity-hacking-161.jpg");
}

#box3 {
    grid-area: box3;
    color: #fff;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.171), rgb(0, 0, 0, 1)), url("../img/istock-1193713001.jpg");
}

#box4 {
    grid-area: box4;
    color: #fff;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.171), rgb(0, 0, 0, 1)), url("../img/windows-10-hero-gif-10x.jpg");
}

#adsense-menor {
    grid-area: adsensemenor;
}

zdnet.html

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <title>Zdnet</title>
    <link rel="stylesheet" href="assets/css/zdnet.css" />
    <link rel="stylesheet" href="assets/css/zdnet2.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
</head>

<body>
    <header>
        <section id="lingua">
            <label for="lingua">Escolha uma lingua</label>
            <select name="lingua">
                <option>PT</option>
                <option>US</option>
            </select>
        </section>
        <section id="barra-navegacao">
            <a id="logo"></a>
            <section id="busca">
                <i class="fas fa-search"></i>
            </section>
            <nav>
                <ul>
                    <li>VIDEOS</li>
                    <li>WINDOWS 10</li>
                    <li>5G</li>
                    <li>CLOUD</li>
                    <li>Best VPNS</li>
                    <li>GIFT GUIDE</li>
                    <li>SECURITY</li>
                    <li>MORE</li>
                    <li>NEWSLETTERS</li>
                    <li>ALL WRITERS</li>
                </ul>
            </nav>
        </section>
    </header>
    <section id="manchete-destaque">
        <article id="box1">
            <p>BLACK FRIDAY 2020</p>
            <h2>The best tablet deals: iPad Pro, Galaxy Tab S7, and more</h2>
            <ul>
                <li><a>Black Friday 2020: The very best laptop deals</a></li>
                <li><a>The best storage, SSD and flash drive sales</a></li>
                <li><a>Apple discounts? There are deals to be found</a></li>
                <li><a>Strangely random, oddly wonderful, gadget-delicious gift guide</a></li>
                <li><a>Amazon deals: Echo, Kindle, Fire TV and tablets, and more</a></li>
            </ul>
        </article>
        <article id="box2">
            <p>ED BOTT:</p>
            <h2>'My favorite password manager is an essential security tool'</h2>
        </article>
        <article id="box3">
            <p>SOFTWARE DEVELOPMENT</p>
            <h2>How one company made the switch to Agile</h2>
        </article>
        <article id="box4">
            <p>WINDOWS 10</P>
            <h2>New Insider preview brings bug fixes and more ahead of Microsoft's December break</h2>
        </article>
    </section>
    <section id="adsense-menor">
        <a><img id="adsense-domal" src="assets/img/13778946079872929366.png"></a>
    </section>
    <section id="ultimas-noticias">
        <h2><span>Just In</span></h2>
        <article id="justin">
            <section>
                <img id="just-image" src="assets/img/facebook-onavo-accc.png" />
                <h3>
                    India blocks another 43 Chinese mobile apps, including AliExpress and TaoBao Live
                </h3>
                <p id="post-time">6 minutos atrás</p>
            </section>
            <section>
                <img id="just-image" src="assets/img/facebook-onavo-accc.png" />
                <h3>
                    Food delivery deaths spark NSW government to set up investigation taskforce
                </h3>
                <p id="post-time">17 minutos atrás</p>
            </section>
            <section>
                <img id="just-image" src="assets/img/facebook-onavo-accc.png" />
                <h3>
                    Black Friday 2020 tablet deals: iPad Pro, Galaxy Tab S7, and more
                </h3>
                <p id="post-time">6 minutos atrás</p>
            </section>
            <section>
                <img id="just-image" src="assets/img/facebook-onavo-accc.png" />
                <h3>
                    Best Black Friday 2020 laptop deals: Surface Pro 7, Razer Blade 15, and more
                </h3>
                <p id="post-time">40 minutos atrás</p>
            </section>
            <section>
                <img id="just-image" src="assets/img/facebook-onavo-accc.png" />
                <h3>
                    Best Black Friday 2020 Chromebook deals: HP, Samsung, Lenovo, and more
                </h3>
                <p id="post-time">6 minutos atrás</p>
            </section>
            <section>
                <img id="just-image" src="assets/img/facebook-onavo-accc.png" />
                <h3>
                    Black Friday 2020 deals: The best storage, SSD and flash drive sales
                </h3>
                <p id="post-time">26 minutos atrás</p>
            </section>
            <section>
                <img id="just-image" src="assets/img/facebook-onavo-accc.png" />
                <h3>
                    Apple Black Friday 2020 deals: MacBooks, iPads, AirPods, and Apple Watch
                </h3>
                <p id="post-time">2 horas atrás</p>
            </section>
            <section>
                <img id="just-image" src="assets/img/facebook-onavo-accc.png" />
                <h3>
                    Best Black Friday 2020 phone deals: OnePlus 8 Pro, Note 20 Ultra, and more
                </h3>
                <p id="post-time">2 horas atrás</p>
            </section>
        </article>
    </section>
</body>


</html>