<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Grid #03</title>
<link rel="stylesheet" href="css/tag.css">
<style>
*{
padding: 0;
margin: 0;/*margem*/
}
header{
grid-area: cabecalho;
}
nav{
grid-area: navegacao;
}
main{
grid-area: conteudo;
}
footer{
grid-area: rodape;
}
body{
display: grid;
min-height: 100vh;/*ocupa a altura iteira*/
grid-template-columns: 300px 1fr;/* 1° coluna vai ser 300px e a 2° vai ocupar o espaço inteiro da tela*/
grid-template-rows: 100px 1fr 100px;
/*organização dos elementos na tela*/
grid-template-areas:
'cabecalho cabecalho'
'navegacao conteudo'
'rodape rodape'
;
}
/* */
@media(max-width: 700px){
body{
grid-template-columns: 1fr;
grid-template-rows: 80px 1fr 100px;/*1fr= 1 frame, 100px= o máximo possível da tela*/
grid-template-areas:
'navegacao'
'conteudo'
'rodape';
}
header{/* cabecalho*/
display: none;
}
}
header{
display: none;
}
</style>
</head>
<body>
<main class="tag">CONTEÚDO</main>
<header class="tag">CABEÇALHO</header>
<footer class="tag">RODAPÉ</footer>
<nav class="tag">NAVEGAÇÃO</nav>
<script src="js/tag.js"></script>
</body>
</html>
 |
| Software: Visual Studio Code |
Nenhum comentário:
Postar um comentário