Exercício de Programação #06 - CSS - Divisão de Template com CSS Grid

29/11/2020

Na aula de hoje faremos um exercício de CSS Grid, onde poderemos praticar o fatiamento do layout de um website passando pelas propriedades do CSS e do HTML.

Praticando CSS Grid

index.html

No arquivo index.html faremos os elementos de marcação para posterior estilização:

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

<head>
    <meta charset="UTF-8">
    <title>Divisão com CSS Grid</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <div class="container">
        <header></header>

        <main>
            <div class="image"><img src="image.jfif" alt=""></div>

            <div class="name"><h1>Thiago</h1></div>

            <div class="icon">
                <img src="service.png" alt="">
                <img src="service.png" alt="">
                <img src="service.png" alt="">
            </div>
        </main>

        <aside></aside>

        <footer></footer>
    </div>
</body>
</html>

style.css

Na folha de estilos faremos o design dos elementos html:

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

.container{
    display:grid;
    grid-template-areas:
    "header header"
    "main aside"
    "footer aside"
    ;
    grid-template-columns: 70% 30%;
    grid-template-rows: 10vh 70vh 20vh;
}

header{
    grid-area: header;
    background: black;
}

main{
    grid-area: main;
    background: beige;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-areas:
        "image name"
        "icon icon"
    ;
    justify-content: space-evenly;
    align-items: center;
    text-align: center;
}

.image{
    grid-area: image;
}

.name{
    grid-area: name;
}

.icon{
    grid-area: icon;
    display:grid;
    grid-template-columns: repeat(3,30%);
    justify-content: space-evenly;
    justify-items: center;
}

aside{
    grid-area: aside;
    background: gray;
}

footer{
    grid-area: footer;
    background: darkblue;
}

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

Do you need a teacher? webdesignemfoco@gmail.com

Receba as aulas da Webdesign em Foco em Seu Email

Posts Relacionados

Exercício de Programação #05 - JS - Contagem e Limite de Caracteres

Nesse exercício faremos a contagem dos caracteres de entrada do usuário e exibiremos o limite de caracteres e bloquearemos as inserções após o limite.

Exercício de Programação #07 - PHP - CSS Dinâmico

Nesse tutorial eu ensinarei como realizar um CSS dinâmico através do PHP, habilitando opções de alteração do CSS através do backend.

Exercícios

Nessa playlist aprenderemos na prática a programar, utilizando para isso exercícios de programação nas mais variadas linguagens e tecnologias.