En este artículo, vamos a crear una tarjeta de perfil desde donde un usuario puede consultar los detalles básicos de otros usuarios y conectarse con ellos a través de diferentes identificadores, así como enviar mensajes al usuario.
Acercarse:
- En primer lugar, creamos un archivo HTML en el que hacemos lo siguiente:
- Cree un contenedor que contenga toda la información.
- Añadir foto de perfil del usuario.
- Agregue enlaces de diferentes identificadores de redes sociales.
- Agregue un botón para enviar mensajes.
- Luego, creamos un archivo CSS en el que aplicamos diferentes tipos de propiedades de estilo para nuestras etiquetas HTML.
- Finalmente, vinculamos nuestro archivo CSS al archivo HTML usando la etiqueta de enlace en la sección principal del HTML.
Código HTML:
- Primero, creamos un archivo HTML (index.html).
- Después de crear el archivo HTML, le daremos un título a nuestra página web usando la etiqueta <title>. Debe
colocarse entre la etiqueta <head>. - Luego vinculamos el archivo css que proporciona todo el efecto de animaciones a nuestro html. Esto también se coloca entre la etiqueta <head>.
- Ahora agregamos un enlace de Google Fonts para usar diferentes tipos de familias de fuentes en nuestro proyecto.
- Llegando a la sección del cuerpo de nuestro código HTML.
- Crea un div en el que podamos almacenar todas las imágenes, enlaces, botones, encabezados y párrafos.
- Luego creamos un div en el que agregamos la imagen del usuario.
- Se crea otro div, en este div tenemos que agregar las siguientes etiquetas:
- Se agrega una etiqueta de encabezado para almacenar el nombre del usuario.
- Se agrega una etiqueta de párrafo para almacenar el nombre de usuario del usuario.
- Luego agregamos algunos enlaces de redes sociales para que uno pueda conectarse con este usuario específico.
- Por fin hemos creado un enlace para conectar el otro mediante el servicio de mensajería.
HTML
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="style.css"> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href= "https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap" rel="stylesheet"> </head> <body> <div class="container"> <div class="user-image"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20210223165952/gfglogo.png" alt="this image contains user-image"> </div> <div class="content"> <h3 class="name">Geeks-For-Geeks</h3> <p class="username">@geeks_for_geeks</p> <div class="links"> <a class="facebook" href= "https://www.facebook.com/geeksforgeeks.org/" target="_blank" title="GFG_facebook"> <i class="fab fa-facebook"></i> </a> <a class="git" href= "https://github.com/topics/geeksforgeeks" title="GFG_github" target="_blank"> <i class="fab fa-github-square"></i> </a> <a class="linkedin" href= "https://www.geeksforgeeks.org/tag/linkedin/" title="GFG_linkedin" target="_blank"> <i class="fab fa-linkedin"></i> </a> <a class="insta" href= "https://www.instagram.com/geeks_for_geeks/?hl=en" target="_blank" title="GFG_instagram"> <i class="fab fa-instagram-square"></i> </a> </div> <p class="details"> A Computer Science portal for geeks </p> <a class="effect effect-4" href="#"> Message </a> </div> </div> <!-- This is link of adding small images which are used in the link section --> <script src="https://kit.fontawesome.com/704ff50790.js" crossorigin="anonymous"> </script> </body> </html>
Código CSS: CSS se usa para dar diferentes tipos de animaciones y efectos a nuestra página HTML para que parezca interactiva para todos los usuarios.
En CSS, tenemos que recordar los siguientes puntos:
- Restaura todos los efectos del navegador.
- Utilice clases e identificadores para dar efectos a los elementos HTML.
- Uso de la función de selector de n-ésimo hijo de CSS para llamar a diferentes enlaces.
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Assigning all the same properties to the body */
body{
height: 100vh;
display: flex;
justify-content: center;
background-color: rgb(0, 0, 0);
align-items: center;
}
.container{
width: 20em;
background-color: rgb(255, 255, 255);
overflow: hidden;
border-radius: 1em;
text-align: center;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 1em;
}
.user-image{
padding: 3em 0;
background-image: linear-gradient(70deg,#61A1DD,#0083FD);
}
.user-image img{
width: 7em;
height: 7em;
border-radius: 50%;
box-shadow: 0 0.6em 1.8em ;
object-fit: cover;
}
.content{
color: #565656;
padding: 2.2em;
}
.name{
font-size: 1.5em;
text-transform: uppercase;
}
.username{
font-size: 1em;
color: #9e9e9e;
}
.links{
display: flex;
justify-content: center;
margin: 1.5em 0;
}
a{
text-decoration: none;
color: #565656;
transition: all 0.3s;
font-size: 2em;
margin-right: 1.2em;
}
a:last-child{
margin: 0;
}
.insta:hover{
color:rgb(255, 70, 101);
transform: scale(2,2);
}
.git:hover{
color:rgb(0, 0, 0);
transform: scale(2,2);
}
.linkedin:hover{
color:rgba(4, 0, 253, 0.842);
transform: scale(2,2);
}
.facebook:hover{
color:rgb(4, 0, 255);
transform: scale(2,2);
}
.details{
margin-bottom: 1.8em;
}
/* CSS for messagin link */
.effect {
text-align: center;
display: inline-block;
position: relative;
text-decoration: none;
color: rgb(48, 41, 41);
text-transform: capitalize;
width: 100%;
background-image: linear-gradient(60deg,#0083FD,#61A1DD);
font-size: 1.2em;
padding: 1em 3em;
border-radius: 5em;
overflow: hidden;
}
.effect.effect-4:before {
content: "\f2b6";
font-family: FontAwesome;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
font-size: 1.8em;
transform: scale(0, 1);
}
.effect.effect-4:hover {
text-indent: -9999px;
}
.effect.effect-4:hover:before {
transform: scale(1, 1);
text-indent: 0;
}
Producción:
Publicación traducida automáticamente
Artículo escrito por rahulmahajann y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA