to_toster

by Bugemot

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. Praesentium eos nemo distinctio culpa, sapiente provident aspernatur quis dignissimos temporibus, necessitatibus obcaecati? Velit repellendus error nihil deserunt accusamus facilis veritatis, nulla itaque vero sunt cumque, deleniti voluptatem quae. Distinctio dolores, cum iusto saepe ipsam consectetur reprehenderit! Dicta molestias accusamus perspiciatis iste quam quis? Minima eius, aut soluta. Fugit dolorum dolorem molestias, sit maxime temporibus ut magnam debitis adipisci voluptates commodi aliquid alias iure eum nesciunt nobis obcaecati reprehenderit nostrum architecto hic assumenda, quisquam! Ipsum atque necessitatibus recusandae accusantium eum alias fuga quia molestiae voluptate odio adipisci neque quibusdam fugiat, eos quod in id! Autem voluptate optio, numquam dolore facilis voluptates, voluptas rerum cupiditate adipisci doloribus sequi minus eligendi deserunt possimus at...

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;
}