Trucos y efectos de CSS3 - Tutoriales En Linea

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Trucos y efectos de CSS3 - Tutoriales En Linea</title>
</head>
<style>
* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #64666e;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.nav-link {
  display: block;
  margin-bottom: 0.5em;
}

h3 {
  margin-bottom: 0.5em;  
}

p {
  line-height: 1.5;
  margin-bottom: 1em;
}

.container {
  margin: 40px auto;
  max-width: 700px;
  display: grid;
  grid-template-columns: 8em auto 8em;
  grid-template-rows: 3em auto auto auto 3em;
}

header {
  background-color: lemonchiffon;
  display: flex;
  align-items: center;
  justify-content: center;
}

nav {
  background-color: mistyrose;
  padding: 0.5em;
}

article {
  padding: 0.5em;
  background: #fff;
}

aside {
  background-color: lavender;
  padding: 0.5em;
  
}

footer {
  background-color: silver;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  
  grid-column: 1 / 4;
  grid-row: 5;
}

@media screen and (max-width: 479px) {
  header {
    grid-column: 1 / 4;
  }
  
  article {
    grid-column: 1 / 4;
    grid-row: 2;
  }
  
  aside {
    grid-column: 1 / 4;
    grid-row: 3;
  }
  
  nav {
    grid-column: 1 / 4;
    grid-row: 4;
  }
}

@media screen and (min-width: 480px) and (max-width: 639px) {
  nav {
    grid-column: 1;
    grid-row: 2;
  }
  
  aside {
    grid-column: 1;
    grid-row: 3 / 5;
  }

article {
    grid-column: 2 / 4;
    grid-row: 1 / 5;
  }
}

@media screen and (min-width: 640px) {
  header {
    grid-column: 1 / 4;
  }

nav {
    grid-row: 2 / 5;
    grid-column: 1;
  }
  
  aside { 
    grid-row: 2 / 5;
    grid-column: 3;
  }

article {
    grid-row: 2 / 5;
    grid-column: 2;
  }
}
</style>
<body>

<div class="container">
  <header>Header</header>
  <article>
    <p>“Es muy triste entonces que tantos niños se apresuren y no tengan tiempo para pensar en sí mismos. La gente les dice cuando piensan que han estado jugando el tiempo suficiente: “Ya no eres un niño. Debes comenzar a hacer algo ”. Pero aunque jugar no es hacer nada, realmente estás haciendo algo cuando juegas; estas pensando en ti mismo Muchos niños juegan de la manera equivocada. Hacen funcionar fuera del juego. No solo parecen estar haciendo algo, realmente están haciendo algo. Están imitando a los adultos a su alrededor que siempre están haciendo tanto en lugar de lo menos posible. Y a menudo se les anima a jugar de esta manera por los adultos. Y no están aprendiendo a ser ellos mismos ".</p>
    <p>“Hay muchas personas que no son del todo ellas mismas porque de niños no se les dio tiempo para pensar en sí mismos. Y como no saben todo sobre sí mismos, no pueden saberlo todo sobre todo. Pero a nadie le gusta admitir que no sabe todo sobre todo. Y así, estas personas tratan de compensar el no saber todo acerca de todo haciendo cosas ".</p>
    <p><small>Fuente: <em>Cuatro cartas sin publicar a Catherine </em> por Laura Riding</small></p>
  </article>
  <nav>
    <h3>Navigation</h3>
    <a class="nav-link" href="javascript:void(0)">Inicio</a>
    <a class="nav-link" href="javascript:void(0)">Capítulo 1</a>
    <a class="nav-link" href="javascript:void(0)">Capítulo 2</a>
    <a class="nav-link" href="javascript:void(0)">Capítulo 3</a>
    <a class="nav-link" href="javascript:void(0)">Capítulo 4</a>
  </nav>
  <aside>
    <h3>Sidebar</h3>
    <p>“Una obra de arte es buena si ha surgido de la necesidad. En esta naturaleza de su origen se encuentra su juicio: no hay otro ".<br>- Rainer Maria Rilke</p>
  </aside>
  <footer>Footer</footer>
</div>
</body>
</html>