Tarjeta de Perfil
En el mundo digital actual, donde la interacción a través de dispositivos móviles es cada vez más común, contar con una tarjeta de perfil se ha vuelto esencial.
En esta guía, aprenderás a crear una tarjeta perfil que no solo sea visualmente atractiva, sino también funcional en cualquier dispositivo, desde la presentación de información clave como el nombre, la foto y la biografía, hasta la integración de enlaces de contactos.
Enlaces
Recursos
Coolors - Es una plataforma intuitiva y poderosa que permite generar paletas de colores de una manera rápida y eficiente.
Google Fonts - Esta plataforma facilita la incorporación de diferentes estilos de tipografía en sitios web y aplicaciones.
Pexels - Es una plataforma que ofrece una amplia colección de imágenes y videos de alta calidad.
Visual Studio Code - Conocido como VScode, es un editor de código fuente.
Desarrollado con:
Instrucciones
Documento HTML
Crea un documento llamado index.html. En este documento irá la estructura de la tarjeta de perfil.
Estructura Básica
Dentro de index.html escribe lo siguiente.
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profile Card</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
</body>
</html>
Documento CSS
Crea un nuevo documento llamado styles.css. En este documento irán los estilos y tipografías para la tarjeta de perfil.
Colores
CSS :
:root {
--beaver: #917B6Dff;
--desert: #DABDA6ff;
--black: #202021ff;
--gray: #56504Dff;
}
Coolors es una excelente plataforma para generar paletas de colores.
CSS Reset
CSS :
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
Proporciona un punto de partida limpio y evita problemas comunes relacionados con los márgenes y el modelo de caja.
Typografía
CSS :
@font-face {
font-family: 'Outfit';
src: url('assets/fonts/outfit/Outfit-VariableFont_wght.ttf');
}
@font-face inserta el tipo de fuente que se va a utilizar en el documento de manera local. El tipo de fuente utilizado es Outfit.
Crea una carpeta llamada assets, luego dentro de esa carpeta crea otra llamada font donde se guardará la tipografía, en caso que trabajes de manera local.
Body Style
CSS :
body {
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1rem 0;
background-color: var(--beaver);
}
El contenido dentro body estará centrado con color de fondo --beaver.
Browser :
Main
Dentro de la etiqueta body irá main, el contenedor principal que se dividirá en dos artículos:
Picture - Imágen de perfil.Profile - Información profesional de la persona.
HTML :
<body>
<main>
<article class="picture">
</article>
<article class="profile">
</article>
</main>
</body>
CSS :
main {
width: 95%;
max-width: 380px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 1.5rem;
}
main se adaptará a distintas resoluciones, dependiendo del dispositivo en el que se esté visualizando hasta llegar a su ancho predefinido de 380 píxeles, el contorno será curvo y el contenido estará centrado dependiendo del espacio disponible.
Imágen de Perfil
Dentro de la etiqueta article con la clase .picture se agregará el elemento .picture-bg, donde se insertará la imagen.
Dentro la carpeta assets, crea una nueva carpeta llamada img, ahí se guardarán las imágenes que se vayan a utilizar para una página web.
HTML :
<article class="picture">
<div class="picture-bg"></div>
</article>
CSS :
.picture {
height: 300px;
flex-grow: 1;
flex-basis: 300px;
}
.picture-bg {
width: 100%;
height: 100%;
background-image: url('assets/img/picture.jpg');
background-size: cover;
}
La foto de perfil tendrá una altura fija de 300 pixeles y su ancho responsivo hasta llegar a su ancho máximo de 300 pixeles. La foto se insertará como fondo ocupando todo el espacio disponible.
Browser :
Perfil
Dentro de la etiqueta article con la clase .profile se agregarán dos secciones:
Info - Nombre, oficio y una breve descripción.Social Media - Los íconos de las redes sociales.
HTML :
<article class="profile">
<section class="profile-info">
</section>
<section class="profile-social">
</section>
</article>
CSS :
.profile {
height: 300px;
flex-grow: 1;
flex-basis: 400px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2rem;
text-align: center;
color: var(--black);
background-color: var(--desert);
}
La altura fija del perfil será de 300 pixeles con ancho responsivo hasta llegar a su ancho predefinido 400 pixeles, el contenido estará centrado con espacios entre elementos, el color del texto será --black y el del fondo --desert.
Browser :
Dentro de la etiqueta section con la clase .profile-info se colocará dos encabezados y un párrafo:
h2 - Nombre.h3 - Oficio.p - Descripción.
HTML :
<section class="profile-info">
<h2>Name</h2>
<h3>Job</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo nobis aspernatur neque, temporibus ut odit?</p>
</section>
CSS :
.profile-info {
width: 90%;
font-size: 1.2em;
}
La información de perfil tendrá un ancho del 90% de acuerdo al contenedor .profile y el tamaño del texto será de 1.2em.
Browser :
Dentro de la etiqueta section con la clase .profile-contact se insertarán los íconos de las redes sociales. Puede usar Bootstrap Icons para los íconos.
HTML :
<section class="contact">
<a href="#"><i class="bi bi-chat-left-text-fill"></i></a>
<a href="#"><i class="bi bi-telephone-fill"></i></a>
<a href="#"><i class="bi bi-envelope-fill"></i></a>
<a href="#"><i class="bi bi-globe"></i></a>
</section>
CSS :
.profile-contact {
width: 50%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.profile-contact a {
font-size: 25px;
text-decoration: none;
color: var(--gray);
}
.profile-contact a:hover {
color: var(--black);
}
.profile-contact i {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
Los íconos de las redes sociales ocuparán el 50% del ancho disponible del contenedor .profile y estarán centrados en dirección horizontal con espacios entre cada ícono. Cada red social tendrá un tamaño de 25 pixeles de color --gray. Al pasar el cursor sobre cada ícono cambiarán de color.
Browser :
Perpectiva desde Laptop o PC
Hasta el momento hemos diseñado una tarjeta de perfil desde la perpectiva de un móvil, pero para que sea responsivo se trabajará con Media Query.
CSS :
@media (width > 759px) {
main {
max-width: 700px;
}
.picture, .profile {
height: 350px;
}
}
Cuando la tarjeta de perfil supere los 759 pixeles de ancho, main tendrá un ancho máximo 700 pixeles y los elementos .picture y .profile tendrán una altura fija de 350 pixeles. Estos cambios harán que la tarjeta de perfil cambie de dirección vertical a horizontal.
Browser :
#html #codigo-html #web #css #desarrollo-web #maquetacion-web #profile-card #responsive #responsive-design