Merge pull request Anjaliavv51#34 from gauravsingh1281/Mobile-respons…

…iveness Issue No . Anjaliavv51#32 [Fixed] Make Rentalog homepage responsive for Mobile view.
2004shweta · Aug 24, 2023 · 38d160a · 38d160a
2 parents 23be3ec + c8eb807
commit 38d160a
Show file tree

Hide file tree

Showing 8 changed files with 107 additions and 21 deletions.
diff --git a/src/assets/Icons/menu-icon.png b/src/assets/Icons/menu-icon.png
diff --git a/src/components/AboutUs-section/AboutUs-section.css b/src/components/AboutUs-section/AboutUs-section.css
@@ -5,9 +5,7 @@
 }
 
 .aboutUs-section .row {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+
   gap: 68px;
   margin-top: 16px;
 }
@@ -25,6 +23,16 @@
 
 .aboutUs-section .row .paragraph {
   max-width: 550px;
-  text-align: start;
+  text-align: justify;
+  padding: 8px;
   line-height: 28.38px;
 }
+
+@media (max-width:768px) {
+  .aboutUs-section .row .paragraph {
+    max-width: 550px;
+    text-align: justify;
+    padding: 12px;
+    line-height: 28.38px;
+  }
+}
diff --git a/src/components/AboutUs-section/AboutUs.jsx b/src/components/AboutUs-section/AboutUs.jsx
@@ -4,8 +4,8 @@ import "./AboutUs-section.css";
 const AboutUs = () => {
   return (
     <div className="aboutUs-section">
-      <span className="primary-heading">About Us</span>
-      <div className="row">
+      <span className="text-3xl md:text-4xl font-semibold text-[#312F2F] text-center pt-10">About Us</span>
+      <div className=" row flex flex-col justify-center items-center md:flex-row">
         <img
           className="rent-board-img"
           src={rentBoardImg}

diff --git a/src/components/Footer-section/Footer.jsx b/src/components/Footer-section/Footer.jsx
@@ -4,10 +4,10 @@ import { FaTwitter, FaGithub, FaInstagram } from "react-icons/fa";
 const Footer = () => {
   return (
     <footer>
-      <div className="flex justify-center justufy-between bg-primaryGreen text-textWhite px-[75px] py-[60px] ">
+      <div className="flex justify-center justufy-between bg-primaryGreen text-textWhite md:px-[75px] px-[25px] py-[60px] md:flex-row flex-col">
         <div className="w-[300px] flex-1">
           <img
-            className="bg-[white] px-1 rounded-xl mb-2"
+            className="bg-[white] px-1 rounded-xl mb-2 w-64"
             src={logo}
             alt="logo"
           />
@@ -19,7 +19,7 @@ const Footer = () => {
           <h3 className="text-xl font-semibold">Contact Us</h3>
           <div className="flex space-x-3 pt-2">
             <a href="https://twitter.com/gauravsingh1281">
-              <FaTwitter className="w-8 h-8" />
+              <FaTwitter className="w-8 h-8 " />
             </a>
             <a href="https://github.com/gauravsingh1281">
               <FaGithub className="w-8 h-8" />

diff --git a/src/components/Header-section/Header-section.css b/src/components/Header-section/Header-section.css
@@ -53,4 +53,80 @@
   width: 22%;
   height: 52px;
   background: #1abc9c;
+}
+
+@media (max-width:768px) {
+  .header-section {
+    width: 100%;
+    height: 1024px;
+    background: url(/src/assets/Images/header-bg.png);
+    background-position: center center;
+    background-color: #262626;
+    background-size: cover;
+    position: relative;
+  }
+
+  .header-text {
+    position: relative;
+    top: 23%;
+    left: 4%;
+    width: 74%;
+  }
+
+  .header-text h1 {
+    font-size: 46px;
+    font-weight: 600;
+  }
+
+  .btn {
+    margin-top: 55px;
+    border-radius: 8px;
+    color: white;
+    font-size: 1.2rem;
+    font-weight: 700;
+    width: 31%;
+    height: 47px;
+    background: #1abc9c;
+  }
+}
+
+@media (max-width:580px) {
+  .navbar .logo {
+    width: 170px;
+  }
+
+  .navbar .menu-icon {
+    width: 40px;
+  }
+
+  .header-section li {
+    list-style: none;
+    font-weight: 600;
+    font-size: 15.5px;
+    color: #262626;
+  }
+
+  .btn {
+    margin-top: 55px;
+    border-radius: 8px;
+    color: white;
+    font-size: 1.2rem;
+    font-weight: 700;
+    width: 36%;
+    height: 47px;
+    background: #1abc9c;
+  }
+}
+
+@media (max-width:468px) {
+  .btn {
+    margin-top: 55px;
+    border-radius: 8px;
+    color: white;
+    font-size: 1rem;
+    font-weight: 700;
+    width: 42%;
+    height: 44px;
+    background: #1abc9c;
+  }
 }
diff --git a/src/components/Header-section/Navbar.jsx b/src/components/Header-section/Navbar.jsx
@@ -1,21 +1,23 @@
-import logo from "../../assets/Images/logo.png"
+import logo from "../../assets/Images/logo.png";
+import MenuIcon from "../../assets/Icons/menu-icon.png";
 import { FiUser } from 'react-icons/fi';
 
 const Navbar = () => {
     return (
         <>
-            <nav className="navbar flex justify-between items-center py-4 px-12">
-                <img src={logo} alt="Rentalog-logo" />
-                <ul className='flex'>
+            <nav className="navbar flex justify-between items-center py-4 px-4 md:py-4 md:px-12">
+                <img className="logo" src={logo} alt="Rentalog-logo" />
+                <ul className='hidden md:flex'>
                     <li className='nav-links mr-5 p-3 '>HOME</li>
                     <li className='nav-links mr-5 p-3'>ABOUT</li>
                     <li className='nav-links mr-5 p-3'>CONTACT</li>
                     <li className='nav-links  p-3'>RENTALS</li>
                 </ul>
-                <ul className='user-cta flex'>
-                    <li className='mr-5 p-3'>Login</li>
-                    <li className=' p-3'><FiUser className="mr-1" />Register</li>
+                <ul className='user-cta hidden md:flex'>
+                    <li className='mr-5 p-2 md:p-3'>Login</li>
+                    <li className=' p-2 md:p-3'><FiUser className="mr-1" />Register</li>
                 </ul>
+                <img className="menu-icon md:hidden" src={MenuIcon} alt="Menu-icon" />
             </nav>
         </>
     )

diff --git a/src/components/Services-section/Services-section.jsx b/src/components/Services-section/Services-section.jsx
@@ -5,21 +5,21 @@ import placeName from "./placeName";
 const Services = () => {
   return (
     <>
-      <h1 className="text-5xl font-semibold text-[#312F2F] text-center pt-10">
+      <h1 className=" text-4xl md:text-5xl font-semibold text-[#312F2F] text-center pt-10">
         Our Services Includes
       </h1>
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-10 my-10 mx-36">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-10 my-10 md:mx-36 sm:mx-24 mx-16">
         {
           ourServices.map(({ id, bgColor, title, description, icon, alt }) => {
             return <ServicesCard title={title} key={id} bgColor={bgColor} icon={icon} alt={alt} description={description} />
           })
         }
       </div>
       <div className="bg-[#D1F2EB] my-20 ">
-        <h1 className="text-4xl font-semibold text-[#312F2F] text-center py-10">
+        <h1 className="text-3xl md:text-4xl font-semibold text-[#312F2F] text-center py-10">
           Our Services are available in
         </h1>
-        <div className="flex justify-center items-center flex-row pb-14 gap-16 px-10">
+        <div className="flex justify-center items-center flex-col pb-14 gap-16 px-10 md:flex-row">
           {
             placeName.map(({ id, name, image }) => {
               return <ServicesAvailableIn placeName={name} key={id} placeImage={image} />

diff --git a/src/components/Services-section/ServicesCard.jsx b/src/components/Services-section/ServicesCard.jsx
@@ -8,7 +8,7 @@ const ServicesCard = (props) => {
                     src={props.icon}
                     alt={props.alt}
                 ></img>
-                <h1 className="text-[#312F2F] font-bold text-2xl">
+                <h1 className="text-[#312F2F] font-bold md:text-2xl text-xl">
                     {props.title}
                 </h1>
             </div>