crear una card en HTML Y CSS

diegofer.cas.99

6159

Vamos a realizar una tarjeta profesional básica usando HTML y CSS. El objetivo es que esta tarjeta refleje información sobre nosotros, como nombre, información de contacto, foto, e iconos de redes sociales redirigibles.

En mi caso, la tarjeta incluirá:

Nombre
Información
Foto
Iconos de redes sociales redirigibles

Necesitaremos un archivo HTML y un archivo CSS. Personalmente, prefiero mantener el CSS separado del HTML, así que crearemos un archivo CSS y lo vincularemos desde el HTML de la siguiente manera:

<linkrel="stylesheet"href="./propiedades-mas-usadas.css">

Ahora, vamos a realizar el contenido HTML:

<!DOCTYPE html><htmllang="es"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><linkrel="icon"href="./images/card.png"><linkrel="stylesheet"href="./propiedades-mas-usadas.css"><title>Mi Tarjeta Profesional</title></head><body><sectionclass="card"><imgclass="photo"src="./images/Diego_monserrate.jpg"alt="Diego"><divclass="info"><h1>Diego Castelblanco</h1><h2>Desarrollador Frontend</h2><p>Confundador y CEO de Smed Technology. Técnico profesional en sistemas de información y estudiante de VI semestre de Ingeniería de Sistemas. Apasionado por el desarrollo web y la innovación tecnológica 👨🏻‍💻.</p></div><divclass="proyecto"><ulclass="horizontal-list"><li><ahref="https://www.linkedin.com/in/diego-fernando-castelblanco-jimenez-43ba63218/"><imgsrc="./images/linkedin.png"alt="LinkedIn"class="icono"></a></li><li><ahref="https://github.com/DiegoWhite99"><imgsrc="./images/github.png"alt="GitHub"class="icono"></a></li><li><ahref="https://www.instagram.com/diego.castelblanco/"><imgsrc="./images/instagram.png"alt="Instagram"class="icono"></a></li></ul></div></section></body></html>

Y a continuación, vamos a crear el archivo CSS:

body {
    background-image: url(./images/fondo.png);
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.card {
    width: 700px;
    height: 500px;
    padding: 20px;
    background-color: rgba(22, 22, 22, 0.884);
    border-radius: 0px20px250px100px;
    box-shadow: 2px4px10pxrgb(255, 255, 255);
    text-align: center; 
}

.photo {
    margin-top: -15px;
    width: 110px;
    height: 200px;
    border-radius: 0px0px50px50px;
    box-shadow: 2px4px10pxrgba(45, 164, 194, 0.986);
}

.cardh1, .cardh2 {
    color: aliceblue;
    font-size: 30px;
    cursor: pointer;
    transition: color 0.3s ease; 
}

.cardh1:hover {
    color: #8133e6; 
    text-decoration: underline;
}

.cardh2:hover {
    color: #1863b9;
}

.cardp {
    color: azure;
    font-size: 25px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: justify;
}

.proyecto.horizontal-list {
    display: flex;
    list-style: none;
    padding: 0;
}

.proyecto.horizontal-listli {
    margin-top: 30px;
    margin-right: 50px; 
}

.proyecto.horizontal-listli:last-child {
    margin-right: 0; 
}

.proyecto.icono {
    width: 80px; 
    height: auto; 
}

Recuerda crear una carpeta para guardar las imágenes que vas a utilizar.

Con estos archivos, tendrás una tarjeta profesional que incluye tu nombre, información de contacto, foto, e iconos de redes sociales que redirigen a tus perfiles. ¡Espero que esto te sea de ayuda!

hace 6 meses