alguna vez te an encargado una ficha de precentacion o solo quieres poner aprueva tus abilidades hoy te enseñare como crear tu propia ficha
Empesemos:
1:
Iniciaremos con la estructura vasica de html
(podemos colocar html:5 se escribira la estructura)
<!DOCTYPE html>
<html lang=“en”>
<head>
</head>
<body>
</body>
</html>
2:
Dentro del <body>, agrega un contenedor principal para tu carta. Dentro de este contenedor estarán el título, los párrafos del contenido, y los datos de contacto.
en este paso se pueded agrecar cuanto texto deses ejemplo:
<div class=“container”>
<h1>Juan Pérez</h1> <!-- Nombre -->
<h2>Carta de Presentación</h2> <!-- Subtítulo -->
<!-- Primer párrafo -->
<p>Estimado(a) [Nombre del reclutador],</p>
(es importante resaltar el <div class=“contaner”>que porboca que todo este junto en un solo lugar y con un orden aqui tambien se puede agregar alguan imagen )
3:
Dentro de la etiqueta <head>, agrega una etiqueta <style> para definir los estilos CSS ejemplo;
/* Estilos para la ficha /
body {
font-family: ‘Arial’, sans-serif; / Fuente general /
margin: 0;
padding: 0;
background-color: #f4f4f4; / Fondo gris claro /
color: #333; / Color del texto principal /
line-height: 1.6; / Espaciado entre líneas */
}
/* Estilos del contenedor principal */
.container {
width: 60%; /* El ancho será del 60% de la pantalla */
margin: 50px auto; /* Centrado y margen superior de 50px */
background-color: white; /* Fondo blanco para el contenedor */
padding: 30px; /* Espacio interno */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra alrededor del contenedor */
border-radius: 10px; /* Bordes redondeados */
border: 1px solid #ddd; /* Borde gris claro */
(estos plican direcro mente en la "carta-ficha"pero podemos incluso dar un estiko al titulo o a los parafos)ejemplo:
/* Estilos de los títulos /
h1 {
font-size: 24px; / Tamaño del título principal /
color: #333; / Color gris oscuro /
/ Estilos de los párrafos /
p {
font-size: 16px; / Tamaño de la fuente para el contenido /
margin-bottom: 15px; / Espacio entre los párrafos */
(en caso de aver colocado un imagen tambien se puede modificar su tamaño,forma,pocicion ,etc)
4:
por ultimo se revisa que el codigo cumpla con lo deseado acontinacion una pequeña base de este mismo tema
ESTRUCTURA HTML
<!DOCTYPE html>
<html lang=“es”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Tarjeta de Presentación</title>
<link rel=“stylesheet” href=“styles.css”>
</head>
<body>
<div class=“card”>
<h1>Título de la Tarjeta</h1>
<img src=“imagen.jpg” alt=“Imagen de ejemplo”>
<p>Este es el primer párrafo de presentación. Puedes agregar aquí una breve descripción o información relevante.</p>
<p>Este es el segundo párrafo. También puedes agregar más detalles o un mensaje importante para los usuarios.</p>
</div>
</body>
</html>
ESTUCTURA CSS
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f4;
}
.card {
width: 200px;
padding: 20px;
border-radius: 10px;
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
}
.card img {
width: 200px;
height: 150px;
object-fit: cover;
border-radius: 5px;
margin-bottom: 10px;
}
.card h1 {
font-size: 18px;
margin-bottom: 10px;
color: #333;
}
.card p {
font-size: 14px;
color: #555;
}
(en dado caso de abrir css en html por medio de <style> no se olvide concluirlo con </style>