Este tutorial te guiará paso a paso para crear la tarjeta personal. Veremos cómo organizar el contenido usando HTML y darle estilo con CSS. Al final, tendrás una tarjeta.
Paso 1: Estructura HTML
Primero, necesitamos la estructura básica del documento HTML. Esto incluye el encabezado, donde se definen las configuraciones de la página, y el cuerpo, donde está el contenido visual.
<htmllang="es">
<head>
<metacharset="UTF-8" />
<metaname="viewport"content="width=device-width,initial-scale=1.0" />
<title>Tarjeta Julicodetitle>
<style>
/* Aquí irán los estilos CSS */
style>
head>
<body>
body>
html>
Paso 2: Definir el Estilo con CSS.
/* Esto se aplica a todos los elementos */
* {
box-sizing: border-box;
}
/* Definimos un tamaño de fuente base para tener una referencia más fácil */
html {
font-size: 62.5%; /* 1rem = 10px */
}
/* Estilos para el cuerpo de la página */
body {
margin: 0;
font-family: Arial, sans-serif; /* Definimos una fuente básica */
background-color: #0d1117; /* Fondo oscuro */
}
/* Estilos para la sección que contiene la tarjeta */
section {
display: flex; /* Usamos flexbox */
justify-content: center; /* Centra la tarjeta horizontalmente */
align-items: center; /* Centra la tarjeta verticalmente */
height: 100vh; /* Ocupa toda la altura de la ventana */
}
/* Estilos para la tarjeta */
.tarjeta {
display: flex; /* Para mostrar los elementos en fila */
background-color: #d3fcfe; /* Color de fondo suave */
border-radius: 1rem; /* Bordes redondeados */
width: 100rem; /* Ancho de la tarjeta */
overflow: hidden; /* Esconde cualquier cosa que se salga */
}
/* Estilos para la imagen dentro de la tarjeta */
.imagen-tarjeta img {
width: 40rem; /* Ancho de la imagen */
height: 100%; /* Alto completo */
}
/* Estilos para el contenido de la tarjeta */
.contenido-tarjeta {
padding: 2rem; /* Espacio interno */
position: relative; /* Para colocar la etiqueta en la parte superior */
display: flex;
flex-direction: column; /* Organiza los elementos en columna */
justify-content: center; /* Centra el texto */
}
/* Estilos para el título */
.contenido-tarjeta h2 {
margin: 0 0 2rem; /* Margen inferior */
font-size: 3rem; /* Tamaño de la fuente */
text-align: center; /* Centra el texto */
color: #008d4c; /* Color verde */
}
/* Estilos para el primer párrafo */
.contenido-tarjeta p:nth-child(2) {
font-size: 3rem; /* Tamaño de la fuente */
color: #008d4c; /* Color verde */
text-align: center; /* Centra el texto */
}
/* Estilos para el segundo párrafo */
.contenido-tarjeta p:nth-child(3) {
font-size: 2rem; /* Tamaño de la fuente */
color: black; /* Color negro */
text-align: center; /* Centra el texto */
}
/* Estilos para la etiqueta */
.tarjeta .etiqueta {
position: absolute; /* Posiciona la etiqueta sobre la tarjeta */
background: #008d4c; /* Fondo verde */
right: auto; /* Alineación a la izquierda */
border-radius: 1rem 0 0 0; /* Bordes redondeados en la parte superior izquierda */
padding: 1rem; /* Espacio interno */
font-size: 2rem; /* Tamaño de la fuente */
color: white; /* Color de texto blanco */
}
Paso 3: Contenido HTML
Dentro del cuerpo (<body>), colocamos la estructura de la tarjeta. Tendremos tres secciones principales: la etiqueta, la imagen y el contenido de la tarjeta.
<section>
<div class="tarjeta">
<div class="etiqueta">
<p>Platzi</p>
</div>
<div class="imagen-tarjeta">
<img src="https://avatars.githubusercontent.com/u/95301836?v=4" alt="julicode" />
</div>
<div class="contenido-tarjeta">
<h2>Julicode 🇨🇴</h2>
<p>Desarrollador Backend</p>
<p>"Nunca pares de aprender, la tecnología cambia constantemente y es importante estar actualizado"</p>
</div>
</div>
</section>
Resultado Final
Al finalizar este tutorial, tendrás una tarjeta moderna y estilizada que incluye una imagen, un título, una descripción y una cita. Puedes experimentar cambiando los colores o añadiendo más contenido dentro de la tarjeta.
¡Eso es todo! Ahora tienes una tarjeta atractiva con HTML y CSS.
Curso de Frontend Developer
