Centered Modal
+ 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!
@@ -31,12 +32,16 @@ function MyVerticallyCenteredModal(props) { const Matches = () => { const [modalShow, setModalShow] = React.useState(false); return ( +
+
setModalShow(true)}>
@@ -44,7 +49,9 @@ const Matches = () => {
setModalShow(true)}>
@@ -53,6 +60,7 @@ const Matches = () => {
setModalShow(true)}>
diff --git a/frontend/src/Pages/Moreinfo.js b/frontend/src/Pages/Moreinfo.js
index e47eff3..9c8c810 100644
--- a/frontend/src/Pages/Moreinfo.js
+++ b/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() {
+
@@ -44,7 +49,9 @@ const Matches = () => {
@@ -53,6 +60,7 @@ const Matches = () => {
diff --git a/frontend/src/Pages/Moreinfo.js b/frontend/src/Pages/Moreinfo.js
index e47eff3..9c8c810 100644
--- a/frontend/src/Pages/Moreinfo.js
+++ b/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() {
diff --git a/frontend/src/Pages/landing.css b/frontend/src/Pages/landing.css
new file mode 100644
index 0000000..32843a8
--- /dev/null
+++ b/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%;
+ }
+
+}
\ No newline at end of file
diff --git a/frontend/src/Pages/landing.js b/frontend/src/Pages/landing.js
new file mode 100644
index 0000000..38b6017
--- /dev/null
+++ b/frontend/src/Pages/landing.js
@@ -0,0 +1,81 @@
+import "./LandingSection.css";
+import phone from "../LandingSection/phone.svg";
+import heart from "../LandingSection/heart.svg";
+// import logo from "../LandingSection/ffdslogo.svg";
+// import home from "../LandingSection/homelogo.svg";
+import started from "../LandingSection/started.svg";
+import question from "../LandingSection/question.svg";
+import hands from "../LandingSection/hands.svg";
+// import insta from "../LandingSection/2.svg";
+// import fb from "../LandingSection/3.svg";
+
+const LandingSection = () => {
+ return (
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet.
+ 
+
+
+
+
+ 
+
+ Lorem ipsum dolor sit amet.
+
+
+
+
+
+ Lorem ipsum dolor sit amet.
+ 
+
+
+
+
+
+ QnA
+
+
+
+
+
+ );
+};
+
+export default LandingSection;
diff --git a/frontend/src/components/Login.js b/frontend/src/components/Login.js
index e86c117..a1bdb83 100644
--- a/frontend/src/components/Login.js
+++ b/frontend/src/components/Login.js
@@ -73,7 +73,6 @@ function Login() {
The best dating site
+ Meet new people
+ Make trustful relations
+