Hola chiques, hoy dĂa vengo con el tutito de la tarjeta de presentaciĂłn que tengo en la sidebar. Es un cĂłdigo sĂșper sencillo y fĂĄcil de customizar, no te va a tomar ni cinco minutos. AsĂ que vamos a x ello.
<style>
.about-card {
width: 225px;
background: #EDFBFF;
border-radius: 28px;
padding: 20px;
box-sizing: border-box;
text-align: center;
font-family: Arial, sans-serif;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
border: 3px solid #FFFFFF;
}
.about-photo {
width: 125px;
height: 125px;
border-radius: 50%;
object-fit: cover;
border: 5px solid #FFFFFF;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.about-name {
margin-top: 15px;
font-size: 24px;
font-weight: bold;
color: #B6EFFC;
}
.about-role {
color: #B6EFFC;
font-size: 14px;
margin-top: 5px;
}
.about-text {
margin-top: 15px;
color: #5D6F82;
font-size: 14px;
line-height: 1.6;
text-align: justify;
}
</style>
<div class="about-card">
<img
class="about-photo"
src="LINK DE FOTO"
alt="Imagen de perfil"
/>
<div class="about-name">
NOMBRE
</div>
<div class="about-role">
TEXTO DE ROL
</div>
<div class="about-text">
TEXTO DE PRESENTACIĂN
</div>
</div>
CustomizaciĂłn
Bien, lo primero es width: 255px que båsicamente es el ancho de la tarjeta, estå debe ser menor que el tamaño de tu sidebar para que no sobresalga. Lo siguiente es el background: EDFBFF, aquà cambiaremos el color de nuestra tarjeta. En este primer apartado también podrås cambiar detalles menores como la sombra o el borde, pero la verdad es que no se nota mucho lol.
Después nos vamos about photo, dónde encontraremos width:125px y height:125px, ambos datos para el tamaño de la foto que queramos poner, recomiendo que sean el mismo tamaño los dos ya que asà la foto se verå redonda y no ovalada. También veremos el border: 5px solid #FFFFFF, donde båsicamente cambias el borde de la foto.
Seguido a ello encontraremos:
about-role {
color: #B6EFFC; → Para modificar el color del texto de rol
font-size: 14px; → Para modificar el tamaño de la fuente del texto de rol
Y también encontraremos:
.about-text {
margin-top: 15px;
color: #5D6F82; → Para modificar el color del texto de presentaciĂłn
font-size: 14px; → Para modificar el tamaño de la fuente del texto de presentaciĂłn
Después, dónde dice: src="LINK DE FOTO" pues pegas el enlace de la foto que quieras utilizar.
FINALMENTE:
<div class="about-name">
NOMBRE. → Pones el tu nombre o el nombre que quieras utilizar
</div>
<div class="about-role">
TEXTO DE ROL. → Pones tu rol, a quĂ© te dedicas o incluso tu MBTI
</div>
<div class="about-text">
TEXTO DE PRESENTACIĂN. → AquĂ pones cosas de ti o de lo que trata tu blog.
</div>
Y listoooo. Espero que lo hayan entendido bien, la verdad es que estĂĄ sĂșper fĂĄcil!! OjalĂĄ les sirva, cualquier cosa, aquĂ su servidora Skai a la orden. Bye (＾∇＾)ïŸ♪
Holi! quise poner la tarjetita en mi perfil, pero no me sale la imagen, corte que se queda en blanco.. Dsp todo lo demĂĄs me quedĂł bien, pero la imagen sigue sin aparecer
ResponderBorrar