¡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>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="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;
}
div div{
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: 2px 3px 15px #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>
<div class="tarjeta">
<section>
<div class="card">
<div class="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>
<div class="imagen">
<img class="img" src="./foto.png" alt="Fotoperfil">
<div class="circulo"></div>
<div class="circulo2"></div>
<div class="circulo3"></div>
</div>
</div>
</section>
<section class="barrainferior">
<div class="abajo">
<div class="logos">
<img class="icono" src="./goal.png" alt="años">
<div>
<h3>5</h3>
<h5>Años</h5>
</div>
</div>
<div class="logos">
<img class="icono" src="./project.png" alt="proyectos">
<div>
<h3>+50</h3>
<h5>Proyectos</h5>
</div>
</div>
<div class="logos">
<img class="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! 🤠🤝
Curso de Frontend Developer
