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:
<link rel="stylesheet" href="./propiedades-mas-usadas.css">
Ahora, vamos a realizar el contenido HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="./images/card.png">
<link rel="stylesheet" href="./propiedades-mas-usadas.css">
<title>Mi Tarjeta Profesional</title>
</head>
<body>
<section class="card">
<img class="photo" src="./images/Diego_monserrate.jpg" alt="Diego">
<div class="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>
<div class="proyecto">
<ul class="horizontal-list">
<li><a href="https://www.linkedin.com/in/diego-fernando-castelblanco-jimenez-43ba63218/"><img src="./images/linkedin.png" alt="LinkedIn" class="icono"></a></li>
<li><a href="https://github.com/DiegoWhite99"><img src="./images/github.png" alt="GitHub" class="icono"></a></li>
<li><a href="https://www.instagram.com/diego.castelblanco/"><img src="./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: 0px 20px 250px 100px;
box-shadow: 2px 4px 10px rgb(255, 255, 255);
text-align: center;
}
.photo {
margin-top: -15px;
width: 110px;
height: 200px;
border-radius: 0px 0px 50px 50px;
box-shadow: 2px 4px 10px rgba(45, 164, 194, 0.986);
}
.card h1, .card h2 {
color: aliceblue;
font-size: 30px;
cursor: pointer;
transition: color 0.3s ease;
}
.card h1:hover {
color: #8133e6;
text-decoration: underline;
}
.card h2:hover {
color: #1863b9;
}
.card p {
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-list li {
margin-top: 30px;
margin-right: 50px;
}
.proyecto .horizontal-list li: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!
Curso de Frontend Developer
