thedev<header>
  <div class="logo">
    Logo
  </div>
  <ul class="nav-links">
    <li>
      <a href="https://akashdeshpande.hashnode.dev">Blog</a>
    </li>
    <li>
      <a href="https://www.twitter.com/akashthedev" target="blank">Contact</a>
    </li>
  </ul>
</header>

<main>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis possimus tenetur ut doloribus minima saepe totam odio sapiente vitae cumque, dolor impedit debitis atque consequuntur hic magni numquam itaque eaque.
  Maxime iusto eaque corporis consectetur ex, sint soluta inventore voluptate eos itaque veniam voluptatem nisi enim, quasi a dolore. Rem fuga dolorum repudiandae perspiciatis sed magnam? Tenetur voluptatibus veniam nesciunt.
  Ea mollitia modi facere eaque iure, soluta optio deleniti obcaecati rem ad, pariatur totam cupiditate quis veniam illo debitis suscipit excepturi minima tempore cumque nesciunt qui. Enim eveniet ipsum perferendis!
  Molestiae, quo sunt optio accusantium odit enim culpa suscipit, ut, omnis voluptatum velit consequuntur vero! Molestias unde repudiandae porro eveniet debitis sit assumenda eos deserunt. Accusamus velit minima magni deserunt?
  Minima dolores dolor quidem non temporibus facilis voluptatem necessitatibus voluptas numquam aperiam praesentium maxime debitis ad ipsum blanditiis laudantium porro alias fugit, laboriosam harum animi minus. Dolorem neque ducimus vero.
  Hic aliquid ipsa itaque. Numquam perferendis cupiditate deserunt aut libero omnis recusandae, voluptates tempore voluptatum sapiente totam quam laudantium blanditiis voluptatem ratione sunt vero aperiam! Inventore doloribus totam dolorem exercitationem?
  Enim debitis ullam molestiae quod obcaecati aspernatur dolorem vitae ducimus excepturi perspiciatis, architecto sunt doloremque, esse accusamus? Hic ipsum blanditiis quae error, nemo deserunt doloremque quia nostrum magnam, commodi eos?
  Magnam mollitia quis debitis asperiores eius omnis quaerat ab, quo sunt ipsam laborum earum voluptate tenetur? Ipsam, excepturi sunt a pariatur quam quos molestias deserunt cupiditate corporis aliquid saepe in.
  Quas fugiat sint a soluta deserunt est molestias tenetur earum, labore sapiente cumque aliquam commodi quia esse consequuntur exercitationem eveniet modi minus nulla maiores? Mollitia dignissimos reprehenderit ex tenetur provident.
  Error consequuntur quae inventore. Nisi sed, expedita tenetur nesciunt repellat quis vero nihil qui officia incidunt autem ducimus commodi corrupti itaque alias tempore eligendi adipisci perferendis molestiae similique laboriosam facilis.
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia qui suscipit, ratione eum iure accusantium nemo aspernatur aut vel excepturi dolore aliquam quis. Tenetur corrupti nesciunt eveniet ipsam aperiam consequatur?
  Tempore vel est voluptatibus inventore amet quasi, eum facilis nobis eaque placeat vero quas illo quae consectetur aperiam illum exercitationem rem quos reprehenderit molestiae repudiandae aliquam modi fuga deleniti! Eveniet.
  Consequuntur quis voluptate enim eos. Et ipsam accusamus minus dolore eveniet sit, animi incidunt numquam eaque blanditiis expedita, laboriosam aliquam quidem magnam temporibus, quis rerum ex ab deleniti nobis repellendus.
  Nulla cum amet veniam ab, dolores quae exercitationem iure magnam, saepe culpa laudantium, soluta nam nobis unde voluptatum. Cupiditate maxime voluptate id sint non quos cumque odit eos assumenda maiores.
  Expedita ipsa reprehenderit eum. Quae quo ducimus tempora repellendus porro labore aut, nulla sunt soluta ipsum perferendis modi, ipsam accusantium nobis mollitia ut quam aliquam minima recusandae? Saepe, dolorem blanditiis?
  Quis quam nulla maxime cum, commodi nobis optio iure velit eligendi minima, veritatis dolor ut nihil, expedita veniam voluptate illum nostrum earum at vel blanditiis? Eaque commodi itaque consequatur suscipit?
  Magni quasi ratione distinctio eum, enim voluptatibus omnis tempora velit dolore cupiditate tenetur aperiam quo mollitia officiis nam consectetur a itaque delectus fugiat excepturi ut similique incidunt magnam. Voluptatum, laborum?
  Dolores dicta corrupti id recusandae totam dolore enim cum quos alias? Pariatur harum, amet maxime illo deleniti vel veritatis adipisci, eos omnis ea aspernatur quaerat ab aperiam cum eaque minima.
  Quae sunt maiores, mollitia sapiente aspernatur possimus facere ipsum voluptatibus eligendi quaerat similique assumenda minus qui veniam voluptate repellendus architecto aliquid at, error voluptatum! Quaerat sunt repudiandae exercitationem dicta cupiditate!
  Maiores voluptatum itaque iste officiis, laboriosam quam accusantium recusandae cumque? Ex deleniti incidunt quasi ducimus, numquam voluptas nam nulla similique illo provident, sapiente vitae veritatis pariatur architecto atque ipsam inventore?
  Iusto exercitationem eos similique, cupiditate natus nisi itaque distinctio asperiores ratione, nobis, et tenetur recusandae dolores atque. Voluptates, minus amet. Sit consequatur vero ratione perferendis enim, alias vel nam numquam!
  Porro ullam error commodi provident? Ipsum molestias minus, quisquam ab ducimus explicabo quia fugit incidunt magnam voluptatibus doloribus provident nobis amet beatae corporis asperiores tempore aut veniam fuga vero? Temporibus.
  Ratione deserunt alias dicta! Molestiae quis voluptas praesentium rem unde ipsa id quia, iure illum earum consequatur ex laudantium ad reiciendis temporibus, dolorem tempora natus architecto! Delectus asperiores itaque natus.
  Dolorem eius hic repellendus molestias veniam deleniti quasi dolores. Quaerat voluptatibus reiciendis maiores facilis dicta quas, voluptatum ex. Eos aut, eius commodi veniam recusandae unde magnam nihil? Inventore, accusantium quia?
  Adipisci cupiditate odio voluptates iusto dolorum ducimus enim distinctio nobis dolore harum itaque rerum quibusdam, vel laboriosam fuga, deserunt soluta atque consequuntur, ex quam quae aut neque. Laboriosam, rem veritatis?
  Odio animi in excepturi ullam, doloribus optio laborum dolores delectus harum recusandae possimus minus illum esse ab ipsa, mollitia corrupti eum suscipit! In eum laboriosam sunt, vero sapiente voluptatem accusamus!
  Soluta corrupti sequi illo. Facilis nobis excepturi quaerat nesciunt illo minima doloremque, autem doloribus fugit reprehenderit sit? Voluptatibus ipsum quibusdam harum aut fuga obcaecati eum esse! Alias nisi tempora reprehenderit.
  Accusamus aliquid numquam, vel animi aspernatur dolore sit quas nemo exercitationem sapiente tempore vero ducimus delectus officiis neque esse perspiciatis porro error similique. Vero voluptates debitis consequatur, expedita voluptatibus nesciunt?
  Impedit ipsum amet quas expedita obcaecati qui. Nulla quidem aut quas, molestias iste repudiandae doloremque enim? Quae atque adipisci a fuga recusandae voluptates rerum. Aperiam reprehenderit soluta ipsa ratione inventore.
  Dicta cupiditate eligendi tempora exercitationem incidunt voluptates animi esse nobis quod saepe nihil odio quae, ex repudiandae, error ipsam minima libero delectus, vitae suscipit. Vel voluptas quas esse tenetur aperiam.
</main>
/* imports */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;900&display=swap');

body{
  padding: 0;
  margin: 0;
  font-family: "Lato", sans-serif;
}

header {
  /* general styling */
  height: 80px;
  background-color: #eee;
  
  /* display part */
  display: flex;
  align-items: center;
  padding: 0 32px;
  justify-content: space-between;
  
  /* important part */
  position: fixed;
  width: 100%;
  box-sizing: border-box;
  top: 0;
}

.logo {
  font-size: 32px;
  font-weight: 900;
  color: #333;
}

.nav-links li {
  list-style: none;
  display: inline;
  padding-left: 32px;
}

.nav-links li a {
  color: #333;
  text-decoration: none;
}

.nav-links li a:hover {
  color: #ccc;
}

main {
  padding-top: 80px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.