Blog ComercialWeb - São Paulo - SP
E-mail: comercial2@comercialweb.com.br
Atualizado: 05/11/2019

Layout Responsivo, HTML5 e CSS3

Aprenda a fazer Layout Responsivo de forma descomplicada, HTML5 & CSS3.

<!doctype html>
<html>
  <head>
<meta charset="utf-8">
    <title>Layout Responsivo, HTML5 e CSS3</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Aprenda a fazer Layout Responsivo de forma descomplicada, HTML5 & CSS3.">
    
<style>
body {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"
}
.container {
display: flex;
flex-direction: column;
min-height: 680px;
}

@media (min-width: 650px) {
.container {
display: grid;
grid-template-columns: 150px 1fr 150px;
grid-template-rows: auto 1fr auto;
  }
}
header {
grid-column: span 3;
padding:20px;
text-align: center;
font-size: 22px;
background-color: #8230C8;
color: white;
}
main {
flex: 1;
padding: 10px;
}
nav {
background-color: #D3ADF0;
padding: 20px;
}
aside {
padding: 20px;
background-color: #F794C5;
}
footer {
grid-column: span 3;
padding: 20px;
text-align: center;
font-size: 20px;
background-color: #58085B;
color: white;
}
h1 {
font-size: 22px;
font-weight: bold;
text-shadow: 1px 4px 3px #777676;
}
p{
border: 1px solid #990000;
padding: 10px;
border-radius: 10px;
}
</style>

  </head>
  <body class="container">
  
   <header>Cabeçalho ou (Header)</header>
  
   <nav>Navegação ou (Navigation)</nav>
  
   <main>
     <h1>Principal ou (Main)</h1>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga esse ipsam, iure delectus ipsa! Corrupti aliquid quia praesentium architecto, vitae perferendis vel! Sunt vero repellendus nihil vitae ullam temporibus fuga.</p>
     </main>
    
     <aside>Barra lateral ou (side bar)</aside>
    
     <footer>Rodapé ou (Footer)</footer>
    
  </body>
</html>

Fonte: Luciano

Comente esta matéria:


Compartilhe esta matéria




Veja Também