1. **comienza agregando el h1, h2 y h3 para darles tamaño, color, tipografía y posicionarlos.
<code><!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><linkrel="stylesheet"href="css/estilos.css"><title>Bookmate</title></head><body><divclass="container"><h1class="text">Bookmate es una forma conveniente de leer y escuchar libros</h1></div><h2class="h2">Agrega amigos, obtén recomendaciones personalizadas, deja tus opiniones y carga tus propios libros.</h2><h3class= "h3"><p>¡Comienza tu suscripción gratuita!</p><p>Regístrate o inicia sesión.</p><pclass="cookies">En este sitio web, usamos cookies para mejorar la experiencia de navegación, de modo que al usar el sitio, aceptas este punto. Puedes encontrar mas información <ahref="Aquí" >Aquí.</a></p></h3>
2: Agregamos el diseño al h1, h2, h3 en css y le agragamos un background al body
<code>
html {
font-size: 62.5%;
}
* {
margin: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
padding: 0;
height: 100vh;
box-sizing: border-box;
background: #39bf8d;
}
.container {
width: 406px;
height: 100px;
text-align: center;
line-height: 38px;
position: absolute;
top: 30%;
left: 35%;
z-index: 2;
}
.text {
font-family: 'Times New Roman', Times, serif;
text-shadow: none;
font-size: 4em;
font-weight: 550;
}
.h2 {
position: absolute;
top: 54%;
left: 35%;
width: 405px ;
text-align: center;
font-family: "Work Sans", serif;
font-optical-sizing: auto;
font-weight: lighter;
font-size: 1.8em ;
line-height: 28px;
}
.h3 {
color: white;
font-size: 1.5em;
font-weight: lighter;
text-align: center;
margin-top: 41%;
left: 10%;
3: Agregamos un input tipo texto y un botón de ingresar. en HTML le agregamos al input el atributo “placeholder” para indicarle al usuario que debe hacer en el input
<code><sectionclass="promo-container"><inputtype="text"id="promocion"placeholder="Tu código de promoción"><buttonclass="ingresar">Unirse o ingresar</button><buttonclass="aceptar">ACEPTAR</button></section>
4: CSS
<code>
#promocion {
width: 276px;;
height: 58px;
border: 1px solid #ccc;
border-radius: 12px;
margin-bottom: 10px;
box-shadow: 04px8px rgba(0, 0, 0, 0.2);
position: absolute;
top: 68%;
left: 39%;
}****
::placeholder {
text-align: center;
font-size: 1.5em;
}
.ingresar {
background-color: #3455f4;
color: white;
width: 142px;
height: 47px;
border: none;
border-radius: 6px;
position: absolute;
top: 82%;
left: 44%;
}
5 agregamos imagenes
<code>
<divclass=" triangulo"></div>
<div class="circulo"></div>
<section>
<imgclass="cookies-img"src="./css/cookies.png"alt="cookies"><imgclass="pie"src="./css/pie.png"alt="pie"><imgclass="cuerpo"src="./css/cuerpo.png"alt="cuerpo"></section></body></html>
6 las posicionamos, le damos tamaño y horma
<code>
.triangulo {
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-top: 60px solid orange;
position: absolute;
top: 7%;
left: 19%;
transform: rotate(-15deg)
}
.circulo {
width: 50px;
height: 50px;
border-radius: 50%60%45%55%;
transform: scale(1.1, 0.95) rotate(-5deg);
box-shadow: -5px8px0pxrgba(0, 0, 0, 0.2);
background-color: orange;
position: absolute;
top: 38%;
left: 12%;
}
.pie {
width: 300px;
height: 380px;
position: absolute;
left: 14%;
top: 19%;
}
.cuerpo {
width: 250px;
height: 320px;
position: absolute;
right: 14%;
top: 5%;
}
6 Por ultimos agregamos el mensaje de las cookies y le damos estilo
<code>
.cookies {
background-color: white;
width: 180px;
height: 200px;
padding-top: 40px;
padding-left: 10px;
padding-right: 10px;
border-radius: 15px;
text-align: justify;
line-height: 1.2;
color: black;
position: absolute;
left: 83%;
top: 58%;
z-index: 3;
}
.aceptar {
width: 148px;
height: 39px;
background-color: #30221b;
color: white;
font-size: 1.2em;
border-radius: 6px;
position: absolute;
top: 90%;
left: 85%;
z-index: 4;
}
.cookies-img {
width: 64px;
height: 64px;
position: absolute;
left: 82%;
top: 53%;
z-index: 5;
![](