Finished

README.md

@@ -32,5 +32,6 @@ or run the package.json script
 
 ```
 npm run build
-``
 ```
+
+https://github.com/bradtraversy/tailwind-landing-page

css/main.css

@@ -504,6 +504,14 @@ Ensure the default browser behavior of the `hidden` attribute.
   position: relative;
 }
 
+.left-6 {
+  left: 1.5rem;
+}
+
+.right-6 {
+  right: 1.5rem;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -514,6 +522,11 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-bottom: 4rem;
 }
 
+.my-6 {
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
 .mt-10 {
   margin-top: 2.5rem;
 }
@@ -530,8 +543,8 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-top: 6rem;
 }
 
-.-mt-14 {
+.-mt-20 {
-  margin-top: -3.5rem;
+  margin-top: -5rem;
 }
 
 .block {
@@ -546,8 +559,12 @@ Ensure the default browser behavior of the `hidden` attribute.
   display: none;
 }
 
-.w-16 {
+.h-8 {
-  width: 4rem;
+  height: 2rem;
+}
+
+.w-28 {
+  width: 7rem;
 }
 
 .max-w-md {
@@ -562,6 +579,14 @@ Ensure the default browser behavior of the `hidden` attribute.
   max-width: 72rem;
 }
 
+.max-w-xl {
+  max-width: 36rem;
+}
+
+.flex-1 {
+  flex: 1 1 0%;
+}
+
 .flex-col {
   flex-direction: column;
 }
@@ -582,12 +607,22 @@ Ensure the default browser behavior of the `hidden` attribute.
   justify-content: space-between;
 }
 
+.justify-around {
+  justify-content: space-around;
+}
+
 .space-x-6 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(1.5rem * var(--tw-space-x-reverse));
   margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.space-y-6 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
+}
+
 .space-y-0 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
@@ -618,14 +653,26 @@ Ensure the default browser behavior of the `hidden` attribute.
   margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
