Header done, responsive, missing mobile menu

neluttu · Jul 6, 2023 · 6e11849 · 6e11849
1 parent d97345e
commit 6e11849
Show file tree

Hide file tree

Showing 2 changed files with 328 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -10,20 +10,58 @@
     <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
     <link href="styles.css" type="text/css" rel="stylesheet">
 </head>
-<body class="bg-[#F5F5F5] flex items-center justify-center min-h-screen font-dmsans">
-	<div class="w-full md:w-[1440px] bg-white min-h-[400px]">
+<body class="bg-[#F5F5F5] flex items-center justify-center font-dmsans">
+	<div class="w-full max-w-[1440px] bg-white min-h-[400px]">
         <div class="bg-black w-full text-center text-white text-sm font-normal py-2">
             New! We launched our affiliate program! <a href="about:srcdoc#" class="underline hover:text-[#6DD1ED] transition-all ease-in duration-150">See more</a>
         </div>
-        <nav class="flex items-center justify-center w-full md:w-[1200px] mx-auto mt-5">
-            <a href="about:srcdoc#" class="font-bold font-outfit text-[32px] hover:text-[#6DD1ED] transition-all duration-150 ease-in">launch</a>
-            <div class="grow text-center flex items-center justify-center gap-10 text-base font-[700]">
+        <nav class="flex items-center justify-center w-full md:max-w-[1200px] px-5 mx-auto mt-5">
+            <a href="about:srcdoc#" class="font-bold grow md:grow-0 font-outfit text-[32px] hover:text-[#6DD1ED] transition-all duration-150 ease-in">launch</a>
+            <div class="grow hidden text-center md:flex items-center justify-center gap-10 text-base font-[700]">
                 <a href="about:srcdoc#" class="hover:text-[#6DD1ED] transition-all ease-in duration-150">What is Launch?</a>
                 <a href="about:srcdoc#" class="hover:text-[#6DD1ED] transition-all ease-in duration-150">Pricing</a>
                 <a href="about:srcdoc#" class="hover:text-[#6DD1ED] transition-all ease-in duration-150">FAQ</a>
             </div>
-            <button class="text-base font-[700] bg-[#E2F4F9] rounded-lg py-3 px-5 hover:bg-[#6DD1ED] hover:text-white transition-all duration-150 ease-in">Buy now</button>
+            <button class="hidden md:block text-base font-[700] bg-[#E2F4F9] rounded-lg py-3 px-5 hover:bg-[#6DD1ED] hover:text-white transition-all duration-150 ease-in">Buy now</button>
+            <svg class="md:hidden" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M3 7H21" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
+                <path d="M3 12H21" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
+                <path d="M3 17H21" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
+            </svg>
         </nav>
