Template com CSS Grid - #2 Header

Nesse tutorial realizaremos a criação do cabeçalho (header) do nosso website utilizando o CSS Grid.

Header com CSS Grid

index.html

Vamos iniciar criando os elementos no html.

<header>
    <div class="logo">
        <img src="./img/logo.png" alt="">
    </div>

    <div class="search">
        <input type="search" name="search" id="search" placeholder="Internet Rápida">
        <button><svg class="Cur(p)" width="24" style="fill:#fff;stroke:#fff;stroke-width:0;vertical-align:bottom" height="24" viewBox="0 0 24 24" data-icon="search"><path d="M9 3C5.686 3 3 5.686 3 9c0 3.313 2.686 6 6 6s6-2.687 6-6c0-3.314-2.686-6-6-6m13.713 19.713c-.387.388-1.016.388-1.404 0l-7.404-7.404C12.55 16.364 10.85 17 9 17c-4.418 0-8-3.582-8-8 0-4.42 3.582-8 8-8s8 3.58 8 8c0 1.85-.634 3.55-1.69 4.905l7.403 7.404c.39.386.39 1.015 0 1.403"></path></svg></button>
    </div>

    <div class="button"></div>

    <div class="nav--right">
        <ul>
            <li>Entrar</li>
            <li><svg class="Pos(a) Start(2px) T(4px) Cur(p)" width="26" style="fill:#6001d2;stroke:#6001d2;stroke-width:0;vertical-align:bottom" height="26" viewBox="0 0 24 27" data-icon="bell-fill"><path d="M23.258 20.424c-.09-.07-.81-.662-1.394-1.7-.114-.2-.45-.914-.503-1.06-.143-.39-.243-.864-.398-1.543-.367-2.33-.34-5.656-.34-5.656 0-.076.003-.15.003-.226 0-4.07-2.926-7.465-6.825-8.28v-.19C13.8.788 12.994 0 12 0s-1.8.79-1.8 1.768v.19c-3.897.815-6.822 4.21-6.822 8.28 0 .076.002.15.004.226 0 0 .023 3.325-.344 5.657-.155.68-.255 1.154-.4 1.545-.053.145-.388.86-.502 1.06-.583 1.037-1.304 1.63-1.394 1.7-.315.24-.452.425-.452.425-.18.227-.29.51-.29.82C0 22.406.607 23 1.354 23c.037 0 .073-.004.11-.005h21.07c.037 0 .075.005.112.005.747 0 1.354-.596 1.354-1.33 0-.308-.108-.593-.29-.82 0 0-.137-.184-.452-.426zM12 27c1.657 0 3-1.343 3-3H9c0 1.657 1.343 3 3 3z"></path></svg></li>
            <li><svg class="Mstart(-21px) Mend(6px) Mstart(-11px)--sm1024 Cur(p)" width="28" style="fill:#6001d2;stroke:#6001d2;stroke-width:0;vertical-align:bottom" height="28" viewBox="0 0 512 512" data-icon="NavMail"><path d="M460.586 91.31H51.504c-10.738 0-19.46 8.72-19.46 19.477v40.088l224 104.03 224-104.03v-40.088c0-10.757-8.702-19.478-19.458-19.478M32.046 193.426V402.96c0 10.758 8.72 19.48 19.458 19.48h409.082c10.756 0 19.46-8.722 19.46-19.48V193.428l-224 102.327-224-102.327z"></path></svg> Mail</li>
        </ul>
    </div>

    <nav>
        <ul>
            <li><svg class="Mstart(-21px) Mend(6px) Mstart(-11px)--sm1024 Cur(p)" width="28" style="fill:#6001d2;stroke:#6001d2;stroke-width:0;vertical-align:bottom" height="28" viewBox="0 0 512 512" data-icon="NavMail"><path d="M460.586 91.31H51.504c-10.738 0-19.46 8.72-19.46 19.477v40.088l224 104.03 224-104.03v-40.088c0-10.757-8.702-19.478-19.458-19.478M32.046 193.426V402.96c0 10.758 8.72 19.48 19.458 19.48h409.082c10.756 0 19.46-8.722 19.46-19.48V193.428l-224 102.327-224-102.327z"></path></svg> Mail</li>
            <li>Coronavírus</li>
            <li>Notícias</li>
            <li>Esporte</li>
        </ul>
    </nav>

    <div class="ads">
        <img src="./img/ads.jpg" alt="">
    </div>
</header>

lib/css/style.css

A estilização será feita no arquivo CSS do website:

@media screen and (min-width: 1200px){
    .container{
        display:grid;
        grid-template-columns: 65% 30%;
        justify-content: space-between;
        padding: 10px 5%;
        grid-template-areas:
            "header header"
            "main aside"
        ;
    }
    header{
        grid-area: header;
        display:grid;
        grid-template-columns: 20% 50% 30%;
        grid-template-areas:
            "logo search nav--right"
            "nav nav nav"
            "ads ads ads"
        ;
        align-items: center;
    }
    .logo{
        grid-area:logo;
        padding: 0 5%;
    }
    .search{
        grid-area:search;
        padding-right: 2%;
    }
    .search input[type='search']{
        display:inline-block;
        width: 70%;
        height: 50px;
        border-radius: 2px;
        margin-right: -4px;
        font-size: 18px;
        padding: 0 7px;
    }
    .search button{
        display:inline-block;
        width: 30%;
        height: 50px;
        margin-left:-4px;
        border-radius: 0 2px 2px 0;
        background: #6001D2;
        border:none;
        vertical-align: top;
        cursor:pointer;
    }
    .nav--right{
        grid-area:nav--right;
        text-align: center;
    }
    .nav--right li{
        display:inline-block;
        margin: 0 10px;
    }
    nav{
        grid-area:nav;
        color: #6001D2;
    }
    nav li{
        display:inline-block;
        font-weight: bold;
        font-size: 17px;
        margin:0 10px;
    }
    .ads{
        grid-area:ads;
        text-align: center;
        margin-top: 15px;
    }
    main{grid-area: main;}
    aside{grid-area: aside;}
}

Por hoje é só! Sucesso nos códigos e na vida!

Do you need a teacher to help you? webdesignemfoco@gmail.com