En este tutorial vamos a ver como crear nuestra propia tarjetas de presentacion! 😎
1 - Empezamos creando nuestro archivo HTML
En el “title” vamos a poner el texto que veremos en la pestaña del navegador
<htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>CARDtitle>
head>
<body>
body>
html>
2 - Vamos a agregar en el lo que vayamos a usar en nuestra tarjeta, en este caso agregaremos
<body><section><divclass="card"><imgsrc="(Tuimagen)"alt="img"><p>
Edwin Segura
p>
<p>
Desarrollador de Software
p>
<divid="footer">Tarjeta de presentaciondiv>
<ahref="(Tulink)">Sigueme!a>
div>
section>
body>
3 - Ahora agregaremos los estilos, para poner todo lindo! 🎆
Iniciamos centrando todo y dandole un display flex, para poder organizar todo de mejor manera dentro del contenedor.
section
{
display: flex;
justify-content: center;
}
4 - ahora vamos a estilizar la tarjeta, agregamos varios parametros
centramos : justify-items: center;
agregamos el margen con los bordes : margin-top
el color del fondo : background-color
sombra : box-shadow
Tamaño : width, height
.card
{
display: grid;
justify-items: center;
margin-top: 50px;
width: 450px;
height: 600px;
background-color: #7BC9FF;
border-radius: 30px;
overflow: hidden;
box-shadow: 0px0px35px#26205e;
}
5 - Ahora vamos meterle estilos a la imagen 📷 que elegimos para nuestra tarjeta
sombra : box-shadow
el borde : border-radius
.cardimg
{
margin-top: 50px;
-webkit-box-shadow: 0px0px81px15pxrgb(220, 106, 238, 0.6);
-moz-box-shadow: 0px0px81px15pxrgba(220, 106, 238, 0.6);
box-shadow: 0px0px81px15pxrgba(220, 106, 238, 0.6);
width: 60%;
border-radius: 50%;
}
6 - seguiremos estilizando los parrafos ✏ elegimos el color, tamaño y el margen con el contenedor
.cardp:nth-child(3)
{
color: #26205e;
margin-top: -60px;
font-size: 20px;
}
.cardp:nth-child(2)
{
margin-top: 20px;
font-weight: 700;
font-size: 40px;
color: #2e0063;;
}
7 - ahora vamos a estilizar el footer, similar a como estilizamos los anteriores contenedores
.card#footer
{
color: #2e0063;
font-size: 30px;
width: 100%;
background-color: #40AFCC;
text-align: center;
padding-top: 10px;
}
8 - Vamos a poner estilo en los
(Parrafos) hover nos ayuda a cambiar el color de el texto cuando pasamos el cursos por encuima de este
.cardp:hover
{
color: #4e00a7;
}
.card#footer:hover
{
color: #4e00a7;
}
.carda:hover
{
color: lawngreen;
}
Asi quedaría nuestra carta de presentacíon :
Dejaré todo el codigo completo, por si quieres usarlo y darle tu toque!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CARD</title>
</head>
<style>
section
{
display: flex;
justify-content: center;
}
.card
{
display: grid;
justify-items: center;
margin-top: 50px;width: 450px;
height: 600px;
background-color: #7BC9FF;
border-radius: 30px;
overflow: hidden;
box-shadow: 0px 0px 35px #26205e;
}
.card img
{
margin-top: 50px;
-webkit-box-shadow: 0px 0px 81px 15px rgb(220, 106, 238, 0.6);
-moz-box-shadow: 0px 0px 81px 15px rgba(220, 106, 238, 0.6);
box-shadow: 0px 0px 81px 15px rgba(220, 106, 238, 0.6);width: 60%;
border-radius: 50%;
}
.card p:nth-child(3)
{
color: #26205e;
margin-top: -60px;font-size: 20px;
}
.card p:nth-child(2)
{
margin-top: 20px;font-weight: 700;font-size: 40px;color: #2e0063;;
}
.card p:hover
{
color: #4e00a7;
}
.card #footer:hover
{
color: #4e00a7;
}
.card #footer
{
color: #2e0063;font-size: 30px;width: 100%;
background-color: #40AFCC;
text-align: center;
padding-top: 10px;
}
.card a
{
margin-top: 20px;color: #1a6443;
}
.card a:hover
{
color: lawngreen;
}
</style>
<body>
<section>
<div class="card">
<img src="perfil.png" alt="img">
<p>
Edwin Segura
</p>
<p>
Desarrollador de Software
</p>
<div id="footer">Tarjeta de presentacion</div>
<a href="https://konect.gg/makia">Sigueme!</a>
</div>
</section>
</body>
</html>
