Cómo Crear una Tarjeta de Perfil Responsiva Desarrollada con HTML & CSS

Cómo Crear una Tarjeta de Perfil Responsiva Desarrollada con HTML & CSS

Descubre cómo crear una tarjeta de perfil responsiva utilizando HTML y CSS en este tutorial práctico. Aprenderás a diseñar un perfil atractivo y funcional que se adapte a diferentes dispositivos.

📱 Tecnología 16/09/2024
9 0 0 9
lian_dev
@lian_dev

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.

Project Preview

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:

  • HTML
  • CSS
  • Flexbox

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>
    <!-- Styles -->
    <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 :

/* *Colors */
:root {
    --beaver: #917B6Dff;
    --desert: #DABDA6ff;
    --black: #202021ff;
    --gray: #56504Dff;
}

Coolors es una excelente plataforma para generar paletas de colores.

CSS Reset

CSS :

/* *CSS Reset */
* {
    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 :

/* *Typegraphy */
@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; /* Relleno Superior e Inferior */
    background-color: var(--beaver);
}

El contenido dentro body estará centrado con color de fondo --beaver.

Browser : 

Body Background

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 -->
    <main>
        <!-- ?Picture -->
        <article class="picture">

        </article>

        <!-- ?Profile -->
        <article class="profile">

        </article>
    </main>
</body>

CSS :

/* *Main */
main {
    width: 95%;
    max-width: 380px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Evitará que el contenido se desborde */
    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">
    <!-- Background -->
    <div class="picture-bg"></div>
</article>

CSS :

/* ?Picture */
.picture {
    height: 300px;
    flex-grow: 1;
    flex-basis: 300px;
}
/* Background */
.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 : 

Avatar

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 :

<!-- ?Profile -->
<article class="profile">
    <!-- Info -->
    <section class="profile-info">

    </section>

    <!-- Social Media -->
    <section class="profile-social">
        
    </section>
</article>

CSS :

/* ?Profile */
.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 : 

Profile Section

Información de Perfil

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 :

<!-- Info -->
<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 :

/* Info */
.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 : 

Contact

Contacto

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 :

<!-- Contact -->
<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 :

/* Contact */
.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; /* Elimina la línea de abajo del enlace */
    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 : 

Mobile Completed

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 :

/* *Desktop Display */
@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 :

Project Completed

#html #codigo-html #web #css #desarrollo-web #maquetacion-web #profile-card #responsive #responsive-design

#web #html #codigo-html #desarrollo-web #responsive #responsive-design #profile-card #maquetacion-web

Conversación

Inicia sesión para conversar