Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <title>Kjnetsecuryt</title>
- <style>
- *{
- margin: 0;
- padding: 0;
- text-decoration: none;
- list-style: none;
- font-size: 18px;
- }
- body{
- }
- header{
- width: 100%;
- position: fixed;
- display: flex;
- justify-content: center;
- background-color: #cecece;
- }
- header ul {
- max-width: 900px;
- height: 60px;
- display: flex;
- }
- li{
- margin: 0 auto;
- padding: 20px 20px;
- }
- header li a{
- color: #fff;
- font-weight: 900;
- }
- section{
- height: 100vh;
- display: grid;
- justify-content: center;
- align-content: center;
- }
- main section:nth-child(odd){
- background-color: #A9A9A9;
- font-size: 2em;
- color: #fff;
- }
- main section:nth-child(even){
- background-color: #D3D3D3;
- font-size: 2em;
- color: #A9A9A9;
- }
- </style>
- </head>
- <body>
- <header>
- <nav>
- <div class="menu">
- <ul>
- <li><a href="#home">Home</a></li>
- <li><a href="#sobre">Sobre</a></li>
- <li><a href="#produtos">Produtos</a></li>
- <li><a href="#contato">Contato</a></li>
- </ul>
- </div>
- </nav>
- </header>
- <main>
- <section id="home">Home</section>
- <section id="sobre">Sobre</section>
- <section id="produtos">Produtos</section>
- <section id="contato">Contato</section>
- </main>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement