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;
Retro Bowl isn’t just banking on nostalgia—it actually plays well. The controls are responsive, the pixel art is beautiful, and it’s packed with personality. Definitely worth downloading.
Excellent work, Manuela! Your project on how to create a landing page cover is a remarkable example of creativity, structure, and understanding of modern web design. Geometry Dash