Scribd Logo
Upload

Welcome to Scribd!

  • DOCTYPE html - Copia

    Uploaded by

    LucasSantiago
    0 views3 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    0 views3 pages

    DOCTYPE html - Copia

    Uploaded by

    LucasSantiago

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 3

    <!

    DOCTYPE html>
    <html lang="pt-BR">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Seu Site</title>
    <style>
    /* Estilo geral da navbar */
    header {
    background-color: #f4f4f4;
    padding: 20px;
    }

    .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
    }

    /* Estilizar o logo */
    .logo {
    flex: 1;
    }

    .logo a {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    text-decoration: none;
    }

    /* Estilizar o menu */
    .menu {
    flex:1 ;
    text-align: right;
    }

    .menu li {
    display: inline-block;
    margin-left: 20px;
    }

    .menu a {
    font-size: 18px;
    color: #333;
    text-decoration: none;
    text-transform: uppercase; /* Texto em maiúsculas */
    }

    .menu a:hover {
    color: #007bff; /* Cor do link ao passar o mouse */
    }
    main{
    background-color: #007bff;
    }

    </style>
    </head>
    <body>
    <header>
    <nav class="navbar">
    <div class="logo">
    <a href="#">Seu Logo</a>
    </div>
    <ul class="menu">
    <li><a href="#">Página Inicial</a></li>
    <li><a href="#">Sobre</a></li>
    <li><a href="#">Serviços</a></li>
    <li><a href="#">Contato</a></li>
    </ul>

    </nav>
    </header>

    <main>
    <h2>Conteúdo Principal</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
    semper
    lacinia quam sit amet ultricies. Nullam quis leo vel quam
    malesuada hendrerit. Proin at libero sed orci fermentum
    pulvinar. Sed nec quam eget lorem semper hendrerit. </p>
    </main>

    <script>
    // JavaScript para abrir/fechar o menu responsivo
    const menuToggle = document.querySelector('.menu-toggle');
    const menu = document.querySelector('.menu');

    menuToggle.addEventListener('click', () => {
    menu.classList.toggle('active');
    });
    </script>
    </

    You might also like