Project Complete

src/App.js

-import logo from "./logo.svg";
-import "./App.scss";
-import NavbarComponent from "./Components/Navbar/Navbar";
 import { BrowserRouter } from "react-router-dom";
+import "./App.scss";
 import AppRoutes from "./Routes/AppRoutes";
 
 function App() {
   return (
     <BrowserRouter>
       <AppRoutes />
-      {/* <NavbarComponent /> */}
     </BrowserRouter>
   );
 }

src/Components/AcheiveGoalCard/AcheiveGoalCard.js

 import React from "react";
-import { skillPad } from "../../Constant/Images";
 import style from "./AcheiveGoalCard.module.scss";
 
 const AcheiveGoalCard = ({ data }) => {

src/Components/AcheiveGoalCard/AcheiveGoalCard.module.scss

@@ -3,7 +3,6 @@
   height: 300px;
   padding: 40px;
   margin-top: 20px;
-  // background-color: red;
   display: flex;
   justify-content: center;
   align-items: center;

src/Components/BlogCard/BlogCard.js

@@ -7,7 +7,6 @@ import { BsFillPersonFill, BsArrowRight } from "react-icons/bs";
 
 const BlogCard = ({ data }) => {
   return (
-    // <Col md={4} style={{marginTop: "40px"}}>
     <div className={style.cardMainContianer}>
       <div className={style.imageContainer}>
         <img src={data?.image} alt="" />
@@ -32,7 +31,6 @@ const BlogCard = ({ data }) => {
         </div>
       </div>
     </div>
-    // </Col>
   );
 };
 

src/Components/BlogCard/BlogCard.module.scss

@@ -34,7 +34,6 @@
     }
   }
   &:hover {
-    //   background-color: red;
     -webkit-box-shadow: 0px 0px 10px -1px rgba(0, 0, 0, 0.62);
     -moz-box-shadow: 0px 0px 10px -1px rgba(0, 0, 0, 0.62);
     box-shadow: 0px 0px 10px -1px rgba(0, 0, 0, 0.62);

src/Components/Carousel/Carousel.js

 import React from "react";
 import Carousel, { consts } from "react-elastic-carousel";
-import { google, envato } from "../../Constant/Images";
-import { Button } from "react-bootstrap";
-import { AiOutlineRight, AiOutlineLeft } from "react-icons/ai";
+import { AiOutlineLeft, AiOutlineRight } from "react-icons/ai";
+import { envato, google } from "../../Constant/Images";
 import style from "./Carousel.module.scss";
 
-const CarouselComponent = () => {
+const CarouselComponent = ({ breakPoints }) => {
   const myArrow = ({ type, onClick, isEdge }) => {
     const pointer =
       type === consts.PREV ? (
@@ -21,9 +20,8 @@ const CarouselComponent = () => {
   };
   return (
     <Carousel
+      breakPoints={breakPoints}
       pagination={false}
-      itemsToShow={4}
-      itemsToScroll={4}
       renderArrow={myArrow}
     >
       <img src={envato} alt="" className={style.img} />
@@ -35,10 +33,6 @@ const CarouselComponent = () => {
       <img src={google} alt="" className={style.img} />
       <img src={google} alt="" className={style.img} />
       <img src={envato} alt="" className={style.img} />
-
-      {/* {items.map((item) => (
-        <div key={item.id}>{item.title}</div>
-      ))} */}
     </Carousel>
   );
 };

src/Components/CourseCard/CourseCard.js

 import React from "react";
-import { Container } from "react-bootstrap";
+import { AiFillStar } from "react-icons/ai";
 import style from "./CourseCard.module.scss";
-import photographerMan from "../../assets//images//photographer_man.png";
-import {AiFillStar} from "react-icons/ai"
 
 const CourseCard = ({data}) => {
   return (

src/Components/CourseCard/CourseCard.module.scss

@@ -5,7 +5,6 @@
   min-height: 400px;
   height: 100%;
   transition: 0.3s;
-  // background-color: yellow;
   margin-top: 40px;
   -webkit-box-shadow: 0px 0px 5px -1px rgba(0, 0, 0, 0.75);
   -moz-box-shadow: 0px 0px 5px -1px rgba(0, 0, 0, 0.75);
@@ -14,8 +13,6 @@
     width: 100%;
     height: 50%;
     background-color: orange;
-    //   background-image: url(../../assets//images//photographer_man.png);
-    //   object-fit: cover;
     img {
       object-fit: cover;
       width: 100%;
@@ -27,14 +24,12 @@
     white-space: wrap;
 
     overflow: hidden;
-    // text-overflow: ellipsis;
     .price {
       color: root.$main_red;
       margin-bottom: 0px;
     }
   }
   &:hover {
-    // background-color: red;
     -webkit-box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.62);
     -moz-box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.62);
     box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.62);

src/Components/CourseCategories/CourseCategories.module.scss

@@ -36,7 +36,6 @@
     content: "";
     position: absolute;
     pointer-events: none;
-    /* to click through anytime */
     border: 1px solid rgb(132, 132, 132);
   }
   &:after {

src/Components/Footer/Footer.js

@@ -6,11 +6,50 @@ const Footer = () => {
     <div className={style.footerMainContainer}>
       <Container>
         <div className={style.footerInnerContainer}>
-          <div className={style.footerDiv1}>asdsadas</div>
-          <div className={style.footerDiv2}>asdassad</div>
-          <div className={style.footerDiv3}>asdaas</div>
-          <div className={style.footerDiv4}>asdasd</div>
-          <div className={style.footerDiv5}>asdsa</div>
+          <div className={style.footerDiv1}>
+            <p className={`p-16`}>Address</p>
+            <p className={`p-14`}>73724 Route 30</p>
+            <p className={`p-14`}>South Richmond Hill, NY 11419 </p>
+            <p className={`p-14`}>Tel: (603)-677-3400</p>
+            <p className={`p-14`}>Email: info@yourdomain.com</p>
+            <p className={`p-14`}>Web: yourdomain.com</p>
+          </div>
+          <div className={style.footerDiv2}>
+            <p className={`p-16`}>Help Center</p>
+            <p className={`p-14`}>Documentation</p>
+            <p className={`p-14`}>Tutorials</p>
+            <p className={`p-14`}>Term of Use</p>
+            <p className={`p-14`}>Privacy Policy</p>
+          </div>
+          <div className={style.footerDiv3}>
+            <p className={`p-16`}>About Us</p>
+            <p className={`p-14`}>Our Team</p>
+            <p className={`p-14`}>Company</p>
+            <p className={`p-14`}>Jobs</p>
+            <p className={`p-14`}>News Latter</p>
+          </div>
+          <div className={style.footerDiv4}>
+            <p className={`p-16`}>Tools</p>
+            <p className={`p-14`}>Create Acccount</p>
+            <p className={`p-14`}>Log In</p>
+            <p className={`p-14`}>Services</p>
+            <p className={`p-14`}>Sitemap</p>
+          </div>
+          <div className={style.footerDiv5}>
+            <p className={`p-16`}>Get In Touch</p>
+            <p className={`p-14`}>Contact Us</p>
+            <p className={`p-14`}>Join Us</p>
+            <p className={`p-14`}>Invite Us</p>
+            <p className={`p-14`}>Donate</p>
+          </div>
+        </div>
+        <div className={style.footerBottom}>
+          <div>
+            <p>Facebook. Twitter. Instagram. LinkedIn. Google Plus.</p>
+          </div>
+          <div>
+            <p>Copyright © 2017 LMS EDUCATION. All Rights Reserved</p>
+          </div>
         </div>
       </Container>
     </div>

src/Components/Footer/Footer.module.scss

@@ -2,19 +2,101 @@
 
 .footerMainContainer {
   width: 100%;
-  height: 400px;
   background-color: root.$footer_background;
   color: white;
   .footerInnerContainer {
     display: flex;
+    flex-wrap: wrap;
     width: 100%;
     padding-top: 50px;
-    .footerDiv1,
+    .footerDiv1 {
+      width: 20%;
+    }
     .footerDiv2,
     .footerDiv3,
     .footerDiv4,
     .footerDiv5 {
       width: 20%;
+      p {
+        cursor: pointer;
+      }
+    }
+  }
+  .footerBottom {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+}
+
+@media screen and (max-width: 1000px) {
+  .footerMainContainer {
+    .footerInnerContainer {
+      .footerDiv1 {
+        width: 40%;
+      }
+      .footerDiv2,
+      .footerDiv3,
+      .footerDiv4,
+      .footerDiv5 {
+        width: 20%;
+        p {
+          cursor: pointer;
+        }
+      }
+    }
+    .footerBottom {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+  }
+}
+
+
+@media screen and (max-width: 768px) {
+  .footerMainContainer {
+    .footerInnerContainer {
+      .footerDiv1 {
+        width: 50%;
+      }
+      .footerDiv2,
+      .footerDiv3,
+      .footerDiv4,
+      .footerDiv5 {
+        width: 30%;
+        p {
+          cursor: pointer;
+        }
+      }
+    }
+    .footerBottom {
+      width: 100%;
+      display: block;
+      // justify-content: space-between;
+      // align-items: center;
+    }
+  }
+}
+
+
+@media screen and (max-width: 576px) {
+  .footerMainContainer {
+    .footerInnerContainer {
+      .footerDiv1 {
+        width: 50%;
+      }
+      .footerDiv2,
+      .footerDiv3,
+      .footerDiv4,
+      .footerDiv5 {
+        width: 100%;
+        p {
+          cursor: pointer;
+        }
+      }
     }
   }
 }

src/Components/Navbar/Navbar.js

-import React, { useState } from "react";
-import style from "./Navbar.module.scss";
-// import Logo from "../../images/logo.png";
-import "../../App.scss";
-import { Navbar, Container, Nav, NavDropdown } from "react-bootstrap";
-import { useNavigate } from "react-router-dom";
-// import ModalComponent from "../InputModal/InputModal";
-import { BiSearch, BiLogIn } from "react-icons/bi";
-import { HiOutlineShoppingCart } from "react-icons/hi";
+import React from "react";
+import { Container, Nav, Navbar } from "react-bootstrap";
+import { BiLogIn, BiSearch } from "react-icons/bi";
 import { GoPerson } from "react-icons/go";
+import { HiOutlineShoppingCart } from "react-icons/hi";
+import { useNavigate } from "react-router-dom";
+import "../../App.scss";
+import style from "./Navbar.module.scss";
 
 const NavbarComponent = () => {
   const history = useNavigate();
@@ -32,7 +30,7 @@ const NavbarComponent = () => {
           id="responsive-navbar-nav"
           style={{ backgroundColor: "white !important" }}
         >
-          <Nav className="me-auto" style={{ paddingLeft: "30px" }}>
+          <Nav className={`me-auto ${style.navContainer}`}>
             <Nav.Link href="#features" className={style.padding}>
               Home
             </Nav.Link>

src/Components/Navbar/Navbar.module.scss

@@ -3,9 +3,9 @@
 .mainContainer {
   background-color: root.$main_red !important;
   color: white;
-  -webkit-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.52);
--moz-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.52);
-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.52);
+  -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.52);
+  -moz-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.52);
+  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.52);
 }
 
 .rightIcon {
@@ -18,6 +18,10 @@ box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.52);
   color: white !important;
 }
 
+.navContainer {
+  padding-left: 20px;
+}
+
 .lms {
   font-size: 30px;
   font-weight: bolder;
@@ -35,3 +39,16 @@ box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.52);
   font-size: 22px;
   color: white;
 }
+
+@media screen and (max-width: 992px) {
+  .padding {
+    padding: 10px 0px !important;
+  }
+  .rightIcon {
+    padding: 10px 0px !important;
+    color: white !important;
+  }
+  .navContainer {
+    padding-left: 0px;
+  }
+}

src/Routes/AppRoutes.js

 import React from "react";
-import { BrowserRouter, Routes, Route } from "react-router-dom";
-import NavbarComponent from "../Components/Navbar/Navbar";
+import { Route, Routes } from "react-router-dom";
 import Home from "../Screens/Home/Home";
 const AppRoutes = () => {
   return (

src/Screens/Home/Home.js

 import React from "react";
-import style from "./Home.module.scss";
-import { Container, Row, Col } from "react-bootstrap";
-import NavbarComponent from "../../Components/Navbar/Navbar";
+import { Col, Container, Row } from "react-bootstrap";
+import Carousel from "react-elastic-carousel";
+import { BiCircle } from "react-icons/bi";
+import ReactPlayer from "react-player";
 import "../../App.scss";
-import { headImg, quoteImg, profile } from "../../Constant/Images";
+import AcheiveGoalCard from "../../Components/AcheiveGoalCard/AcheiveGoalCard";
+import BlogCard from "../../Components/BlogCard/BlogCard";
+import CarouselComponent from "../../Components/Carousel/Carousel";
+import CourseCard from "../../Components/CourseCard/CourseCard";
 import CourseCategories from "../../Components/CourseCategories/CourseCategories";
+import Footer from "../../Components/Footer/Footer";
+import NavbarComponent from "../../Components/Navbar/Navbar";
+import { headImg, profile, quoteImg } from "../../Constant/Images";
 import {
   acheiveGoalData,
   categories,
-  topCourse,
+  topCourse
 } from "../../Constant/mockData";
-import CourseCard from "../../Components/CourseCard/CourseCard";
-import AcheiveGoalCard from "../../Components/AcheiveGoalCard/AcheiveGoalCard";
-import ReactPlayer from "react-player";
-import CarouselComponent from "../../Components/Carousel/Carousel";
-import BlogCard from "../../Components/BlogCard/BlogCard";
-import Carousel from "react-elastic-carousel";
-import { BiCircle, BiSquare } from "react-icons/bi";
-import Footer from "../../Components/Footer/Footer";
+import style from "./Home.module.scss";
 
 const Home = () => {
+  const breakPoints = [
+    { width: 1, itemsToShow: 1 },
+    { width: 550, itemsToShow: 2, itemsToScroll: 2, pagination: false },
+    { width: 850, itemsToShow: 3 },
+    { width: 1150, itemsToShow: 3, itemsToScroll: 2 },
+    { width: 1450, itemsToShow: 5 },
+    { width: 1750, itemsToShow: 6 },
+  ];
   return (
     <>
       <div>
@@ -48,7 +56,7 @@ const Home = () => {
               <Col>
                 <div className={style.innerMainContainer}>
                   <h2 className={style.headTitle}>Course Categories</h2>
-                  <div className={style.bottomBorder}></div>
+                  {/* <div className={style.bottomBorder}></div> */}
                   <div className={style.courseCategoriesBox}>
                     {categories?.map((item, ind) => {
                       return <CourseCategories title={item?.title} />;
@@ -82,7 +90,12 @@ const Home = () => {
                     <Row>
                       {topCourse?.map((item, ind) => {
                         return (
-                          <Col md={4} style={{ marginTop: "20px" }}>
+                          <Col
+                            lg={4}
+                            md={6}
+                            sm={12}
+                            style={{ marginTop: "20px" }}
+                          >
                             <CourseCard data={item} />
                           </Col>
                         );
@@ -97,25 +110,27 @@ const Home = () => {
         <div className={style.discoverContianer}>
           <Container>
             <h3 className={style.title}>Discover Our Popular Course</h3>
-            <p className={`p-14 ${style.subTitle} `}>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
-              bibendum venenatis mollis.
-            </p>
+            <div className={style.subTitleContainer}>
+              <p className={`p-14 ${style.subTitle} `}>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
+                bibendum venenatis mollis.
+              </p>
+            </div>
 
             <Row className={style.pointsContainer}>
-              <Col md={4}>
+              <Col lg={4} md={6} sm={12}>
                 <div className={`${style.background} ${style.backgroundPink}`}>
                   <h4 className={style.innerText}>Top Rated</h4>
                 </div>
               </Col>
-              <Col md={4}>
+              <Col lg={4} md={6} sm={12}>
                 <div
                   className={`${style.background} ${style.backgroundPurple}`}
                 >
                   <h4 className={style.innerText}>Trending</h4>
                 </div>
               </Col>
-              <Col md={4}>
+              <Col lg={4} md={6} sm={12}>
                 <div className={`${style.background} ${style.backgroundBlue}`}>
                   <h4 className={style.innerText}>New and Noteworthy</h4>
                 </div>
@@ -146,7 +161,12 @@ const Home = () => {
                     <Row>
                       {topCourse?.map((item, ind) => {
                         return (
-                          <Col md={4} style={{ marginTop: "20px" }}>
+                          <Col
+                            lg={4}
+                            md={6}
+                            sm={12}
+                            style={{ marginTop: "20px" }}
+                          >
                             <CourseCard data={item} />
                           </Col>
                         );
@@ -168,7 +188,7 @@ const Home = () => {
             <Row>
               {acheiveGoalData?.map((item, index) => {
                 return (
-                  <Col md={4}>
+                  <Col lg={4} md={6} sm={12}>
                     <AcheiveGoalCard data={item} />
                   </Col>
                 );
@@ -178,7 +198,7 @@ const Home = () => {
         </div>
         <div className={style.clientAppriciationContainer}>
           <Container>
-            <h3>Client’s Appriciation</h3>
+            <h3>Client's Appriciation</h3>
             <p className={`p-14 ${style.subTitle} `}>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
               bibendum venenatis mollis.
@@ -208,7 +228,11 @@ const Home = () => {
               </div>
               <div className={style.rightContainer}>
                 <div className={style.videoContainer}>
-                  <ReactPlayer url="https://youtu.be/LUKs-GENceE" />
+                  <ReactPlayer
+                    url="https://youtu.be/LUKs-GENceE"
+                    width="100%"
+                    height="100%"
+                  />
                 </div>
               </div>
             </div>
@@ -217,7 +241,7 @@ const Home = () => {
                 LMSedu is trusted by 322,000+ students and companies worldwide
               </h3>
               <div className={style.carouselContainer}>
-                <CarouselComponent />
+                <CarouselComponent breakPoints={breakPoints} />
               </div>
             </div>
           </Container>
@@ -231,7 +255,8 @@ const Home = () => {
             </p>
             <Row>
               <Carousel
-                itemsToShow={3}
+                breakPoints={breakPoints}
+                // itemsToShow={3}
                 showArrows={false}
                 renderPagination={({ pages, activePage, onClick }) => {
                   return (

src/Screens/Home/Home.module.scss

 @use "../../root";
 
+body {
+  transition: 0.4s;
+}
+
 .headerContainer {
   background-color: root.$main_red;
   height: 800px;
   display: flex;
   justify-content: flex-end;
   align-items: flex-end;
-  //   margin-bottom: 60px;
   .innerMainContainer {
     display: flex;
-    //   justify-content: flex-end;
     flex-direction: column;
     align-items: center;
     color: white;
@@ -45,7 +47,6 @@
     flex-direction: column;
     align-items: center;
     color: black;
-    // margin-bottom: 200px;
     .bottomBorder {
       border: 1px solid rgb(180, 180, 180);
       width: 15%;
@@ -192,8 +193,10 @@
     }
     .rightContainer {
       width: 50%;
+      height: 300px;
       .videoContainer {
         width: 100%;
+        height: 100%;
       }
     }
   }
@@ -220,7 +223,6 @@
   width: 100%;
   background-image: url(../../assets/images/becomeInstructor.png);
   background-size: 100% 350px;
-  // background-position:;
   height: 350px;
   display: flex;
   justify-content: center;
@@ -258,3 +260,158 @@
     }
   }
 }
+
+@media screen and (max-width: 1000px) {
+  .clientAppriciationContainer {
+    .subTitle {
+      width: 60%;
+    }
+    .quoteAndVideoContainer {
+      width: 100%;
+      display: block;
+      .leftContainer {
+        width: 100%;
+      }
+      .rightContainer {
+        width: 100%;
+        margin-top: 50px;
+        display: flex;
+        justify-content: center;
+        .videoContainer {
+          width: 80%;
+        }
+      }
+    }
+  }
+
+  .headerContainer {
+    height: 600px;
+    .innerMainContainer {
+      .headTitle {
+        margin-bottom: 20px;
+        font-size: 40px !important;
+        text-align: center;
+      }
+      .headSubTitle {
+        margin-bottom: 40px;
+        font-size: 17px !important;
+        text-align: center;
+      }
+      .headManImg {
+        width: 400px;
+      }
+    }
+  }
+  .topCoursesContainer {
+    .innerMainContainer {
+      .topCoursesHead {
+        display: block;
+        .subTitle {
+          width: 60%;
+        }
+        .viewMorebutton {
+          margin-top: 20px;
+          padding: 10px 60px;
+        }
+      }
+    }
+  }
+  .discoverContianer {
+    .title {
+      text-align: center;
+    }
+    .subTitleContainer {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      .subTitle {
+        display: flex;
+        justify-content: center;
+        text-align: center;
+        width: 80%;
+        margin: 0px;
+      }
+    }
+    .pointsContainer {
+      margin-top: 10px;
+      .background {
+        margin-top: 20px;
+      }
+    }
+  }
+  .bestSellerContainer {
+    .innerMainContainer {
+      padding: 120px 0px;
+      .topCoursesHead {
+        display: block;
+        .subTitle {
+          width: 60%;
+        }
+        .viewMorebutton {
+          margin-top: 20px;
+          padding: 10px 60px;
+        }
+      }
+    }
+  }
+  .ourBlogContainer {
+    padding: 80px 0px;
+    .subTitle {
+      width: 60%;
+    }
+  }
+  .becomeInstructorContainer {
+    .inputAndBtnContainer {
+      .inputAndBtnInnerContainer {
+        .joinInput {
+          width: 500px;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 576px) {
+  .headerContainer {
+    height: 500px;
+    .innerMainContainer {
+      .headTitle {
+        margin-bottom: 20px;
+        font-size: 30px !important;
+        text-align: center;
+      }
+      .headSubTitle {
+        margin-bottom: 40px;
+        font-size: 14px !important;
+        text-align: center;
+      }
+      .headManImg {
+        width: 300px;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 500px) {
+  .becomeInstructorContainer {
+    .inputAndBtnContainer {
+      .inputAndBtnInnerContainer {
+        .joinInput {
+          width: 350px;
+          padding: 15px 50px;
+        }
+        .joinBtn {
+          padding: 15px 40px;
+        }
+      }
+    }
+  }
+
+  .courseCategoriesContainer {
+    .innerMainContainer {
+      .courseCategoriesBox {
+        width: 100%;
+      }
+    }
+  }
+}