SESIÓN 8 - HTML Y CSS
<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="UTF-8">
<title>Imágenes y Efectos</title>
<link rel="stylesheet" href="practica9.css">
</head>
<body>
<header>
<h1>Imágenes y Efectos</h1>
<p>(La mejor forma de aprender HTML y CSS es practicando)</p>
</header>
<div class="separador1"></div>
<img class="centro"
src="img/foto5.jpg" alt = “imagen no se carga , ohhh”>
<div class="separador1"></div>
<div class=“main”>
<img src="img/foto4.jpg" alt="Imagen de prueba">
<img src="img/foto8.jpg" alt="Imagen de prueba">
<img src="img/foto9.jpg" alt="Imagen de prueba">
<img src="img/foto0.jpg" alt="Imagen de prueba">
</div>
<footer>
<p> sigue aprendiendo con el maravilloso Curso básico de html y css</p>
</footer>
</body>
</html>
/*
/*
Código CSS Practica9.css
*/
header,footer{
*/
header,footer{
background-color: white;
border-style: solid;
border-radius: 20px;
padding: 5px;
text-align: center;
}
separador1{
height: 10px;
}
.centro{
width: 60%;
margin-left: auto;
margin-right: auto;
display: block;
}
.main{
height: 1200px;
}
img{
transition: all 0.5s ease;
border-style: solid;
border-color: white;
}
img:hover{
transform: scale(0.9);
border-radius: 30px;
}
.main img{
width: 49%;
float: left;
}
body{
background-image: url(img/foto6.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-color: grey;
}
Comentarios
Publicar un comentario