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-tarjetaimg {
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-tarjetah2 {
margin: 002rem; /* 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-tarjetap: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-tarjetap: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: 1rem000; /* 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><divclass="tarjeta"><divclass="etiqueta"><p>Platzi</p></div><divclass="imagen-tarjeta"><imgsrc="https://avatars.githubusercontent.com/u/95301836?v=4"alt="julicode" /></div><divclass="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.
