Casi todos debemos haber oído que ‘la primera impresión es la última impresión’. La ficha de perfil contiene los detalles más importantes que debemos saber sobre una persona en el primer instante. Una mejor impresión atrae más tráfico. Entonces, para involucrar a más audiencia en un sitio web, es muy importante concentrarse en diseñar cada pequeña parte del mismo. Tarjeta de perfil siendo uno de ellos.
En este artículo, aprenderemos cómo crear un efecto de desplazamiento de tarjeta de perfil usando CSS.
Acercarse:
- Primero, creamos la plantilla HTML básica (index.html) para insertar la imagen y el perfil.
- Tenemos un div HTML con una clase de «tarjeta». Dentro del div, tenemos una imagen con la clase «img-box» y el nombre del perfil y la designación del titular de la cuenta con la clase «info».
- Se utiliza esta imagen de tarjeta de perfil .
- Incluimos el “style.css” en el archivo “index.html” que contiene todos los estilos CSS.
- Necesitamos importar la siguiente URL de la fuente de Google en nuestro archivo CSS para la familia de fuentes: ‘Merriweather’, serif ;
@import url("https://fonts.googleapis.com/css2?family=Merriweather:wght@700&display=swap");
Ejemplo: la imagen se moverá hacia arriba y aparecerá el nombre del perfil con la designación. También hay un botón para contactar con el usuario.
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Profile Card</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="card"> <div class="img-box"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200719193804/Why-GeeksforGeeks-is-an-Essential-Platform-for-CS-IT-Students.png" alt="profile pic"> </div> <div class="info"> <h2>Profile Card</h2> <p>Web Designer | Influencer</p> <button>Contact Me</button> </div> </div> </body> </html>
Código CSS: el siguiente código CSS ( style.css ) traerá el efecto de desplazamiento a esta tarjeta de perfil. El siguiente código se utiliza en el archivo HTML anterior
style.css
@import url("https://fonts.googleapis.com/css2?family=Merriweather:wght@700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
height: 100vh;
background: rgb(11, 80, 136);
display: flex;
justify-content: center;
align-items: center;
font-family: 'Merriweather', serif;
}
/* Profile card making starts here */
.card{
width: 320px;
height: 400px;
background-color: white;
border-radius: 8px;
position: relative;
}
/* Contains the image */
.img-box{
position: absolute;
top: 10px;
bottom: 10px;
right: 10px;
left: 10px;
background-color: white;
transition: 0.5s;
z-index: 2;
}
/* The image dimensions changes on hover and the
underlaying information shows up*/
.card:hover .img-box {
top: 10px;
bottom: 125px;
right: 10px;
left: 10px;
}
/* Image radius changes on hover*/
.card:hover img{
border-radius: 10px;
}
/* The image */
img{
width: 100%;
height: 100%;
position: absolute;
object-fit: cover;
}
/* Contains the name, designation and a button to contact */
.info{
position: absolute;
bottom: 40px;
right: 10px;
left: 10px;
text-align: center;
height: 80px;
}
/* Style the name*/
h2 {
font-weight: bold;
color: rgb(51, 50, 50);
}
/* Style the paragraph which contains the designation */
p {
color: rgb(197, 74, 111);
}
/* The button to contact */
button{
position: absolute;
background-color: rgb(11, 80, 136);
border: none;
border-radius: 10px;
text-align: center;
left: 75px;
margin: 8px;
font-size: 20px;
padding: 10px 15px;
color: wheat;
font-family: 'Merriweather', serif;
cursor: pointer;
}
Salida: ahora, como puede ver en la salida, hemos creado un hermoso efecto de desplazamiento de la tarjeta de perfil, que atraerá a más lectores a leer los contenidos de escritores/personas influyentes en particular más en la página web dedicada.
Publicación traducida automáticamente
Artículo escrito por rijushree100guha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA