Skip to content
Advertisement

Responsive nav bar not sticking on some screens

I am having a problem with the taskbar on my webpage. It is “sticky” on scroll down on a laptop screen, even when I resize the window to a size where the nav menu goes into a toggle.

However when I use the inspector to view it on IPhone or any screen type using the chrome inspector the “sticky” nav doesn’t work until I scroll halfway down the page and then back up.

I would also appreciate any corrections to help me improve my work so far, I am a total beginner.

const navSlide = () => {
  const burger = document.querySelector(".burger");
  const nav = document.querySelector(".nav-links");
  const navLinks = document.querySelectorAll(".nav-links li");
  const navLogo = document.querySelector("li.nav-logo");
  const navbar = document.querySelector('.main-nav');

  const sticky = navbar.offsetTop;

  window.addEventListener("scroll", stickyNav);

  function stickyNav() {
    if (window.scrollY >= sticky) {
      // document.body.style.paddingTop = navbar.offsetHeight + 'px';
      document.body.style.paddingTop = 0;
      navbar.classList.add('sticky');

    } else {
      navbar.classList.remove('sticky');
      document.body.style.paddingTop = 0;
    }
  }

  burger.addEventListener("click", () => {
    // Toggle Nav
    nav.classList.toggle("nav-active");

    //Animate navLinks
    navLinks.forEach((link, index) => {
      if (link.style.animation) {
        link.style.animation = ''
        navLogo.style.display = 'flex';

      } else {
        link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.45}s`;
        navLogo.style.display = 'none';
      }
    });
    //Burger animation
    burger.classList.toggle('toggle');
  });


}

navSlide();
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  caret-color: transparent;
  font-family: 'Roboto', sans-serif;
}


/* --------------------------------- Nav -------------------------------------------- */


/*Nav bar*/


/* Nav bar size and position */

.main-nav {
  display: flex;
  width: 100%;
  transition: all 0.5s linear;
  z-index: 1;
  font-family: 'Roboto', sans-serif;
}


/*List on the task bar*/

.nav-links {
  display: flex;
  justify-content: space-around;
  width: 100%;
  align-items: center;
  list-style: none;
  transition: all 0.05s linear;
  padding: 2px;
}


/*links on the task bar*/

.nav-links a {
  color: #0C3D8D;
  text-decoration: none;
  letter-spacing: 2px;
  font-weight: bold;
  font-size: 18px;
  position: relative;
}


/*Hover change*/

.nav-links a:hover {
  color: #95989A;
  font-size: 18px;
}


/* ------------------------------------- Sticky nav logo ---------------------------------------- */


/*Nav bar logo hidden*/

li.nav-logo {
  padding-top: 5px;
  padding-bottom: 5px;
  max-width: 0px;
  overflow: hidden;
  transition: all 0.3s linear;
}


/* visible on sticky nav bar */

.sticky li.nav-logo {
  display: flex;
  max-width: 200px;
}


/* ----------------------------------- Sticky scroll ------------------------------------------ */


/*Stick Nav bar on scroll*/


/* Changes to task bar when scrolling */

.sticky {
  position: sticky;
  top: 0;
  width: 100%;
  background-color: rgba(234, 234, 234, 0.895);
}


/* ----------------------------------- Language flags ------------------------------------------ */


/* Language flag information */

.languageFlag {
  height: 20px;
  width: 40px;
  transition: all 0.2s linear;
}


/* Padding for flags*/

.language>* {
  padding: 2px;
}


/* Hover change of flag icons */

.languageFlag:hover {
  filter: grayscale(70%)
}


/* ----------------------------------------------------------------------------- */


/* Logo and spaceing from the top for logo*/

.logo {
  display: flex;
  justify-content: center;
  padding-bottom: 1.5vh;
  padding-top: 2vh;
}

.burger {
  padding-top: 20px;
  padding-left: 20px;
  padding-bottom: 10px;
  display: none;
  cursor: pointer;
}

.burger div {
  background-color: #0C3D8D;
  width: 25px;
  height: 3px;
  margin: 5px;
  transition: all 0.3s ease;
}

@media all and (max-width:1024px) {
  .nav-links {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    height: 100%;
  }
  #banner {
    display: none;
  }
}

@media all and (max-width:768px) {
  body {
    overflow-x: hidden;
  }
  .nav-links {
    position: absolute;
    right: 0px;
    height: 92vh;
    top: 0vh;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
  }
  .languages {
    order: -2;
  }
  .nav-links li {
    opacity: 0;
  }
  .burger {
    display: block;
  }
}

.nav-active {
  transform: translateX(0%);
}

@keyframes navLinkFade {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

.toggle .line1 {
  transform: rotate(-45deg) translate(-5px, 6px);
}

.toggle .line2 {
  opacity: 0;
}

.toggle .line3 {
  transform: rotate(45deg) translate(-5px, -6px);
}

.logo-hide {
  display: none;
}

.column {
  display: flex;
  align-items: center;
}

.column>* {
  flex-basis: 100%;
  padding: 2%;
}

.topImage {
  display: flex;
  max-width: 100%;
}

#aboutUsTitle {
  text-align: center;
  color: #0C3D8D;
  margin-bottom: 2vh;
  font-size: 2rem;
  letter-spacing: 1px;
}

#promise {
  text-align: center;
  font-size: 1.2rem;
}
<!DOCTYPE html>
<html lang="en">

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

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="style.css">
  <title>Monza</title>
</head>

<body>
  <header class="logo">
    <img src="Imageslogo.png" alt="" width="auto" height="auto">
  </header>
  <nav class="main-nav">

    <ul class="nav-links">
      <li class="nav-logo">
        <a href="#"><img src="Imageslogo.png" alt="" width="200px" height="auto"></a>
      </li>
      <li>
        <a href="/">Home</a>
      </li>
      <li>
        <a href="/aboutus">About us</a>
      </li>
      <li>
        <a href="/services">Services</a>
      </li>
      <li>
        <a href="/contact">Contact</a>
      </li>
      <li class="language">
        <a href="#"><img src="Imagesde.png" alt="" srcset="" class="languageFlag" id="languageFlagOne"></a>
        <a href="#"><img src="Imagesgb.png" alt="" srcset="" class="languageFlag" id="languageFlagTwo"></a>
      </li>
    </ul>

    <div class="burger">
      <div class="line1"></div>
      <div class="line2"></div>
      <div class="line3"></div>
    </div>
  </nav>
  <script src="navbar.js"></script>
  <script src="app.js"></script>

  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, cupiditate id beatae mollitia quibusdam repellat modi dignissimos dolorem pariatur accusantium officiis suscipit temporibus inventore debitis sapiente, repudiandae sint fugit unde illo quis
    soluta dolorum ipsam! Doloribus adipisci neque nam reiciendis officia dolore placeat consequuntur. Ab tempora dicta fugiat commodi qui fuga totam ipsa eaque. Corrupti, nesciunt sit alias doloremque officia, accusantium officiis veritatis, eaque repellendus
    saepe facilis. Illum mollitia eos quia? Aliquam porro beatae praesentium delectus ullam ad ex consequuntur ratione! Adipisci reiciendis iste laudantium voluptatum id nulla distinctio optio architecto placeat omnis, incidunt ea enim minus, magnam nihil
    rem autem ducimus laboriosam esse totam labore, officia repellendus numquam quo. Harum expedita in veritatis officia qui! Sint quisquam enim ducimus molestiae ipsa est illo vero sequi cum facere, eligendi quibusdam repellat numquam et cumque iste
    velit iusto laboriosam. Hic, enim consequatur sequi laborum placeat dolor maxime natus ducimus nobis quas error iusto veritatis eligendi inventore accusantium ipsam in cum quasi tempore reprehenderit aliquam illum quia. At numquam autem obcaecati,
    odit, saepe dolorem, consequatur corporis optio mollitia eveniet fugit in minus quod veniam unde quos illum itaque similique architecto nesciunt impedit. Laboriosam, recusandae asperiores inventore magnam facilis soluta deserunt ratione sequi molestiae
    debitis nesciunt mollitia nobis praesentium animi odit beatae hic optio ab nisi dolorum labore minus tenetur aliquam! Eveniet magnam vitae aliquid officia officiis quod sequi sed est, magni recusandae corporis rem et beatae, maxime accusamus quasi
    unde amet? Quibusdam maxime minima illum ipsa, corporis beatae rem numquam, distinctio enim voluptas ea quae, vitae odit excepturi. Distinctio amet libero est repellat eaque. Voluptates corrupti vero ex nulla hic quam recusandae, optio aliquid ipsum
    voluptas praesentium laborum. Vero odit nihil, omnis praesentium labore sunt ducimus iste consectetur dolorem? Tempora debitis dignissimos neque perferendis excepturi quasi repudiandae, tempore sapiente consequuntur nostrum porro doloremque magnam,
    et dolores ipsum unde facere fugit quas cumque! Quae sint recusandae modi architecto natus, corrupti saepe, sit qui inventore consequuntur nam autem, impedit fugiat fugit debitis est cumque dicta optio. Autem modi quia laboriosam explicabo iure, voluptatum
    provident, cum, aut accusantium harum quaerat. Qui, tempore autem provident doloribus atque iusto corrupti ea, dolorum, deleniti quaerat numquam! Voluptatem aliquam asperiores, aut quibusdam delectus aliquid saepe quam dolores pariatur repudiandae
    porro quia perferendis cum, beatae facilis quisquam nemo, quidem omnis quos! Eius nam nisi, sequi autem ullam libero illo? Repellat nulla perferendis minus laboriosam animi eligendi commodi ipsam laudantium aliquid mollitia facilis nobis earum aspernatur,
    consectetur sint reprehenderit non fugiat quos amet itaque facere accusamus cupiditate obcaecati. Odio aliquid architecto ipsum quo eveniet. Quis, numquam dolorum voluptas aspernatur ducimus magni ipsum unde veritatis nulla omnis nihil quaerat sit
    officiis maiores facilis laudantium eligendi consequuntur repellendus nemo et? Officia autem aliquid, quia eius mollitia totam repudiandae cumque fugit quae. Obcaecati fuga placeat architecto necessitatibus accusantium, aperiam fugit cum quibusdam
    dignissimos maxime? Tempore iure minus aspernatur animi voluptates ea accusantium, impedit deleniti dolorem, dicta totam consectetur magni consequatur cupiditate eos assumenda doloribus, autem exercitationem nemo tenetur tempora aut eum numquam! Quidem
    aut ea quos voluptate, autem unde recusandae, minima qui necessitatibus tenetur illum eius error quibusdam nisi repudiandae hic fugiat, aspernatur deleniti. Et fugit, voluptate similique minus impedit repudiandae nobis officia velit, commodi eos,
    deserunt architecto earum. Temporibus necessitatibus quasi voluptatum saepe deleniti dolorem laborum tenetur sed debitis excepturi! Expedita ea exercitationem animi doloremque eveniet ipsam, labore saepe explicabo corporis iste laboriosam voluptas
    voluptates repellat sed, assumenda consequatur voluptatum atque. Iste, quidem, ducimus accusamus doloremque optio, odit laudantium odio illum nemo facere quaerat modi. Veniam blanditiis possimus optio explicabo. Vero quibusdam ipsa aliquam in illo!
    Cumque explicabo dicta numquam placeat soluta? At itaque autem quo officia. Aliquam fugiat dicta quidem tempora voluptas, voluptate pariatur officia omnis sequi quo tenetur veritatis exercitationem, perspiciatis aspernatur incidunt sit iure repudiandae.
    Reprehenderit, ipsa expedita consectetur, nesciunt asperiores debitis repudiandae ullam porro eum temporibus perferendis necessitatibus nisi nostrum eos possimus cupiditate error. Id nihil, exercitationem veniam delectus, placeat quisquam facere recusandae
    dolorum ducimus labore similique cumque. Sapiente quam id aperiam similique ut enim delectus pariatur earum. Ipsum reiciendis ex eius, explicabo nostrum modi, quae sapiente non quo accusamus eos distinctio repudiandae culpa mollitia, qui veniam porro.
    Repudiandae sed fugiat unde. Iusto incidunt soluta excepturi vitae dolore. Animi, at deserunt veritatis quam nihil laborum odio voluptatum perspiciatis praesentium illum harum, delectus eveniet nisi, quis est numquam architecto non necessitatibus.
    Pariatur, ipsum iusto! Minus sequi error deleniti in nulla officia quae amet ex, quos pariatur, excepturi dicta corporis velit ullam, quam illo blanditiis libero? Distinctio voluptatum quas alias ad accusantium nihil numquam enim rerum doloribus non
    eaque aut quae suscipit libero eveniet tempore vel provident deserunt animi, a autem ex in ut magni. Explicabo a commodi similique aspernatur quaerat officia quos numquam, quasi hic eligendi dolorum vero recusandae minima deserunt dolor quis error
    tempora. Libero sed nihil consequatur quisquam deserunt! Modi est ducimus labore provident, expedita alias minus doloribus quisquam repudiandae culpa qui perspiciatis eos sint quod! Provident cumque unde nihil ducimus quos excepturi officia quasi
    dolor, debitis commodi in eos eveniet nesciunt amet libero neque facere voluptatem! Nobis libero voluptas tenetur nostrum optio, fuga commodi nihil aut aspernatur quasi neque veritatis modi nemo, praesentium vero labore iure! Vero iste accusantium
    officiis et dolores, quo, non commodi, alias deserunt cumque corporis illo iure asperiores accusamus aspernatur corrupti magni quibusdam soluta totam id dicta. Cum optio minus velit nostrum placeat impedit veniam harum nesciunt inventore. Nisi, id
    veritatis dolorem odit numquam vero laudantium, ullam, impedit ratione assumenda adipisci alias neque ut repellendus quam cupiditate est nam quidem libero nostrum explicabo. Commodi, repellendus velit. Neque, laboriosam? Incidunt quasi cum natus esse
    illum soluta neque possimus nemo dolores recusandae ullam, non a ut doloribus necessitatibus officia cumque aut similique! Quidem soluta voluptatem sequi praesentium, obcaecati enim, eum, perferendis non minus voluptatum fuga provident id ex distinctio!
    Praesentium, similique! Sed facilis ipsa reiciendis impedit unde quis deleniti suscipit porro. Dolore, nemo officia aut quae voluptas cum molestiae. Adipisci distinctio quam ratione fuga sunt tempore, animi sint, voluptatum ea assumenda id est earum
    dolorem.
  </p>
</body>

</html>

Advertisement

Answer

It’s actually because of your logo. When the screen reduces, you’re not doing anything with it in your media query so it sticks to the top of the header as you’ve written it. If you add the logo class to your media query and style it appropriately, you can prevent it from breaking the sticky nav. See snippet, make sure you view it on a mobile device too.

const navSlide = () => {
  const burger = document.querySelector(".burger");
  const nav = document.querySelector(".nav-links");
  const navLinks = document.querySelectorAll(".nav-links li");
  const navLogo = document.querySelector("li.nav-logo");
  const navbar = document.querySelector('.main-nav');

  const sticky = navbar.offsetTop;

  window.addEventListener("scroll", stickyNav);

  function stickyNav() {
    if (window.scrollY >= sticky) {
      // document.body.style.paddingTop = navbar.offsetHeight + 'px';
      document.body.style.paddingTop = 0;
      navbar.classList.add('sticky');

    } else {
      navbar.classList.remove('sticky');
      document.body.style.paddingTop = 0;
    }
  }

  burger.addEventListener("click", () => {
    // Toggle Nav
    nav.classList.toggle("nav-active");

    //Animate navLinks
    navLinks.forEach((link, index) => {
      if (link.style.animation) {
        link.style.animation = ''
        navLogo.style.display = 'flex';

      } else {
        link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.45}s`;
        navLogo.style.display = 'none';
      }
    });
    //Burger animation
    burger.classList.toggle('toggle');
  });


}

navSlide();
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  caret-color: transparent;
  font-family: 'Roboto', sans-serif;
}


/* --------------------------------- Nav -------------------------------------------- */


/*Nav bar*/


/* Nav bar size and position */

.main-nav {
  display: flex;
  width: 100%;
  transition: all 0.5s linear;
  z-index: 1;
  font-family: 'Roboto', sans-serif;
}


/*List on the task bar*/

.nav-links {
  display: flex;
  justify-content: space-around;
  width: 100%;
  align-items: center;
  list-style: none;
  transition: all 0.05s linear;
  padding: 2px;
}


/*links on the task bar*/

.nav-links a {
  color: #0C3D8D;
  text-decoration: none;
  letter-spacing: 2px;
  font-weight: bold;
  font-size: 18px;
  position: relative;
}


/*Hover change*/

.nav-links a:hover {
  color: #95989A;
  font-size: 18px;
}


/* ------------------------------------- Sticky nav logo ---------------------------------------- */


/*Nav bar logo hidden*/

li.nav-logo {
  padding-top: 5px;
  padding-bottom: 5px;
  max-width: 0px;
  overflow: hidden;
  transition: all 0.3s linear;
}


/* visible on sticky nav bar */

.sticky li.nav-logo {
  display: flex;
  max-width: 200px;
}


