Day 24 : Sticky Nav

ilokeshghosh · Oct 5, 2023 · 365003e · 365003e
1 parent db9e36a
commit 365003e
Show file tree

Hide file tree

Showing 2 changed files with 298 additions and 0 deletions.
diff --git a/24-Sticky Nav/index.html b/24-Sticky Nav/index.html
@@ -0,0 +1,197 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Sticky Nav</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="icon" href="https://fav.farm/🔥" />
+</head>
+
+<body>
+
+    <header>
+        <h1>A story about getting lost.</h1>
+    </header>
+
+    <nav id="main">
+        <ul>
+            <li class="logo"><a href="#">LOST.</a></li>
+            <li><a href="#">Home</a></li>
+            <li><a href="#">About</a></li>
+            <li><a href="#">Images</a></li>
+            <li><a href="#">Locations</a></li>
+            <li><a href="#">Maps</a></li>
+        </ul>
+    </nav>
+
+    <div class="site-wrap">
+
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate,
+            corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores
+            omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt
+            esse magni, ut, dignissimos.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate,
+            corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores
+            omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt
+            esse magni, ut, dignissimos.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate,
+            corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores
+            omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt
+            esse magni, ut, dignissimos.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate,
+            corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores
+            omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt
+            esse magni, ut, dignissimos.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate,
+            corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores
+            omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt
+            esse magni, ut, dignissimos.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate,
+            corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores
+            omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt
+            esse magni, ut, dignissimos.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate,
+            corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores
+            omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt
+            esse magni, ut, dignissimos.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate,
+            corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores
+            omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt
+            esse magni, ut, dignissimos.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate,
+            corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores
+            omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt
+            esse magni, ut, dignissimos.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate,
+            corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores
+            omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt
+            esse magni, ut, dignissimos.</p>
+
+        <img src="http://unsplash.it/400/400" class="align-left slide-in">
+
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, deserunt facilis et iste corrupti omnis
+            tenetur est. Iste ut est dicta dolor itaque adipisci, dolorum minima, veritatis earum provident error
+            molestias. Ratione magni illo sint vel velit ut excepturi consectetur suscipit, earum modi accusamus
+            voluptatem nostrum, praesentium numquam, reiciendis voluptas sit id quisquam. Consequatur in quis
+            reprehenderit modi perspiciatis necessitatibus saepe, quidem, suscipit iure natus dignissimos ipsam,
+            eligendi deleniti accusantium, rerum quibusdam fugit perferendis et optio recusandae sed ratione. Culpa,
+            dolorum reprehenderit harum ab voluptas fuga, nisi eligendi natus maiores illum quas quos et aperiam aut
+            doloremque optio maxime fugiat doloribus. Eum dolorum expedita quam, nesciunt</p>
+
+        <img src="http://unsplash.it/400/400" class="align-right slide-in">
+
+        <p> at provident praesentium atque quas rerum optio dignissimos repudiandae ullam illum quibusdam. Vel ad error
+            quibusdam, illo ex totam placeat. Quos excepturi fuga, molestiae ea quisquam minus, ratione dicta
+            consectetur officia omnis, doloribus voluptatibus? Veniam ipsum veritatis architecto, provident quas
+            consequatur doloremque quam quidem earum expedita, ad delectus voluptatum, omnis praesentium nostrum qui
+            aspernatur ea eaque adipisci et cumque ab? Ea voluptatum dolore itaque odio. Eius minima distinctio harum,
+            officia ab nihil exercitationem. Tempora rem nemo nam temporibus molestias facilis minus ipsam quam
+            doloribus consequatur debitis nesciunt tempore officiis aperiam quisquam, molestiae voluptates cum, fuga
+            culpa. Distinctio accusamus quibusdam, tempore perspiciatis dolorum optio facere consequatur quidem ullam
+            beatae architecto, ipsam sequi officiis dignissimos amet impedit natus necessitatibus tenetur repellendus
+            dolor rem! Dicta dolorem, iure, facilis illo ex nihil ipsa amet officia, optio temporibus eum autem odit
+            repellendus nisi. Possimus modi, corrupti error debitis doloribus dicta libero earum, sequi porro ut
+            excepturi nostrum ea voluptatem nihil culpa? Ullam expedita eligendi obcaecati reiciendis velit provident
+            omnis quas qui in corrupti est dolore facere ad hic, animi soluta assumenda consequuntur reprehenderit!
+            Voluptate dolor nihil veniam laborum voluptas nisi pariatur sed optio accusantium quam consectetur,
+            corrupti, sequi et consequuntur, excepturi doloremque. Tempore quis velit corporis neque fugit non sequi
+            eaque rem hic. Facere, inventore, aspernatur. Accusantium modi atque, asperiores qui nobis soluta cumque
+            suscipit excepturi possimus doloremque odit saepe perferendis temporibus molestiae nostrum voluptatum quis
+            id sint quidem nesciunt culpa. Rerum labore dolor beatae blanditiis praesentium explicabo velit optio esse
+            aperiam similique, voluptatem cum, maiores ipsa tempore. Reiciendis sed culpa atque inventore, nam ullam
+            enim expedita consectetur id velit iusto alias vitae explicabo nemo neque odio reprehenderit soluta sint
+            eaque. Aperiam, qui ut tenetur, voluptate doloremque officiis dicta quaerat voluptatem rerum natus magni.
+            Eum amet autem dolor ullam.</p>
+
+
+
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae
+            dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil
+            voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus
+            facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium
+            blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos
+            distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur
+            possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque
+            dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis.
+            Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum
+            fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione.
+            Autem blanditiis laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi.
+            Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in
+            nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui
+            inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis,
+            tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas
+            sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam
+            quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos
+            nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis
+            necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo,
+            ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae
+            neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet!
+            Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.</p>
+
+        <img src="http://unsplash.it/400/400" class="align-right slide-in">
+
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae
+            dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil
+            voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus
+            facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium
+            blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos
+            distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur
+            possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque
+            dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis.
+            Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum
+            fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione.
+            Autem blanditiis laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi.
+            Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in
+            nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui
+            inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis,
+            tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas
+            sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam
+            quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos
+            nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis
+            necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo,
+            ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae
+            neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet!
+            Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae
+            dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil
+            voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus
+            facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium
+            blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos
+            distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur
+            possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque
+            dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis.
+            Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum
+            fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione.
+            Autem blanditiis laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi.
+            Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in
+            nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui
+            inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis,
+            tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas
+            sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam
+            quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos
+            nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis
+            necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo,
+            ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae
+            neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet!
+            Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.</p>
+    </div>
+
+    <script>
+
+        const nav = document.querySelector('#main');
+        const topOfNav = nav.offsetTop;
+        function fixNav(e) {
+            if (window.scrollY >= topOfNav) {
+                document.body.style.paddingTop = nav.offsetHeight + 'px';
+                document.body.classList.add('fixed-nav');
+            } else {
+                document.body.style.paddingTop = 0;
+                document.body.classList.remove('fixed-nav');
+            }
+        }
+        window.addEventListener('scroll', fixNav);
+    </script>
+
+</body>
+</html>
diff --git a/24-Sticky Nav/style.css b/24-Sticky Nav/style.css
@@ -0,0 +1,101 @@
+html {
+    box-sizing: border-box;
+    background: #eeeeee;
+    font-family: 'helvetica neue';
+    font-size: 20px;
+    font-weight: 200;
+  }
+
+  body {
+    margin: 0;
+  }
+
+  *, *:before, *:after {
+    box-sizing: inherit;
+  }
+
+  .site-wrap {
+    max-width: 700px;
+    margin: 70px auto;
+    background: white;
+    padding: 40px;
+    text-align: justify;
+    box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.05);
+    transform: scale(0.98);
+    transition: transform 0.5s ;
+}
+
+.fixed-nav .site-wrap{
+    transform: scale(1);
+    box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.05);
+  }
+
+  header {
+    text-align: center;
+    height: 50vh;
+    background: url(https://source.unsplash.com/GKN6rpDr0EI/960x640) bottom center no-repeat;
+    background-size: cover;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  h1 {
+    color: white;
+    font-size: 7vw;
+    text-shadow: 3px 4px 0 rgba(0,0,0,0.2);
+  }
+
+  nav {
+    background: black;
+    top: 0;
+    width: 100%;
+    transition: all 0.5s;
+    position: relative;
+    z-index: 1;
+  }
+
+  .fixed-nav nav{
+    position: fixed;
+  }
+
+  nav ul {
+    margin: 0;
+    padding:0;
+    list-style: none;
+    display: flex;
+  }
+
+  nav li {
+    flex: 1;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  li.logo {
+    max-width: 0;
+    overflow: hidden;
+    background: white;
+    transition: all 1s linear;
+    font-weight: 600;
+    font-size: 30px;
+  }
+
+  .fixed-nav li.logo{
+    max-width: 500px;
+  }
+
+  li.logo a {
+    color: black;
+  }
+
+  nav a {
+    text-decoration: none;
+    padding: 20px;
+    display: inline-block;
+    color: white;
+    transition: all 0.2s;
+    text-transform: uppercase;
+  }