iurygdeoliveira commented 1 year ago

Contact Details

iury.oliveira@ifto.edu.br

Challenge Description

Um dos desafios mais comuns para alunos iniciantes em programação é a criação de uma Grid Page Layout usando CSS. Esse tipo de desafio envolve a criação de uma estrutura visual para uma página da web, com diferentes seções como um header, um navbar, um article, um footer e, possivelmente, um espaço reservado para anúncios ou conteúdo extra.

Usando HTML e CSS, elabore uma grid de tal forma que se assemelhe a imagem abaixo.

WhatsApp Image 2023-03-06 at 13 02 37(1)

Additional tips

Embora programar uma Grid Page Layout usando CSS possa ser um desafio para alunos iniciantes, é uma ótima oportunidade para desenvolver habilidades importantes em programação web e criar uma base sólida para projetos futuros. Com um pouco de prática e perseverança, os alunos podem criar layouts profissionais e esteticamente agradáveis que funcionem em diferentes dispositivos e plataformas.

Ghenry-san commented 1 year ago

DW.zip

ghenry-san_blue_fire_phoenix_red_and_black_background_9b2ff2f7-c86b-4bac-852d-68914902fc6e

EQUIPE: FÊNIX

kiaraalcantara commented 1 year ago

Equipe: The Makers

Download do arquivo: GRID Page Layout em CSS.zip

Integrantes: André Moreira, Kiara Alcântara e Natan Chiang

GiorgeLucas commented 1 year ago

Equipe Vikings

Resultado

_C__Users_XNull_Desktop_Programa%C3%A7%C3%A3o_Desafios%20de%20Desenvolvimento%20Web_Desafio%2013_index html

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Grid Layout</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <header>
        <h1>Header</h1>
    </header>
    <div class="container">
        <nav class="navbar">
            <h2>Navbar</h2>
        </nav>
        <article>
            <h2>Article</h2>
        </article>
        <aside>
            <h2>Ads/Extra</h2>
        </aside>
        <footer>
            <h2>Footer</h2>
        </footer>
    </div>
</body>
</html>

CSS

body{
    font-family: Arial, Helvetica, sans-serif;
}

.container {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header header header"
        "navbar article extra"
        "navbar footer footer";
}

header {
    background-color: #FF7BAC;
    padding: 20px;
    grid-area: header;
}

.navbar {
    background-color: #7DCFFF;
    padding: 20px;
    grid-area: navbar;
}

article {
    background-color: white;
    padding: 20px;
    padding-bottom: 300px;
    grid-area: article;
}

aside {
    background-color: #FFD179;
    padding: 20px;
    grid-area: extra;
}

footer {
    background-color: #89DCB2;
    color: rgb(0, 0, 0);
    padding: 20px;
    grid-area: footer;
}

yasmincosta21 commented 1 year ago

NOME DA EQUIPE: ABY INTEGRANTES: Ana Beatriz, Ana Eluiza e Yasmin Gonçalves.

HTML:


<!DOCTYPE html>
<html>
<head>
<title>Grid Layout</title>
<link rel="stylesheet" type="text/css" href="estilo.CSS/W.CSS">
</head>
<body>
<header>
    <h1>Header</h1>
</header>
<div class="container">
    <nav class="navbar">
        <h2>Navbar</h2>
    </nav>
    <article>
        <h2>Article</h2>
    </article>
    <aside>
        <h2>Ads/Extra</h2>
    </aside>
    <footer>
        <h2>Footer</h2>
    </footer>
</div>
</body>
</html>

-CSS:

body{ font-family: Arial, Helvetica, sans-serif; }

.container { display: grid; grid-template-columns: 200px 1fr 200px; grid-template-rows: auto 1fr auto; grid-template-areas: "header header header" "navbar article extra" "navbar footer footer"; }

header { background-color: #FF7BAC; padding: 20px; grid-area: header; }

.navbar { background-color: #7DCFFF; padding: 20px; grid-area: navbar; }

article { background-color: white; padding: 20px; padding-bottom: 300px; grid-area: article; }

aside { background-color: #FFD179; padding: 20px; grid-area: extra; }

footer { background-color: #89DCB2; color: rgb(0, 0, 0); padding: 20px; grid-area: footer; }


VISUALIZAÇÃO: 
![aby](https://user-images.githubusercontent.com/126615967/223546258-57562cab-304c-44e3-bde9-27b9b518c0d3.png)

iurygdeoliveira commented 1 year ago

DW.zip

EQUIPE: FÊNIX

Resposta correta, ponto pra equipe

iurygdeoliveira / Web-development-classes

13º Criando uma GRID Page Layout em CSS - Peso 1 #16