¡Bienvenidxs a mi primer tutorial en Platzi! 💚🥳
En este increíble tutorial te enseñaré cómo construir esta increíble tarjeta de presentación con HTML y CSS:
Vamos a seguir este tutorial juntos, y tal vez al principio no seamos los más profesionales, pero no te preocupes por eso. Lo que realmente no debe importar es que estamos aquí para aprender y mejorar como desarrolladores FrontEnd, es por eso que este tutorial representa un gran avance en nuestro camino . Todos empezamos desde cero, es normal sentir miedo o angustia, pero lo importante es seguir adelante y no parar de aprender. 🤓❤️
👀 Con este tutorial espero que puedas disfrutar el proceso de aprendizaje y seguir enriqueciendo tus conocimientos con más cursos y tutoriales. Recuerda que la programación es un universo gigante donde la practica hace al maestro.💻👾🤖
Estoy muy feliz de compartir esta experiencia contigo y ver cómo podemos hacer crecer nuestras habilidades.💚
¡Manos a la obra! 👨🏻💻🤩
1. Creación del archivo HTML 📄
Lo primero que haremos, una vez en Visual Studio crearemos un nuevo archivo HTML llamado “index.html” con el siguiente código:
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Tarjeta personal</title><style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: poppins;
}
section{
display: flex;
justify-content: center;
}
.tarjeta{
position: absolute;
}
.card{
display: flex;
width: 900px;
height: 400px;
padding: 40px;
background: #fdf8f7;
border-radius: 20px;
justify-content: center;
align-items: center;
overflow: hidden;
}
.text{
width: 350px;
}
divdiv{
margin: 20px;
}
.img{
position: absolute;
width: 350px;
z-index: 1;
top: -47px;
}
.circulo{
position: relative;
background: #fd6e0a;
border-radius: 50%;
width: 220px;
height: 220px;
top: 200px;
right: -30px;
z-index: 0;
}
.circulo2{
position: relative;
background: #fd6f0a2d;
border-radius: 50%;
width: 200px;
height: 200px;
top: -70px;
right: -60px;
z-index: 0;
}
.circulo3{
position: relative;
background: #fd6f0a0e;
border-radius: 50%;
width: 180px;
height: 180px;
top: -310px;
right: -100px;
z-index: 0;
}
.abajo{
display: flex;
width: 600px;
height: 80px;
padding: 10px;
justify-content: space-between;
align-items: center;
background: white;
border-radius: 100px;
box-shadow: 2px3px15px#ECF0F1 ;
}
.barrainferior{
position: relative;
top: -80px;
z-index: 2;
}
h1{
color: #15295f;
font-size: 40px;
}
h2{
color: #15295f;
}
h3{
color: #15295f;
}
h5{
color: #fd6e0a;
}
p{
color: #989898;
font-size: 14px;
}
.icono{
width: 50px;
}
.logos{
display: flex;
justify-content: space-between;
align-items: center;
}
</style></head><body><divclass="tarjeta"><section><divclass="card"><divclass="text"><h5>Hola, soy</h5><h1>Julian Ruiz</h1><h5>Ingeniero Multimedia</h5><br><p>Me considero una persona creativa, apasionada, proactiva, visionaria, adaptable al cambio, con facilidad de aprender cosas nuevas, liderar y trabajar en equipo. Disfruto creando soluciones mediadas por tecnología que causen impacto en las personas.</p><br></div><divclass="imagen"><imgclass="img"src="./foto.png"alt="Fotoperfil"><divclass="circulo"></div><divclass="circulo2"></div><divclass="circulo3"></div></div></div></section><sectionclass="barrainferior"><divclass="abajo"><divclass="logos"><imgclass="icono"src="./goal.png"alt="años"><div><h3>5</h3><h5>Años</h5></div></div><divclass="logos"><imgclass="icono"src="./project.png"alt="proyectos"><div><h3>+50</h3><h5>Proyectos</h5></div></div><divclass="logos"><imgclass="icono"src="./users.png"alt="clientes"><div><h3>30</h3><h5>Clientes</h5></div></div></div></section></div></body></html>2. Es hora de que le des tu toque 🧩🔧
Atrévete y modifica los elementos con tus propios títulos, imágenes y descripciones. Experimenta con el código HTML y CSS para estilizar la tarjeta a tu gusto. Recuerda que esto no tiene porque ser una camisa de fuerza, sé curioso y prueba combinaciones diferentes. 🎨
3. Es hora de ver tu obra maestra 🖥️👨🏼🎨
Guarda los archivos HTML y CSS, abre el archivo HTML en tu navegador web y sorpréndete con tu hermosa tarjeta personalizada. 🤓😎
.
¡Felicidades! 🥳🎊🎉
Has terminado este tutorial utilizando HTML y CSS, de verdad espero que este tutorial haya sido útil y que aprendieran cosas nuevas. Si tienes alguna pregunta, no dudes en dejarme un comentario. ¡Hasta un próximo tutorial! ¡Adiós! 🤠🤝
