Cómo crear una tarjeta de presentación sencilla con CSS 🎴

4737

¡Vamos a hacerlo fácil!

Debes crear tu archivo html, en mi caso lo llamaré mi-tarjeta.html. Luego, crear el documento base:

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body></body></html>

Luego, vamos a crear la estructura de nuestra tarjeta dentro de la etiqueta <body>:

<body>
    <section>
        <div class="card">
            <div class="images">
                <img class="background" src="https://images.pexels.com/photos/614117/pexels-photo-614117.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="background">
                <img class="profile" src="https://images.pexels.com/photos/5380635/pexels-photo-5380635.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="me">
                <img class="pais" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Flag_of_Colombia.svg/1200px-Flag_of_Colombia.svg.png" alt="colombia">
            </div>
            <div class="info">
                <p class="name">Juan Pablo Peña Franco</p>
                <p class="university">EAFIT</p>
                <p class="job">Working at <a href="https://codebullsteam.com/" id="codebulls">CodeBulls</a></p>
                <p class="date">01/01/2023 - Today</p>
            </div>
        </div>
    </section>
</body>

Agregué clases a cada una de mis etiquetas para ahorita poderlas manipular con CSS.
Elige las 3 imágenes que quieras y ponlas dentro de cada respectivo atributo src="". La primera es una imagen para tu portada, tipo Facebook, la segunda es para tu foto de perfil y la última la bandera de tu país.
En el div con la clase info (<div class=“info”>) puedes agregar la información que tú quieras.

Debajo de la etiqueta <title>Document</title> vamos a agregar la etiqueta <style> con las siguientes clases:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&family=Righteous&display=swap');
        body {
            background-color: #19A7CE;
            display: flex;
            justify-content: center;
        }
        section {
            display: flex;
            justify-content: center;
        }
        .card {
            width: 400px;
            height: 475px;
            border-radius: 20px;
            overflow: hidden;
            background-color: #F6F1F1;
            box-shadow: 008px4pxrgba(0, 0, 0, 0.3);
        }
        .card.images {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            height: 200px;
            position: relative;
        }
        .card.images.background {
            width: 100%;
            height: 100%;
        }
        .card.images.profile {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            border: 2px solid white;
            margin: -100px;
            box-shadow: 008px1pxrgba(0, 0, 0, 0.3);
        }
        .card.images.pais {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            position: absolute;
            bottom: -50px;
            right: 125px;
            /* box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.3); */
        }
        .card.info {
            text-align: center;
            margin-top: 75px;
            font-family: 'Poppins';
            cursor: default;
        }
        .card.info.name {
            font-weight: bold;
        }
        .card.info.date {
            color: #898580;
        }
        .card.info.job#codebulls {
            color: #146C94;
            text-decoration: none;
        }

El @import es para agregar una fuente de texto nueva. CSS trae unas por defecto, pero si quieres elegir una diferente la puedes buscar en Google Fonts, ellos mismos te dan el código para que la importes, genial, ¿no?.

¡Resultado!

Nota: recuerda que puedes modificar los campos a tu gusto.