HTML:
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>navegar</title>
<link rel="stylesheet"
href="estilos.css" />
</head>
<body>
<header>
<a href="#" class
="logo">imagina</a>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">nosotros</a></li>
<li><a href="#">Proyectos</a></li>
<li><a
href="ingresar.html">clases</a></li>
<button
type="button">Ingresa</button>
<button
type="button">Ofertas</button>
</ul>
</header>
<section>
<img
src="pictures/fami.jpg">
<img src="pictures/fe.jpg">
<img
src="pictures/here.png">
<img
src="pictures/famie.jpg">
</section>
<article class="titulo">
<h1>titulo de la pagina</h1>
<p>hoy es hoy
tengo sueño
quiero
volar en
mi corazón
</p>
</article>
<div class="animacion">
<img
class="animacion"src="pictures/fami.jpg">
</div>
<article>
<h1>titulo de la pagina</h1>
<p>hoy es hoy
tengo sueño
quiero
volar en
mi corazón
</p>
</article>
<footer>
<p>© 2025 mi pagina web incial. todos los derechos
reservados</p>
</footer>
</body>
</html>
CSS:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
font-family: Arial, Helvetica, sans-serif;
}
body{
height: 100vh;
width: 100%;
}
header{
background: rgb(59, 128, 219);
padding: 20px 9%;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo{
font-size:30px;
font-weight: 700;
text-transform: uppercase;
color:white;
}
li{
display: inline-block;
}
li a{
color:white;
font-size: 18px;
font-weight: 400px;
margin-right: 25px;
}
li a:hover{
color:rgb(72, 247, 159);
}
button{
width: 90px;
background-color: rgb(187, 34, 233);
color:white;
font-size: 17px;
font-weight: 400;
margin-left: 10px;
padding: 10px;
border: none;
border-radius: 10px;
cursor:pointer;
transition: background-color 0.4s ease-in;
}
button:hover{
background-color: rgb(169, 238, 112);
}
section{
display:
flex;
width:
500px;
height: 470;
}
section
img{
width:0px;
flex-grow: 1;
object-fit: cover;
opacity: 0.8;
transition: 0.5s ease;
}
section
img:hover{
cursor:crosshair;
width: 300px;
opacity: 1;
filter: contrast(140%);
}
.titulo{
position: absolute;
top: 100px;
left:700px;
right: 100px;
}
.animacion{
width: 140px;
height: 140px;
position:absolute;
left: 300px;
}
.animacion:hover{
transform: rotate(360dg);
transition: 2s;
}
Hola tengo 36 años, soy de Colombia, y busco residencia, quiero estabilidad en España. ¿Qué FP de informática tiene más salida laboral en este sitio https://fpformacionprofesional.com/?
ResponderBorrar