/* ----------------------------------- Sticky scroll ------------------------------------------ */


/*Stick Nav bar on scroll*/


/* Changes to task bar when scrolling */

.sticky {
  position: sticky;
  top: 0;
  width: 100%;
  background-color: rgba(234, 234, 234, 0.895);
}


/* ----------------------------------- Language flags ------------------------------------------ */


/* Language flag information */

.languageFlag {
  height: 20px;
  width: 40px;
  transition: all 0.2s linear;
}


/* Padding for flags*/

.language>* {
  padding: 2px;
}


/* Hover change of flag icons */

.languageFlag:hover {
  filter: grayscale(70%)
}


/* ----------------------------------------------------------------------------- */


/* Logo and spaceing from the top for logo*/

.logo {
  display: block;
  margin: 0 auto;
  padding-bottom: 1.5vh;
  padding-top: 2vh;
  width: 200px;
  height: auto;
}

.burger {
  padding-top: 20px;
  padding-left: 20px;
  padding-bottom: 10px;
  display: none;
  cursor: pointer;
}

.burger div {
  background-color: #0C3D8D;
  width: 25px;
  height: 3px;
  margin: 5px;
  transition: all 0.3s ease;
}

@media all and (max-width:1024px) {
  .nav-links {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    height: 100%;
  }

  #banner {
    display: none;
  }
}

