Primer programa en CodePen.io
HTML (Solo copiar lo que esta en negro)
<html>
<div class="tarjeta">
<header>
<title> Tarjeta de Invitación </title>
<h3>De: Fulanito </h3>
<h3>Para: Mi Papá </h3>
<h1 class="titulo">Felicitaciones! </h1>
<p class="linea">Este es un mensaje para un amigo, invitando a mi fiesta de grado</p>
</header>
<body class="fondo">
<div>
<p>¡te dejo un link para que veas tu cancion favorita! </p>
<a href="XXX">tu cancion </a>
</div>
</body>
<figure>
<img class="foto" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Giro_d%27Italia_-_Logo_2018.svg/1200px-Giro_d%27Italia_-_Logo_2018.svg.png" width=425px>
<alt="imagen preferida" >
<figcaption>Esta imagen es para el <br>cumpleaños de mi mejor amigo </figcaption>
</figure>
</body>
<footer>
<p>Esta pagina fue creada por: <br>
Carlos Rodriguez<br>
En el año 2023 <br>
La Paz, Santander <br>
@ todos los derechos reservados
</p>
</footer>
</div>
</html>
CSS
html,body {
background-color:red
}
h3 {
color:blueviolet;
}
p.linea {
color:#FDBB17 ;
text-decoration: underline wavy blue;
}
.tarjeta{
border-width: 10px;
border-style: Single;
border-color: darkblue;
border-radius: 20px;
width: 500px;
height: 620px;
background:azure;
}
.titulo{
font-family: fantasy;
font-size: xx-large;
font-style: italic;
text-align: center;
}
.foto{
width: 200px;
height: 200px;
margin-left: 25%;
}
.fondo{
background-image:url(https://previews.123rf.com/images/ajibon/ajibon1511/ajibon151100032/49029052-tarjeta-de-felicitaci%C3%B3n-del-feliz-cumplea%C3%B1os-con-pastel-y-globos.jpg);
background-repeat: no-repeat;
background-size:100%;
}
Comentarios
Publicar un comentario