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.

Video Landing Page Maquetación
SUSCRÍBETE A NUESTRO CANAL SÍGUENOS EN FACEBOOK

¿Cómo diseñar una Landing Page con HTML, CSS y Javascript?

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>

 

¿Quieres descargar el código fuente Landing Page con Html+Css y Js?
...por favor suscríbete gratuitamente para descargarlo

CSS HTML Javascript

Download

Comparte el código!...talvez tu amigo lo necesite!

Whatsapp Messenger Facebook Twitter

Visitado 672 veces | Publicado hace 9 meses

Curso HTML + CSS Página Web Básica

Mira el temario del curso en el siguiente link

VER EL CURSO

Logo Codea App

Develop your code

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

You Fb Tik Pin

© Todos los derechos reservados CODEA APP | Cursos de programación avanzados con proyectos reales | 2020 - 2021