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>
    <header class="header">
        <div class="logo">
          PIC
        </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>
    </header>
    
</body>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit ab quas libero molestiae adipisci sapiente id dicta rerum, dolorem ad at, debitis porro itaque assumenda labore voluptates qui saepe. Fuga velit minima nisi mollitia aperiam. Libero voluptas officiis, vel molestias veritatis aperiam deleniti incidunt reiciendis quae voluptatum dolores odio modi praesentium eius temporibus excepturi facilis iure perspiciatis voluptates pariatur! Itaque repellendus aliquam veniam voluptatibus. Soluta quae magni rem at cupiditate neque saepe debitis perspiciatis, iste, provident vero voluptatibus ab tempora cum quos porro excepturi tenetur voluptates quia suscipit pariatur. Dolor, fugiat. Dolor nemo fuga, harum vero quibusdam reiciendis vitae facere!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio in possimus rem delectus ad explicabo iste ratione veritatis magnam molestiae nihil cum quod repellat eaque illum...

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: #ccc;
}

.nav {
  background: #131212;
  position: -webkit-sticky;
  position: sticky;
  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;
}