[Proyecto] Haga lo que hicimos en aula | Layouts Responsivos: Trabajando con layouts mobile | Alura Latam

BASES.CSS

:root{
--background-llamada-mobile: #00161C;
--background-blanco: #FFFFFF;
--background-azul-claro: #DFE3F5;
--background-ceniza-claro: #F7F4F4;
--background-ceniza-medio: #D9D9D9;
--border-cabecera-mobile: #103D4A;
--boton-rojo: #B72E2E;
--fuente-ceniza-claro: #666666;
--fuente-ceniza-oscuro: #4F4C4C;
--planes-card-start: #035A76;
--planes-card-ultra: #690F8E;
--planes-card-mega: #B00024;
--fuente-enlace: #0006FF;
--background-footer: #333333;
--montserrat: "Montserrat", sans-serif;
--open-sans:"Open Sans", sans-serif;
}

body{
    font-family:var(--open-sans);
}
.container{
    padding-right: 6%;
    padding-left: 6%;
}
.boton{
    text-align: center;
    display: block;
    width: 100%;
    max-width: 350px;
    box-sizing: border-box;
    padding: 1rem 2rem;
    border: 1px solid var(--boton-rojo);
    border-radius: 5px;
}

INDEX.HTML

<!DOCTYPE html>
<html>
    <head>
    <meta name="viewport" content="width-device-width initial-scale=1.0">
    <meta charset="utf-8">
    <title>Home │ Apeperia</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&family=Open+Sans:wght@300;400;700&display=swap" rel="stylesheet">
    <link href="css/reset.css" rel="stylesheet">
    <link href="css/head.css" rel="stylesheet">
    <link href="css/llamada.css"rel="stylesheet">

    <link href="css/bases.css"rel="stylesheet" >
     </head>
     <body>
     <header class="head  container">
        <img src="img/logo-apeperia.svg" alt="logo de Apeperia" class="head__logo">
        <nav class="head__navegacion ">
            <ul>
                <li class="head__enlace"><a href="#">Sobre</a></li>
                <li class="head__enlace"><a href="#">Planes</a></li>
                <li class="head__enlace"><a href="#">Blog</a></li>
                <li class="head__enlace"><a href="#">Destacados</a></li>
                <li class="head__enlace"><a href="#">Institucional</a></li>
                <li class="head__enlace"><a href="#">Contacto</a></li>
            </ul>
        </nav>
    </header>
   <main>
    <section class="llamada  container">
        <h1 class="llamada__titulo">Aplicaciones en la medida</h1>
        <p class="llamada__texto">Apeperia es una empresa emergente con una manera inovadora de comprar y crear aplicaciones móviles y web.</p>
        <a href="#"class="llamada__boton boton">Conozca los planes</a>
    </section>
   </main>


    </body>
</html>