burning-carrot · changicho · Jun 25, 2020
diff --git a/24 - Sticky Nav/changi.html b/24 - Sticky Nav/changi.html
@@ -0,0 +1,291 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Sticky Nav</title>
+    <link rel="stylesheet" href="style-changi.css" />
+  </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() {
+        // topOfNav, window.scrollY
+
+        if (topOfNav <= window.scrollY) {
+          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-changi.css b/24 - Sticky Nav/style-changi.css
@@ -0,0 +1,103 @@
+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);
+}
+
+header {
+  text-align: center;
+  height: 50vh;
+  background: url(http://wes.io/iEgP/wow-so-deep.jpg) 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;
+  box-shadow: 0 5px rgba(0, 0, 0, 0.1);
+}
+
+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 0.5s;
+  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;
+}