1. **comienza agregando el h1, h2 y h3 para darles tamaño, color, tipografía y posicionarlos.
<code>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/estilos.css">
<title>Bookmate</title>
</head>
<body>
<div class="container">
<h1 class="text">Bookmate es una forma conveniente de leer y escuchar libros</h1>
</div>
<h2 class="h2">Agrega amigos, obtén recomendaciones personalizadas, deja tus opiniones y carga tus propios libros.</h2>
<h3 class= "h3">
<p>¡Comienza tu suscripción gratuita!</p>
<p>Regístrate o inicia sesión.</p>
<p class="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 <a href="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>
<section class="promo-container">
<input type="text" id="promocion" placeholder="Tu código de promoción">
<button class="ingresar">Unirse o ingresar</button>
<button class="aceptar">ACEPTAR</button>
</section>
4: CSS
<code>
#promocion {
width: 276px;;
height: 58px;
border: 1px solid #ccc;
border-radius: 12px;
margin-bottom: 10px;
box-shadow: 0 4px 8px 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>
<div class=" triangulo"></div>
<div class="circulo"></div>
<section>
<img class="cookies-img" src="./css/cookies.png" alt="cookies">
<img class="pie" src="./css/pie.png" alt="pie">
<img class="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: -5px 8px 0px rgba(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;
Curso de Frontend Developer
0 Comentarios
para escribir tu comentario