@media all and (max-width:768px) {
  body {
    overflow-x: hidden;
  }

  .nav-links {
    position: absolute;
    right: 0px;
    height: 92vh;
    top: 0vh;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
  }

  .languages {
    order: -2;
  }

  .nav-links li {
    opacity: 0;
  }

  .burger {
    display: block;
  }

  .logo {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 10;
    height: 59px;
    width: auto;
  padding-bottom: 0;
  padding-top: 0;
  }

}

.nav-active {
  transform: translateX(0%);
}

@keyframes navLinkFade {
  from {
    opacity: 0;
    transform: translateX(50px);
  }

  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

.toggle .line1 {
  transform: rotate(-45deg) translate(-5px, 6px);
}

.toggle .line2 {
  opacity: 0;
}

.toggle .line3 {
  transform: rotate(45deg) translate(-5px, -6px);
}

.logo-hide {
  display: none;
}

.column {
  display: flex;
  align-items: center;
}

.column>* {
  flex-basis: 100%;
  padding: 2%;
}

.topImage {
  display: flex;
  max-width: 100%;
}

#aboutUsTitle {
  text-align: center;
  color: #0C3D8D;
  margin-bottom: 2vh;
  font-size: 2rem;
  letter-spacing: 1px;
}

#promise {
  text-align: center;
  font-size: 1.2rem;
}
<!DOCTYPE html>
<html lang="en">

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

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="style.css">
  <title>Monza</title>
