¡Bienvenidos al tutorial sobre cómo crear una tarjeta de presentación con HTML y CSS! ¿Estás buscando darle un impulso profesional a tu portafolio? ¿Quieres destacar entre la multitud con una tarjeta de presentación única y personalizada? ¡Has llegado al lugar correcto!
En este tutorial, te guiaré paso a paso a través del proceso de creación de una tarjeta de presentación digital que no solo impresionará a tus contactos, sino que también te permitirá explorar y experimentar con tu propio código. Es importante destacar que este tutorial no se trata simplemente de copiar y pegar código, sino de comprender los fundamentos y usarlos como base para tu creatividad.
Como alguien que también está en el camino de aprendizaje del desarrollo web, entiendo las dudas y los desafíos que puedas enfrentar. ¡Pero no te preocupes! Estamos aquí para aprender juntos. A lo largo de estos 8 meses, he descubierto la emoción y la satisfacción de crear cosas nuevas con código, y quiero compartir esa emoción contigo.
Aqui te dejo un ejemplo de como se vera al finalizar
Así que prepárate para sumergirte en el mundo del desarrollo web y llevar tu presencia en línea al siguiente nivel. ¡Vamos a empezar!
Requisitos
Comencemos
- Creemos nuestro entorno de trabajo!
1.1. Lo primero que debemos hacer es crear una carpeta con el nombre del proyecto que estamos realizando (En este caso te recomiendo nombrarla como “tarjeta-de-presentacion”) y abrirla en nuestro editor de código, lo puedes hacer dando click en cualquiera de estos lugares:
1.2. Habiendo creado la carpeta el siguiente paso es crear nuestro archivo HTML el cual comúnmente se le llama “índex” y a su vez debe finalizar con la extensión del archivo “.html” lo que nos da como resultado “índex.html”.
.
- Creemos el esquema básico de un archivo HTML
Todo archivo HTML debe tener un esqueleto básico, “html, head, title, body, etc.” en este caso no es necesario memorizarlos ya que VS code nos da una breve ayuda con la cual simplemente copiando html:5 nos crea de forma automática lo que estamos buscando, de la siguiente manera
- Ahora debes crear un archivo “styles.css”
El cual con la etiqueta <link> dentro de la sección de tu documento HTML, quedaran enlazadas la una con la otra aqui te muestro como
AHORA SI SE VIENE LO CHIDO!
**- Dentro del Body **
Ya habiendo enlazado anteriormente nuestro HTML con el CSS, lo siguiente que debemos hacer es crear la estructura de nuestra tarjeta dentro del , a continuación te dejare el codigo en HTML que use para que te puedas guiar:
<<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Mi Tarjeta Personal</title><linkrel="stylesheet"href="styles.css"><linkrel="stylesheet"href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@700&family=Encode+Sans+Semi+Condensed:wght@100;200;300;400;500;600;700;800;900&display=swap"></head><body><section><divclass="card"><imgsrc="ImagenDePortada.png"alt="DescipcionDeTuPortada"><imgid="perfil"src="fotodeperfil.png"alt="TuFoto"><div><pid="nombre">Tu Nombre</p><pid="profesion">FullStack Developer</p></div><divclass="country"><imgsrc="BanderaDeTuPais.png"alt="TuPais"><p>Colombia</p><ahref="LinkDeTuCertificado">English Certificate</a></div><spanclass="skills"><spanclass="skills-label">Skills</span><div><p>Html</p><p>Css</p><p>React.js</p><p>MySQL</p><p>Python</p></div></span><spanclass="socials"><divclass="linkedin"><ahref="LinkDeTuLinedIn"target="_blank"class="button1"><imgsrc="linkedin.png"alt="Logo-linkedin">
LinkedIn
</a></div><divclass="github"><ahref="LinkDeTuGithub"target="_blank"class="button2"><imgsrc="github.png"alt="Logo-github">
GitHub
</a></div></span><divclass="card-footer"><span><ahref="LinkDeTuCorreo">📨 E-mail</a></span></div></div></section></body></html>>
Recuerda que las imágenes que vayas a insertar deben estar, preferiblemente en la misma carpeta en la que tienes tu proyecto!.
- Continuamos con el CSS
Ahora que tienes la estructura de tu html, te darás cuenta que queda un poco frio y sin vida, para eso esta CSS! para que hagamos magia con el!
Aqui te dejo como lo hice:
< body{
margin: 0;
}
section {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
background: rgba(133, 133, 133, 0.613);
}
.card{
position: relative;
top: 10%;
width: 400px;
height: 500px;
background: rgb(40, 40, 40);
border-radius: 25px;
overflow: hidden;
border: 1px solid rgb(255, 255, 255);
box-shadow: 10px5px5pxrgba(0, 0, 0, 0.596);
}
.cardimg {
width: 100%;
height: 35%;
border-bottom: 1px solid white;
}
#perfil{
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
border-radius: 50%;
border: 2px solid white;
z-index: 10;
box-shadow: 10px5px5pxrgba(0, 0, 0, 0.238);
}
#nombre {
position: absolute;
text-align: center;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 20px;
font-weight: bold;
color: white;
font-family: "Encode Sans Semi Condensed", sans-serif;
}
#profesion {
position: absolute;
text-align: center;
top: 46%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 15px;
font-weight: lighter;
color: white;
font-family: "Encode Sans Semi Condensed", sans-serif;
}
.country {
display: flex;
align-items: center;
position: absolute;
top: 54%;
padding-top: 7px;
padding-bottom: 7px;
border-top: 0.5px dotted white;
border-bottom: 0.5px dotted white;
}
.countryimg {
width: 7%;
border-bottom: none;
padding-left: 15%;
}
.countryp {
margin: 0;
font-size: 15px;
font-weight: normal;
color: white;
font-family: "Encode Sans Semi Condensed", sans-serif;
padding-right: 12.5%;
}
.countrya {
color: white;
padding-left: 12.5%;
padding-right: 35px;
border-left: 0.5px dotted white;
font-weight: normal;
color: white;
font-family: "Encode Sans Semi Condensed", sans-serif;
}
.skills{
position: relative;
font-weight: bold;
color: white;
font-family: "Encode Sans Semi Condensed", sans-serif;
top: 30%;
padding-bottom: 5px;
}
.skills-label{
position: relative;
width:fit-content;
left: 5%;
}
.skillsdiv {
position: relative;
display: flex;
flex-direction: row;
justify-content: space-evenly;
font-weight: normal;
color: white;
font-family: "Encode Sans Semi Condensed", sans-serif;
padding-top: 5px;
padding-bottom: 15px;
border-bottom: 0.5px dotted white;
}
.skillsdivp{
position: relative;
border: 2px groove white;
box-sizing: content-box;
padding-left: 5px;
padding-right: 5px;
margin-top: 0;
margin-bottom: 0;
}
.socials.linkedina.button1 {
position: absolute;
left: 19%;
top: 82%;
background-color: rgba(120, 120, 120, 0.579);
border: 0.5px solid white;
cursor: pointer;
color: white;
font-family: "Encode Sans Semi Condensed", sans-serif;
display: flex;
align-items: center;
border-radius: 5px;
padding: 3px5px;
transition: 0.1s;
text-decoration: none;
width: fit-content;
}
.socials.linkedina.button1img {
width: 20px;
margin-right: 5px;
text-decoration: none;
}
.socials.linkedina.button1:hover {
text-decoration: none;
transform: scale(1.05);
}
.socials.githuba.button2 {
position: absolute;
left: 58%;
top: 82%;
background-color: rgba(120, 120, 120, 0.579);
border: 0.5px solid white;
cursor: pointer;
color: white;
font-family: "Encode Sans Semi Condensed", sans-serif;
display: flex;
align-items: center;
border-radius: 5px;
padding: 3px5px;
transition: 0.1s;
text-decoration: none;
width: fit-content;
}
.socials.githuba.button2img {
width: 20px;
margin-right: 5px;
text-decoration: none;
}
.socials.githuba.button2:hover {
text-decoration: none;
transform: scale(1.05);
}
.card-footer {
width: 100%;
height: 50px;
background: green;
display: flex;
justify-content: center;
position: absolute;
top: 90%;
align-items: center;
border-top: 1px solid white;
cursor: pointer;
}
.card-footer:hover {
transform: scale(1.05);
transition: 0.1s;
}
.card-footerspan {
width: 100%;
}
.card-footera {
padding: 4%40.5%;
text-decoration: none;
color: white;
font-family: "Encode Sans Semi Condensed", sans-serif;
font-weight: bold;
font-size: 18px;
height: 100%;
}
>
- Visualizacion de tu proyecto
Guarda ambos archivos y luego veala carpeta donde los tienes almacenados, busca tu archivo HTML y abrelo enel navegador de tu preferencia!
AHORA TIENES AL FRENTE TU CREACION!
Ya con esto finalizamos!
Recuerda, este Tutorial es solo una base conla cual puedes practicar y justo eso es lo que te recomiendo PRACTICA, en mi caso no soy ningún experto ni nada parecido, incluso creo que en este proyecto puede haber algunos errores, pero aunasí haz como yo, simplemente practica y practica que de tanto practicar te volverás un maestro del código!
