Inicio » Blog » HTML + CSS

30 junio, 2020

Landing Page con Html+Css y Js

Para maquetar una landing page debemos distribuir los elementos que la compondrán como el menu, las secciones internas.

Ver video en

Suscríbete a nuestro canal en Youtube

Suscríbirse

Para maquetar una landing page debemos distribuir los elementos que la compondrán como el menu, las secciones internas.

Veamos el código:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap" rel="stylesheet">
    <title>PAGINA 5</title>
    <style>
        :root{
            --colorPrimario: rgb(82, 44, 249);
            --colorSecundario: blueviolet;
            --colorBlanco: white;
            --colorGris: rgb(177, 177, 177)
        }
        html,body{
            margin: 0;
        }
        body{
            font-family: 'Raleway', sans-serif;
        }
        .logo{
            text-align: center;
            color:var(--colorPrimario);
        }
        .logo span{
            color:var(--colorSecundario);
        }
        ul{
            display: flex;
            list-style: none;
            justify-content: space-evenly;
            padding: 20px;
            
            background: linear-gradient(
                90deg,
                var(--colorPrimario),
                rgba(82, 44, 249, 0.461),
                var(--colorPrimario)
            );
        }
        ul li a{
            color:var(--colorBlanco);
            text-decoration: none;
            text-shadow: 0px 0px 2px black;
            font-size: 17px;
        }
        ul li a:hover{
            border-bottom: 1px solid var(--colorBlanco);
            padding-bottom: 5px;
        }
        #pagina_empresa, #pagina_servicios,#pagina_contacto{
            display: none;
            padding: 50px;
            border-radius: 50px;
            margin: 20px;
            color:var(--colorBlanco);
            box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.516);
            background: linear-gradient(
                45deg,
                var(--colorPrimario) 90%,
                var(--colorBlanco) 90%
            );
        }
        #pagina_inicio{
            display: flex;
            justify-content: space-evenly;
            align-items: center;
        }
        #pagina_inicio div img{
            width: 300px;
            animation: chica 4s infinite ease-in-out;
        }
        @keyframes chica {
            0%{ transform: translateY(-10%)}
            50%{ transform: translateY(0%)}
            100%{ transform: translateY(-10%)}
        }
        #pagina_inicio div a{
            border: 1px solid var(--colorPrimario);
            border-radius: 25px;
            padding: 10px 20px;
            text-decoration: none;
            color: var(--colorPrimario)
        }
        #pagina_inicio div a:hover{
            background: var(--colorPrimario);
            color: var(--colorBlanco)
        }

       ...
        }
           
    </style>
</head>
<body>
    <h1 class="logo">CODEA <span>APP</span></h1>
    <ul>
        <li><a href="#" class="boton" id="inicio">INICIO</a></li>
        <li><a href="#" class="boton" id="empresa">EMPRESA</a></li>
        <li><a href="#" class="boton" id="servicios">SERVICIOS</a></li>
        <li><a href="#" class="boton" id="contacto">CONTACTO</a></li>
    </ul>

    <div class="page">
        <div id="pagina_inicio">
            <div><a href="">WhatsApp</a></div>
            <div><img src="img/chica.png"></div>
            <div><a href="">Facebook</a></div>
        </div>
        <div id="pagina_empresa">
            <div class="">
                <h2>EMPRESA</h2>
                <div>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus voluptate non quidem aut deserunt autem porro nesciunt itaque? Animi necessitatibus adipisci nobis molestiae veritatis odio illum. Soluta ex itaque perferendis! Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe quasi, facere omnis tempore, fugit aperiam in eius sequi ullam accusantium ea ut a dignissimos maxime optio repudiandae eveniet laudantium ipsam.</p>
                </div>
            </div>
        </div>
        <div id="pagina_servicios">
            <div class="">
                <h2>SERVICIOS</h2>
                <div>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus voluptate non quidem aut deserunt autem porro nesciunt itaque? Animi necessitatibus adipisci nobis molestiae veritatis odio illum. Soluta ex itaque perferendis! Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe quasi, facere omnis tempore, fugit aperiam in eius sequi ullam accusantium ea ut a dignissimos maxime optio repudiandae eveniet laudantium ipsam.</p>
                </div>
            </div>
        </div>
        <div id="pagina_contacto">
            <div class="">
                <h2>CONTACTO</h2>
                <div>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus voluptate non quidem aut deserunt autem porro nesciunt itaque? Animi necessitatibus adipisci nobis molestiae veritatis odio illum. Soluta ex itaque perferendis! Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe quasi, facere omnis tempore, fugit aperiam in eius sequi ullam accusantium ea ut a dignissimos maxime optio repudiandae eveniet laudantium ipsam.</p>
                </div>
            </div>
        </div>
    </div>

    ...

</body>
</html>

 


Leido 4220 veces

Descarga el código fuente HTML + CSS

Recurso descargado 572 veces

USD

Descargar Código Fuente

Compartir link del tutorial con tus amigos


HTML HTML

Curso de HTML Básico - Aprende a crear páginas web desde cero

Descarga del código fuente

USD 0.00

Diseño de  una Página Web en HTML & CSS Diseño de una Página Web en HTML & CSS

Curso de Diseño de una Página Web en HTML & CSS

Descarga del código fuente

USD 0.00

Aprende más sobre HTML + CSS

Cursos de programación

Codea Codea App

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú

© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023