From a2d048c6de3591cc6b1410451367a8ddb9918470 Mon Sep 17 00:00:00 2001 From: raunak234362 Date: Fri, 10 May 2024 07:54:10 +0530 Subject: [PATCH 01/14] Fixed few bugs --- frontend/src/components/about/about.jsx | 14 ++-- frontend/src/components/about/aboutus.jsx | 2 +- .../src/components/contact/getintouch.jsx | 2 +- frontend/src/components/home/homeDown.jsx | 4 +- frontend/src/components/layout.jsx | 2 + frontend/src/components/testimonial.jsx | 65 +++++++++++++++ frontend/src/style/about/aboutus.css | 79 ++++++++++--------- .../src/style/background/background-1.css | 1 + frontend/src/style/contact/contactus.css | 4 +- frontend/src/style/home/home-1.css | 26 ++++-- frontend/src/style/home/home-4.css | 18 +++-- frontend/src/style/testimonial.css | 35 ++++++++ 12 files changed, 185 insertions(+), 67 deletions(-) create mode 100644 frontend/src/components/testimonial.jsx create mode 100644 frontend/src/style/testimonial.css diff --git a/frontend/src/components/about/about.jsx b/frontend/src/components/about/about.jsx index 9822293..981c8ca 100644 --- a/frontend/src/components/about/about.jsx +++ b/frontend/src/components/about/about.jsx @@ -10,7 +10,7 @@ export const About = () => {

About Us

- +

Who We Are

@@ -23,7 +23,7 @@ export const About = () => { - + image2 @@ -36,15 +36,15 @@ export const About = () => { - - + +

Our Mission

- To hold "To-Let" boards at all rental properties available nearby. + Placing "To-Let" boards at all nearby rental properties to advertise availability to potential tenants.

- {/* Center image horizontally */} - image3 + {/* Center image horizontally */} + image1
diff --git a/frontend/src/components/about/aboutus.jsx b/frontend/src/components/about/aboutus.jsx index 1ee727d..9527e7a 100644 --- a/frontend/src/components/about/aboutus.jsx +++ b/frontend/src/components/about/aboutus.jsx @@ -118,7 +118,7 @@ export const AboutUs = () => {
-

Who are are?

+

Who We Are?

At To-Let, we are more than just property managers – we are dedicated partners in your property management journey. diff --git a/frontend/src/components/contact/getintouch.jsx b/frontend/src/components/contact/getintouch.jsx index f290db5..36570eb 100644 --- a/frontend/src/components/contact/getintouch.jsx +++ b/frontend/src/components/contact/getintouch.jsx @@ -9,7 +9,7 @@ export const ContactUs = () => {

-

CONTACT US

+

diff --git a/frontend/src/components/home/homeDown.jsx b/frontend/src/components/home/homeDown.jsx index 425cf50..8ae0369 100644 --- a/frontend/src/components/home/homeDown.jsx +++ b/frontend/src/components/home/homeDown.jsx @@ -12,8 +12,8 @@ export const HomeDown = () => { return ( - -

Welcome to To-Let Globe

+ +

Welcome to To-Let Globe

NO BROKERAGE ON PGS | FLATS | HOUSES | OFFICES
diff --git a/frontend/src/components/layout.jsx b/frontend/src/components/layout.jsx index f39314f..235c358 100644 --- a/frontend/src/components/layout.jsx +++ b/frontend/src/components/layout.jsx @@ -4,6 +4,7 @@ import { HomeUp } from './home/homeUp'; import { ContactUs } from './contact/getintouch'; import {Service} from './service'; import {Footer} from './footer'; +// import {Testimonial} from './testimonial'; import {About} from './about/about'; // import { Blog } from './blog/blog' // import Service from './service' @@ -29,6 +30,7 @@ export const Layout = () => { + {/* */}
diff --git a/frontend/src/components/testimonial.jsx b/frontend/src/components/testimonial.jsx new file mode 100644 index 0000000..4c4347d --- /dev/null +++ b/frontend/src/components/testimonial.jsx @@ -0,0 +1,65 @@ +import React, { useState } from 'react'; +import { Card, Col, Row, Carousel } from 'react-bootstrap'; +import '../style/testimonial.css'; + +export const Testimonial = () => { + const [index, setIndex] = useState(0); + + const handleSelect = (selectedIndex, e) => { + setIndex(selectedIndex); + }; + + return ( + <> +
+

Testimonials

+
+ + +

What People Say About Us

+ + + + + + + + + + Testimonial 1 + + This is the first testimonial. + + + + + + + + + Testimonial 2 + + This is the second testimonial. + + + + + + + + + Testimonial 3 + + This is the third testimonial. + + + + + + + +
+
+ + ); +}; \ No newline at end of file diff --git a/frontend/src/style/about/aboutus.css b/frontend/src/style/about/aboutus.css index 0145a49..e7c054a 100644 --- a/frontend/src/style/about/aboutus.css +++ b/frontend/src/style/about/aboutus.css @@ -1,60 +1,63 @@ .AboutUS-Container { background-color: black; - width: 100%; + width: 100vw; min-height: 100vh; padding: 20px; - margin-top: 12%; - margin-bottom: 5%; -} - -.AboutUS-Container h1 { - display: flex; - justify-content: last baseline; - text-align: left; -} - -.about-container { + margin: 12% 2% 5% 2%; + padding-right: 10%; + padding-left: 10%; + } + + .about-container { display: flex; flex-direction: column; - align-items: center; /* Centers the rows vertically within the container */ -} - -.about-container h3 { + align-items: center; + } + + .about-container h3 { font-family: 'Poppins', sans-serif; font-size: 30px; font-weight: 200; - color: yellow; + color: #f6ce3c; text-align: left; -} - -.heading-color{ + margin-bottom: 20px; + } + + .heading-color { color: #f6ce3c !important; -} - -.about-container p { + } + + .about-container p { font-family: 'Poppins', sans-serif; font-size: 20px; font-weight: 500; color: white; line-height: 24px; text-align: left; -} - -.about-container img { + margin-bottom: 30px; + } + + .about-container img { width: 300px; - height: 300px; -} - -.about-container .vision-heading { - color: #f6ce3c; + height: auto; + margin-bottom: 30px; + } + + .vision-heading { + color: #f6ce3c !important; font-size: 30px; font-weight: 200; line-height: 60px; text-align: left; -} - -.rows-center{ - align-items: center; - justify-content: center; - margin: -5%; -} \ No newline at end of file + margin-bottom: 20px; + } + + .rows-center { + align-items: center; + justify-content: space-between; + margin: 30px 0; + } + + .text-left { + text-align: left; + } \ No newline at end of file diff --git a/frontend/src/style/background/background-1.css b/frontend/src/style/background/background-1.css index 2117608..c03ceb7 100644 --- a/frontend/src/style/background/background-1.css +++ b/frontend/src/style/background/background-1.css @@ -395,6 +395,7 @@ transform: matrix(0.97, 0.24, 0.24, -0.97, 0, 0); */ position: absolute; height: 120px; width:190px; + opacity: 0; fill: black; z-index: 0; transform: translate3d(325px,270px,0); diff --git a/frontend/src/style/contact/contactus.css b/frontend/src/style/contact/contactus.css index 9e979e4..d6cb2cf 100644 --- a/frontend/src/style/contact/contactus.css +++ b/frontend/src/style/contact/contactus.css @@ -48,7 +48,7 @@ text-decoration:none; } .imagediv2{ - background-image:linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 30%, transparent 60% ,rgba(0, 0, 0, 0.6)100%), linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%,rgba(0, 0, 0, 0.6) 30%,rgba(0, 0, 0, 0.7) 90%, rgba(0, 0, 0, 0.9)100%), url('../../assets/image/contact/location.jpg'); /* Adjust the path */ + background-image:linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 30%, transparent 60% ,rgba(0, 0, 0, 0.6)100%), linear-gradient(to right, rgba(0, 0, 0, 0.9) 0%,rgba(0, 0, 0, 0.6) 30%,rgba(0, 0, 0, 0.7) 90%, rgba(0, 0, 0, 0.9)100%), url('../../assets/image/contact/location.jpg'); /* Adjust the path */ background-size: cover; background-repeat: no-repeat; width:100%; @@ -159,7 +159,7 @@ text-decoration:none; } .imagediv2{ - background-image:linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 30%, transparent 60% ,rgba(0, 0, 0, 0.6)100%), linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%,rgba(0, 0, 0, 0.6) 30%,rgba(0, 0, 0, 0.7) 90%, rgba(0, 0, 0, 0.9)100%), url('../../assets/image/contact/location.jpg'); /* Adjust the path */ + background-image:linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, transparent 30%, transparent 60% ,rgba(0, 0, 0, 0.5)100%), linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%,rgba(0, 0, 0, 0.5) 30%,rgba(0, 0, 0, 0.5) 90%, rgba(0, 0, 0, 0.5)100%), url('../../assets/image/contact/location.jpg'); /* Adjust the path */ background-size: cover; background-repeat: no-repeat; width:80%; diff --git a/frontend/src/style/home/home-1.css b/frontend/src/style/home/home-1.css index 5ad9670..05dd4f0 100644 --- a/frontend/src/style/home/home-1.css +++ b/frontend/src/style/home/home-1.css @@ -28,7 +28,7 @@ h6{ .top-home{ width: 100% !important; height: 100vh; - position: relative; + position: absolute; overflow-y: hidden; overflow-x: hidden; /* background-color: rgb(118, 112, 112); */ @@ -50,7 +50,7 @@ h6{ transform: translate(0,220px); letter-spacing: 0; opacity: 0; - transform: translateX(20%) !important; + transform: translateX(-20%) !important; } .headline{ @@ -65,7 +65,7 @@ h6{ .scrolled .headline{ opacity: 0; - transform: translate(10%,270px) !important; + right: 60%; } @@ -84,19 +84,26 @@ h6{ opacity: 0; position: absolute; letter-spacing: 5px; + top: 30%; + left: auto; + right: auto; font-size: 2rem; transition: all 1.5s ease-in-out; } .scrolled .tagline2{ opacity: 1; - left: 5%; - top: 40%; + transform: translateX(-51%); + top: 30%; } .headline2{ + position: absolute; font-size: 1rem; - opacity: 0; + opacity: 1; + top: 40%; + left: 0; + right: 0; color: #C8A21C !important; transition: all 1.5s ease-in-out; } @@ -108,12 +115,15 @@ h6{ margin: 0; position: absolute; color: white; - top: 47%; - left: 5%; + top: 40%; + transform: translateX(-29.5%); } .input-bar { opacity: 0; + top:45%; + width: 35%; + left: 30%; position: absolute; transition: all 1.2s ease-in-out !important; width: 400px; diff --git a/frontend/src/style/home/home-4.css b/frontend/src/style/home/home-4.css index a74bc18..32e2a59 100644 --- a/frontend/src/style/home/home-4.css +++ b/frontend/src/style/home/home-4.css @@ -2,7 +2,7 @@ @media (max-width: 480px) { /* ----------------TOP HOME------------------- */ .bottom-home{ - margin-left: 3% !important; + margin-left: 0% !important; margin-right:0%; } .tagline { @@ -14,6 +14,7 @@ transition: all 1.5s ease-in-out !important; } .scrolled .tagline{ + opacity: 0; font-size: 10px; transform: translate(-100px,180px) !important; letter-spacing: 0; @@ -36,18 +37,18 @@ .tagline2{ font-size: 15px; opacity: 0; - justify-content: center; + justify-content: center !important; position: absolute; top: 10% !important; - /* left: 18% !important; */ color: hsl(0, 0%, 100%) !important; transition: all 1.5s ease-in-out !important; } .scrolled .tagline2{ opacity: 1; - margin-left: 5%; - top:0% !important; + left: 30%; + right: auto; + top:5% !important; } .headline2 { font-size: 10px; @@ -60,8 +61,9 @@ } .scrolled .headline2{ opacity: 1; - padding: 10% 5% 0 13%; - top: 0% !important; + left: 35%; + right: auto; + top: 10% !important; } @@ -84,7 +86,7 @@ .scrolled .input-bar{ opacity: 1; width: 90% !important; - top: 10%; + top: 15%; padding: 0 20px 0 20px; } diff --git a/frontend/src/style/testimonial.css b/frontend/src/style/testimonial.css new file mode 100644 index 0000000..981cea7 --- /dev/null +++ b/frontend/src/style/testimonial.css @@ -0,0 +1,35 @@ +.Testimonial-Container { + background-color: black; + width: 100%; + min-height: 100vh; + padding: 20px; + margin-top: 8%; + margin-bottom: 5%; + } + .Testimonial-Container h2{ + text-align: center; + margin-left: 5rem; + color: #1D5F58 !important; + + } + .Testimonial-Container h1 { + display: flex; + justify-content: last baseline; + text-align: left; + } + .testimonial-container { + display: flex; + justify-content: justify-between; + flex-direction: row; + align-items: center; /* Centers the rows vertically within the container */ + margin-top: 17%; + margin-left: 4%; + } + .card { + border-radius: 1rem; + margin: 2rem; + padding: 20px; + background-color: #f8f9fa; + width: 300px; + height: auto; + } \ No newline at end of file From 84164eea7a1aa22c9ee07d3bfbb501a0fed4697c Mon Sep 17 00:00:00 2001 From: raunak234362 Date: Sat, 11 May 2024 13:13:56 +0530 Subject: [PATCH 02/14] update --- frontend/src/components/about/about.jsx | 17 +- frontend/src/components/about/aboutus.jsx | 1 + frontend/src/components/blog/blog.jsx | 465 ---------------------- frontend/src/style/about/about-4.css | 136 +++++++ frontend/src/style/about/aboutus.css | 15 + frontend/src/style/home/home-4.css | 179 +++++---- 6 files changed, 248 insertions(+), 565 deletions(-) delete mode 100644 frontend/src/components/blog/blog.jsx create mode 100644 frontend/src/style/about/about-4.css diff --git a/frontend/src/components/about/about.jsx b/frontend/src/components/about/about.jsx index 981c8ca..161ede8 100644 --- a/frontend/src/components/about/about.jsx +++ b/frontend/src/components/about/about.jsx @@ -10,7 +10,7 @@ export const About = () => {

About Us

- +

Who We Are

@@ -18,13 +18,10 @@ export const About = () => { contact each other with ZERO brokerage.

- {/* Center image horizontally */} + {/* Center image horizontally */} image1 - - - - - + + image2 @@ -34,16 +31,16 @@ export const About = () => { cities while doing so from the comfort of their own homes.

- + - +

Our Mission

Placing "To-Let" boards at all nearby rental properties to advertise availability to potential tenants.

- {/* Center image horizontally */} + {/* Center image horizontally */} image1 diff --git a/frontend/src/components/about/aboutus.jsx b/frontend/src/components/about/aboutus.jsx index 9527e7a..1304720 100644 --- a/frontend/src/components/about/aboutus.jsx +++ b/frontend/src/components/about/aboutus.jsx @@ -2,6 +2,7 @@ import { useEffect } from 'react' import $ from 'jquery' import '../../style/about/about.css' +import '../../style/about/about-4.css' import {Footer} from '../footer' import React from 'react'; import ceo1 from '../../assets/image/about/CEO1.png' diff --git a/frontend/src/components/blog/blog.jsx b/frontend/src/components/blog/blog.jsx deleted file mode 100644 index d70bac5..0000000 --- a/frontend/src/components/blog/blog.jsx +++ /dev/null @@ -1,465 +0,0 @@ -import "../../style/blog/blogmain.css" -import { Container, Typography } from "@mui/material" -import {Col, Row} from "react-bootstrap" -import Carousel from 'react-bootstrap/Carousel'; - -import image1 from '../../assets/image/blog/blog1/image1.png' -import image2 from '../../assets/image/blog/blog2/image2.png' -import image3 from '../../assets/image/blog/blog3/image1.jpg' -import image4 from '../../assets/image/blog/blog4/image1.jpg' -import image5 from '../../assets/image/blog/blog1/image1.png' -import image6 from '../../assets/image/blog/blog6/image.png' -import { Link } from 'react-router-dom' -import { Category } from "../category" - -export const Blog = ()=>{ - return( - -
- - Our Insights and Stories - - - Dive into a Sea of Endless Stories and Insights - -
-
- Trending - Latest -
-
- - - - - -
- - -
BlogImage
- - -
-
- 2 Nov, 23 - | - Featured Updates -
-

Mastering Rental Property Finances: Budgeting and Financial Planning Tips

-

In the dynamic landscape of real estate investment, managing rental property finances efficiently is paramount for success

-
- -

Read More

- -
-
-
-

Akarshi Mathur

-

Full Stack Developer

-
-
- 10 - 5 -
-
- -
-
- - - -
- - -
BlogImage
- - -
-
- 21 feb, 24 - | - Featured Updates -
-

Maximizing Rental Property Income: Strategies for Indian Landlords!

-

Investing in rental properties can be a lucrative venture for landlords in India, given the country's growing population {' '}

-
- -

Read More

- -
-
-
-

Divyanshi Shukla

-

Designer

-
-
- 0 - 0 -
-
- -
-
- - - -
- - -
BlogImage
- - -
-
- 18 Nov, 23 - | - Featured Updates -
-

PGs vs. Rental Flats: Making the Right Choice in Lucknow

-

In Lucknow, as in many cities, individuals seeking accommodation are often faced with the decision between staying in a paying guest

-
- -

Read More

- -
-
-
-

Raunak Deep Srivastava

-

Full Stack Developer

-
-
- 0 - 0 -
-
- -
-
- - - -
- - -
BlogImage
- - -
-
- 22 Feb, 24 - | - Featured Updates -
-

Unlocking the Door to Hassle-Free Student Accommodations: Your Ultimate Guide with To-Let Globe

-

In the world of rental property management, securing reliable tenants is the cornerstone of success.

-
- -

Read More

- -
-
-
-

Manthan Thool

-

UI/UX Developer

-
-
- 0 - 0 -
-
- -
-
- - - -
- - -
BlogImage
- - -
-
- 2 Nov, 23 - | - Featured Updates -
-

The Pursuit of Affordable Living: Tips and Strategies for a Balanced Life

-

In today's fast-paced world, the quest for affordable living is a priority for many. Whether you're a student, a young professional, or someone looking to downsize,

-
- -

Read More

- -
-
-
-

Baanipreet Kaur

-

FrontEnd Developer

-
-
- 0 - 0 -
-
- -
-
- - - -
- - -
BlogImage
- - -
-
- 4 Jan, 24 - | - Featured Updates -
-

Finding the Right PG in Kota, Rajasthan

-

Are you gearing up to embark on your academic journey in Kota, Rajasthan, famously known as the "coaching capital" of India? If so, finding the right accommodation is likely high on your

-
- -

Read More

- -
-
-
-

Ramashankar

-

Content Writer

-
-
- 0 - 0 -
-
- -
-
- - - - - - -
- - -
BlogImage
- - -
-
- 2 Nov, 23 - | - Featured Updates -
-

Mastering Rental Property Finances: Budgeting and Financial Planning Tips

-

In the dynamic landscape of real estate investment, managing rental property finances efficiently is paramount for success

-
- -

Read More

- -
-
-
-

Akarshi Mathur

-

Full Stack Developer

-
-
- 10 - 5 -
-
- -
-
- - - -
- - -
BlogImage
- - -
-
- 21 feb, 24 - | - Featured Updates -
-

Maximizing Rental Property Income: Strategies for Indian Landlords!

-

Investing in rental properties can be a lucrative venture for landlords in India, given the country's growing population {' '}

-
- -

Read More

- -
-
-
-

Divyanshi Shukla

-

Designer

-
-
- 0 - 0 -
-
- -
-
- - - -
- - -
BlogImage
- - -
-
- 18 Nov, 23 - | - Featured Updates -
-

PGs vs. Rental Flats: Making the Right Choice in Lucknow

-

In Lucknow, as in many cities, individuals seeking accommodation are often faced with the decision between staying in a paying guest

-
- -

Read More

- -
-
-
-

Raunak Deep Srivastava

-

Full Stack Developer

-
-
- 0 - 0 -
-
- -
-
- - - -
- - -
BlogImage
- - -
-
- 22 Feb, 24 - | - Featured Updates -
-

Unlocking the Door to Hassle-Free Student Accommodations: Your Ultimate Guide with To-Let Globe

-

In the world of rental property management, securing reliable tenants is the cornerstone of success.

-
- -

Read More

- -
-
-
-

Manthan Thool

-

UI/UX Developer

-
-
- 0 - 0 -
-
- -
-
- - - -
- - -
BlogImage
- - -
-
- 2 Nov, 23 - | - Featured Updates -
-

The Pursuit of Affordable Living: Tips and Strategies for a Balanced Life

-

In today's fast-paced world, the quest for affordable living is a priority for many. Whether you're a student, a young professional, or someone looking to downsize,

-
- -

Read More

- -
-
-
-

Baanipreet Kaur

-

FrontEnd Developer

-
-
- 0 - 0 -
-
- -
-
- - - -
- - -
BlogImage
- - -
-
- 4 Jan, 24 - | - Featured Updates -
-

Finding the Right PG in Kota, Rajasthan

-

Are you gearing up to embark on your academic journey in Kota, Rajasthan, famously known as the "coaching capital" of India? If so, finding the right accommodation is likely high on your

-
- -

Read More

- -
-
-
-

Ramashankar

-

Content Writer

-
-
- 0 - 0 -
-
- -
-
- - - - -
- - - - ) -} \ No newline at end of file diff --git a/frontend/src/style/about/about-4.css b/frontend/src/style/about/about-4.css new file mode 100644 index 0000000..61a9a7a --- /dev/null +++ b/frontend/src/style/about/about-4.css @@ -0,0 +1,136 @@ +@media (max-width: 480px){ + .ag-timeline { + + } + .ag-timeline_line { + + } + + .ag-timeline_line-progress { + + } + + .checkpoint h2{ + height:30px; + text-align: center; + font-size:1.3em; + margin-bottom: 0.5; + color: #e59948; + } + + .timeline{ + + } + + .checkpoint{ + + } + + .checkpoint div{ + + } + + .checkpoint p{ + line-height: 27px; + color: #feffff; + font-size: 18px; + } + + .checkpoint:nth-child(even){ + padding-left: 20em; + transform: translateX(14.5rem); + } + .checkpoint:nth-child(odd){ + padding-right: 20em; + transform: translateX(-14.5em); + + } + + .checkpoint:nth-child(odd)::before{ + content: ""; + background: #6cc0c4; + width: 9.5em; + height: 3px; + position: absolute; + top: 50%; + transform: translatey(-50%); + } + + .checkpoint:nth-child(even)::before{ + content: ""; + background: #6cc0c4; + width: 9.5em; + height: 3px; + position: absolute; + top: 50%; + transform: translatey(-50%); + /* left: 50%; */ + + } + + .checkpoint:nth-child(odd)::before{ + right: 20%; + } + .checkpoint:nth-child(even)::before{ + left: 20%; + } + + .ag-timeline::before { + content: ""; + background:#6cc0c4 ; + background-size: contain; + box-shadow: 0 0 0.5em #6cc0c4; + width: 0.5em; + height: 0.5em; + position: fixed; /* Set the position to fixed */ + top: 50%; /* Adjust the vertical position */ + left: 50%; /* Adjust the horizontal position */ + transform: translate(-50%, -50%); + border-radius: 50%; + z-index: -2; /* Set a higher z-index to appear on top of the line */ + } + + .checkpoint:nth-child(even) div::before{ + content: ""; + background-image: url(../../assets/img/logo.jpeg); + background-position: cover; + background-size:contain; + box-shadow: 0 0 0.5em #6cc0c4; + width: 3.9em; + height: 4em; + position:fixed; + left: 19% !important; + top: 50%; + transform: translateY(-50%); + border-radius: 50%; + + + } + .checkpoint:nth-child(odd) div::before{ + content: ""; + background-image: url(../../assets/img/logo.jpeg); + background-position: cover; + background-size: contain; + box-shadow: 0 0 0.5em #6cc0c4; + width: 3.9em; + height: 4em; + position:fixed; + left: 74%; + top: 50%; + transform: translateY(-50%); + border-radius: 50%; + } + + .checkpoint:nth-child(odd) div::before{ + right:5.2em; + } + .checkpoint:nth-child(even) div::before{ + left: 9em ; + } + .imagd{ + width: 100% !important; + height: auto !important; + margin-left: -5px; + margin-top: -7px; + } +} \ No newline at end of file diff --git a/frontend/src/style/about/aboutus.css b/frontend/src/style/about/aboutus.css index e7c054a..72ff066 100644 --- a/frontend/src/style/about/aboutus.css +++ b/frontend/src/style/about/aboutus.css @@ -8,6 +8,11 @@ padding-left: 10%; } + .AboutUS-Container h2{ + text-align: left; + color: #3cbcb1 !important; + } + .about-container { display: flex; flex-direction: column; @@ -56,8 +61,18 @@ align-items: center; justify-content: space-between; margin: 30px 0; + grid-column: 2; } .text-left { text-align: left; + } + + @media (max-width:480px){ + .rows-center{ + grid-column: 1; + } + .about-container img{ + width: 150px; + } } \ No newline at end of file diff --git a/frontend/src/style/home/home-4.css b/frontend/src/style/home/home-4.css index 32e2a59..707d5d0 100644 --- a/frontend/src/style/home/home-4.css +++ b/frontend/src/style/home/home-4.css @@ -1,94 +1,93 @@ - @media (max-width: 480px) { - /* ----------------TOP HOME------------------- */ - .bottom-home{ - margin-left: 0% !important; - margin-right:0%; - } - .tagline { - font-size: 17px; - justify-content: center; - position: absolute; - top:35%; - color: #ffffff !important; - transition: all 1.5s ease-in-out !important; - } - .scrolled .tagline{ - opacity: 0; - font-size: 10px; - transform: translate(-100px,180px) !important; - letter-spacing: 0; - opacity: 0; - height: 70vh; - } - .headline { - font-size: 12px; - position: absolute; - justify-content: center !important; - color: #C8A21C !important; - transition: all 1.5s ease-in-out !important; - } - .scrolled .headline{ - opacity: 0; - transform: translate(-100px,190px) !important; - } - /* -----------------Bottom-Home------------------ */ - - .tagline2{ - font-size: 15px; - opacity: 0; - justify-content: center !important; - position: absolute; - top: 10% !important; - color: hsl(0, 0%, 100%) !important; - transition: all 1.5s ease-in-out !important; - } - - .scrolled .tagline2{ - opacity: 1; - left: 30%; - right: auto; - top:5% !important; - } - .headline2 { - font-size: 10px; - opacity: 0; - position: absolute; - justify-content: center !important; - top: 5% !important; - color: #C8A21C !important; - transition: all 1.5s ease-in-out !important; - } - .scrolled .headline2{ - opacity: 1; - left: 35%; - right: auto; - top: 10% !important; - - } + /* ----------------TOP HOME------------------- */ + .bottom-home{ + margin-left: 0% !important; + margin-right:0%; + } + .tagline { + font-size: 17px; + justify-content: center; + position: absolute; + top:35%; + color: #ffffff !important; + transition: all 1.5s ease-in-out !important; + } + .scrolled .tagline{ + opacity: 0; + font-size: 10px; + transform: translate(-200px,180px) !important; + letter-spacing: 0; + opacity: 0; + height: 70vh; + } + .headline { + font-size: 12px; + position: absolute; + justify-content: center !important; + color: #C8A21C !important; + transition: all 1.5s ease-in-out !important; + } + .scrolled .headline{ + opacity: 0; + transform: translate(-100px,190px) !important; + } + /* -----------------Bottom-Home------------------ */ + + .tagline2{ + font-size: 15px; + opacity: 0; + justify-content: center !important; + position: absolute; + top: 10% !important; + color: hsl(0, 0%, 100%) !important; + transition: all 1.5s ease-in-out !important; + } + + .scrolled .tagline2{ + opacity: 1; + left: 30%; + right: auto; + transform: translate(-58px, -15px); + top:10% !important; + } + .headline2 { + font-size: 10px; + opacity: 0; + position: absolute; + justify-content: center !important; + top: 5% !important; + color: #C8A21C !important; + transition: all 1.5s ease-in-out !important; + } + .scrolled .headline2{ + opacity: 1; + left: 35%; + right: auto; + top: 10% !important; + transform: translate(-59px, 15px); + } + + .input-bar { + opacity: 0; + width: 100% !important; + transform: translateX(0); + transition: all 1.2s ease-in-out !important; + } + .input-bar .form-control { + height: auto; + font-size: 10px; + } - .input-bar { - opacity: 0; - width: 100% !important; - transform: translateX(0); - transition: all 1.2s ease-in-out !important; - } - .input-bar .form-control { - height: auto; - font-size: 10px; - } - - .input-bar .btn { - height: auto; - font-size: 10px; - } - - .scrolled .input-bar{ - opacity: 1; - width: 90% !important; - top: 15%; - padding: 0 20px 0 20px; - } + .input-bar .btn { + height: auto; + font-size: 10px; + } + .scrolled .input-bar{ + opacity: 1; + width: 90% !important; + top: 15%; + padding: 0 20px 0 20px; } - \ No newline at end of file + +} \ No newline at end of file From d7251d22b8a45a374d6005d9764697738c0cecbb Mon Sep 17 00:00:00 2001 From: Sohamsp86 Date: Sat, 11 May 2024 15:13:27 +0530 Subject: [PATCH 03/14] Navbar_Toggle_Icon --- .../assets/image/home/NavbarToggleIcon.svg | 4 ++++ frontend/src/components/navbar.jsx | 22 ++++++++++++++++++- 2 files changed, 25 insertions(+), 1 deletion(-) create mode 100644 frontend/src/assets/image/home/NavbarToggleIcon.svg diff --git a/frontend/src/assets/image/home/NavbarToggleIcon.svg b/frontend/src/assets/image/home/NavbarToggleIcon.svg new file mode 100644 index 0000000..e798c95 --- /dev/null +++ b/frontend/src/assets/image/home/NavbarToggleIcon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/src/components/navbar.jsx b/frontend/src/components/navbar.jsx index e79c660..1484ae9 100644 --- a/frontend/src/components/navbar.jsx +++ b/frontend/src/components/navbar.jsx @@ -3,11 +3,19 @@ import Logo from "../assets/img/Favicon.png"; import { useState } from "react"; import { Navbar, Nav } from 'react-bootstrap'; import "../style/navbar.css" +import { ReactComponent as CustomIcon } from '../assets/image/home/NavbarToggleIcon.svg'; + export const NavBar = () => { const [activeLink, setActiveLink] = useState('home'); + const [expanded, setExpanded] = useState(false); const handleNavLinkClick = (link) => { setActiveLink(link); + setExpanded(false); + }; + + const toggleNavbar = () => { + setExpanded(prevExpanded => !prevExpanded); }; return ( @@ -16,7 +24,19 @@ export const NavBar = () => { Logo - + + +
+ {/*
*/}
) } diff --git a/frontend/src/components/testimonial.jsx b/frontend/src/components/testimonial.jsx index 4c4347d..8022c50 100644 --- a/frontend/src/components/testimonial.jsx +++ b/frontend/src/components/testimonial.jsx @@ -1,13 +1,41 @@ -import React, { useState } from 'react'; -import { Card, Col, Row, Carousel } from 'react-bootstrap'; -import '../style/testimonial.css'; +import { Col, Row } from "react-bootstrap"; +import "../style/testimonial.css"; +import man2 from "../assets/image/testimonial/man2.jpg"; +import man11 from "../assets/image/testimonial/man11.jpg"; +import girl from "../assets/image/testimonial/girl.jpg"; + + export const Testimonial = () => { - const [index, setIndex] = useState(0); + let slideIndex = 0; +showSlides(); + +function showSlides() { + let slides = document.getElementsByClassName("testimonialSlider"); + let dots = document.getElementsByClassName("dot"); - const handleSelect = (selectedIndex, e) => { - setIndex(selectedIndex); - }; + // Check if slides and dots exist + if (slides.length === 0 || dots.length === 0) { + console.error("Slides or dots not found"); + return; + } + + for (let i = 0; i < slides.length; i++) { + slides[i].style.display = "none"; + } + + slideIndex++; + if (slideIndex > slides.length) {slideIndex = 1;} + + for (let i = 0; i < dots.length; i++) { + dots[i].className = dots[i].className.replace(" active", ""); + } + + slides[slideIndex - 1].style.display = "block"; + dots[slideIndex - 1].className += " active"; + + setTimeout(showSlides, 2000); // Change image every 2 seconds +} return ( <> @@ -15,51 +43,50 @@ export const Testimonial = () => {

Testimonials

- +

What People Say About Us

- - - - - - - - - - Testimonial 1 - - This is the first testimonial. - - - - - - - - - Testimonial 2 - - This is the second testimonial. - - - - - - - - - Testimonial 3 - - This is the third testimonial. - - - - - - +
+
+ imagge +

David

+ +

To-Let is a game-changer for professionals like me relocating to new cities. I found a comfortable flat with ease, and the process was incredibly smooth. + +

+ +
+
+
+
+ imagge +

David

+ +

To-Let is a game-changer for professionals like me relocating to new cities. I found a comfortable flat with ease, and the process was incredibly smooth. +

+ +
+
+
+
+ imagge +

David

+ +

To-Let is a game-changer for professionals like me relocating to new cities. I found a comfortable flat with ease, and the process was incredibly smooth. +

+ +
+
+
+ + + +
+            +
); -}; \ No newline at end of file +}; + diff --git a/frontend/src/style/about/about-4.css b/frontend/src/style/about/about-4.css index 61a9a7a..511fcff 100644 --- a/frontend/src/style/about/about-4.css +++ b/frontend/src/style/about/about-4.css @@ -1,136 +1,201 @@ -@media (max-width: 480px){ - .ag-timeline { - - } - .ag-timeline_line { - - } + +@media (max-width: 768px) { + /* Styles for screens up to 768px (e.g., tablets) */ + .head-title h1 { + font-size: 2em; + padding: 5px 40px; + } + + .checkpoint { + max-width: 100%; + padding: 1em; + } + + .checkpoint:nth-child(even), + .checkpoint:nth-child(odd) { + padding-left: 1em; + padding-right: 1em; + transform: none; + } + + .checkpoint:nth-child(odd)::before, + .checkpoint:nth-child(even)::before { + display: none; + } + + .checkpoint:nth-child(odd) div::before, + .checkpoint:nth-child(even) div::before { + display: none; + } + .imagd { + margin-left: 0; + margin-top: 0; + } + .ag-timeline_line-progress { + display: none; + } + .ag-timeline::before{ + display: none; + } + .imagd { + display: none; + } + .card { + height: 300px; + width: 300px; + } - .ag-timeline_line-progress { - - } + .card-image { + height: 120px; + width: 120px; + } - .checkpoint h2{ - height:30px; - text-align: center; - font-size:1.3em; - margin-bottom: 0.5; - color: #e59948; + .card-content h2 { + font-size: 20px; } - - .timeline{ - - } - .checkpoint{ - + .card-content h3, + .card-content .description { + font-size: 16px; + } + #team-head, + #team-head1 { + font-size: 30px; + padding: 10px 50px; } - - .checkpoint div{ - + + #team-head1 { + margin-left: 0; } - - .checkpoint p{ - line-height: 27px; - color: #feffff; - font-size: 18px; + + .flip-box { + margin: 20px; } - - .checkpoint:nth-child(even){ - padding-left: 20em; - transform: translateX(14.5rem); } - .checkpoint:nth-child(odd){ - padding-right: 20em; - transform: translateX(-14.5em); - + + + @media (max-width: 480px) { + /* Styles for screens up to 480px (e.g., phones) */ + .head-title h1 { + font-size: 1.5em; + padding: 5px 20px; } - - .checkpoint:nth-child(odd)::before{ - content: ""; - background: #6cc0c4; - width: 9.5em; - height: 3px; - position: absolute; - top: 50%; - transform: translatey(-50%); + .imagd { + display: none; } - - .checkpoint:nth-child(even)::before{ - content: ""; - background: #6cc0c4; - width: 9.5em; - height: 3px; - position: absolute; - top: 50%; - transform: translatey(-50%); - /* left: 50%; */ - + .checkpoint p { + font-size: 16px; } - .checkpoint:nth-child(odd)::before{ - right: 20%; + .ag-timeline_line-progress { + display: none; } - .checkpoint:nth-child(even)::before{ - left: 20%; + .ag-timeline::before{ + display: none; } + .checkpoint h2{ + height: 50px; + text-align: center; + font-size: 2.3em; + margin-bottom: 1.5em; + color: #e59948 !important; + } + #team-head, + #team-head1 { + font-size: 24px; + padding: 8px 30px; + margin-bottom: 50px; + } + + .flip-box { + background-color: transparent; + width: 250px; + height: 250px; + margin-left: 70px; + margin-right: 70px; + perspective: 1000px; /* Remove this if you don't want the 3D effect */ + } + + /* This container is needed to position the front and back side */ + .flip-box-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.8s; + transform-style: preserve-3d; + } + + /* Do an horizontal flip when you move the mouse over the flip box container */ + .flip-box:hover .flip-box-inner { + transform: rotateY(180deg); + } + + /* Position the front and back side */ + .flip-box-front, + .flip-box-back { + position: absolute; + width: 100%; + height: 100%; + -webkit-backface-visibility: hidden; /* Safari */ + backface-visibility: hidden; + } + + .flip-box-front { + display: flex; + justify-content: center; + align-items: center; + } + + .flip-box-front img { + border: 3px solid #6cc0c4; + border-radius: 10px; + max-width: 90%; + max-height: 90%; + } + + /* Style the back side */ + .flip-box-back { + background-color: #000000; + color: white; + border: 3px solid #6cc0c4; + border-radius: 20px; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + font-size: larger; + transform: rotateY(180deg); + } + + .flip-box-back a { + text-decoration: none; + color: white; + } + .card { + height: 250px; + width: 250px; + } - .ag-timeline::before { - content: ""; - background:#6cc0c4 ; - background-size: contain; - box-shadow: 0 0 0.5em #6cc0c4; - width: 0.5em; - height: 0.5em; - position: fixed; /* Set the position to fixed */ - top: 50%; /* Adjust the vertical position */ - left: 50%; /* Adjust the horizontal position */ - transform: translate(-50%, -50%); - border-radius: 50%; - z-index: -2; /* Set a higher z-index to appear on top of the line */ - } + .card-image { + height: 100px; + width: 100px; + } - .checkpoint:nth-child(even) div::before{ - content: ""; - background-image: url(../../assets/img/logo.jpeg); - background-position: cover; - background-size:contain; - box-shadow: 0 0 0.5em #6cc0c4; - width: 3.9em; - height: 4em; - position:fixed; - left: 19% !important; - top: 50%; - transform: translateY(-50%); - border-radius: 50%; - - - } - .checkpoint:nth-child(odd) div::before{ - content: ""; - background-image: url(../../assets/img/logo.jpeg); - background-position: cover; - background-size: contain; - box-shadow: 0 0 0.5em #6cc0c4; - width: 3.9em; - height: 4em; - position:fixed; - left: 74%; - top: 50%; - transform: translateY(-50%); - border-radius: 50%; - } + .card-content h2 { + font-size: 18px; + } - .checkpoint:nth-child(odd) div::before{ - right:5.2em; - } - .checkpoint:nth-child(even) div::before{ - left: 9em ; - } - .imagd{ - width: 100% !important; - height: auto !important; - margin-left: -5px; - margin-top: -7px; - } -} \ No newline at end of file + .card-content h3, + .card-content .description { + font-size: 14px; + } + } + + @media (max-width: 1200px) { + .team-container { + width: 100%; + padding: 0 20px; + } + } + diff --git a/frontend/src/style/about/about.css b/frontend/src/style/about/about.css index 02fb362..9254758 100644 --- a/frontend/src/style/about/about.css +++ b/frontend/src/style/about/about.css @@ -167,45 +167,7 @@ margin-left: -5px; margin-top: -7px; } -.line1{ - /* Line 43 */ - box-sizing: border-box; - position: absolute; - width: 546px; - height: 0px; - left: 180px; - bottom: 270px; - - border: 2px solid #6CBFC4; - transform: rotate(156.12deg); - -} -.line2{ - /* Line 43 */ - box-sizing: border-box; - position: absolute; - width: 146px; - height: 0px; - left: 630px; - bottom: 307px; - - border: 2px solid #6CBFC4; - transform: rotate(90deg); -} -.line3{ - /* Line 43 */ - box-sizing: border-box; - position: absolute; - width: 546px; - height: 0px; - left: 680px; - bottom: 268px; - - border: 2px solid #6CBFC4; - transform: rotate(204.12deg); - -} .team-container { diff --git a/frontend/src/style/about/aboutus.css b/frontend/src/style/about/aboutus.css index 72ff066..8767f66 100644 --- a/frontend/src/style/about/aboutus.css +++ b/frontend/src/style/about/aboutus.css @@ -1,78 +1,127 @@ .AboutUS-Container { background-color: black; - width: 100vw; + width: 100%; min-height: 100vh; padding: 20px; - margin: 12% 2% 5% 2%; - padding-right: 10%; - padding-left: 10%; - } - - .AboutUS-Container h2{ + margin-top: 12%; + margin-bottom: 5%; +} + +.AboutUS-Container h1 { + display: flex; + justify-content: last baseline; text-align: left; - color: #3cbcb1 !important; - } +} - .about-container { +.about-container { display: flex; flex-direction: column; - align-items: center; - } - - .about-container h3 { + align-items: center; /* Centers the rows vertically within the container */ +} + +.about-container h3 { font-family: 'Poppins', sans-serif; font-size: 30px; font-weight: 200; - color: #f6ce3c; + color: yellow; text-align: left; - margin-bottom: 20px; - } - - .heading-color { +} + +.heading-color{ color: #f6ce3c !important; - } - - .about-container p { +} + +.about-container p { font-family: 'Poppins', sans-serif; font-size: 20px; font-weight: 500; color: white; line-height: 24px; text-align: left; - margin-bottom: 30px; - } - - .about-container img { - width: 300px; - height: auto; - margin-bottom: 30px; - } - - .vision-heading { - color: #f6ce3c !important; + /* margin-left: 20px;*/ +} + +.about-container img { + width: 100%; + max-width: 300px; + height: 100%; + max-height: 300px; +} + + +.mi{ + + margin-left:16.6%; +} +.about-container .vision-heading { + color: #f6ce3c; font-size: 30px; font-weight: 200; line-height: 60px; text-align: left; - margin-bottom: 20px; - } - - .rows-center { - align-items: center; - justify-content: space-between; - margin: 30px 0; - grid-column: 2; - } - - .text-left { - text-align: left; - } +} - @media (max-width:480px){ +.rows-center{ + align-items: center; + justify-content: center; + margin: -5%; + margin-top: 120px !important; + +} +/* mobile view */ + +@media only screen and (max-width: 768px) { .rows-center{ - grid-column: 1; + align-items: center; + justify-content: center; + margin: -5%; + margin-top: 70px !important; + } - .about-container img{ - width: 150px; + .midc{ + display: flex; + flex-wrap: wrap; + flex-direction: column-reverse; } - } \ No newline at end of file + .midc>.mcol1{ + + } + + + + + +.about-container p{ + font-size: 18px; + overflow:auto; + font-family: 'Poppins', sans-serif; + color: white; + line-height: 24px; + text-align: center; +} + +.about-container h3 { + font-family: 'Poppins', sans-serif; + font-size: 30px; + font-weight: 200; + color: yellow; + text-align: center; +} +.about-container .vision-heading { + color: #f6ce3c; + font-size: 30px; + font-weight: 200; + line-height: 60px; + text-align:center; +} +.heading-color{ + color: #f6ce3c !important; + + text-align: center; + +} +.mi{ + + margin-left:0; +} +} \ No newline at end of file diff --git a/frontend/src/style/background/background-1.css b/frontend/src/style/background/background-1.css index c03ceb7..ad45838 100644 --- a/frontend/src/style/background/background-1.css +++ b/frontend/src/style/background/background-1.css @@ -64,7 +64,7 @@ width: 100px; height: 40px; transform: translate3d(-600px, 100px, 0) !important; - transition: all 1.5s ease-in-out; + transition: all 2s ease-in-out; } .scrolled .Tbird-1 { opacity: 0; @@ -75,7 +75,7 @@ opacity: 0; position: absolute; transform: translate3d(-1040px, -250px, 0) !important; - transition: all 1.5s ease-in-out; + transition: all 2s ease-in-out; } .scrolled .bird-1{ @@ -92,7 +92,7 @@ width: 100px; height: 40px; transform: translate3d(-310px, 420px, 0); - transition: 1.5s ease-in-out; + transition: 2s ease-in-out; } .scrolled .Tbird-2{ opacity: 0; @@ -105,7 +105,7 @@ opacity: 0; position: absolute; transform: translate3d(-700px, 72px, 0); - transition: 1.5s ease-in-out; + transition: 2s ease-in-out; } .scrolled .bird-2{ position: absolute; @@ -138,7 +138,7 @@ transform: matrix(0.97, 0.24, 0.24, -0.97, 0, 0); */ width: 100px; height: 40px; transform: translate3d(-260px,45px,0) !important; - transition: all 1.5s ease-in-out !important; + transition: all 2s ease-in-out !important; } .scrolled .Tcloud-1{ @@ -152,7 +152,7 @@ transform: matrix(0.97, 0.24, 0.24, -0.97, 0, 0); */ width: 100px; height: 40px; transform: translate3d(-260px,-245px,0) !important; - transition: all 1.5s ease-in-out !important; + transition: all 2s ease-in-out !important; } .scrolled .cloud-1{ position: absolute; @@ -168,7 +168,7 @@ transform: matrix(0.97, 0.24, 0.24, -0.97, 0, 0); */ width: 170px; height: 60px; transform: translate3d(-50%,160px,0); - transition: all 1.5s ease-in-out !important; + transition: all 2s ease-in-out !important; } .scrolled .Tcloud-2{ position: absolute; @@ -183,7 +183,7 @@ transform: matrix(0.97, 0.24, 0.24, -0.97, 0, 0); */ width: 130px; height: 40px; transform: translate3d(-450px,45px,0); - transition: all 1.5s ease-in-out; + transition: all 2s ease-in-out; } .scrolled .cloud-2{ position: absolute; @@ -199,7 +199,7 @@ transform: matrix(0.97, 0.24, 0.24, -0.97, 0, 0); */ width: 120px; height: 40px; transform: translate3d(-520px,430px,0); - transition: all 1.5s ease-in-out !important; + transition: all 2s ease-in-out !important; } .scrolled .Tcloud-3{ opacity: 0; @@ -215,7 +215,7 @@ transform: matrix(0.97, 0.24, 0.24, -0.97, 0, 0); */ width: 260px; height: 40px; transform: translate3d(-550px,-50px,0); - transition: all 1.5s ease-in-out; + transition: all 2s ease-in-out; } .scrolled .cloud-3{ position: absolute; @@ -233,7 +233,7 @@ transform: matrix(0.97, 0.24, 0.24, -0.97, 0, 0); */ width: 470px; height: 400px; transform: translate(85%,10%); - transition: all 1.5s ease-in-out; + transition: all 2s ease-in-out; } .scrolled .Thand{ position: absolute; @@ -249,7 +249,7 @@ transform: matrix(0.97, 0.24, 0.24, -0.97, 0, 0); */ width: 470px; height: 400px; transform: translate(185%,-45%); - transition: all 1.5s ease-in-out; + transition: all 2s ease-in-out; } .scrolled .hand{ position: absolute; @@ -269,7 +269,7 @@ transform: matrix(0.97, 0.24, 0.24, -0.97, 0, 0); */ width:180px; opacity: 0.05; transform: translate3d(36.5vw,470px,0px) rotate(300deg); - transition: all 1.5s ease-in-out; + transition: all 2s ease-in-out; } .scrolled .Twall-1{ position: absolute; @@ -284,7 +284,7 @@ transform: matrix(0.97, 0.24, 0.24, -0.97, 0, 0); */ width:80px; opacity: 1; transform: translate3d(450px,191px,0px) rotate(20deg) ; - transition: all 1.5s ease-in-out; + transition: all 2s ease-in-out; } .scrolled .wall-1{ position: absolute; @@ -299,14 +299,14 @@ transform: matrix(0.97, 0.24, 0.24, -0.97, 0, 0); */ width:240px; opacity:0.05; transform: translate3d(35.5vw,300px,50px)rotate(300deg); - transition: all 1.5s ease-in-out; + transition: all 2s ease-in-out; } .scrolled .Twall-2{ position: absolute; height: 190px; width:240px; opacity:0; - transform: translate3d(31.5vw,-39px,0) rotate(360deg); + transform: translate3d(32vw,-39px,0) rotate(360deg); } .wall-2{ position: absolute; @@ -314,7 +314,7 @@ transform: matrix(0.97, 0.24, 0.24, -0.97, 0, 0); */ width:80px; opacity: 1; transform: translate3d(550px,230px,50px)rotate(30deg); - transition: all 1.5s ease-in-out; + transition: all 2s ease-in-out; } .scrolled .wall-2{ position: absolute; @@ -328,7 +328,7 @@ transform: matrix(0.97, 0.24, 0.24, -0.97, 0, 0); */ height: 140px; width:190px; opacity: 0.1; - transition: all 1.5s ease-in-out; + transition: all 2s ease-in-out; transform: translate3d(-55vw,75vh,0) !important; } .scrolled .Troof-1{ @@ -343,7 +343,7 @@ transform: matrix(0.97, 0.24, 0.24, -0.97, 0, 0); */ height: 140px; width:190px; transform: translate3d(-730px,90px,0); - transition: all 1.5s ease-in-out; + transition: all 2s ease-in-out; } .scrolled .roof-1{ position: absolute; @@ -357,7 +357,7 @@ transform: matrix(0.97, 0.24, 0.24, -0.97, 0, 0); */ height: 170px; width:90px; opacity: 0.2; - transition: all 1.5s ease-in-out; + transition: all 2s ease-in-out; transform: translate3d(-115px,445px,0) !important; } .scrolled .Troof-2{ @@ -372,7 +372,7 @@ transform: matrix(0.97, 0.24, 0.24, -0.97, 0, 0); */ height: 170px; opacity: 0.3; width:90px; - transition: all 1.5s ease-in-out; + transition: all 2s ease-in-out; transform: translate3d(-115px,65px,0) rotate(360deg) !important; } .scrolled .roof-2{ @@ -389,7 +389,7 @@ transform: matrix(0.97, 0.24, 0.24, -0.97, 0, 0); */ opacity: 0.2; z-index: 0; transform: translate3d(-625px,470px,0); - transition: all 1.5s ease-in-out; + transition: all 2s ease-in-out; } .scrolled .Troof-3{ position: absolute; @@ -406,7 +406,7 @@ transform: matrix(0.97, 0.24, 0.24, -0.97, 0, 0); */ width:190px; z-index: 0; transform: translate3d(548px,-50px,0); - transition: all 1.5s ease-in-out; + transition: all 2s ease-in-out; } .scrolled .roof-3{ position: absolute; @@ -422,7 +422,7 @@ transform: matrix(0.97, 0.24, 0.24, -0.97, 0, 0); */ opacity: 0.06; width:85px; transform: translate3d(250px,330px,0) !important; - transition: all 1.5s ease-in-out; + transition: all 2s ease-in-out; } .scrolled .Troof-4{ position: absolute; @@ -437,7 +437,7 @@ transform: matrix(0.97, 0.24, 0.24, -0.97, 0, 0); */ opacity: 0.2; width:85px; transform: translate3d(250px,130px,0) !important; - transition: all 1.5s ease-in-out; + transition: all 2s ease-in-out; } .scrolled .roof-4{ position: absolute; @@ -451,7 +451,7 @@ transform: matrix(0.97, 0.24, 0.24, -0.97, 0, 0); */ height: 80px; width:30px; transform: translate3d(80px,85vh,0) !important; - transition: all 1.5s ease-in-out; + transition: all 2s ease-in-out; } .scrolled .Tgate{ position: absolute; @@ -465,7 +465,7 @@ transform: matrix(0.97, 0.24, 0.24, -0.97, 0, 0); */ height: 80px; width:30px; transform: translate3d(80px,65px,0) !important; - transition: all 1.5s ease-in-out; + transition: all 2s ease-in-out; } .scrolled .gate{ position: absolute; @@ -480,7 +480,7 @@ transform: matrix(0.97, 0.24, 0.24, -0.97, 0, 0); */ height: 60px; width:30px; transform: translate(31vw,52vh) !important; - transition: all 1.5s ease-in-out !important; + transition: all 2s ease-in-out !important; } .scrolled .Twindow-1{ opacity: 0; @@ -495,7 +495,7 @@ transform: matrix(0.97, 0.24, 0.24, -0.97, 0, 0); */ height: 60px; width:30px; transform: translate(31vw,-17px) !important; - transition: all 1.5s ease-in-out !important; + transition: all 2s ease-in-out !important; } .scrolled .window-1{ opacity: 1 !important; @@ -510,7 +510,7 @@ transform: matrix(0.97, 0.24, 0.24, -0.97, 0, 0); */ height: 60px; width:30px; transform: translate3d(28vw,52vh,0) !important; - transition: all 1.5s ease-in-out !important; + transition: all 2s ease-in-out !important; } .scrolled .Twindow-2{ opacity: 0; @@ -525,7 +525,7 @@ transform: matrix(0.97, 0.24, 0.24, -0.97, 0, 0); */ height: 60px; width:30px; transform: translate3d(28vw,-17px,0) !important; - transition: all 1.5s ease-in-out; + transition: all 2s ease-in-out; } .scrolled .window-2{ opacity: 1; @@ -540,7 +540,7 @@ transform: matrix(0.97, 0.24, 0.24, -0.97, 0, 0); */ height: 60px; width:30px; transform: translate(25vw,52vh) !important; - transition: all 1.5s ease-in-out; + transition: all 2s ease-in-out; } .scrolled .Twindow-3{ opacity: 0; @@ -555,7 +555,7 @@ transform: matrix(0.97, 0.24, 0.24, -0.97, 0, 0); */ height: 60px; width:30px; transform: translate(25vw,-18px) !important; - transition: all 1.5s ease-in-out; + transition: all 2s ease-in-out; } .scrolled .window-3{ opacity: 1; @@ -570,7 +570,7 @@ transform: matrix(0.97, 0.24, 0.24, -0.97, 0, 0); */ height: 60px; width:30px; transform: translate(22vw,52vh) !important; - transition: all 1.5s ease-in-out; + transition: all 2s ease-in-out; } .scrolled .Twindow-4{ opacity: 0; @@ -585,7 +585,7 @@ transform: matrix(0.97, 0.24, 0.24, -0.97, 0, 0); */ height: 60px; width:30px; transform: translate(22vw,-18px) !important; - transition: all 1.5s ease-in-out; + transition: all 2s ease-in-out; } .scrolled .window-4{ opacity: 1; @@ -600,7 +600,7 @@ transform: matrix(0.97, 0.24, 0.24, -0.97, 0, 0); */ height: 40px; width:25px; transform: translate(19vw,54vh) !important; - transition: all 1.5s ease-in-out; + transition: all 2s ease-in-out; } .scrolled .Twindow-5{ opacity: 0; @@ -615,7 +615,7 @@ transform: matrix(0.97, 0.24, 0.24, -0.97, 0, 0); */ height: 40px; width:25px; transform: translate(19vw,-10px) !important; - transition: all 1.5s ease-in-out; + transition: all 2s ease-in-out; } .scrolled .window-5{ opacity: 1; @@ -631,7 +631,7 @@ transform: matrix(0.97, 0.24, 0.24, -0.97, 0, 0); */ height: 35px; width:25px; transform: translate(16vw,54vh) !important; - transition: all 1.5s ease-in-out; + transition: all 2s ease-in-out; } .scrolled .Twindow-6{ position: absolute; @@ -648,7 +648,7 @@ transform: matrix(0.97, 0.24, 0.24, -0.97, 0, 0); */ height: 35px; width:25px; transform: translate3d(-75px,-10px,0) !important; - transition: all 1.5s ease-in-out; + transition: all 2s ease-in-out; } .scrolled .window-6{ opacity: 1; @@ -666,7 +666,7 @@ transform: matrix(0.97, 0.24, 0.24, -0.97, 0, 0); */ width: 25px; height: 25px; transform: translate3d(430px,330px,0) !important; - transition: all 1.5s ease-in-out; + transition: all 2s ease-in-out; } .scrolled .Tchimney{ position: absolute; @@ -682,7 +682,7 @@ transform: matrix(0.97, 0.24, 0.24, -0.97, 0, 0); */ opacity: 0.2; height: 25px; transform: translate3d(420px,-60px,0) !important; - transition: all 1.5s ease-in-out; + transition: all 2s ease-in-out; } .scrolled .chimney{ position: absolute; @@ -701,7 +701,7 @@ transform: matrix(0.97, 0.24, 0.24, -0.97, 0, 0); */ opacity: 0.2; z-index: 0; transform: translate3d(510px,520px,0) !important; - transition: all 1.5s ease-in-out; + transition: all 2s ease-in-out; } .scrolled .Tplant-1{ position: absolute; @@ -718,7 +718,7 @@ transform: matrix(0.97, 0.24, 0.24, -0.97, 0, 0); */ z-index: 0; opacity: 0.3; transform: translate3d(510px,100px,0) !important; - transition: all 1.5s ease-in-out; + transition: all 2s ease-in-out; } .scrolled .plant-1{ position: absolute; @@ -736,7 +736,7 @@ transform: matrix(0.97, 0.24, 0.24, -0.97, 0, 0); */ opacity:0.2; z-index: 0; transform: translate3d(208px,590px,0) !important; - transition: all 1.5s ease-in-out; + transition: all 2s ease-in-out; } .scrolled .Tplant-2{ position: absolute; @@ -753,7 +753,7 @@ transform: matrix(0.97, 0.24, 0.24, -0.97, 0, 0); */ z-index: 0; opacity: 0.1; transform: translate3d(208px,90px,0) !important; - transition: all 1.5s ease-in-out; + transition: all 2s ease-in-out; } .scrolled .plant-2{ position: absolute; @@ -772,7 +772,7 @@ transform: matrix(0.97, 0.24, 0.24, -0.97, 0, 0); */ width: 620px; height: 600px; transform: translate(-860px,-50px); - transition: all 1.5s ease-in-out; + transition: all 2s ease-in-out; } .scrolled .Tsun-circle{ position: absolute; @@ -784,11 +784,11 @@ transform: matrix(0.97, 0.24, 0.24, -0.97, 0, 0); */ .sun-circle{ position: absolute; - opacity: 0.06; + opacity: 0; width: 620px; height: 600px; transform: translate(-860px,-350px); - transition: all 1.5s ease-in-out; + transition: all 2s ease-in-out; } .scrolled .sun-circle{ position: absolute; @@ -796,7 +796,7 @@ transform: matrix(0.97, 0.24, 0.24, -0.97, 0, 0); */ width: 80px; height: 60px; transform: translate(430px,-270px); - transition: all 1.5s ease-in-out; + transition: all 2s ease-in-out; } } \ No newline at end of file diff --git a/frontend/src/style/blog/blogmain.css b/frontend/src/style/blog/blogmain.css index 58e3ed5..468fc85 100644 --- a/frontend/src/style/blog/blogmain.css +++ b/frontend/src/style/blog/blogmain.css @@ -5,7 +5,7 @@ justify-content: center; align-items: center; color: white; - font-size: 55px !important; + font-size: 35px !important; padding-bottom: 20px; width: auto; left: 0; diff --git a/frontend/src/style/home/home-4.css b/frontend/src/style/home/home-4.css index 707d5d0..819422f 100644 --- a/frontend/src/style/home/home-4.css +++ b/frontend/src/style/home/home-4.css @@ -47,6 +47,7 @@ opacity: 1; left: 30%; right: auto; + margin-bottom: 20px !important; transform: translate(-58px, -15px); top:10% !important; } @@ -63,7 +64,7 @@ opacity: 1; left: 35%; right: auto; - top: 10% !important; + top: 11% !important; transform: translate(-59px, 15px); } diff --git a/frontend/src/style/service.css b/frontend/src/style/service.css index 5caddde..b0db5aa 100644 --- a/frontend/src/style/service.css +++ b/frontend/src/style/service.css @@ -100,6 +100,7 @@ height: 100vh; .serviced2{ font-weight: 10px; margin-left: 3%; + margin-bottom: 20px; } .box1:hover .box14{ diff --git a/frontend/src/style/testimonial.css b/frontend/src/style/testimonial.css index 981cea7..c6f1838 100644 --- a/frontend/src/style/testimonial.css +++ b/frontend/src/style/testimonial.css @@ -1,35 +1,52 @@ + .Testimonial-Container { - background-color: black; - width: 100%; - min-height: 100vh; - padding: 20px; - margin-top: 8%; - margin-bottom: 5%; - } - .Testimonial-Container h2{ - text-align: center; - margin-left: 5rem; - color: #1D5F58 !important; - - } - .Testimonial-Container h1 { - display: flex; - justify-content: last baseline; - text-align: left; - } - .testimonial-container { - display: flex; - justify-content: justify-between; - flex-direction: row; - align-items: center; /* Centers the rows vertically within the container */ - margin-top: 17%; - margin-left: 4%; - } - .card { - border-radius: 1rem; - margin: 2rem; - padding: 20px; - background-color: #f8f9fa; - width: 300px; - height: auto; - } \ No newline at end of file + background-color: black; + width: 100%; + min-height: 100vh; + padding: 20px; + margin-top: 8%; + margin-bottom: 5%; +} +.Testimonial-Container h2{ + text-align: center; + margin-left: 5rem; + color: #1D5F58 !important; + +} +.Testimonial-Container h1 { + display: flex; + justify-content: last baseline; + text-align: left; +} +.testimonial-container { + display: flex; + justify-content: justify-between; + flex-direction: row; + align-items: center; /* Centers the rows vertically within the container */ + margin-top: 17%; + margin-left: 4%; +} +.testimonialSlider{ + + justify-content: space-between; + margin-left: 35vw; + margin-top: -10vw; + +} +.card img{ + width: 30vw; + padding:10px 10px 10px 10px; +} +.card h1{ + font-size: 2vw; + color: black !important; + padding-top: 10px; + margin-right: 19vw; + +} + + + + + + From 4a7122e7f89c35fbfae0c9348ad26d8f907b2fd6 Mon Sep 17 00:00:00 2001 From: raunak234362 Date: Sat, 18 May 2024 12:23:15 +0530 Subject: [PATCH 05/14] 18th may first commit --- frontend/src/App.jsx | 10 +++++----- frontend/src/components/about/aboutus.jsx | 4 ++-- frontend/src/components/contact/contactus.jsx | 4 ++-- frontend/src/components/property/property.jsx | 4 ++-- 4 files changed, 11 insertions(+), 11 deletions(-) diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index f811743..3a67b33 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -1,5 +1,5 @@ import './App.css'; -import { HashRouter, Routes, Route } from "react-router-dom"; +import { BrowserRouter, Routes, Route } from "react-router-dom"; import { NavBar } from './components/navbar'; // import { Nav } from './components/nav'; @@ -19,11 +19,11 @@ import { Login } from './components/login'; import {Service} from './components/service'; import { Property } from './components/property/property'; import 'bootstrap/dist/css/bootstrap.css'; -import { Footer } from './components/footer'; +// import { Footer } from './components/footer'; function App() { return (
- + {/*
); diff --git a/frontend/src/components/about/aboutus.jsx b/frontend/src/components/about/aboutus.jsx index 5b9a8a9..a1d664e 100644 --- a/frontend/src/components/about/aboutus.jsx +++ b/frontend/src/components/about/aboutus.jsx @@ -3,7 +3,7 @@ import { useEffect } from 'react' import $ from 'jquery' import '../../style/about/about.css' import '../../style/about/about-4.css' -// import {Footer} from '../footer' +import {Footer} from '../footer' import React from 'react'; import ceo1 from '../../assets/image/about/CEO1.png' import ceo2 from '../../assets/image/about/CEO2.jpg' @@ -258,7 +258,7 @@ export const AboutUs = () => {
{/* */} < FAQ/> - {/*
*/} +
) } \ No newline at end of file diff --git a/frontend/src/components/contact/contactus.jsx b/frontend/src/components/contact/contactus.jsx index c848ae9..f4f26ef 100644 --- a/frontend/src/components/contact/contactus.jsx +++ b/frontend/src/components/contact/contactus.jsx @@ -5,7 +5,7 @@ import 'animate.css'; import TrackVisibility from 'react-on-screen'; import messageIMG from '../../assets/img/message-img.png'; import callIMG from '../../assets/img/call-img.png'; -// import { Footer } from '../footer'; +import { Footer } from '../footer'; export const Contact = () => { const formInitialDetails = { Name: '', @@ -113,7 +113,7 @@ export const Contact = () => { - {/*
*/} +
) diff --git a/frontend/src/components/property/property.jsx b/frontend/src/components/property/property.jsx index 96bc601..51fb7fa 100644 --- a/frontend/src/components/property/property.jsx +++ b/frontend/src/components/property/property.jsx @@ -4,7 +4,7 @@ import image2 from '../../assets/image/property/img2.svg' import image3 from '../../assets/image/property/img3.svg' import image4 from '../../assets/image/property/img4.svg' import { Row, Col} from "react-bootstrap" -// import {Footer} from "../footer" +import {Footer} from "../footer" export const Property = () => { return ( @@ -74,7 +74,7 @@ export const Property = () => {
- {/*