Work on Hero section

nikonst · nikonst · commit 5dd9afd51125 · 2024-03-29T10:33:15.000+02:00
diff --git a/tailwind/Example2/dist/index.html b/tailwind/Example2/dist/index.html
@@ -9,6 +9,7 @@
 </head>
 
 <body>
+    <!-- NAV -->
     <nav class="relative container mx-auto p-3">
         <div class="flex items-center justify-between">
             <!-- Logo -->
@@ -22,8 +23,28 @@
                 <a href="#" class="hover:text-darkGrayishBlue">Contact</a>
             </div>
             <a href="#" class="p-3 px-6 pt-2 text-white bg-brightRed rounded-full hover:bg-brightRedLight">Sign Up</a>
-
         </div>
     </nav>
 
+    <!-- HERO -->
+    <section id="hero">
+        <div class="container flex felx-col-reverse items-center px-6 mx-auto mt-10 space-y-0 md:space-y:0 md:flex-row" >
+            <div class="flex flex-col mb-32 space-y-12 md:w-1/2">
+                <h1 class="max-w-md text-4xl font-bold text-center md:text-5xl ">
+                    Building Great Apps
+                </h1>
+                <p class="max-w-sm text-left text-darkGrayishBlue md:text-center">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquet varius accumsan. 
+                </p>
+                <div class="flex justify-center md:justify-start">
+                    <a href="#" class="p-3 px-6 pt-2 text-white bg-brightRed rounded-full hover:bg-brightRedLight">Get Started</a>
+                </div>
+            </div>
+            <div class="flex justify-center md:w-1/2">
+                <img src="https://picsum.photos/id/42/200/300" alt="Image">
+            </div>
+        </div>
+
+    </section>
+
 </html>
diff --git a/tailwind/Example2/dist/styles.css b/tailwind/Example2/dist/styles.css
@@ -591,6 +591,14 @@ video {
   margin-right: auto;
 }
 
+.mt-10 {
+  margin-top: 2.5rem;
+}
+
+.mb-32 {
+  margin-bottom: 8rem;
+}
+
 .flex {
   display: flex;
 }
@@ -599,10 +607,26 @@ video {
   display: none;
 }
 
+.max-w-md {
+  max-width: 28rem;
+}
+
+.max-w-sm {
+  max-width: 24rem;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
 .items-center {
   align-items: center;
 }
 
+.justify-center {
+  justify-content: center;
+}
+
 .justify-between {
   justify-content: space-between;
 }
@@ -619,6 +643,18 @@ video {
   margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.space-y-0 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0px * var(--tw-space-y-reverse));
+}
+
+.space-y-12 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(3rem * var(--tw-space-y-reverse));
+}
+
 .rounded-full {
   border-radius: 9999px;
 }
@@ -663,11 +699,33 @@ video {
   padding-top: 0.5rem;
 }
 
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-4xl {
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.text-darkGrayishBlue {
+  --tw-text-opacity: 1;
+  color: hsl(227 12% 61% / var(--tw-text-opacity));
+}
+
 .hover\:bg-brightRedLight:hover {
   --tw-bg-opacity: 1;
   background-color: hsl(12 88% 69% / var(--tw-bg-opacity));
@@ -686,4 +744,29 @@ video {
   .md\:flex {
     display: flex;
   }
+
+  .md\:w-1\/2 {
+    width: 50%;
+  }
+
+  .md\:flex-row {
+    flex-direction: row;
+  }
+
+  .md\:justify-start {
+    justify-content: flex-start;
+  }
+
+  .md\:text-left {
+    text-align: left;
+  }
+
+  .md\:text-center {
+    text-align: center;
+  }
+
+  .md\:text-5xl {
+    font-size: 3rem;
+    line-height: 1;
+  }
 }
