matching page done

frontend/src/Pages/Account.js

@@ -6,7 +6,7 @@ import "./Account.css";
 function Account(props) {
   return (
     <>
-      {props.switch ? <Login></Login> : <Signup></Signup>}
+      {props.switch ? <Login></Login> : <Signup></Signup> }
 
       <div className="loginmessage">
         <div

frontend/src/Pages/Matches.js

@@ -18,6 +18,7 @@ function MyVerticallyCenteredModal(props) {
         <Modal.Body >
           <h4>Centered Modal</h4>
           <p>
+
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum ex optio obcaecati, officiis deserunt modi aperiam accusamus accusantium soluta totam vitae similique sapiente nihil vel inventore eum in, sit animi ut delectus esse voluptas excepturi neque sunt? Laborum sit nostrum temporibus laudantium impedit doloremque optio tempora possimus ut, est quaerat recusandae quibusdam dignissimos provident, explicabo repellendus dolore? Ex velit, possimus quis quam temporibus doloremque nobis. Labore neque inventore iusto veniam, dolorum ipsa nihil facilis quod nobis? Error cupiditate sit similique tenetur fugit distinctio fuga eveniet eligendi porro voluptas, enim, maiores vero hic, magnam rerum placeat dolor. Facere, inventore. Sequi, qui!
           </p>
         </Modal.Body>
@@ -31,20 +32,26 @@ function MyVerticallyCenteredModal(props) {
 const Matches = () => {
     const [modalShow, setModalShow] = React.useState(false);
   return (
+
     <div className="container">
+
       <Carousel>
         <Carousel.Item  onClick={() => setModalShow(true)}>
           <img
             className="d-block w-100"
+
             src="https://source.unsplash.com/WLUHO9A_xik/500x500"
+
             alt="First slide"
           />
 
         </Carousel.Item >
         <Carousel.Item onClick={() => setModalShow(true)}>
           <img
             className="d-block w-100"
+
             src="https://source.unsplash.com/user/erondu/500x500"
+
             alt="Second slide"
           />
 
@@ -53,6 +60,7 @@ const Matches = () => {
         <Carousel.Item onClick={() => setModalShow(true)}>
           <img
             className="d-block w-100"
+
             src="https://source.unsplash.com/user/erondu/500x500"
             alt="Third slide"
           />

frontend/src/Pages/Moreinfo.js

@@ -2,9 +2,11 @@ import React from "react";
 import { useState } from "react";
 import '../components/Login.css';
 import './Moreinfo.css';
+
 import ReactDOM from "react-dom";
 
 
+
 function Moreinfo() {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
@@ -90,6 +92,7 @@ function Moreinfo() {
         </form>
       </div>
 
+
       <div className="footer">
         <div className="row">
           <div className="footer col-lg-6">

frontend/src/Pages/landing.css

@@ -0,0 +1,243 @@
+.navbar{
+    position: fixed;
+    width: 100%;
+    box-sizing: border-box;
+    z-index: 10;
+    background-color: #f5f6fd;
+    font-size: 1.1rem;
+}
+
+.nav-link{
+    margin-left: 8rem;
+    cursor: pointer;
+    font-weight: 600;
+}
+.highlight1,.highlight2,.highlight3{
+    color:#FFFFFF;
+    font-size: 1.3rem;
+}
+
+.highlight1{
+    background-color:#991274;
+    width:33.33%;
+    padding:3rem;
+    display: flex;
+    align-items:center;
+    justify-content: center;
+
+}
+.highlight2{
+    background-color:#ED3B9D;
+    width:33.33%;
+    padding:3rem;
+    display: flex;
+    align-items:center;
+    justify-content: center;
+}
+.highlight3{
+    background-color:#E31A6C;
+    width:33.33%;
+    padding:3rem;
+    display: flex;
+    align-items:center;
+    justify-content: center;
+
+}
+.nav-link1{
+    margin-left: 8rem;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+}
+
+.contact{
+    background-color: #43b97f;
+    padding: 0.5rem 1rem;
+    border-radius: 8px;
+    color:#f5f6fd;
+}
+
+.nav-links{
+    list-style: none;
+    margin: 0;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding: 1rem 8rem;
+}
+.highlights{
+    margin: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+}
+
+.logo{
+    list-style: none;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    padding:1rem 0rem;
+    justify-content: flex-start;
+}
+
+nav{
+    display: flex;
+    justify-content:space-between;
+    align-items: center;
+
+}
+.main-heading{
+    font-size: 2.75rem;
+    margin:0;
+    color: #FFFFFF;
+}
+.started-content,.hands-content,.faq-content{
+    font-size: 1.75rem;
+    margin:0;
+    color: #FFFFFF;
+}
+.faq-content{
+    margin-left:60px;
+}
+footer{
+    font-size: 1.75rem;
+    color: #FFFFFF;
+}
+.question-content{
+    font-size: 1.75rem;
+    margin:0;
+    color: #FFFFFF;
+}
+.sub-heading{
+    font-size: 2rem;
+    margin:0;
+    margin-top: 5rem;
+    margin-bottom: 5rem;
+}
+
+.purple{
+    color:#93278F;
+}
+
+.landing{
+    display: flex;
+    min-height: 100vh;
+    justify-content: space-around;
+    align-items: center;
+    box-sizing: border-box;
+    padding-top:20vh;
+    background-color: #FE0074;
+}
+.started,.hands{
+    display: flex;
+    justify-content:flex-start;
+    flex-direction: column;
+    align-items: center;
+    box-sizing: border-box;
+    background-color: #000;
+    padding-top: 5rem;
+    padding-bottom: 5rem;
+}
+.question{
+    display: flex;
+    justify-content:flex-start;
+    flex-direction: column;
+    align-items: center;
+    box-sizing: border-box;
+    background-color: #ED3B9D;
+    padding-top: 5rem;
+    padding-bottom: 5rem;
+}
+.faq{
+    box-sizing: border-box;
+    background: linear-gradient(180deg, #ED3B9D 0%, #FF0169 100%);
+    padding-top: 2rem;
+    padding-bottom: 5rem;
+}
+.started-main,.question-main,.hands-main{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+    box-sizing: border-box;
+    width: 100%;
+    padding-top: 5rem;
+}
+.faq-main{
+    box-sizing: border-box;
+    padding-top: 2rem;
+    padding-left: 5rem;
+}
+
+.button{
+    background-color: black;
+    border:2px solid #FE0074;
+    color: #FE0074;
+    border-radius: 2px;
+    padding: 1rem 5rem;
+    font-size: 2rem;
+    border-radius: 20px;
+    cursor: pointer;
+}
+.landingsvg{
+    width:30%;
+}
+.startedsvg,.questionsvg,.handssvg{
+    width:40%;
+}
+
+.nav-logo{
+    width:30px;
+    margin-right:1rem;
+}
+
+.home{
+    display: flex;
+    align-items: center;
+}
+.q-head{
+    font-size: 3.5rem;
+}
+footer{
+    padding-top:5rem;
+    padding-bottom:5rem;
+    display: flex;
+    justify-content: space-around;
+    background-color: #E31A6C;
+}
+.social-ico{
+    margin-left:1rem;
+    margin-top:1rem;
+}
+@media only screen and (max-width:1045px){
+    .landing{
+        display: flex;
+        flex-direction: column;
+        min-height: 100vh;
+        justify-content: space-around;
+        align-items: center;
+    }
+    .hands,.hands-main,.started-main,.question-main,.question,.started{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+    .landingsvg{
+        width:90%;
+    }
+    .startedsvg,.questionsvg,.handssvg{
+        width:90%;
+    }
+    .highlights{
+        flex-direction: column;
+        width: 100%;
+    }
+    .highlight1,.highlight2,.highlight3{
+        width: 100%;
+    }
+    .main-heart{
+        width:80%;
+    }
+
+}