Scribd Logo
Upload

Welcome to Scribd!

  • 4 views

    Pagina Web Basica: Doctype HTML Head Meta Meta Meta Link

    Uploaded by

    Giordano Carcerieri
    This document contains the code for a basic website page with HTML and CSS. The HTML includes a header with a menu and logo, and a sidebar menu. The CSS styles the header as fixed to the top, styles the menu links, and positions and styles the sidebar menu to slide in from the left on click.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd

    Pagina Web Basica: Doctype HTML Head Meta Meta Meta Link

    Uploaded by

    Giordano Carcerieri
    4 views6 pages
    This document contains the code for a basic website page with HTML and CSS. The HTML includes a header with a menu and logo, and a sidebar menu. The CSS styles the header as fixed to the top, styles the menu links, and positions and styles the sidebar menu to slide in from the left on click.

    Original Title

    Untitled

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    This document contains the code for a basic website page with HTML and CSS. The HTML includes a header with a menu and logo, and a sidebar menu. The CSS styles the header as fixed to the top, styles the menu links, and positions and styles the sidebar menu to slide in from the left on click.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    4 views6 pages

    Pagina Web Basica: Doctype HTML Head Meta Meta Meta Link

    Uploaded by

    Giordano Carcerieri
    This document contains the code for a basic website page with HTML and CSS. The HTML includes a header with a menu and logo, and a sidebar menu. The CSS styles the header as fixed to the top, styles the menu links, and positions and styles the sidebar menu to slide in from the left on click.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    You are on page 1of 6

    <!

    DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/
    all.min.css">
        <link rel="stylesheet" href="style.css">
        <title>Pagina web basica</title>

    </head>
    <body>
       
    </body>
    </html><body>
        <header class="header">
            <div class="container">
            <div class="btn-menu">
                <label for="btn-menu">☰</label>
            </div>
                <div class="logo">
                    <h1>"LUMINAKIA 2001"</h1>
                </div>
                <nav class="menu">
                    <a href="#">Inicio</a>
                   
                </nav>
            </div>
        </header>
        <div class="capa"></div>
    <!--    --------------->
    <input type="checkbox" id="btn-menu">
    <div class="container-menu">
        <div class="cont-menu">
            <nav>
               
                <a href="#">Servicios</a>
                <a href="#">correo electronico</a>
                <a href="#">conctato</a>
                <a href="#">chat</a>
            </nav>
            <label for="btn-menu">✖️</label>
        </div>
    </div>
    </body>
    </html>
    style.css
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Montserrat Alternates', sans-serif;
    }
    body{
        background: url(maxresdefault.jpg);
        background-size: 100vw 100vh;
        background-repeat: no-repeat;
    }
    .capa{
        position: fixed;
        width: 100%;
        height: 100vh;
        background: rgba(0,0,0,0.6);
        z-index: -1;
        top: 0;left: 0;
    }
    /*Estilos para el encabezado*/
    .header{
        width: 100%;
        height: 100px;
        position: fixed;
        top: 0;left: 0;
    }
    .container{
        width: 100%;
        max-width: 1200px;
        margin: auto;
    }
    .container .btn-menu, .logo{
        float: left;
        line-height:100px;
    }
    .container .btn-menu label{
        color: #fff;
        font-size: 25px;
        cursor: pointer;
    }
    .logo h1{
        color: #fff;
        font-weight: 400;
        font-size: 22px;
        margin-left: 40px;
    }
    .container .menu{
        float: right;
        line-height: 100px;
    }
    .container .menu a{
        display: inline-block;
        padding: 15px;
        line-height: normal;
        text-decoration: none;
        color: #fff;
        transition: all 0.3s ease;
        border-bottom: 2px solid transparent;
        font-size: 15px;
        margin-right: 5px;
    }
    .container .menu a:hover{
        border-bottom: 2px solid #c7c7c7;
        padding-bottom: 5px;
    }
    /*Fin de Estilos para el encabezado*/

    /*Menù lateral*/
    #btn-menu{
        display: none;
    }
    .container-menu{
        position: absolute;
        background: rgba(0,0,0,0.5);
        width: 100%;
        height: 100vh;
        top: 0;left: 0;
        transition: all 500ms ease;
        opacity: 0;
        visibility: hidden;
    }
    #btn-menu:checked ~ .container-menu{
        opacity: 1;
        visibility: visible;
    }
    .cont-menu{
        width: 100%;
        max-width: 250px;
        background: #1c1c1c;
        height: 100vh;
        position: relative;
        transition: all 500ms ease;
        transform: translateX(-100%);
    }
    #btn-menu:checked ~ .container-menu .cont-menu{
        transform: translateX(0%);
    }
    .cont-menu nav{
        transform: translateY(15%);
    }
    .cont-menu nav a{
        display: block;
        text-decoration: none;
        padding: 20px;
        color: #c7c7c7;
        border-left: 5px solid transparent;
        transition: all 400ms ease;
    }
    .cont-menu nav a:hover{
        border-left: 5px solid #c7c7c7;
        background: #1f1f1f;
    }
    .cont-menu label{
        position: absolute;
        right: 5px;
        top: 10px;
        color: #fff;
        cursor: pointer;
        font-size: 18px;
    }
    /*Fin de Menù lateral*/

    You might also like