-.space-y-6 > :not([hidden]) ~ :not([hidden]) {
+.space-x-4 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
+  --tw-space-x-reverse: 0;
-  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-right: calc(1rem * var(--tw-space-x-reverse));
-  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
+  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-x-32 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(8rem * var(--tw-space-x-reverse));
+  margin-left: calc(8rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-x-3 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
-.self-baseline {
+.self-end {
-  align-self: baseline;
+  align-self: flex-end;
 }
 
 .rounded-full {
@@ -636,19 +683,14 @@ Ensure the default browser behavior of the `hidden` attribute.
   border-radius: 0.5rem;
 }
 
-.rounded-l-full {
-  border-top-left-radius: 9999px;
-  border-bottom-left-radius: 9999px;
-}
-
 .bg-brightRed {
   --tw-bg-opacity: 1;
   background-color: hsl(12 88% 59% / var(--tw-bg-opacity));
 }
 
-.bg-brightRedLight {
+.bg-white {
   --tw-bg-opacity: 1;
-  background-color: hsl(12 88% 69% / var(--tw-bg-opacity));
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
 .bg-brightRedSupLight {
@@ -656,14 +698,9 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: hsl(12 88% 95% / var(--tw-bg-opacity));
 }
 
-.bg-darkBlue {
+.bg-veryLightGray {
-  --tw-bg-opacity: 1;
-  background-color: hsl(228 39% 23% / var(--tw-bg-opacity));
-}
-
-.bg-darkGrayishBlue {
   --tw-bg-opacity: 1;
-  background-color: hsl(227 12% 61% / var(--tw-bg-opacity));
+  background-color: hsl(0 0% 98% / var(--tw-bg-opacity));
 }
 
 .bg-veryDarkBlue {
@@ -671,16 +708,6 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: hsl(233 12% 13% / var(--tw-bg-opacity));
 }
 
-.bg-veryPaleRed {
-  --tw-bg-opacity: 1;
-  background-color: hsl(13 100% 96% / var(--tw-bg-opacity));
-}
-
-.bg-veryLightGray {
-  --tw-bg-opacity: 1;
-  background-color: hsl(0 0% 98% / var(--tw-bg-opacity));
-}
-
 .p-6 {
   padding: 1.5rem;
 }
@@ -694,9 +721,9 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding-right: 1.5rem;
 }
 
-.px-2 {
+.py-8 {
-  padding-left: 0.5rem;
+  padding-top: 2rem;
-  padding-right: 0.5rem;
+  padding-bottom: 2rem;
 }
 
 .px-4 {
@@ -714,12 +741,18 @@ Ensure the default browser behavior of the `hidden` attribute.
   padding-right: 1.25rem;
 }
 
-.pt-2 {
+.py-24 {
-  padding-top: 0.5rem;
+  padding-top: 6rem;
+  padding-bottom: 6rem;
 }
 
-.text-left {
+.py-6 {
-  text-align: left;
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+
+.pt-2 {
+  padding-top: 0.5rem;
 }
 
 .text-center {
@@ -750,28 +783,120 @@ Ensure the default browser behavior of the `hidden` attribute.
   line-height: 1.25rem;
 }
 
+.text-5xl {
+  font-size: 3rem;
+  line-height: 1;
+}
+
 .font-bold {
   font-weight: 700;
 }
 
+.leading-tight {
+  line-height: 1.25;
+}
+
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.text-darkBlue {
+.text-darkGrayishBlue {
   --tw-text-opacity: 1;
-  color: hsl(228 39% 23% / var(--tw-text-opacity));
+  color: hsl(227 12% 61% / var(--tw-text-opacity));
 }
 
-.text-darkGrayishBlue {
+.text-brightRed {
   --tw-text-opacity: 1;
-  color: hsl(227 12% 61% / var(--tw-text-opacity));
+  color: hsl(12 88% 59% / var(--tw-text-opacity));
+}
+
+.shadow-lg {
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow {
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.drop-shadow-md {
+  --tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+body {
+  background-image: url('../img/bg-tablet-pattern.svg');
+  background-repeat: no-repeat;
+  background-size: 800px;
+  background-position: 90% -25%;
+}
+
+#cta {
+  background-image: url('../img/bg-simplify-section-desktop.svg');
+  background-repeat: no-repeat;
+}
+
+@media (max-width: 576px) {
+  body {
+    background-position: 50px -50px;
+    background-size: 500px;
+  }
+
+  #cta {
+    background-image: url('../img/bg-simplify-section-mobile.svg');
+  }
+}
+
+/* Hamburger Menu */
+
+.hamburger {
+  cursor: pointer;
+  width: 24px;
+  height: 24px;
+  transition: all 0.25s;
+  position: relative;
 }
 
-.underline {
+.hamburger-top,
-  -webkit-text-decoration-line: underline;
+.hamburger-middle,
-          text-decoration-line: underline;
+.hamburger-bottom {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 24px;
+  height: 2px;
+  background: #000;
+  transform: rotate(0);
+  transition: all 0.5s;
+}
+
+.hamburger-middle {
+  transform: translateY(7px);
+}
+
+.hamburger-bottom {
+  transform: translateY(14px);
+}
+
+.open {
+  transform: rotate(90deg);
+  transform: translateY(0px);
+}
+
+.open .hamburger-top {
+  transform: rotate(45deg) translateY(6px) translate(6px);
+}
+
+.open .hamburger-middle {
+  display: none;
+}
+
+.open .hamburger-bottom {
+  transform: rotate(-45deg) translateY(6px) translate(-6px);
 }
 
 .hover\:bg-brightRedLight:hover {
@@ -779,14 +904,33 @@ Ensure the default browser behavior of the `hidden` attribute.
   background-color: hsl(12 88% 69% / var(--tw-bg-opacity));
 }
 
+.hover\:bg-gray-300:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
+}
+
 .hover\:text-darkGrayishBlue:hover {
   --tw-text-opacity: 1;
   color: hsl(227 12% 61% / var(--tw-text-opacity));
 }
 
+.hover\:text-brightRed:hover {
+  --tw-text-opacity: 1;
+  color: hsl(12 88% 59% / var(--tw-text-opacity));
+}
+
+.focus\:outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
 @media (min-width: 480px) {
-  .sm\:hidden {
+  .sm\:w-auto {
-    display: none;
+    width: auto;
+  }
+
+  .sm\:self-center {
+    align-self: center;
   }
 }
 
@@ -819,6 +963,14 @@ Ensure the default browser behavior of the `hidden` attribute.
     flex-direction: row;
   }
 
+  .md\:flex-col {
+    flex-direction: column;
+  }
+
+  .md\:items-start {
+    align-items: flex-start;
+  }
+
   .md\:justify-start {
     justify-content: flex-start;
   }
@@ -844,6 +996,11 @@ Ensure the default browser behavior of the `hidden` attribute.
     padding-bottom: 0.25rem;
   }
 
+  .md\:py-12 {
+    padding-top: 3rem;
+    padding-bottom: 3rem;
+  }
+
   .md\:text-left {
     text-align: left;
   }
@@ -853,15 +1010,8 @@ Ensure the default browser behavior of the `hidden` attribute.
     line-height: 1;
   }
 
-  .md\:shadow-orange-50 {
+  .md\:text-4xl {
-    --tw-shadow-color: #fff7ed;
+    font-size: 2.25rem;
-    --tw-shadow: var(--tw-shadow-colored);
+    line-height: 2.5rem;
   }
 }
-
-@media (min-width: 976px) {
-  .lg\:text-left {
-    text-align: left;
-  }
-}
-

index.html

@@ -32,6 +32,23 @@
         <!-- Button -->
         <!-- Hidden on smaller screens but on md(and up) display as block -->
         <a href="#" class="hidden md:block p-3 px-6 pt-2 text-white bg-brightRed rounded-full align-baseline hover:bg-brightRedLight">Get Started</a>
+    <!-- Hamburger Icon -->
+    <button id="menu-btn" class="block hamburger md:hidden focus:outline-none">
+        <span class="hamburger-top"></span>
+        <span class="hamburger-middle"></span>
+        <span class="hamburger-bottom"></span>
+    </button>
+    </div>
+    <!-- Mobile Menu -->
+    <div class="md:hidden">
+        <!-- Because it is being placed in the relative div above. -->
+        <div id="menu" class="absolute flex-col items-center self-end hidden py-8 mt-10 space-y-6 font-bold bg-white sm:w-auto sm:self-center left-6 right-6 drop-shadow-md">
+            <a href="#">Pricing</a>
+            <a href="#">Product</a>
+            <a href="#">About Us</a>
+            <a href="#">Careers</a>
+            <a href="#">Community</a>
+        </div>
     </div>
   </nav>
 <!-- End Navbar -->
@@ -171,9 +188,9 @@
           <!-- Testimonial Container -->
           <div class="flex flex-col mt-24 md:flex-row md:space-x-6">
               <!-- Testimonial One -->
-              <div class="flex flex-col items-center p-6 space-y-6 rounded-lg bg-veryLightGray md:w-1/3">
+              <div class="flex shadow-lg flex-col items-center p-6 space-y-6 rounded-lg bg-veryLightGray md:w-1/3">
                   <!-- NOTICE the use of a negative margin that places the picture of the user at the top of the card -->
-                  <img src="img/avatar-anisha.png" class="w-16 -mt-14" alt="">
+                  <img src="img/avatar-anisha.png" class="w-28 -mt-20" alt="">
                   <h5 class="text-lg font-bold">Anisha Li </h5>
                   <p class="text-sm text-darkGrayishBlue">
                       "Manage has supercharged our team's workflow. The ability to 
@@ -183,8 +200,8 @@
               </div>
               <!-- Testimonial Two -->
               <!-- The md:flex is what overrides it from being hidden -->
-              <div class="hidden md:flex flex-col items-center p-6 space-y-6 rounded-lg bg-veryLightGray md:w-1/3">
+              <div class="hidden md:flex shadow-lg flex-col items-center p-6 space-y-6 rounded-lg bg-veryLightGray md:w-1/3">
-                <img src="img/avatar-ali.png" class="w-16 -mt-14" alt="">
+                <img src="img/avatar-ali.png" class="w-28 -mt-20" alt="">
                 <h5 class="text-lg font-bold">Ali Bravo</h5>
                 <p class="text-sm text-darkGrayishBlue">
                     "We have been able to cancel so many other subscriptions since using Manage.
@@ -192,9 +209,9 @@
                 </p>
             </div>
             <!-- Testimonial 3 -->
-            <div class="hidden md:flex  flex-col items-center p-6 space-y-6 rounded-lg bg-veryLightGray md:w-1/3">
+            <div class="hidden md:flex shadow-lg flex-col items-center p-6 space-y-6 rounded-lg bg-veryLightGray md:w-1/3">
                 <!-- NOTICE the use of a negative margin that places the picture of the user at the top of the card -->
-                <img src="img/avatar-richard.png" class="w-16 -mt-14" alt="">
+                <img src="img/avatar-richard.png" class="w-28 -mt-20"  alt="">
                 <h5 class="text-lg font-bold">Richard Watts</h5>
                 <p class="text-sm text-darkGrayishBlue">
                     "Manage has supercharged our team's workflow. The ability to 
@@ -204,8 +221,73 @@
             </div>
           </div>
           <!-- End Testimonial Container -->
+          <!-- Button -->
           <div class="my-16"><a href="#" class="p-3 px-6 pt-2 text-white bg-brightRed rounded-full align-baseline hover:bg-brightRedLight">Get Started</a></div>
       </div>
   </section>
+  <!-- CTA Section -->
+  <section id="cta" class="bg-brightRed">
+      <div class="container flex flex-col items-center justify-between px-6 py-24 mx-auto space-y-12 md:py-12 md:flex-row md:space-y-0">
+          <h2 class="text-5xl font-bold leading-tight text-center text-white md:text-4xl max-w-xl md:text-left">Simplify how your team works today.</h2>
+          <div>
+              <!-- Messing with shadow. -->
+            <a href="#" class="p-3 px-6 pt-2 text-brightRed bg-white rounded-full align-baseline hover:bg-gray-300">Get Started</a>
+          </div>
+      </div>
+  </section>
+  <!-- Footer -->
+  <footer class="bg-veryDarkBlue">
+      <!-- Flex Contianer -->
+      <div class="container flex flex-col-reverse justify-between px-6 py-6 mx-auto space-y-8 md:flex-row md:space-y-0">
+          <!-- Logo and Social container -->
+          <div class="flex flex-col-reverse items-center justify-between space-y-12 md:flex-col md:space-y-0 md:items-start">
+              <!-- Logo -->
+              <div class="mx-auto my-6 text-center text-white md:hidden">
+                  Copyright &copy; 2022, All Rights Reserved
+              </div>
+              <div>
+                <img src="img/logo-white.svg" alt="" class="h-8">
+              </div>
+              <!-- social -->
+              <div class="flex justify-center space-x-4">
+                  <a href="#"><img src="img/icon-facebook.svg" alt="" class="h-8"></a>
+                  <a href="#"><img src="img/icon-youtube.svg" alt="" class="h-8"></a>
+                  <a href="#"><img src="img/icon-twitter.svg" alt="" class="h-8"></a>
+                  <a href="#"><img src="img/icon-pinterest.svg" alt="" class="h-8"></a>
+                  <a href="#"><img src="img/icon-instagram.svg" alt="" class="h-8"></a>
+              </div>
+          </div>
+          <!-- List Container -->
+          <div class="flex justify-around space-x-32">
+              <!-- Menu 1 -->
+              <div class="flex flex-col space-y-3 text-white">
+                  <a href="#" class="hover:text-brightRed">Home</a>
+                  <a href="#" class="hover:text-brightRed">Pricing</a>
+                  <a href="#" class="hover:text-brightRed">Products</a>
+                  <a href="#" class="hover:text-brightRed">About</a>
+              </div>
+              <!-- Menu 2 -->
+              <div class="flex flex-col space-y-3 text-white">
+                <a href="#" class="hover:text-brightRed">Careers</a>
+                <a href="#" class="hover:text-brightRed">Community</a>
+                <a href="#" class="hover:text-brightRed">Privary Policy</a>
+            </div>
+          </div>
+          <!-- Input Container -->
+          <div class="flex flex-col justify-between">
+              <form>
+                  <div class="flex space-x-3">
+                      <input type="text" class="flex-1 px-4 rounded-full focus:outline-none" placeholder="Updates in your inbox">
+                      <button class="px-6 py-2 text-white rounded-full bg-brightRed hover:bg-brightRedLight focus:outline-none">Go</button>
+                  </div>
+              </form>
+              <div class="hidden text-white md:block">
+                  Copyright &copy; 2022, All Rights Reserved
+              </div>
+          </div>
+      </div>
+
+  </footer>
 </body>
+<script src="js/script.js"></script>
 </html>

input.css

@@ -2,3 +2,72 @@
 @tailwind components;
 @tailwind utilities;
 
+body {
+  background-image: url('../img/bg-tablet-pattern.svg');
+  background-repeat: no-repeat;
+  background-size: 800px;
+  background-position: 90% -25%;
+}
+
+#cta {
+  background-image: url('../img/bg-simplify-section-desktop.svg');
+  background-repeat: no-repeat;
+}
+
+@media (max-width: 576px) {
+  body {
+    background-position: 50px -50px;
+    background-size: 500px;
+  }
+
+  #cta {
+    background-image: url('../img/bg-simplify-section-mobile.svg');
+  }
+}
+
+/* Hamburger Menu */
+.hamburger {
+  cursor: pointer;
+  width: 24px;
+  height: 24px;
+  transition: all 0.25s;
+  position: relative;
+}
+
+.hamburger-top,
+.hamburger-middle,
+.hamburger-bottom {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 24px;
+  height: 2px;
+  background: #000;
+  transform: rotate(0);
+  transition: all 0.5s;
+}
+
+.hamburger-middle {
+  transform: translateY(7px);
+}
+
+.hamburger-bottom {
+  transform: translateY(14px);
+}
+
+.open {
+  transform: rotate(90deg);
+  transform: translateY(0px);
+}
+
+.open .hamburger-top {
+  transform: rotate(45deg) translateY(6px) translate(6px);
+}
+
+.open .hamburger-middle {
+  display: none;
+}
+
+.open .hamburger-bottom {
+  transform: rotate(-45deg) translateY(6px) translate(-6px);
+}

js/script.js

@@ -0,0 +1,8 @@
+const btn = document.getElementById("menu-btn")
+const nav = document.getElementById("menu")
+
+btn.addEventListener("click", () => {
+    btn.classList.toggle("open")
+    nav.classList.toggle("flex")
+    nav.classList.toggle("hidden") 
+})