1

Como crear la portada de una landing-page

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;
   

![](Captura de pantalla 2025-01-24 190411.png

Escribe tu comentario
+ 2