</head>

<body>
  <header>
    <img class="logo" src="https://i.imgur.com/xXZB3Hv.png" alt="">
  </header>
  <nav class="main-nav">

    <ul class="nav-links">
      <li class="nav-logo">
        <a href="#"><img class="logo" src="https://i.imgur.com/xXZB3Hv.png" alt=""></a>
      </li>
      <li>
        <a href="/">Home</a>
      </li>
      <li>
        <a href="/aboutus">About us</a>
      </li>
      <li>
        <a href="/services">Services</a>
      </li>
      <li>
        <a href="/contact">Contact</a>
      </li>
      <li class="language">
        <a href="#"><img src="Imagesde.png" alt="" srcset="" class="languageFlag" id="languageFlagOne"></a>
        <a href="#"><img src="Imagesgb.png" alt="" srcset="" class="languageFlag" id="languageFlagTwo"></a>
      </li>
    </ul>

    <div class="burger">
      <div class="line1"></div>
      <div class="line2"></div>
      <div class="line3"></div>
    </div>
  </nav>
  <script src="navbar.js"></script>
  <script src="app.js"></script>

  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, cupiditate id beatae mollitia quibusdam repellat modi dignissimos dolorem pariatur accusantium officiis suscipit temporibus inventore debitis sapiente, repudiandae sint fugit unde illo quis
    soluta dolorum ipsam! Doloribus adipisci neque nam reiciendis officia dolore placeat consequuntur. Ab tempora dicta fugiat commodi qui fuga totam ipsa eaque. Corrupti, nesciunt sit alias doloremque officia, accusantium officiis veritatis, eaque repellendus
    saepe facilis. Illum mollitia eos quia? Aliquam porro beatae praesentium delectus ullam ad ex consequuntur ratione! Adipisci reiciendis iste laudantium voluptatum id nulla distinctio optio architecto placeat omnis, incidunt ea enim minus, magnam nihil
    rem autem ducimus laboriosam esse totam labore, officia repellendus numquam quo. Harum expedita in veritatis officia qui! Sint quisquam enim ducimus molestiae ipsa est illo vero sequi cum facere, eligendi quibusdam repellat numquam et cumque iste
    velit iusto laboriosam. Hic, enim consequatur sequi laborum placeat dolor maxime natus ducimus nobis quas error iusto veritatis eligendi inventore accusantium ipsam in cum quasi tempore reprehenderit aliquam illum quia. At numquam autem obcaecati,
    odit, saepe dolorem, consequatur corporis optio mollitia eveniet fugit in minus quod veniam unde quos illum itaque similique architecto nesciunt impedit. Laboriosam, recusandae asperiores inventore magnam facilis soluta deserunt ratione sequi molestiae
    debitis nesciunt mollitia nobis praesentium animi odit beatae hic optio ab nisi dolorum labore minus tenetur aliquam! Eveniet magnam vitae aliquid officia officiis quod sequi sed est, magni recusandae corporis rem et beatae, maxime accusamus quasi
    unde amet? Quibusdam maxime minima illum ipsa, corporis beatae rem numquam, distinctio enim voluptas ea quae, vitae odit excepturi. Distinctio amet libero est repellat eaque. Voluptates corrupti vero ex nulla hic quam recusandae, optio aliquid ipsum
    voluptas praesentium laborum. Vero odit nihil, omnis praesentium labore sunt ducimus iste consectetur dolorem? Tempora debitis dignissimos neque perferendis excepturi quasi repudiandae, tempore sapiente consequuntur nostrum porro doloremque magnam,
    et dolores ipsum unde facere fugit quas cumque! Quae sint recusandae modi architecto natus, corrupti saepe, sit qui inventore consequuntur nam autem, impedit fugiat fugit debitis est cumque dicta optio. Autem modi quia laboriosam explicabo iure, voluptatum
    provident, cum, aut accusantium harum quaerat. Qui, tempore autem provident doloribus atque iusto corrupti ea, dolorum, deleniti quaerat numquam! Voluptatem aliquam asperiores, aut quibusdam delectus aliquid saepe quam dolores pariatur repudiandae
    porro quia perferendis cum, beatae facilis quisquam nemo, quidem omnis quos! Eius nam nisi, sequi autem ullam libero illo? Repellat nulla perferendis minus laboriosam animi eligendi commodi ipsam laudantium aliquid mollitia facilis nobis earum aspernatur,
    consectetur sint reprehenderit non fugiat quos amet itaque facere accusamus cupiditate obcaecati. Odio aliquid architecto ipsum quo eveniet. Quis, numquam dolorum voluptas aspernatur ducimus magni ipsum unde veritatis nulla omnis nihil quaerat sit
    officiis maiores facilis laudantium eligendi consequuntur repellendus nemo et? Officia autem aliquid, quia eius mollitia totam repudiandae cumque fugit quae. Obcaecati fuga placeat architecto necessitatibus accusantium, aperiam fugit cum quibusdam
    dignissimos maxime? Tempore iure minus aspernatur animi voluptates ea accusantium, impedit deleniti dolorem, dicta totam consectetur magni consequatur cupiditate eos assumenda doloribus, autem exercitationem nemo tenetur tempora aut eum numquam! Quidem
    aut ea quos voluptate, autem unde recusandae, minima qui necessitatibus tenetur illum eius error quibusdam nisi repudiandae hic fugiat, aspernatur deleniti. Et fugit, voluptate similique minus impedit repudiandae nobis officia velit, commodi eos,
    deserunt architecto earum. Temporibus necessitatibus quasi voluptatum saepe deleniti dolorem laborum tenetur sed debitis excepturi! Expedita ea exercitationem animi doloremque eveniet ipsam, labore saepe explicabo corporis iste laboriosam voluptas
    voluptates repellat sed, assumenda consequatur voluptatum atque. Iste, quidem, ducimus accusamus doloremque optio, odit laudantium odio illum nemo facere quaerat modi. Veniam blanditiis possimus optio explicabo. Vero quibusdam ipsa aliquam in illo!
    Cumque explicabo dicta numquam placeat soluta? At itaque autem quo officia. Aliquam fugiat dicta quidem tempora voluptas, voluptate pariatur officia omnis sequi quo tenetur veritatis exercitationem, perspiciatis aspernatur incidunt sit iure repudiandae.
    Reprehenderit, ipsa expedita consectetur, nesciunt asperiores debitis repudiandae ullam porro eum temporibus perferendis necessitatibus nisi nostrum eos possimus cupiditate error. Id nihil, exercitationem veniam delectus, placeat quisquam facere recusandae
    dolorum ducimus labore similique cumque. Sapiente quam id aperiam similique ut enim delectus pariatur earum. Ipsum reiciendis ex eius, explicabo nostrum modi, quae sapiente non quo accusamus eos distinctio repudiandae culpa mollitia, qui veniam porro.
    Repudiandae sed fugiat unde. Iusto incidunt soluta excepturi vitae dolore. Animi, at deserunt veritatis quam nihil laborum odio voluptatum perspiciatis praesentium illum harum, delectus eveniet nisi, quis est numquam architecto non necessitatibus.
    Pariatur, ipsum iusto! Minus sequi error deleniti in nulla officia quae amet ex, quos pariatur, excepturi dicta corporis velit ullam, quam illo blanditiis libero? Distinctio voluptatum quas alias ad accusantium nihil numquam enim rerum doloribus non
    eaque aut quae suscipit libero eveniet tempore vel provident deserunt animi, a autem ex in ut magni. Explicabo a commodi similique aspernatur quaerat officia quos numquam, quasi hic eligendi dolorum vero recusandae minima deserunt dolor quis error
    tempora. Libero sed nihil consequatur quisquam deserunt! Modi est ducimus labore provident, expedita alias minus doloribus quisquam repudiandae culpa qui perspiciatis eos sint quod! Provident cumque unde nihil ducimus quos excepturi officia quasi
    dolor, debitis commodi in eos eveniet nesciunt amet libero neque facere voluptatem! Nobis libero voluptas tenetur nostrum optio, fuga commodi nihil aut aspernatur quasi neque veritatis modi nemo, praesentium vero labore iure! Vero iste accusantium
    officiis et dolores, quo, non commodi, alias deserunt cumque corporis illo iure asperiores accusamus aspernatur corrupti magni quibusdam soluta totam id dicta. Cum optio minus velit nostrum placeat impedit veniam harum nesciunt inventore. Nisi, id
    veritatis dolorem odit numquam vero laudantium, ullam, impedit ratione assumenda adipisci alias neque ut repellendus quam cupiditate est nam quidem libero nostrum explicabo. Commodi, repellendus velit. Neque, laboriosam? Incidunt quasi cum natus esse
    illum soluta neque possimus nemo dolores recusandae ullam, non a ut doloribus necessitatibus officia cumque aut similique! Quidem soluta voluptatem sequi praesentium, obcaecati enim, eum, perferendis non minus voluptatum fuga provident id ex distinctio!
    Praesentium, similique! Sed facilis ipsa reiciendis impedit unde quis deleniti suscipit porro. Dolore, nemo officia aut quae voluptas cum molestiae. Adipisci distinctio quam ratione fuga sunt tempore, animi sint, voluptatum ea assumenda id est earum
    dolorem.
  </p>
</body>

</html>
User contributions licensed under: CC BY-SA
1 People found this is helpful
Advertisement