<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Repaso</title>
<link rel="stylesheet" href="css/estilos.css">
</head>
<body>
<!-- En el html solamente tenemos el contenido no tenemos nada de estilo-->
<h1 id="titulo">Hola que tal</h1>
<h6>Yo muy bien</h6>
<p class="extra">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias consequatur possimus et. Tempora dolorem
tempore in debitis distinctio, sunt incidunt exercitationem praesentium non maxime aspernatur, sit velit
officiis! Ut, iusto?</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam illo repellendus dicta deleniti voluptates. Modi,
maxime ab quasi accusamus consectetur doloribus sunt autem libero asperiores illum velit fugiat similique neque.
</p>
<ul>
<li>1</li>
<li>2</li>
<li class="movido">3</li>
<li>4</li>
<li>5</li>
</ul>
<div>
<p>Esto es un bloque</p>
</div>
<header>
<h1>Bloque de cabecera</h1>
</header>
<main>
<aside><p>Barra lateral</p></aside>
<section>
<article>
<h3 class="extra">Artículo 1</h3>
</article>
<article>
<h3>Artículo 2</h3>
</article>
<article>
<h3>Artículo 3</h3>
</article>
</section>
<section id="galeria">
<div class="imagen"><img src="https://picsum.photos/200"/><h4>Esto es una foto</h4></div>
<div class="imagen"><img src="https://picsum.photos/200"/><h4>Esto es una foto</h4></div>
<div class="imagen"><img src="https://picsum.photos/200"/><h4>Esto es una foto</h4></div>
</section>
</main>
</body>
</html>
/*Estilo de todos los elementos de mi web */
*{
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
body{
overflow-x: hidden;
/* defino una variable para todos los elementos que estén dentro del body */
--fondo:yellow;
}
/*Estilo de una etiqueta */
h1{
color:rgb(81, 81, 81);
}
/* clase y va a todos los elementos de esa clase */
.extra{
background-color: blanchedalmond;
}
/* id que es un elemento único */
#titulo{
/* Utilizo calc para que el ancho sea el de la página menos 200px */
width: calc(100% - 200px);
margin: auto;
background-color: black;
color: blanchedalmond;
text-align: center;
/* Aplicamos la animación */
animation-name: baile;
animation-duration: 6s;
animation-delay: 3s;
}
article{
margin-left: 50px;
padding: 2em;
background-color: gainsboro;
float: left; /* los elementos se coloquen unos al lado de otros */
}
/* todos los h3 dentro de un article */
article h3{
margin: 0;
}
.movido{
position: relative;
left: 50px;
}
.imagen{
border: solid 2px gray;
box-shadow: 5px 5px 5px gray;
text-align: center;
transition: 2s;
}
.imagen img{
width: 100%;
/* las transiciones tarden 2seg en ejecutarse */
transition: 2s;
}
/* La imagen se hace grande al pasar por encima */
.imagen img:hover{
transform: scale(1.2,1.2);
}
/* Cambiamos el color al pasar por encima */
.imagen:hover{
/* uso la variable fondo definida antes */
background-color:var(--fondo);
}
/* con el flex consigo que todos los elementos estén alineados y responsive */
#galeria{
display: flex;
clear: both;
justify-content: space-evenly;
flex-wrap: wrap;
}
/* Con el media query controlo que en determinadas resoluciones cambie el estilo para que
quede mejor */
@media screen and (max-width:500px) {
article{
margin: 50px 0;
float: none;
}
}
/* Animación de cuatro pasos en los que cambiamos tamaño, rotación y colores */
@keyframes baile {
0%{
transform: scale(0.5,0.5);
color:black;
}
25%{
color:red;
transform: rotate(20deg);
}
50%{
color:black;
transform: scale(2,1.5);
}
75%{
transform: rotate(-20deg);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de layout con grid</title>
<link rel="stylesheet" href="css/layout.css">
</head>
<body>
<header id="pageHeader"><h1>Tornillería martínez</h1>></header>
<article id="mainArticle"><h1>Tornillería Martínez</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam veniam laboriosam eaque, alias veritatis reprehenderit maiores nulla quis ratione sequi aliquam omnis in tenetur perferendis. Repellendus architecto harum mollitia laudantium?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam veniam laboriosam eaque, alias veritatis reprehenderit maiores nulla quis ratione sequi aliquam omnis in tenetur perferendis. Repellendus architecto harum mollitia laudantium?</p></article>
<nav id="mainNav"><ul>
<li>Inicio</li>
<li>Nosotros</li>
<li>Productos</li>
<li>Contacto</li>
<li>Servicios</li>
</ul></nav>
<div id="siteAds"><img src="https://picsum.photos/100"/><img src="https://picsum.photos/100"/></div>
<footer id="pageFooter">(C) Diseño mortal</footer>
</body>
</html>
body {
display: grid;
grid-template-areas:
"header header header"
"nav article ads"
"footer footer footer";
grid-template-rows: 80px 1fr 70px;
grid-template-columns: 20% 1fr 15%;
grid-row-gap: 10px;
grid-column-gap: 10px;
height: 100vh;
margin: 0;
}
header, footer, article, nav, div {
padding: 1.2em;
background: gold;
}
#pageHeader {
grid-area: header;
}
#pageFooter {
grid-area: footer;
}
#mainArticle {
grid-area: article;
}
#mainNav {
grid-area: nav;
}
#siteAds {
grid-area: ads;
}
/* Stack the layout on small devices/viewports. */
@media all and (max-width: 575px) {
body {
grid-template-areas:
"header"
"article"
"ads"
"nav"
"footer";
grid-template-rows: 80px 1fr 70px 1fr 70px;
grid-template-columns: 1fr;
}
}