From 608acb413c0ebb3445e40b59baeed2d80ffbd45b Mon Sep 17 00:00:00 2001
From: Anurag Samarth <asamarth017@gmail.com>
Date: Thu, 20 Jun 2024 01:05:10 +0530
Subject: [PATCH] responsive landing page is ready

---
 Day 21 Registration Form/.vscode/settings.json |  3 ---
 Day 39 Landing Page/src/App.jsx                |  2 +-
 Day 39 Landing Page/src/Components/Body.jsx    |  6 +++---
 Day 39 Landing Page/src/Components/Footer.jsx  |  2 +-
 Day 39 Landing Page/src/Components/Header.jsx  | 11 ++++++++++-
 5 files changed, 15 insertions(+), 9 deletions(-)
 delete mode 100644 Day 21 Registration Form/.vscode/settings.json

diff --git a/Day 21 Registration Form/.vscode/settings.json b/Day 21 Registration Form/.vscode/settings.json
deleted file mode 100644
index 6f3a291..0000000
--- a/Day 21 Registration Form/.vscode/settings.json	
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-    "liveServer.settings.port": 5501
-}
\ No newline at end of file
diff --git a/Day 39 Landing Page/src/App.jsx b/Day 39 Landing Page/src/App.jsx
index 3c36a17..e556a21 100644
--- a/Day 39 Landing Page/src/App.jsx	
+++ b/Day 39 Landing Page/src/App.jsx	
@@ -5,7 +5,7 @@ import Header from "./Components/Header"
 function App() {
 
   return (
-    <div className=" bg-amber-50 min-h-screen px-6 py-3 flex flex-col gap-16">
+    <div className=" bg-amber-50 min-h-screen px-6 py-3 flex flex-col gap-16 md:px-10 md:py-7 md:justify-between lg:px-16 lg:py-10">
       <Header/>
       <Body/>
       <Footer/>
diff --git a/Day 39 Landing Page/src/Components/Body.jsx b/Day 39 Landing Page/src/Components/Body.jsx
index 5d1eb6a..e200a25 100644
--- a/Day 39 Landing Page/src/Components/Body.jsx	
+++ b/Day 39 Landing Page/src/Components/Body.jsx	
@@ -1,13 +1,13 @@
 function Body(){
    return (
-    <div className=" space-y-4">
-        <div>
+    <div className=" space-y-4 lg:flex justify-center items-center">
+        <div className=" flex justify-center">
             <img src="./public/body img.png" alt="img" />
         </div>
         <div>
             <h1 className="text-5xl font-bold font-playfair leading-tight">Host Your website in less then 5 minutes.</h1>
             <p className=" font-lato text-gray-400">with Hoster , get your website up and running in no less then 5 minutes with the most competitives pricing packages available online.</p>
-            <form action="" className="flex flex-col gap-4 m-4">
+            <form action="" className="flex flex-col gap-4 m-4 md:flex-row">
                 <input className=" rounded-md px-4 py-3 placeholder:text-gray-400" type="email" placeholder="Enter email address" />
                 <button className=" rounded-md px-4 py-3 bg-blue-400 hover:bg-blue-600">Join Waitlist</button>
             </form>
diff --git a/Day 39 Landing Page/src/Components/Footer.jsx b/Day 39 Landing Page/src/Components/Footer.jsx
index bb45d2f..ae15c32 100644
--- a/Day 39 Landing Page/src/Components/Footer.jsx	
+++ b/Day 39 Landing Page/src/Components/Footer.jsx	
@@ -1,6 +1,6 @@
 function Footer(){
     return(
-        <div className="flex flex-col gap-12">
+        <div className="flex flex-col gap-12 md:flex-row md:justify-between">
             <ul className="flex gap-6 font-lato text-gray-400">
                 <li>
                     <a href="#">Facebook</a>
diff --git a/Day 39 Landing Page/src/Components/Header.jsx b/Day 39 Landing Page/src/Components/Header.jsx
index fc42b22..a0741f4 100644
--- a/Day 39 Landing Page/src/Components/Header.jsx	
+++ b/Day 39 Landing Page/src/Components/Header.jsx	
@@ -11,7 +11,16 @@ function Header() {
         />
         <button className=" bg-gradient-to-r from-orange-400 to-red-400 text-xs text-white px-2.5 py-1.5 rounded-2xl">Hiring</button>
       </div>
-      <div>
+      <ul className="hidden lg:flex justify-between items-center font-lato text-gray-400 gap-4">
+        <li><a href="#">Plans</a></li>
+        <li><a href="#">Find Domain</a></li>
+        <li><a href="#">Why Hoster</a></li>
+      </ul>
+      <div className="hidden lg:flex justify-center items-center font-lato gap-6">
+        <a href="#" className=" text-gray-400">sign In</a>
+        <button className="rounded-md px-4 py-3 bg-blue-400 hover:bg-blue-600">Join Waitlist</button>
+      </div>
+      <div className=" lg:hidden">
         <FaBarsStaggered />
       </div>
     </div>