From 2c856cb1a7929927ff8c3cb50475d196a2cd2157 Mon Sep 17 00:00:00 2001
From: deeokafor <okafor.udahdivine@gmail.com>
Date: Wed, 21 Jun 2023 21:07:05 +0100
Subject: [PATCH] desktop ui build start

---
 assets/css/output.css | 201 +++++++++++++++++++++++++++---------------
 index.html            |  23 ++---
 2 files changed, 141 insertions(+), 83 deletions(-)

diff --git a/assets/css/output.css b/assets/css/output.css
index 384a17a..bb446dc 100644
--- a/assets/css/output.css
+++ b/assets/css/output.css
@@ -522,6 +522,10 @@ video {
   --tw-backdrop-sepia:  ;
 }
 
+.tw-order-2 {
+  order: 2;
+}
+
 .tw-my-5 {
   margin-top: 1.25rem;
   margin-bottom: 1.25rem;
@@ -575,6 +579,10 @@ video {
   justify-content: space-evenly;
 }
 
+.tw-overflow-hidden {
+  overflow: hidden;
+}
+
 .tw-rounded-lg {
   border-radius: 0.5rem;
 }
@@ -606,14 +614,14 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.tw-bg-green-300 {
+.tw-bg-black {
   --tw-bg-opacity: 1;
-  background-color: rgb(134 239 172 / var(--tw-bg-opacity));
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
 
-.tw-bg-gray-500 {
+.tw-bg-gray-300 {
   --tw-bg-opacity: 1;
-  background-color: rgb(107 114 128 / var(--tw-bg-opacity));
+  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
 }
 
 .tw-p-5 {
@@ -673,76 +681,119 @@ video {
   color: rgb(255 255 255 / 0.9);
 }
 
+@media (min-width: 640px) {
+  .sm\:tw-hidden {
+    display: none;
+  }
+}
+
 @media (min-width: 768px) {
-  .md\:tw-my-6 {
-    margin-top: 1.5rem;
-    margin-bottom: 1.5rem;
+  .md\:tw-mt-3 {
+    margin-top: 0.75rem;
+  }
+
+  .md\:tw-mt-2 {
+    margin-top: 0.5rem;
+  }
+
+  .md\:tw-block {
+    display: block;
   }
 
   .md\:tw-flex {
     display: flex;
   }
 
-  .md\:tw-h-96 {
-    height: 24rem;
+  .md\:tw-hidden {
+    display: none;
+  }
+
+  .md\:tw-h-\[28rem\] {
+    height: 28rem;
   }
 
   .md\:tw-h-auto {
     height: auto;
   }
 
+  .md\:tw-h-96 {
+    height: 24rem;
+  }
+
+  .md\:tw-h-28 {
+    height: 7rem;
+  }
+
   .md\:tw-h-\[\] {
     height: ;
   }
 
-  .md\:tw-h-\[2\] {
-    height: 2;
+  .md\:tw-h-\[29rem\] {
+    height: 29rem;
   }
 
-  .md\:tw-h-\[28rem\] {
-    height: 28rem;
+  .md\:tw-h-\[30rem\] {
+    height: 30rem;
+  }
+
+  .md\:tw-w-12 {
+    width: 3rem;
   }
 
   .md\:tw-w-\[28rem\] {
     width: 28rem;
   }
 
-  .md\:tw-w-5\/6 {
-    width: 83.333333%;
+  .md\:tw-w-full {
+    width: 100%;
   }
 
-  .md\:tw-w-9\/12 {
-    width: 75%;
+  .md\:tw-w-\[\] {
+    width: ;
   }
 
-  .md\:tw-w-2\/12 {
-    width: 16.666667%;
+  .md\:tw-w-\[30rem\] {
+    width: 30rem;
   }
 
-  .md\:tw-w-1\/12 {
-    width: 8.333333%;
+  .md\:tw-w-\[50rem\] {
+    width: 50rem;
   }
 
-  .md\:tw-w-10 {
-    width: 2.5rem;
+  .md\:tw-w-\[40rem\] {
+    width: 40rem;
   }
 
-  .md\:tw-w-1 {
-    width: 0.25rem;
+  .md\:tw-w-\[45rem\] {
+    width: 45rem;
   }
 
-  .md\:tw-w-14 {
-    width: 3.5rem;
+  .md\:tw-w-1\/2 {
+    width: 50%;
   }
 
-  .md\:tw-w-12 {
+  .md\:tw-w-\[32rem\] {
+    width: 32rem;
+  }
+
+  .md\:tw-w-\[3rem\] {
     width: 3rem;
   }
 
-  .md\:tw-scale-75 {
-    --tw-scale-x: .75;
-    --tw-scale-y: .75;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  .md\:tw-w-\[38rem\] {
+    width: 38rem;
+  }
+
+  .md\:tw-w-\[44rem\] {
+    width: 44rem;
+  }
+
+  .md\:tw-w-2\/5 {
+    width: 40%;
+  }
+
+  .md\:tw-w-3\/5 {
+    width: 60%;
   }
 
   .md\:tw-flex-col {
@@ -757,10 +808,6 @@ video {
     justify-content: center;
   }
 
-  .md\:tw-justify-between {
-    justify-content: space-between;
-  }
-
   .md\:tw-justify-around {
     justify-content: space-around;
   }
@@ -769,39 +816,31 @@ video {
     border-radius: 1.5rem;
   }
 
+  .md\:tw-rounded {
+    border-radius: 0.25rem;
+  }
+
   .md\:tw-bg-ns-dsg {
     --tw-bg-opacity: 1;
     background-color: hsl(234 29% 20% / var(--tw-bg-opacity));
   }
 
-  .md\:tw-px-14 {
-    padding-left: 3.5rem;
-    padding-right: 3.5rem;
-  }
-
-  .md\:tw-py-14 {
-    padding-top: 3.5rem;
-    padding-bottom: 3.5rem;
+  .md\:tw-bg-white {
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
   }
 
-  .md\:tw-py-2 {
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
+  .md\:tw-p-10 {
+    padding: 2.5rem;
   }
 
-  .md\:tw-py-5 {
-    padding-top: 1.25rem;
-    padding-bottom: 1.25rem;
+  .md\:tw-p-5 {
+    padding: 1.25rem;
   }
 
-  .md\:tw-py-0 {
-    padding-top: 0px;
-    padding-bottom: 0px;
-  }
-
-  .md\:tw-py-3 {
-    padding-top: 0.75rem;
-    padding-bottom: 0.75rem;
+  .md\:tw-px-14 {
+    padding-left: 3.5rem;
+    padding-right: 3.5rem;
   }
 
   .md\:tw-py-4 {
@@ -809,19 +848,29 @@ video {
     padding-bottom: 1rem;
   }
 
+  .md\:tw-py-20 {
+    padding-top: 5rem;
+    padding-bottom: 5rem;
+  }
+
   .md\:tw-px-10 {
     padding-left: 2.5rem;
     padding-right: 2.5rem;
   }
 
-  .md\:tw-text-2xl {
-    font-size: 1.5rem;
-    line-height: 2rem;
+  .md\:tw-py-5 {
+    padding-top: 1.25rem;
+    padding-bottom: 1.25rem;
+  }
+
+  .md\:tw-px-6 {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
   }
 
-  .md\:tw-text-3xl {
-    font-size: 1.875rem;
-    line-height: 2.25rem;
+  .md\:tw-px-20 {
+    padding-left: 5rem;
+    padding-right: 5rem;
   }
 
   .md\:tw-text-sm {
@@ -829,23 +878,31 @@ video {
     line-height: 1.25rem;
   }
 
-  .md\:tw-text-\[36px\] {
-    font-size: 36px;
+  .md\:tw-text-\[0\.2rem\] {
+    font-size: 0.2rem;
   }
 
-  .md\:tw-text-\[2rem\] {
-    font-size: 2rem;
+  .md\:tw-text-\[0\.5rem\] {
+    font-size: 0.5rem;
   }
 
-  .md\:tw-text-\[1\.9rem\] {
-    font-size: 1.9rem;
+  .md\:tw-text-\[0\.7rem\] {
+    font-size: 0.7rem;
+  }
+
+  .md\:tw-text-\[0\.75rem\] {
+    font-size: 0.75rem;
   }
 
   .md\:tw-text-\[\] {
     color: ;
   }
 
-  .md\:tw-text-\[1\] {
-    color: 1;
+  .md\:tw-text-\[0\.2\] {
+    color: 0.2;
+  }
+
+  .md\:tw-text-\[0\.rem\] {
+    color: 0.rem;
   }
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 531657e..32953f1 100755
--- a/index.html
+++ b/index.html
@@ -17,13 +17,14 @@
   </style>
 </head>
 <body class="tw-text-md">
-  <main class="tw-h-screen md:tw-flex md:tw-justify-center md:tw-items-center md:tw-bg-ns-dsg">
+  <main class="tw-h-screen tw-overflow-hidden md:tw-flex md:tw-justify-center md:tw-items-center md:tw-bg-ns-dsg">
     <!-- Sign-up form start -->
-    <div id="form_sign_up" class="tw-h-full tw-hidden">
-      <div id="hero">
-        <img src="/assets/images/illustration-sign-up-mobile.svg" alt="" class="tw-w-full">
+    <div id="form_sign_up" class="tw-h-full tw-overflow-hidden md:tw-bg-white md:tw-flex md:tw-h-[30rem] md:tw-rounded-3xl">
+      <div id="hero" class="md:tw-p-5 tw-order-2 md:tw-w-2/5">
+        <img src="/assets/images/illustration-sign-up-mobile.svg" alt="" class="tw-w-full md:tw-hidden">
+        <img src="./assets/images/illustration-sign-up-desktop.svg" alt="" class="tw-w-full tw-h-full sm:tw-hidden md:tw-block">
       </div>
-      <div class="tw-flex tw-flex-col tw-justify-evenly tw-py-10 tw-px-5">
+      <div class="tw-flex tw-flex-col tw-justify-evenly tw-py-10 tw-px-5 md:tw-px-20 tw-bg-gray-300 md:tw-text-sm md:tw-w-3/5">
         <h1 class="tw-text-[40px] tw-font-bold">
           Stay updated!
         </h1>
@@ -36,21 +37,21 @@ <h1 class="tw-text-[40px] tw-font-bold">
           <li class="tw-py-2"> And much more!</li>
         </ul>       
         <form action="#" class="tw-flex tw-flex-col tw-mt-4">
-          <label for="email_address" class="tw-font-bold tw-text-sm">
+          <label for="email_address" class="tw-font-bold tw-text-sm md:tw-text-[0.7rem]">
             Email address
           </label>
-          <input type="text" name="email_address" id="email_address" placeholder="email@company.com" class="tw-p-5 tw-border tw-border-ns-g tw-rounded-lg tw-bg-transparent tw-my-5">
-          <button disabled="disabled" class="tw-p-5 tw-bg-ns-dsg tw-text-white/90 tw-rounded-lg tw-font-black">Subscribe to monthly newsletter</button>
+          <input type="text" name="email_address" id="email_address" placeholder="email@company.com" class="tw-p-5 tw-border tw-border-ns-g tw-rounded-lg tw-bg-transparent tw-my-5 md:tw-py-4 md:tw-text-sm md:tw-mt-2">
+          <button disabled="disabled" class="tw-p-5 tw-bg-ns-dsg tw-text-white/90 tw-rounded-lg tw-font-black md:tw-py-4 md:tw-text-sm">Subscribe to monthly newsletter</button>
         </form>
       </div>
     </div>  
     <!-- Sign-up form end -->
 
     <!-- Success message start -->
-    <div id="modal" class="tw-py-10 tw-px-5 tw-h-full tw-bg-white md:tw-h-[28rem] md:tw-w-[28rem] md:tw-flex md:tw-flex-col md:tw-items-center md:tw-justify-around md:tw-rounded-3xl md:tw-px-14">
+    <!-- <div id="modal" class="tw-py-10 tw-px-5 tw-h-full tw-bg-white md:tw-h-[28rem] md:tw-w-[28rem] md:tw-flex md:tw-flex-col md:tw-items-center md:tw-justify-around md:tw-rounded-3xl md:tw-px-14">
       <div class="tw-h-1/2 tw-flex tw-flex-col tw-justify-end md:tw-h-auto">
         <div class="md:tw-w-12"><img src="assets/images/icon-success.svg" alt="" srcset=""></div>
-        <h1 class="tw-text-[40px] tw-font-black tw-leading-10 tw-pt-8 tw-pb-6 md:tw-text-[1.9rem]">
+        <h1 class="tw-text-[40px] tw-font-black tw-leading-10 tw-pt-8 tw-pb-6">
           Thanks for subscribing!
         </h1>
         <p class="md:tw-text-sm">
@@ -63,7 +64,7 @@ <h1 class="tw-text-[40px] tw-font-black tw-leading-10 tw-pt-8 tw-pb-6 md:tw-text
           Dismiss message
         </button>
       </div>
-    </div>
+    </div> -->
     <!-- Success message end -->
   </main>