+        <div class="w-full relative block md:mt-14 py-16 px-3">
+            <svg width="298" height="414" viewBox="0 0 298 414" fill="none" xmlns="http://www.w3.org/2000/svg" class="lg:block hidden absolute bottom-0 left-0">
+                <path d="M-140.783 142.93C-126.572 155.411 -114.344 160.875 -79.9661 181.275C-68.7537 190.295 -62.9687 194.296 -49.4332 192.617C65.3378 178.354 126.126 146.759 142.978 142.468C149.064 140.043 154.94 137.121 160.547 133.732C163.291 131.967 160.941 128.314 158.523 128.576C147.378 132.428 136.447 136.878 125.781 141.907C77.6617 160.669 27.7907 174.581 -23.0913 183.438C-36.0586 185.455 -52.4442 191.989 -64.3877 185.47C-76.3614 178.99 -87.9128 171.759 -98.9725 163.819C-111.36 156.152 -124.941 149.534 -138.064 141.181C-140.719 139.01 -141.959 141.101 -140.783 142.93Z" fill="#191919"/>
+                <path d="M171.067 117.929C172.118 109.523 172.129 101.674 172.69 92.3542C172.312 87.4283 173.116 82.4833 175.035 77.9307C176.418 75.4492 178.392 73.3469 180.781 71.8101C183.17 70.2732 185.902 69.3492 188.733 69.1197C194.887 67.6296 201.147 66.624 207.458 66.1124C213.197 65.0066 219.526 64.8072 225.271 63.6983C227.68 63.4345 227.747 59.5193 224.745 58.8717C218.415 58.3219 212.042 58.5199 205.759 59.4617C195.193 61.0931 181.475 61.8991 173.074 68.8627C170.424 71.5087 168.376 74.6947 167.068 78.2036C165.76 81.7125 165.223 85.462 165.494 89.1969C165.177 98.5357 165.175 108.768 165.633 117.51C167.414 120.279 170.416 120.926 171.067 117.929Z" fill="#191919"/>
+                <path d="M211.444 80.3369C229.914 72.7075 249.114 61.4049 260.624 56.4332C266.679 53.8311 272.147 50.3143 278.237 47.6897C282.479 46.2545 278.496 50.1021 278.17 51.605C275.105 54.8693 272.601 59.0167 268.65 62.8927C257.554 73.7825 244.513 83.5829 232.901 93.6167C232.374 94.0389 232.022 94.6412 231.914 95.3074C231.805 95.9736 231.947 96.6565 232.312 97.2242C232.677 97.7919 233.24 98.2042 233.891 98.3816C234.542 98.5589 235.236 98.4887 235.839 98.1845C255.241 86.6133 272.175 71.3351 285.674 53.2215C286.972 51.957 287.81 50.2954 288.055 48.5003C288.301 46.7053 287.94 44.8795 287.03 43.3129C282.919 36.9209 272.579 44.8789 268.311 46.317C249.22 55.9821 230.645 66.6349 212.662 78.2324C208.768 78.1865 209.941 80.0106 211.444 80.3369Z" fill="#191919"/>
+                <path d="M270.887 110.528C270.059 116.12 267.558 121.329 263.713 125.472C259.781 129.294 255.123 132.29 250.014 134.283C249.047 134.261 248.094 134.529 247.28 135.052C246.466 135.576 245.827 136.331 245.446 137.221C245.125 138.721 246.62 139.045 248.123 139.372C254.003 140.649 263.341 133.94 267.565 129.452C270.013 126.817 271.872 123.691 273.019 120.282C274.165 116.873 274.573 113.26 274.214 109.681C273.839 108.081 271.209 109.028 270.887 110.528Z" fill="#191919"/>
+                <path d="M214.991 176.178C223.317 175.111 231.46 172.914 239.193 169.647C252.155 163.657 267.766 153.855 272.523 139.172C273.764 137.081 270.173 135.519 268.938 137.607C260.878 149.229 249.347 158.001 235.996 162.667C223.884 167.872 210.57 167.076 197.632 169.27C191.866 170.246 145.801 209.109 121.382 227.352C96.0957 246.244 69.586 263.247 43.1037 280.28C17.531 296.729 -9.19592 311.384 -36.8739 326.558C-50.0223 333.986 -63.9601 339.92 -78.4274 344.25C-89.5108 347.015 -101.114 346.929 -112.155 343.999C-127.118 340.94 -141.617 335.942 -155.286 329.131C-163.067 325.128 -170.227 321.961 -177.966 317.903C-185.517 313.681 -193.422 310.125 -201.59 307.275C-203.676 306.031 -205.243 309.625 -203.155 310.86C-191.057 320.468 -177.711 328.387 -163.482 334.403C-150.852 340.452 -137.729 345.411 -124.254 349.224C-112.839 352.554 -100.973 354.072 -89.0875 353.72C-74.8359 351.991 -61.0556 347.511 -48.5112 340.529C30.3205 303.941 130.506 233.583 195.463 175.872C200.178 179.248 211.664 177.025 214.991 176.178Z" fill="#191919"/>
+                <path d="M262.595 83.5869C261.029 87.1726 260.962 91.0877 258.805 93.7539C254.754 100.044 249.308 105.314 242.889 109.156C236.541 113.239 246.986 116.618 256.762 106.691C260.765 102.818 263.921 98.1562 266.029 93.0004C267.041 89.4865 267.303 85.7988 266.797 82.1772C265.333 81.8253 262.936 82.0745 262.595 83.5869Z" fill="#191919"/>
+            </svg>
+            <div class="mx-auto w-[90%] md:w-[800px] flex items-center justify-center flex-col">
+                <h1 class="font-bold md:mb-10 mb-4 tracking-tight text-[40px] md:text-[96px] leading-tight text-center font-outfit">Launch a SaaS product in style</h1>
+                <p class="text-[#364153] text-lg md:text-2xl tracking-tight text-center font-medium leading-relaxed">Create a stylish website easy and for everyone - SaaS Platforms, Technology Startups and more</p>
+            </div>
+            <div class="flex items-center justify-center flex-col md:flex-row gap-4 mt-10 text-base md:text-lg font-normal">
+                <button class="bg-black hover:bg-[#6DD1ED] hover:text-white transition-all duration-150 ease-in text-white w-[96%] md:w-auto p-4 md:p-6 rounded-md md:rounded-xl flex items-center justify-center gap-2">
+                    <span>Buy Now</span>
+                    <svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <g clip-path="url(#clip0_1_3199)">
+                            <path d="M0.40387 8H15.9031" stroke="white" stroke-width="2" stroke-miterlimit="10"/>
+                            <path d="M8.74963 15.1534L15.9031 7.99994L8.74963 0.846436" stroke="white" stroke-width="2" stroke-miterlimit="10"/>
+                        </g>
+                        <defs>
+                            <clipPath id="clip0_1_3199">
+                                <rect width="17.1923" height="16" fill="white" transform="translate(0.40387)"/>
+                            </clipPath>
+                        </defs>
+                    </svg>
+                </button>
+                <button class="bg-[#E2F4F9] text-black w-[96%] md:w-auto p-4 md:p-6 rounded-md md:rounded-xl tracking-tight font-medium hover:bg-[#6DD1ED] hover:text-white transition-all duration-150 ease-in">
+                    Preview in Figma
+                </button>
+            </div>
+        </div>
     </div>
 </body>
-</html>
+</html>