responsive landing page is ready

AnuragSamarth · Jun 19, 2024 · 608acb4 · 608acb4
1 parent 4ede566
commit 608acb4
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 9 deletions.
diff --git a/Day 21 Registration Form/.vscode/settings.json b/Day 21 Registration Form/.vscode/settings.json
diff --git 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
@@ -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
@@ -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
@@ -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>