to_toster

by ElenaOr

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    

    <title></title>
</head>

<body>
    <main class="header">
        <div class="logo">

        </div>
        <nav class="nav">
            <div class="container">
                <ul class="navmenu">
                    <li class="navmenu-item"><a href="#" class="navmenu-link">Пункт</a></li>
                    <li class="navmenu-item"><a href="#" class="navmenu-link">Пункт</a></li>
                    <li class="navmenu-item"><a href="#" class="navmenu-link">Пункт</a></li>
                    <li class="navmenu-item"><a href="#" class="navmenu-link">Пункт</a></li>
                    <li class="navmenu-item"><a href="#" class="navmenu-link">Пункт</a></li>
                    <li class="navmenu-item"><a href="" class="navmenu-link">Пункт</a></li>
                </ul>
            </div>
        </nav>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi modi excepturi, qui dolorem. Omnis eveniet obcaecati earum quia doloribus dignissimos sed odit voluptate at in! Exercitationem repellendus, nihil, quibusdam soluta repudiandae minima magni aspernatur inventore ipsa explicabo quam aut deserunt porro quis sequi aperiam unde eum est architecto odio et culpa voluptatibus dolores mollitia qui. Earum magni ipsum et facere, veritatis, quisquam molestias debitis, veniam aliquam iure quia nam suscipit accusantium voluptatum rem laborum natus dignissimos magnam. Ducimus magni voluptate est dolor temporibus laboriosam dolorum, asperiores iste officiis id dolore ipsa unde numquam culpa laudantium, facilis ipsam consectetur ea sapiente suscipit voluptatum architecto deleniti. Suscipit quod cum voluptas, omnis blanditiis amet. Quae odit aliquid, consectetur tempora, aut impedit quod ut provident odio. Alias consectetur id iusto eaque sunt...

CSS

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.container {
  width: 80%;
  margin: 0 auto;
}

body {
  background: #797878;
}

.logo {
  width: 100%;
  height: 50px;
  background: #fff;
}

.nav {
  background: #131212;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  width: 100%;
}

.navmenu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  list-style: none;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.navmenu-item {
  height: 100%;
  margin: 10px 10px;
  padding: 10px 10px;
  text-align: center;
  border-radius: 25px;
}

.navmenu-link {
  text-decoration: none;
  color: #01692d;
  font-size: 14px;
  line-height: 1.5;
}

.navmenu-link:hover {
  font-weight: 400;
  color: #02e763;
}