To make it simple for people to search for and rent homes in new
cities while doing so from the comfort of their own homes.
@@ -38,12 +38,12 @@ export const About = () => {
Our Mission
+ Our Mission
To hold "To-Let" boards at all rental properties available nearby.
-
diff --git a/frontend/src/components/about/aboutus.jsx b/frontend/src/components/about/aboutus.jsx
index 1ee727d..a1d664e 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'
@@ -118,7 +119,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/blog/blog.jsx b/frontend/src/components/blog/blog.jsx
deleted file mode 100644
index 2968779..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
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 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
-
-
-
-
Akarshi Mathur
-
Full Stack Developer
-
-
- 10
- 5
-
-
-
-
-
-
-
-
-
-
-
-
- 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 {' '}
-
-
-
-
Divyanshi Shukla
-
Designer
-
-
- 0
- 0
-
-
-
-
-
-
-
-
-
-
-
-
- 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
-
-
-
-
Raunak Deep Srivastava
-
Full Stack Developer
-
-
- 0
- 0
-
-
-
-
-
-
-
-
-
-
-
-
- 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.
-
-
-
-
Manthan Thool
-
UI/UX Developer
-
-
- 0
- 0
-
-
-
-
-
-
-
-
-
-
-
-
- 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,
-
-
-
-
Baanipreet Kaur
-
FrontEnd Developer
-
-
- 0
- 0
-
-
-
-
-
-
-
-
-
-
-
-
- 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
-
-
-
-
Ramashankar
-
Content Writer
-
-
- 0
- 0
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 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
-
-
-
-
Akarshi Mathur
-
Full Stack Developer
-
-
- 10
- 5
-
-
-
-
-
-
-
-
-
-
-
-
- 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 {' '}
-
-
-
-
Divyanshi Shukla
-
Designer
-
-
- 0
- 0
-
-
-
-
-
-
-
-
-
-
-
-
- 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
-
-
-
-
Raunak Deep Srivastava
-
Full Stack Developer
-
-
- 0
- 0
-
-
-
-
-
-
-
-
-
-
-
-
- 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.
-
-
-
-
Manthan Thool
-
UI/UX Developer
-
-
- 0
- 0
-
-
-
-
-
-
-
-
-
-
-
-
- 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,
-
-
-
-
Baanipreet Kaur
-
FrontEnd Developer
-
-
- 0
- 0
-
-
-
-
-
-
-
-
-
-
-
-
- 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
-
-
-
-
Ramashankar
-
Content Writer
-
-
- 0
- 0
-
-
-
-
-
-
-
-
- )
-}
diff --git a/frontend/src/components/blog/blogmain.jsx b/frontend/src/components/blog/blogmain.jsx
index b60d905..cff6d7a 100644
--- a/frontend/src/components/blog/blogmain.jsx
+++ b/frontend/src/components/blog/blogmain.jsx
@@ -1,246 +1,26 @@
-import "../../style/blog/blogmain.css"
-import { Container, Typography } from "@mui/material"
-import {Col, Row} from "react-bootstrap"
-
-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 BlogMain = ()=>{
- return(
-
-
-
- To-Let Tales
-
-
- Dive into a Sea of Endless Stories and Insights
-
-
-
- Trending
- Latest
-
-
-
-
-
-
-
-
-
-
-
- 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
-
-
-
-
Akarshi Mathur
-
Full Stack Developer
-
-
- 10
- 5
-
-
-
-
-
-
-
-
-
-
-
-
- 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 {' '}
-
-
-
-
Divyanshi Shukla
-
Designer
-
-
- 0
- 0
-
-
-
-
-
-
-
-
-
-
-
-
- 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
-
-
-
-
Raunak Deep Srivastava
-
Full Stack Developer
-
-
- 0
- 0
-
-
-
-
-
-
-
-
-
-
-
-
- 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.
-
-
-
-
Manthan Thool
-
UI/UX Developer
-
-
- 0
- 0
-
-
-
-
-
-
-
-
-
-
-
-
- 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,
-
-
-
-
Baanipreet Kaur
-
FrontEnd Developer
-
-
- 0
- 0
-
-
-
-
-
-
-
-
-
-
-
-
- 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
-
-
-
-
Ramashankar
-
Content Writer
-
-
- 0
- 0
-
-
-
-
-
-
- )
-}
\ No newline at end of file
+import { BiRightArrow } from "react-icons/bi";
+import { BlogPage } from "../../SampleData";
+import { Category } from "../category";
+
+export const BlogMain = () => {
+ return (
+
+
To-Let Tales
+
Dive into a Sea of Endless Stories and Insights
+
+ {BlogPage.map((data, index) => (
+
+
+
{data?.date}
+
{data?.title.split(" ").slice(0, 10).join(" ")}{data?.title.split(" ").length > 10 && "..."}
+
{data?.des1.split(" ").slice(0, 10).join(" ")}{data?.des1.split(" ").length > 10 && "..."}
+
Read More
+
{data?.author}
+
{data?.designation}
+
+ ))}
+
+
+
+ );
+};
diff --git a/frontend/src/components/contact/contactus.jsx b/frontend/src/components/contact/contactus.jsx
index 75d27fc..f4f26ef 100644
--- a/frontend/src/components/contact/contactus.jsx
+++ b/frontend/src/components/contact/contactus.jsx
@@ -5,6 +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';
export const Contact = () => {
const formInitialDetails = {
Name: '',
@@ -82,8 +83,8 @@ export const Contact = () => {
- {({ isVisible }) =>
-
+
)
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 = () => {
diff --git a/frontend/src/components/home/Bbackground.jsx b/frontend/src/components/home/Bbackground.jsx
index b66be64..de930a6 100644
--- a/frontend/src/components/home/Bbackground.jsx
+++ b/frontend/src/components/home/Bbackground.jsx
@@ -1,4 +1,5 @@
import "../../style/background/background-1.css"
+import "../../style/background/background-3.css"
import "../../style/background/background-4.css"
import 'animate.css';
import { Container } from "react-bootstrap"
diff --git a/frontend/src/components/home/Tbackground.jsx b/frontend/src/components/home/Tbackground.jsx
index 28e8212..ce59d7b 100644
--- a/frontend/src/components/home/Tbackground.jsx
+++ b/frontend/src/components/home/Tbackground.jsx
@@ -1,4 +1,5 @@
import "../../style/background/background-1.css"
+import "../../style/background/background-3.css"
import "../../style/background/background-4.css"
import { Container } from "react-bootstrap"
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 = () => {
- Welcome to To-Let Globe
-
-
-
-
-
-
-
-
-
- )
-}
\ No newline at end of file
diff --git a/frontend/src/components/login/Login.jsx b/frontend/src/components/login/Login.jsx
new file mode 100644
index 0000000..befbc5f
--- /dev/null
+++ b/frontend/src/components/login/Login.jsx
@@ -0,0 +1,11 @@
+
+
+const Login = () => {
+ return (
+
+ Login
+
+ )
+}
+
+export default Login
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 = () => {
+
handleNavLinkClick('home')}>
diff --git a/frontend/src/components/navbar1.jsx b/frontend/src/components/navbar1.jsx
new file mode 100644
index 0000000..1484ae9
--- /dev/null
+++ b/frontend/src/components/navbar1.jsx
@@ -0,0 +1,65 @@
+import { Link } from "react-router-dom";
+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 (
+
+
+
+
+
+
+
+
+
+ handleNavLinkClick('home')}>
+ Home
+
+ handleNavLinkClick('service')}>
+ Service
+
+ handleNavLinkClick('blog')}>
+ Blog
+
+ handleNavLinkClick('contact')}>
+ Contact
+
+ handleNavLinkClick('about')}>
+ About
+
+ handleNavLinkClick('propertyListing')}>
+ Property Listing
+
+
+
+
+ );
+};
diff --git a/frontend/src/components/service.jsx b/frontend/src/components/service.jsx
index 3cd28a9..c6cbe1c 100644
--- a/frontend/src/components/service.jsx
+++ b/frontend/src/components/service.jsx
@@ -6,6 +6,7 @@ import Image3 from '../assets/image/service/image23.png'
import Image4 from '../assets/image/service/image25.png'
import Image5 from '../assets/image/service/image27.png'
import Image6 from '../assets/image/service/image29.png'
+// import { Footer } from './footer'
export const Service = () => {
@@ -160,6 +161,7 @@ export const Service = () => {
+ {/*
*/}
)
}
diff --git a/frontend/src/components/testimonial.jsx b/frontend/src/components/testimonial.jsx
new file mode 100644
index 0000000..8022c50
--- /dev/null
+++ b/frontend/src/components/testimonial.jsx
@@ -0,0 +1,92 @@
+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 = () => {
+ let slideIndex = 0;
+showSlides();
+
+function showSlides() {
+ let slides = document.getElementsByClassName("testimonialSlider");
+ let dots = document.getElementsByClassName("dot");
+
+ // 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 (
+ <>
+
+
Testimonials
+
+
+ What People Say About Us
+
+
+
+
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.
+
+
+
+
+
+
+
+
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.
+
+
+
+
+
+
+
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.
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 30face1..a87618f 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,3 +1,6 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
diff --git a/frontend/src/style/about/about-4.css b/frontend/src/style/about/about-4.css
new file mode 100644
index 0000000..511fcff
--- /dev/null
+++ b/frontend/src/style/about/about-4.css
@@ -0,0 +1,201 @@
+
+@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;
+ }
+
+ .card-image {
+ height: 120px;
+ width: 120px;
+ }
+
+ .card-content h2 {
+ font-size: 20px;
+ }
+
+ .card-content h3,
+ .card-content .description {
+ font-size: 16px;
+ }
+ #team-head,
+ #team-head1 {
+ font-size: 30px;
+ padding: 10px 50px;
+ }
+
+ #team-head1 {
+ margin-left: 0;
+ }
+
+ .flip-box {
+ margin: 20px;
+ }
+ }
+
+
+ @media (max-width: 480px) {
+ /* Styles for screens up to 480px (e.g., phones) */
+ .head-title h1 {
+ font-size: 1.5em;
+ padding: 5px 20px;
+ }
+ .imagd {
+ display: none;
+ }
+ .checkpoint p {
+ font-size: 16px;
+ }
+
+ .ag-timeline_line-progress {
+ display: none;
+ }
+ .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;
+ }
+
+ .card-image {
+ height: 100px;
+ width: 100px;
+ }
+
+ .card-content h2 {
+ font-size: 18px;
+ }
+
+ .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 0145a49..8767f66 100644
--- a/frontend/src/style/about/aboutus.css
+++ b/frontend/src/style/about/aboutus.css
@@ -38,13 +38,21 @@
color: white;
line-height: 24px;
text-align: left;
+ /* margin-left: 20px;*/
}
.about-container img {
- width: 300px;
- height: 300px;
+ width: 100%;
+ max-width: 300px;
+ height: 100%;
+ max-height: 300px;
}
+
+.mi{
+
+ margin-left:16.6%;
+}
.about-container .vision-heading {
color: #f6ce3c;
font-size: 30px;
@@ -57,4 +65,63 @@
align-items: center;
justify-content: center;
margin: -5%;
+ margin-top: 120px !important;
+
+}
+/* mobile view */
+
+@media only screen and (max-width: 768px) {
+ .rows-center{
+ align-items: center;
+ justify-content: center;
+ margin: -5%;
+ margin-top: 70px !important;
+
+ }
+ .midc{
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column-reverse;
+ }
+ .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 2117608..6deeb45 100644
--- a/frontend/src/style/background/background-1.css
+++ b/frontend/src/style/background/background-1.css
@@ -1,125 +1,125 @@
-@media (max-width:1600px){
-/*------------------- Background CSS -----------------------*/
+@media (min-width: 763px) {
+ /*------------------- Background CSS -----------------------*/
-.Tbg-1{
+ .Tbg-1 {
position: absolute;
opacity: 0.05;
width: 500px;
height: 600px;
- transform: translate3d(-450px,50px,0);
+ transform: translate3d(-450px, 50px, 0);
transition: all 1sec ease-in-out;
-}
-.scrolled .Tbg-1{
+ }
+ .scrolled .Tbg-1 {
opacity: 1 !important;
width: 500px;
height: 600px;
- transform: translate3d(560px,-520px,0);
+ transform: translate3d(560px, -520px, 0);
transition: all 1sec ease-in-out;
-}
+ }
-.bg-1{
+ .bg-1 {
opacity: 0;
- transform: translate3d(560px,-520px,0);
+ transform: translate3d(560px, -520px, 0);
transition: all 1sec ease-in-out;
-}
-.scrolled .bg-1{
+ }
+ .scrolled .bg-1 {
width: 500px;
height: 600px;
position: absolute;
opacity: 0.2;
- transform: translate3d(260px,-120px,0);
-}
+ transform: translate3d(260px, -120px, 0);
+ }
-.Tbg-2{
+ .Tbg-2 {
height: 600px !important;
opacity: 0.1;
- transform: translate3d(-600px,-300px,0);
+ transform: translate3d(-600px, -300px, 0);
transition: all 1sec ease-in-out !important;
-}
-.scrolled .Tbg-2{
+ }
+ .scrolled .Tbg-2 {
opacity: 0;
- transform: translate3d(400px,-300px,0);
-}
+ transform: translate3d(400px, -300px, 0);
+ }
-.bg-2{
+ .bg-2 {
opacity: 0;
height: 600px !important ;
- transform: translate3d(-600px,-300px,0);
+ transform: translate3d(-600px, -300px, 0);
transition: all 0.5sec ease-in-out;
-}
-.scrolled .bg-2{
+ }
+ .scrolled .bg-2 {
opacity: 0.2;
height: 1200px;
width: 1200px;
position: absolute;
z-index: -1;
- transform: translate3d(-220px,-290px,0);
-}
+ transform: translate3d(-220px, -290px, 0);
+ }
-/* -----------------------Bird Component-------------- */
+ /* -----------------------Bird Component-------------- */
-.Tbird-1{
+ .Tbird-1 {
position: absolute;
opacity: 0.5;
width: 100px;
height: 40px;
transform: translate3d(-600px, 100px, 0) !important;
- transition: all 1.5s ease-in-out;
-}
-.scrolled .Tbird-1 {
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .Tbird-1 {
opacity: 0;
- transform: translate3d(250px,190px,0) !important;
-}
+ transform: translate3d(250px, 190px, 0) !important;
+ }
-.bird-1{
+ .bird-1 {
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{
+ .scrolled .bird-1 {
position: absolute;
opacity: 1;
width: 80px;
height: 30px;
- transform: translate3d(220px,-190px,0) !important;
-}
+ transform: translate3d(220px, -190px, 0) !important;
+ }
-.Tbird-2{
+ .Tbird-2 {
position: absolute;
opacity: 0.5;
width: 100px;
height: 40px;
transform: translate3d(-310px, 420px, 0);
- transition: 1.5s ease-in-out;
-}
-.scrolled .Tbird-2{
+ transition: 2s ease-in-out;
+ }
+ .scrolled .Tbird-2 {
opacity: 0;
width: 100px;
height: 40px;
transform: translate3d(450px, 250px, 0);
-}
+ }
-.bird-2{
+ .bird-2 {
opacity: 0;
position: absolute;
transform: translate3d(-700px, 72px, 0);
- transition: 1.5s ease-in-out;
-}
-.scrolled .bird-2{
+ transition: 2s ease-in-out;
+ }
+ .scrolled .bird-2 {
position: absolute;
opacity: 1;
width: 80px;
height: 30px;
transform: translate3d(510px, -100px, 0);
-}
+ }
-/* ------------------Cloud CSS------------------- */
+ /* ------------------Cloud CSS------------------- */
-/* Line 42 */
+ /* Line 42 */
-/* box-sizing: border-box;
+ /* box-sizing: border-box;
position: absolute;
width: 366.72px;
@@ -131,671 +131,872 @@ background: #6CBFC4;
border: 5px solid #6CBFC4;
transform: matrix(0.97, 0.24, 0.24, -0.97, 0, 0); */
-
-.Tcloud-1{
+ .Tcloud-1 {
position: absolute;
opacity: 0.3;
width: 100px;
height: 40px;
- transform: translate3d(-260px,45px,0) !important;
- transition: all 1.5s ease-in-out !important;
-}
+ transform: translate3d(-260px, 45px, 0) !important;
+ transition: all 2s ease-in-out !important;
+ }
-.scrolled .Tcloud-1{
+ .scrolled .Tcloud-1 {
opacity: 0;
position: absolute;
- transform: translate3d(250px, 150px,0) !important;
-}
-.cloud-1{
+ transform: translate3d(250px, 150px, 0) !important;
+ }
+ .cloud-1 {
opacity: 0;
position: absolute;
width: 100px;
height: 40px;
- transform: translate3d(-260px,-245px,0) !important;
- transition: all 1.5s ease-in-out !important;
-}
-.scrolled .cloud-1{
+ transform: translate3d(-260px, -245px, 0) !important;
+ transition: all 2s ease-in-out !important;
+ }
+ .scrolled .cloud-1 {
position: absolute;
opacity: 1;
width: 100px;
height: 40px;
- transform: translate3d(250px, -250px,0) !important;
-}
+ transform: translate3d(250px, -250px, 0) !important;
+ }
-.Tcloud-2{
+ .Tcloud-2 {
opacity: 0.5;
position: absolute;
width: 170px;
height: 60px;
- transform: translate3d(-50%,160px,0);
- transition: all 1.5s ease-in-out !important;
-}
-.scrolled .Tcloud-2{
+ transform: translate3d(-50%, 160px, 0);
+ transition: all 2s ease-in-out !important;
+ }
+ .scrolled .Tcloud-2 {
position: absolute;
opacity: 0;
width: 100px;
height: 40px;
- transform: translate3d(70px,220px,0);
-}
-.cloud-2{
+ transform: translate3d(70px, 220px, 0);
+ }
+ .cloud-2 {
opacity: 0.3;
position: absolute;
width: 130px;
height: 40px;
- transform: translate3d(-450px,45px,0);
- transition: all 1.5s ease-in-out;
-}
-.scrolled .cloud-2{
+ transform: translate3d(-450px, 45px, 0);
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .cloud-2 {
position: absolute;
opacity: 1;
width: 130px;
height: 40px;
- transform: translate3d(70px,-120px,0);
-}
+ transform: translate3d(70px, -120px, 0);
+ }
-.Tcloud-3{
+ .Tcloud-3 {
opacity: 0.5;
position: absolute;
width: 120px;
height: 40px;
- transform: translate3d(-520px,430px,0);
- transition: all 1.5s ease-in-out !important;
-}
-.scrolled .Tcloud-3{
+ transform: translate3d(-520px, 430px, 0);
+ transition: all 2s ease-in-out !important;
+ }
+ .scrolled .Tcloud-3 {
opacity: 0;
position: absolute;
width: 260px;
height: 40px;
- transform: translate3d(340px,175px,0);
+ transform: translate3d(340px, 175px, 0);
+ }
+ .Tbg-1 {
+ position: absolute;
+ opacity: 0.05;
+ width: 500px;
+ height: 600px;
+ transform: translate3d(-450px, 50px, 0);
+ transition: all 1sec ease-in-out;
+ }
+ .scrolled .Tbg-1 {
+ opacity: 1 !important;
+ width: 500px;
+ height: 600px;
+ transform: translate3d(560px, -520px, 0);
+ transition: all 1sec ease-in-out;
+ }
+
+ .bg-1 {
+ opacity: 0;
+ transform: translate3d(560px, -520px, 0);
+ transition: all 1sec ease-in-out;
+ }
+ .scrolled .bg-1 {
+ width: 500px;
+ height: 600px;
+ position: absolute;
+ opacity: 0.2;
+ transform: translate3d(200%, -120px, 0);
+ }
+
+ .Tbg-2 {
+ height: 600px !important;
+ opacity: 0.1;
+ transform: translate3d(-600px, -300px, 0);
+ transition: all 1sec ease-in-out !important;
+ }
+ .scrolled .Tbg-2 {
+ opacity: 0;
+ transform: translate3d(400px, -300px, 0);
+ }
+
+ .bg-2 {
+ opacity: 0;
+ height: 600px !important ;
+ transform: translate3d(-600px, -300px, 0);
+ transition: all 0.5sec ease-in-out;
+ }
+ .scrolled .bg-2 {
+ opacity: 0.2;
+ height: 1200px;
+ width: 1200px;
+ position: absolute;
+ z-index: -1;
+ transform: translate3d(50%, -290px, 0);
+ }
+
+ /* -----------------------Bird Component-------------- */
+
+ .Tbird-1 {
+ position: absolute;
+ opacity: 0.5;
+ width: 100px;
+ height: 40px;
+ transform: translate3d(-600px, 100px, 0) !important;
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .Tbird-1 {
+ opacity: 0;
+ transform: translate3d(250px, 190px, 0) !important;
+ }
+
+ .bird-1 {
+ opacity: 0;
+ position: absolute;
+ transform: translate3d(-1040px, -250px, 0) !important;
+ transition: all 2s ease-in-out;
+ }
+
+ .scrolled .bird-1 {
+ position: absolute;
+ opacity: 1;
+ width: 80px;
+ height: 30px;
+ transform: translate3d(1020px, -190px, 0) !important;
+ }
+
+ .Tbird-2 {
+ position: absolute;
+ opacity: 0.5;
+ width: 100px;
+ height: 40px;
+ transform: translate3d(-310px, 420px, 0);
+ transition: 2s ease-in-out;
+ }
+ .scrolled .Tbird-2 {
+ opacity: 0;
+ width: 100px;
+ height: 40px;
+ transform: translate3d(450px, 250px, 0);
+ }
+
+ .bird-2 {
+ opacity: 0;
+ position: absolute;
+ transform: translate3d(-700px, 72px, 0);
+ transition: 2s ease-in-out;
+ }
+ .scrolled .bird-2 {
+ position: absolute;
+ opacity: 1;
+ width: 80px;
+ height: 30px;
+ transform: translate3d(1270px, -100px, 0);
+ }
+
+ /* ------------------Cloud CSS------------------- */
+
+ /* Line 42 */
+
+ /* box-sizing: border-box;
-}
-.cloud-3{
- position: absolute;
- opacity: 0;
- width: 260px;
- height: 40px;
- transform: translate3d(-550px,-50px,0);
- transition: all 1.5s ease-in-out;
-}
-.scrolled .cloud-3{
- position: absolute;
- opacity: 1;
- width: 260px;
- height: 40px;
- transform: translate3d(400px,-165px,0);
-}
-
-/* -------------------Hand CSS ------------------ */
-
-.Thand{
- position: absolute;
- opacity: 0;
- width: 470px;
- height: 400px;
- transform: translate(85%,10%);
- transition: all 1.5s ease-in-out;
-}
-.scrolled .Thand{
- position: absolute;
- opacity: 0;
- z-index: 2;
- width: 470px;
- height: 400px;
- transform: translate(85%,10%);
-}
-.hand{
- opacity: 0;
- position: absolute;
- width: 470px;
- height: 400px;
- transform: translate(185%,-45%);
- transition: all 1.5s ease-in-out;
-}
-.scrolled .hand{
- position: absolute;
- opacity: 1;
- z-index: 2;
- width: 470px;
- height: 400px;
- opacity: 1;
- transform: translate(50%,10%);
-}
-
-
-/* -------------------Home CSS ------------------ */
-.Twall-1{
- position: absolute;
- height: 110px;
- width:180px;
- opacity: 0.05;
- transform: translate3d(36.5vw,470px,0px) rotate(300deg);
- transition: all 1.5s ease-in-out;
-}
-.scrolled .Twall-1{
- position: absolute;
- height: 110px;
- width:180px;
- opacity: 0;
- transform: translate3d(105px,40px,0);
-}
-.wall-1{
- position: absolute;
- height: 20px;
- width:80px;
- opacity: 1;
- transform: translate3d(450px,191px,0px) rotate(20deg) ;
- transition: all 1.5s ease-in-out;
-}
-.scrolled .wall-1{
- position: absolute;
- height: 110px;
- width:170px;
- opacity: 1;
- transform: translate3d(295px,110px,0px) rotate(360deg);
-}
-.Twall-2{
- position: absolute;
- height: 190px;
- width:240px;
- opacity:0.05;
- transform: translate3d(35.5vw,300px,50px)rotate(300deg);
- transition: all 1.5s ease-in-out;
-}
-.scrolled .Twall-2{
- position: absolute;
- height: 190px;
- width:240px;
- opacity:0;
- transform: translate3d(31.5vw,-39px,0) rotate(360deg);
-}
-.wall-2{
- position: absolute;
- height: 20px;
- width:80px;
- opacity: 1;
- transform: translate3d(550px,230px,50px)rotate(30deg);
- transition: all 1.5s ease-in-out;
-}
-.scrolled .wall-2{
- position: absolute;
- height: 180px;
- width:160px;
- opacity: 1;
- transform: translate3d(420px,25px,0) rotate(360deg);
-}
-.Troof-1{
- position: absolute;
- height: 140px;
- width:190px;
- opacity: 0.1;
- transition: all 1.5s ease-in-out;
- transform: translate3d(-55vw,75vh,0) !important;
-}
-.scrolled .Troof-1{
- position: absolute;
- height: 140px;
- opacity: 0;
- width:190px;
- transform: translate3d(21.2vw,30vh,0) rotate(360deg) !important;
-}
-.roof-1{
- position: absolute;
- height: 140px;
- width:190px;
- transform: translate3d(-730px,90px,0);
- transition: all 1.5s ease-in-out;
-}
-.scrolled .roof-1{
- position: absolute;
- height: 140px;
- width:200px;
- transform: translate3d(310px,-5px,0) rotate(360deg);
-}
-
-.Troof-2{
- position: absolute;
- height: 170px;
- width:90px;
- opacity: 0.2;
- transition: all 1.5s ease-in-out;
- transform: translate3d(-115px,445px,0) !important;
-}
-.scrolled .Troof-2{
- position: absolute;
- height: 170px;
- width:90px;
- opacity: 0;
- transform: translate3d(205px,155px,0) rotate(360deg) !important;
-}
-.roof-2{
- position: absolute;
- height: 170px;
- opacity: 0.3;
- width:90px;
- transition: all 1.5s ease-in-out;
- transform: translate3d(-115px,65px,0) rotate(360deg) !important;
-}
-.scrolled .roof-2{
- position: absolute;
- opacity: 1;
- height: 170px;
- width:90px;
- transform: translate3d(362px,-35px,0) !important;
-}
-.Troof-3{
- position: absolute;
- height: 120px;
- width:190px;
- opacity: 0.2;
- z-index: 0;
- transform: translate3d(-625px,470px,0);
- transition: all 1.5s ease-in-out;
-}
-.scrolled .Troof-3{
- position: absolute;
- height: 120px;
- width:190px;
- fill: black;
- z-index: 0;
- transform: translate3d(325px,270px,0);
-}
-.roof-3{
- position: absolute;
- height: 100px;
- width:190px;
- z-index: 0;
- transform: translate3d(548px,-50px,0);
- transition: all 1.5s ease-in-out;
-}
-.scrolled .roof-3{
- position: absolute;
- height: 100px;
- width:190px;
- z-index: 0;
- transform: translate3d(390px,15px,0);
-}
-
-.Troof-4{
- position: absolute;
- height: 140px;
- opacity: 0.06;
- width:85px;
- transform: translate3d(250px,330px,0) !important;
- transition: all 1.5s ease-in-out;
-}
-.scrolled .Troof-4{
- position: absolute;
- height: 140px;
- opacity: 0;
- width:85px;
- transform: translate3d(300px,200px,0) !important;
-}
-.roof-4{
- position: absolute;
- height: 140px;
- opacity: 0.2;
- width:85px;
- transform: translate3d(250px,130px,0) !important;
- transition: all 1.5s ease-in-out;
-}
-.scrolled .roof-4{
- position: absolute;
- opacity: 1;
- height: 140px;
- width:85px;
- transform: translate3d(365px,-5px,0) !important;
-}
-.Tgate{
- position: absolute;
- height: 80px;
- width:30px;
- transform: translate3d(80px,85vh,0) !important;
- transition: all 1.5s ease-in-out;
-}
-.scrolled .Tgate{
- position: absolute;
- height: 80px;
- width:30px;
- opacity: 0;
- transform: translate3d(20px,55vh,0) !important;
-}
-.gate{
- position: absolute;
- height: 80px;
- width:30px;
- transform: translate3d(80px,65px,0) !important;
- transition: all 1.5s ease-in-out;
-}
-.scrolled .gate{
- position: absolute;
- height: 80px;
- width:30px;
- transform: translate3d(362px,145px,0) !important;
-}
-
-.Twindow-1{
- opacity: 0.06;
- position: absolute;
- height: 60px;
- width:30px;
- transform: translate(31vw,52vh) !important;
- transition: all 1.5s ease-in-out !important;
-}
-.scrolled .Twindow-1{
- opacity: 0;
- position: absolute;
- height: 60px;
- width:30px;
- transform: translate3d(22.5vw,45vh,0) !important;
-}
-.window-1{
- opacity: 0.2;
- position: absolute;
- height: 60px;
- width:30px;
- transform: translate(31vw,-17px) !important;
- transition: all 1.5s ease-in-out !important;
-}
-.scrolled .window-1{
- opacity: 1 !important;
- position: absolute;
- height: 60px;
- width:30px;
- transform: translate3d(325px,120px,0) !important;
-}
-.Twindow-2{
- opacity: 0.06;
- position: absolute;
- height: 60px;
- width:30px;
- transform: translate3d(28vw,52vh,0) !important;
- transition: all 1.5s ease-in-out !important;
-}
-.scrolled .Twindow-2{
- opacity: 0;
- position: absolute;
- height: 60px;
- width:30px;
- transform: translate3d(28vw,45vh,0) !important;
-}
-.window-2{
- opacity: 0.2;
- position: absolute;
- height: 60px;
- width:30px;
- transform: translate3d(28vw,-17px,0) !important;
- transition: all 1.5s ease-in-out;
-}
-.scrolled .window-2{
- opacity: 1;
- position: absolute;
- height: 60px;
- width:30px;
- transform: translate3d(400px,120px,0) !important;
-}
-.Twindow-3{
- opacity: 0.06;
- position: absolute;
- height: 60px;
- width:30px;
- transform: translate(25vw,52vh) !important;
- transition: all 1.5s ease-in-out;
-}
-.scrolled .Twindow-3{
- opacity: 0;
- position: absolute;
- height: 60px;
- width:30px;
- transform: translate3d(32.5vw,42vh,0) !important;
-}
-.window-3{
- opacity: 0.2;
- position: absolute;
- height: 60px;
- width:30px;
- transform: translate(25vw,-18px) !important;
- transition: all 1.5s ease-in-out;
-}
-.scrolled .window-3{
- opacity: 1;
- position: absolute;
- height: 60px;
- width:30px;
- transform: translate3d(455px,120px,0) !important;
-}
-.Twindow-4{
- opacity: 0.06;
- position: absolute;
- height: 60px;
- width:30px;
- transform: translate(22vw,52vh) !important;
- transition: all 1.5s ease-in-out;
-}
-.scrolled .Twindow-4{
- opacity: 0;
- position: absolute;
- height: 60px;
- width:30px;
- transform: translate3d(37vw,42vh,0) !important;
-}
-.window-4{
- opacity: 0.2;
- position: absolute;
- height: 60px;
- width:30px;
- transform: translate(22vw,-18px) !important;
- transition: all 1.5s ease-in-out;
-}
-.scrolled .window-4{
- opacity: 1;
- position: absolute;
- height: 60px;
- width:30px;
- transform: translate3d(510px,120px,0) !important;
-}
-.Twindow-5{
- opacity: 0.06;
- position: absolute;
- height: 40px;
- width:25px;
- transform: translate(19vw,54vh) !important;
- transition: all 1.5s ease-in-out;
-}
-.scrolled .Twindow-5{
- opacity: 0;
- position: absolute;
- height: 40px;
- width:25px;
- transform: translate3d(32.7vw,42vh,0) !important;
-}
-.window-5{
- opacity: 0.2;
- position: absolute;
- height: 40px;
- width:25px;
- transform: translate(19vw,-10px) !important;
- transition: all 1.5s ease-in-out;
-}
-.scrolled .window-5{
- opacity: 1;
- position: absolute;
- height: 40px;
- width:25px;
- transform: translate3d(485px,70px,0) !important;
-}
-.Twindow-6{
- position: absolute;
- z-index: 1;
- opacity: 0.06;
- height: 35px;
- width:25px;
- transform: translate(16vw,54vh) !important;
- transition: all 1.5s ease-in-out;
-}
-.scrolled .Twindow-6{
- position: absolute;
- z-index: 1;
- opacity: 0;
- height: 35px;
- width:25px;
- transform: translate3d(25.5vw,50vh,0) !important;
-}
-.window-6{
- opacity: 0.2;
- position: absolute;
- z-index: 1;
- height: 35px;
- width:25px;
- transform: translate3d(-75px,-10px,0) !important;
- transition: all 1.5s ease-in-out;
-}
-.scrolled .window-6{
- opacity: 1;
- position: absolute;
- z-index: 1;
- height: 35px;
- width:25px;
- transform: translate3d(375px,60px,0) !important;
-}
-
-
-.Tchimney{
- position: absolute;
- opacity: 0.2;
- width: 25px;
- height: 25px;
- transform: translate3d(430px,330px,0) !important;
- transition: all 1.5s ease-in-out;
-}
-.scrolled .Tchimney{
- position: absolute;
- opacity: 0;
- width: 25px;
- height: 25px;
- transform: translate3d(430px,300px,0) !important;
-
-}
-.chimney{
- position: absolute;
- width: 25px;
- opacity: 0.2;
- height: 25px;
- transform: translate3d(420px,-60px,0) !important;
- transition: all 1.5s ease-in-out;
-}
-.scrolled .chimney{
- position: absolute;
- opacity: 1;
- width: 25px;
- height: 25px;
- transform: translate3d(460px,0px,0) !important;
-
-}
-
-/* --------Plant CSS---------- */
-.Tplant-1{
- position: absolute;
- height: 80px;
- width:60px;
- opacity: 0.2;
- z-index: 0;
- transform: translate3d(510px,520px,0) !important;
- transition: all 1.5s ease-in-out;
-}
-.scrolled .Tplant-1{
- position: absolute;
- height: 80px;
- width:60px;
- opacity: 0;
- z-index: 0;
- transform: translate3d(510px,390px,0) !important;
-}
-.plant-1{
- position: absolute;
- height: 80px;
- width:60px;
- z-index: 0;
- opacity: 0.3;
- transform: translate3d(510px,100px,0) !important;
- transition: all 1.5s ease-in-out;
-}
-.scrolled .plant-1{
- position: absolute;
- height: 80px;
- width:60px;
- z-index: 0;
- opacity: 1;
- transform: translate3d(550px,85px,0) !important;
-}
-
-.Tplant-2{
position: absolute;
- height: 90px;
- width:70px;
- opacity:0.2;
- z-index: 0;
- transform: translate3d(208px,590px,0) !important;
- transition: all 1.5s ease-in-out;
-}
-.scrolled .Tplant-2{
- position: absolute;
- height: 90px;
- width:70px;
- opacity: 0;
- z-index: 0;
- transform: translate3d(207px,390px,0) !important;
-}
-.plant-2{
- position: absolute;
- height: 110px;
- width:75px;
- z-index: 0;
- opacity: 0.1;
- transform: translate3d(208px,90px,0) !important;
- transition: all 1.5s ease-in-out;
-}
-.scrolled .plant-2{
- position: absolute;
- height: 110px;
- width:75px;
- opacity: 1;
- z-index: 0;
- transform: translate3d(250px,93px,0) !important;
-}
-
-/* -------------------Sun Css-------------------- */
-
-.Tsun-circle{
- position: absolute;
- opacity: 0.06;
- width: 620px;
- height: 600px;
- transform: translate(-860px,-50px);
- transition: all 1.5s ease-in-out;
-}
-.scrolled .Tsun-circle{
- position: absolute;
- opacity: 0;
- width: 80px;
- height: 60px;
- transform: translate(430px,100px);
-}
-
-.sun-circle{
- position: absolute;
- opacity: 0.06;
- width: 620px;
- height: 600px;
- transform: translate(-860px,-350px);
- transition: all 1.5s ease-in-out;
-}
-.scrolled .sun-circle{
- position: absolute;
- opacity: 0.9;
- width: 80px;
- height: 60px;
- transform: translate(430px,-270px);
- transition: all 1.5s ease-in-out;
-}
-
+ width: 366.72px;
+ height: 0px;
+ left: 572px;
+ top: 1632px;
+
+ background: #6CBFC4;
+ border: 5px solid #6CBFC4;
+ transform: matrix(0.97, 0.24, 0.24, -0.97, 0, 0); */
+
+ .Tcloud-1 {
+ position: absolute;
+ opacity: 0.3;
+ width: 100px;
+ height: 40px;
+ transform: translate3d(-260px, 45px, 0) !important;
+ transition: all 2s ease-in-out !important;
+ }
+
+ .scrolled .Tcloud-1 {
+ opacity: 0;
+ position: absolute;
+ transform: translate3d(250px, 150px, 0) !important;
+ }
+ .cloud-1 {
+ opacity: 0;
+ position: absolute;
+ width: 100px;
+ height: 40px;
+ transform: translate3d(-260px, -245px, 0) !important;
+ transition: all 2s ease-in-out !important;
+ }
+ .scrolled .cloud-1 {
+ position: absolute;
+ opacity: 1;
+ width: 100px;
+ height: 40px;
+ transform: translate3d(1070px, -250px, 0) !important;
+ }
+
+ .Tcloud-2 {
+ opacity: 0.5;
+ position: absolute;
+ width: 170px;
+ height: 60px;
+ transform: translate3d(-50%, 160px, 0);
+ transition: all 2s ease-in-out !important;
+ }
+ .scrolled .Tcloud-2 {
+ position: absolute;
+ opacity: 0;
+ width: 100px;
+ height: 40px;
+ transform: translate3d(70px, 220px, 0);
+ }
+ .cloud-2 {
+ opacity: 0.3;
+ position: absolute;
+ width: 130px;
+ height: 40px;
+ transform: translate3d(-450px, 45px, 0);
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .cloud-2 {
+ position: absolute;
+ opacity: 1;
+ width: 130px;
+ height: 40px;
+ transform: translate3d(900px, -120px, 0);
+ }
+
+ .Tcloud-3 {
+ opacity: 0.5;
+ position: absolute;
+ width: 120px;
+ height: 40px;
+ transform: translate3d(-520px, 430px, 0);
+ transition: all 2s ease-in-out !important;
+ }
+ .scrolled .Tcloud-3 {
+ opacity: 0;
+ position: absolute;
+ width: 260px;
+ height: 40px;
+ transform: translate3d(340px, 175px, 0);
+ }
+ .cloud-3 {
+ position: absolute;
+ opacity: 0;
+ width: 260px;
+ height: 40px;
+ transform: translate3d(-550px, -50px, 0);
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .cloud-3 {
+ position: absolute;
+ opacity: 1;
+ width: 260px;
+ height: 40px;
+ transform: translate3d(1160px, -165px, 0);
+ }
+
+ /* -------------------Hand CSS ------------------ */
+
+ .Thand {
+ position: absolute;
+ opacity: 0;
+ width: 470px;
+ height: 400px;
+ transform: translate(85%, 10%);
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .Thand {
+ position: absolute;
+ opacity: 0;
+ z-index: 2;
+ width: 470px;
+ height: 400px;
+ transform: translate(85%, 10%);
+ }
+ .hand {
+ opacity: 0;
+ position: absolute;
+ width: 470px;
+ height: 400px;
+ transform: translate(185%, -45%);
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .hand {
+ position: absolute;
+ opacity: 1;
+ z-index: 2;
+ width: 470px;
+ height: 400px;
+ opacity: 1;
+ transform: translate(215%, 10%);
+ }
+
+ /* -------------------Home CSS ------------------ */
+ .Twall-1 {
+ position: absolute;
+ height: 110px;
+ width: 180px;
+ opacity: 0.05;
+ transform: translate3d(36.5vw, 470px, 0px) rotate(300deg);
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .Twall-1 {
+ position: absolute;
+ height: 110px;
+ width: 180px;
+ opacity: 0;
+ transform: translate3d(105px, 40px, 0);
+ }
+ .wall-1 {
+ position: absolute;
+ height: 20px;
+ width: 80px;
+ opacity: 1;
+ transform: translate3d(450px, 191px, 0px) rotate(20deg);
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .wall-1 {
+ position: absolute;
+ height: 110px;
+ width: 170px;
+ opacity: 1;
+ transform: translate3d(1050px, 110px, 0px) rotate(360deg);
+ }
+ .Twall-2 {
+ position: absolute;
+ height: 190px;
+ width: 240px;
+ opacity: 0.05;
+ transform: translate3d(35.5vw, 300px, 50px) rotate(300deg);
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .Twall-2 {
+ position: absolute;
+ height: 190px;
+ width: 240px;
+ opacity: 0;
+ transform: translate3d(32vw, -39px, 0) rotate(360deg);
+ }
+ .wall-2 {
+ position: absolute;
+ height: 20px;
+ width: 80px;
+ opacity: 1;
+ transform: translate3d(550px, 230px, 50px) rotate(30deg);
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .wall-2 {
+ position: absolute;
+ height: 180px;
+ width: 160px;
+ opacity: 1;
+ transform: translate3d(1175px, 25px, 0) rotate(360deg);
+ }
+ .Troof-1 {
+ position: absolute;
+ height: 140px;
+ width: 190px;
+ opacity: 0.1;
+ transition: all 2s ease-in-out;
+ transform: translate3d(-55vw, 75vh, 0) !important;
+ }
+ .scrolled .Troof-1 {
+ position: absolute;
+ height: 140px;
+ opacity: 0;
+ width: 190px;
+ transform: translate3d(21.2vw, 30vh, 0) rotate(360deg) !important;
+ }
+ .roof-1 {
+ position: absolute;
+ height: 140px;
+ width: 190px;
+ transform: translate3d(-730px, 90px, 0);
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .roof-1 {
+ position: absolute;
+ height: 140px;
+ width: 200px;
+ transform: translate3d(1065px, -5px, 0) rotate(360deg);
+ }
+
+ .Troof-2 {
+ position: absolute;
+ height: 170px;
+ width: 90px;
+ opacity: 0.2;
+ transition: all 2s ease-in-out;
+ transform: translate3d(-115px, 445px, 0) !important;
+ }
+ .scrolled .Troof-2 {
+ position: absolute;
+ height: 170px;
+ width: 90px;
+ opacity: 0;
+ transform: translate3d(205px, 155px, 0) rotate(360deg) !important;
+ }
+ .roof-2 {
+ position: absolute;
+ height: 170px;
+ opacity: 0.3;
+ width: 90px;
+ transition: all 2s ease-in-out;
+ transform: translate3d(-115px, 65px, 0) rotate(360deg) !important;
+ }
+ .scrolled .roof-2 {
+ position: absolute;
+ opacity: 1;
+ height: 170px;
+ width: 90px;
+ transform: translate3d(1120px, -35px, 0) !important;
+ }
+ .Troof-3 {
+ position: absolute;
+ height: 120px;
+ width: 190px;
+ opacity: 0.2;
+ z-index: 0;
+ transform: translate3d(-625px, 470px, 0);
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .Troof-3 {
+ position: absolute;
+ height: 120px;
+ width: 190px;
+ opacity: 0;
+ fill: black;
+ z-index: 0;
+ transform: translate3d(325px, 270px, 0);
+ }
+ .roof-3 {
+ position: absolute;
+ height: 100px;
+ width: 190px;
+ z-index: 0;
+ transform: translate3d(548px, -50px, 0);
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .roof-3 {
+ position: absolute;
+ height: 100px;
+ width: 190px;
+ z-index: 0;
+ transform: translate3d(1145px, 15px, 0);
+ }
+
+ .Troof-4 {
+ position: absolute;
+ height: 140px;
+ opacity: 0.06;
+ width: 85px;
+ transform: translate3d(250px, 330px, 0) !important;
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .Troof-4 {
+ position: absolute;
+ height: 140px;
+ opacity: 0;
+ width: 85px;
+ transform: translate3d(300px, 200px, 0) !important;
+ }
+ .roof-4 {
+ position: absolute;
+ height: 140px;
+ opacity: 0.2;
+ width: 85px;
+ transform: translate3d(250px, 130px, 0) !important;
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .roof-4 {
+ position: absolute;
+ opacity: 1;
+ height: 140px;
+ width: 85px;
+ transform: translate3d(1125px, -5px, 0) !important;
+ }
+ .Tgate {
+ position: absolute;
+ height: 80px;
+ width: 30px;
+ transform: translate3d(80px, 85vh, 0) !important;
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .Tgate {
+ position: absolute;
+ height: 80px;
+ width: 30px;
+ opacity: 0;
+ transform: translate3d(20px, 55vh, 0) !important;
+ }
+ .gate {
+ position: absolute;
+ height: 80px;
+ width: 30px;
+ transform: translate3d(80px, 65px, 0) !important;
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .gate {
+ position: absolute;
+ height: 80px;
+ width: 30px;
+ transform: translate3d(1125px, 145px, 0) !important;
+ }
+
+ .Twindow-1 {
+ opacity: 0.06;
+ position: absolute;
+ height: 60px;
+ width: 30px;
+ transform: translate(31vw, 52vh) !important;
+ transition: all 2s ease-in-out !important;
+ }
+ .scrolled .Twindow-1 {
+ opacity: 0;
+ position: absolute;
+ height: 60px;
+ width: 30px;
+ transform: translate3d(22.5vw, 45vh, 0) !important;
+ }
+ .window-1 {
+ opacity: 0.2;
+ position: absolute;
+ height: 60px;
+ width: 30px;
+ transform: translate(31vw, -17px) !important;
+ transition: all 2s ease-in-out !important;
+ }
+ .scrolled .window-1 {
+ opacity: 1 !important;
+ position: absolute;
+ height: 60px;
+ width: 30px;
+ transform: translate3d(1085px, 120px, 0) !important;
+ }
+ .Twindow-2 {
+ opacity: 0.06;
+ position: absolute;
+ height: 60px;
+ width: 30px;
+ transform: translate3d(28vw, 52vh, 0) !important;
+ transition: all 2s ease-in-out !important;
+ }
+ .scrolled .Twindow-2 {
+ opacity: 0;
+ position: absolute;
+ height: 60px;
+ width: 30px;
+ transform: translate3d(28vw, 45vh, 0) !important;
+ }
+ .window-2 {
+ opacity: 0.2;
+ position: absolute;
+ height: 60px;
+ width: 30px;
+ transform: translate3d(28vw, -17px, 0) !important;
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .window-2 {
+ opacity: 1;
+ position: absolute;
+ height: 60px;
+ width: 30px;
+ transform: translate3d(1160px, 120px, 0) !important;
+ }
+ .Twindow-3 {
+ opacity: 0.06;
+ position: absolute;
+ height: 60px;
+ width: 30px;
+ transform: translate(25vw, 52vh) !important;
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .Twindow-3 {
+ opacity: 0;
+ position: absolute;
+ height: 60px;
+ width: 30px;
+ transform: translate3d(32.5vw, 42vh, 0) !important;
+ }
+ .window-3 {
+ opacity: 0.2;
+ position: absolute;
+ height: 60px;
+ width: 30px;
+ transform: translate(25vw, -18px) !important;
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .window-3 {
+ opacity: 1;
+ position: absolute;
+ height: 60px;
+ width: 30px;
+ transform: translate3d(1220px, 120px, 0) !important;
+ }
+ .Twindow-4 {
+ opacity: 0.06;
+ position: absolute;
+ height: 60px;
+ width: 30px;
+ transform: translate(22vw, 52vh) !important;
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .Twindow-4 {
+ opacity: 0;
+ position: absolute;
+ height: 60px;
+ width: 30px;
+ transform: translate3d(37vw, 42vh, 0) !important;
+ }
+ .window-4 {
+ opacity: 0.2;
+ position: absolute;
+ height: 60px;
+ width: 30px;
+ transform: translate(22vw, -18px) !important;
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .window-4 {
+ opacity: 1;
+ position: absolute;
+ height: 60px;
+ width: 30px;
+ transform: translate3d(1270px, 120px, 0) !important;
+ }
+ .Twindow-5 {
+ opacity: 0.06;
+ position: absolute;
+ height: 40px;
+ width: 25px;
+ transform: translate(19vw, 54vh) !important;
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .Twindow-5 {
+ opacity: 0;
+ position: absolute;
+ height: 40px;
+ width: 25px;
+ transform: translate3d(32.7vw, 42vh, 0) !important;
+ }
+ .window-5 {
+ opacity: 0.2;
+ position: absolute;
+ height: 40px;
+ width: 25px;
+ transform: translate(19vw, -10px) !important;
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .window-5 {
+ opacity: 1;
+ position: absolute;
+ height: 40px;
+ width: 25px;
+ transform: translate3d(1250px, 70px, 0) !important;
+ }
+ .Twindow-6 {
+ position: absolute;
+ z-index: 1;
+ opacity: 0.06;
+ height: 35px;
+ width: 25px;
+ transform: translate(16vw, 54vh) !important;
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .Twindow-6 {
+ position: absolute;
+ z-index: 1;
+ opacity: 0;
+ height: 35px;
+ width: 25px;
+ transform: translate3d(25.5vw, 50vh, 0) !important;
+ }
+ .window-6 {
+ opacity: 0.2;
+ position: absolute;
+ z-index: 1;
+ height: 35px;
+ width: 25px;
+ transform: translate3d(-75px, -10px, 0) !important;
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .window-6 {
+ opacity: 1;
+ position: absolute;
+ z-index: 1;
+ height: 35px;
+ width: 25px;
+ transform: translate3d(1135px, 60px, 0) !important;
+ }
+
+ .Tchimney {
+ position: absolute;
+ opacity: 0.2;
+ width: 25px;
+ height: 25px;
+ transform: translate3d(430px, 330px, 0) !important;
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .Tchimney {
+ position: absolute;
+ opacity: 0;
+ width: 25px;
+ height: 25px;
+ transform: translate3d(430px, 300px, 0) !important;
+ }
+ .chimney {
+ position: absolute;
+ width: 25px;
+ opacity: 0.2;
+ height: 25px;
+ transform: translate3d(420px, -60px, 0) !important;
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .chimney {
+ position: absolute;
+ opacity: 1;
+ width: 25px;
+ height: 25px;
+ transform: translate3d(1220px, 0px, 0) !important;
+ }
+
+ /* --------Plant CSS---------- */
+ .Tplant-1 {
+ position: absolute;
+ height: 80px;
+ width: 60px;
+ opacity: 0.2;
+ z-index: 0;
+ transform: translate3d(510px, 520px, 0) !important;
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .Tplant-1 {
+ position: absolute;
+ height: 80px;
+ width: 60px;
+ opacity: 0;
+ z-index: 0;
+ transform: translate3d(510px, 390px, 0) !important;
+ }
+ .plant-1 {
+ position: absolute;
+ height: 80px;
+ width: 60px;
+ z-index: 0;
+ opacity: 0.3;
+ transform: translate3d(510px, 100px, 0) !important;
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .plant-1 {
+ position: absolute;
+ height: 80px;
+ width: 60px;
+ z-index: 0;
+ opacity: 1;
+ transform: translate3d(1310px, 85px, 0) !important;
+ }
+
+ .Tplant-2 {
+ position: absolute;
+ height: 90px;
+ width: 70px;
+ opacity: 0.2;
+ z-index: 0;
+ transform: translate3d(208px, 590px, 0) !important;
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .Tplant-2 {
+ position: absolute;
+ height: 90px;
+ width: 70px;
+ opacity: 0;
+ z-index: 0;
+ transform: translate3d(207px, 390px, 0) !important;
+ }
+ .plant-2 {
+ position: absolute;
+ height: 110px;
+ width: 75px;
+ z-index: 0;
+ opacity: 0.1;
+ transform: translate3d(208px, 90px, 0) !important;
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .plant-2 {
+ position: absolute;
+ height: 110px;
+ width: 75px;
+ opacity: 1;
+ z-index: 0;
+ transform: translate3d(1005px, 93px, 0) !important;
+ }
+
+ /* -------------------Sun Css-------------------- */
+
+ .Tsun-circle {
+ position: absolute;
+ opacity: 0.06;
+ width: 620px;
+ height: 600px;
+ transform: translate(-860px, -50px);
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .Tsun-circle {
+ position: absolute;
+ opacity: 0;
+ width: 80px;
+ height: 60px;
+ transform: translate(430px, 100px);
+ }
+
+ .sun-circle {
+ position: absolute;
+ opacity: 0;
+ width: 620px;
+ height: 600px;
+ transform: translate(-860px, -350px);
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .sun-circle {
+ position: absolute;
+ opacity: 0.9;
+ width: 80px;
+ height: 60px;
+ transform: translate(1230px, -270px);
+ transition: all 2s ease-in-out;
+ }
+
}
\ No newline at end of file
diff --git a/frontend/src/style/background/background-3.css b/frontend/src/style/background/background-3.css
new file mode 100644
index 0000000..f15f895
--- /dev/null
+++ b/frontend/src/style/background/background-3.css
@@ -0,0 +1,804 @@
+
+@media (max-width:1400px){
+
+ /* -----/-------------- Background CSS -----------------------/
+ */
+ .Tbg-1{
+ position: absolute;
+ opacity: 0.05;
+ width: 500px;
+ height: 600px;
+ transform: translate3d(-450px,50px,0);
+ transition: all 1sec ease-in-out;
+ }
+ .scrolled .Tbg-1{
+ opacity: 1 !important;
+ width: 500px;
+ height: 600px;
+ transform: translate3d(560px,-520px,0);
+ transition: all 1sec ease-in-out;
+ }
+
+ .bg-1{
+ opacity: 0;
+ transform: translate3d(560px,-520px,0);
+ transition: all 1sec ease-in-out;
+ }
+ .scrolled .bg-1{
+ width: 500px;
+ height: 600px;
+ position: absolute;
+ opacity: 0.2;
+ transform: translate3d(115%,-120px,0);
+ }
+
+ .Tbg-2{
+ height: 600px !important;
+ opacity: 0.1;
+ transform: translate3d(-600px,-300px,0);
+ transition: all 1sec ease-in-out !important;
+ }
+ .scrolled .Tbg-2{
+ opacity: 0;
+ transform: translate3d(400px,-300px,0);
+ }
+
+ .bg-2{
+ opacity: 0;
+ height: 600px !important ;
+ transform: translate3d(-600px,-300px,0);
+ transition: all 0.5sec ease-in-out;
+ }
+ .scrolled .bg-2{
+ opacity: 0.2;
+ height: 1200px;
+ width: 1200px;
+ position: absolute;
+ z-index: -1;
+ transform: translate3d(10%,-290px,0);
+ }
+
+ /* -----------------------Bird Component-------------- */
+
+ .Tbird-1{
+ position: absolute;
+ opacity: 0.5;
+ width: 100px;
+ height: 40px;
+ transform: translate3d(-600px, 100px, 0) !important;
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .Tbird-1 {
+ opacity: 0;
+ transform: translate3d(250px,190px,0) !important;
+ }
+
+ .bird-1{
+ opacity: 0;
+ position: absolute;
+ transform: translate3d(-1040px, -250px, 0) !important;
+ transition: all 2s ease-in-out;
+ }
+
+ .scrolled .bird-1{
+ position: absolute;
+ opacity: 1;
+ width: 80px;
+ height: 30px;
+ transform: translate3d(550px,-190px,0) !important;
+ }
+
+ .Tbird-2{
+ position: absolute;
+ opacity: 0.5;
+ width: 100px;
+ height: 40px;
+ transform: translate3d(-310px, 420px, 0);
+ transition: 2s ease-in-out;
+ }
+ .scrolled .Tbird-2{
+ opacity: 0;
+ width: 100px;
+ height: 40px;
+ transform: translate3d(450px, 250px, 0);
+ }
+
+ .bird-2{
+ opacity: 0;
+ position: absolute;
+ transform: translate3d(-700px, 72px, 0);
+ transition: 2s ease-in-out;
+ }
+ .scrolled .bird-2{
+ position: absolute;
+ opacity: 1;
+ width: 80px;
+ height: 30px;
+ transform: translate3d(800px, -100px, 0);
+ }
+
+ /* ------------------Cloud CSS------------------- */
+
+ /* Line 42 */
+
+ /* box-sizing: border-box;
+
+ position: absolute;
+ width: 366.72px;
+ height: 0px;
+ left: 572px;
+ top: 1632px;
+
+ background: #6CBFC4;
+ border: 5px solid #6CBFC4;
+ transform: matrix(0.97, 0.24, 0.24, -0.97, 0, 0); */
+
+
+ .Tcloud-1{
+ position: absolute;
+ opacity: 0.3;
+ width: 100px;
+ height: 40px;
+ transform: translate3d(-260px,45px,0) !important;
+ transition: all 2s ease-in-out !important;
+ }
+
+ .scrolled .Tcloud-1{
+ opacity: 0;
+ position: absolute;
+ transform: translate3d(250px, 150px,0) !important;
+ }
+ .cloud-1{
+ opacity: 0;
+ position: absolute;
+ width: 100px;
+ height: 40px;
+ transform: translate3d(-260px,-245px,0) !important;
+ transition: all 2s ease-in-out !important;
+ }
+ .scrolled .cloud-1{
+ position: absolute;
+ opacity: 1;
+ width: 100px;
+ height: 40px;
+ transform: translate3d(585px, -250px,0) !important;
+ }
+
+ .Tcloud-2{
+ opacity: 0.5;
+ position: absolute;
+ width: 170px;
+ height: 60px;
+ transform: translate3d(-50%,160px,0);
+ transition: all 2s ease-in-out !important;
+ }
+ .scrolled .Tcloud-2{
+ position: absolute;
+ opacity: 0;
+ width: 100px;
+ height: 40px;
+ transform: translate3d(70px,220px,0);
+ }
+ .cloud-2{
+ opacity: 0.3;
+ position: absolute;
+ width: 130px;
+ height: 40px;
+ transform: translate3d(-450px,45px,0);
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .cloud-2{
+ position: absolute;
+ opacity: 1;
+ width: 130px;
+ height: 40px;
+ transform: translate3d(410px,-120px,0);
+ }
+
+ .Tcloud-3{
+ opacity: 0.5;
+ position: absolute;
+ width: 120px;
+ height: 40px;
+ transform: translate3d(-520px,430px,0);
+ transition: all 2s ease-in-out !important;
+ }
+ .scrolled .Tcloud-3{
+ opacity: 0;
+ position: absolute;
+ width: 260px;
+ height: 40px;
+ transform: translate3d(340px,175px,0);
+
+ }
+ .cloud-3{
+ position: absolute;
+ opacity: 0;
+ width: 260px;
+ height: 40px;
+ transform: translate3d(-550px,-50px,0);
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .cloud-3{
+ position: absolute;
+ opacity: 1;
+ width: 260px;
+ height: 40px;
+ transform: translate3d(700px,-165px,0);
+ }
+
+ /* -------------------Hand CSS ------------------ */
+
+ .Thand{
+ position: absolute;
+ opacity: 0;
+ width: 470px;
+ height: 400px;
+ transform: translate(85%,10%);
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .Thand{
+ position: absolute;
+ opacity: 0;
+ z-index: 2;
+ width: 470px;
+ height: 400px;
+ transform: translate(85%,10%);
+ }
+ .hand{
+ opacity: 0;
+ position: absolute;
+ width: 470px;
+ height: 400px;
+ transform: translate(185%,-45%);
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .hand{
+ position: absolute;
+ opacity: 1;
+ z-index: 2;
+ width: 470px;
+ height: 400px;
+ opacity: 1;
+ transform: translate(120%,10%);
+ }
+
+
+ /* -------------------Home CSS ------------------ */
+ .Twall-1{
+ position: absolute;
+ height: 110px;
+ width:180px;
+ opacity: 0.05;
+ transform: translate3d(36.5vw,470px,0px) rotate(300deg);
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .Twall-1{
+ position: absolute;
+ height: 110px;
+ width:180px;
+ opacity: 0;
+ transform: translate3d(105px,40px,0);
+ }
+ .wall-1{
+ position: absolute;
+ height: 20px;
+ width:80px;
+ opacity: 1;
+ transform: translate3d(450px,191px,0px) rotate(20deg) ;
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .wall-1{
+ position: absolute;
+ height: 110px;
+ width:170px;
+ opacity: 1;
+ transform: translate3d(630px,110px,0px) rotate(360deg);
+ }
+ .Twall-2{
+ position: absolute;
+ height: 190px;
+ width:240px;
+ opacity:0.05;
+ transform: translate3d(35.5vw,300px,50px)rotate(300deg);
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .Twall-2{
+ position: absolute;
+ height: 190px;
+ width:240px;
+ opacity:0;
+ transform: translate3d(32vw,-39px,0) rotate(360deg);
+ }
+ .wall-2{
+ position: absolute;
+ height: 20px;
+ width:80px;
+ opacity: 1;
+ transform: translate3d(550px,230px,50px)rotate(30deg);
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .wall-2{
+ position: absolute;
+ height: 180px;
+ width:160px;
+ opacity: 1;
+ transform: translate3d(755px,25px,0) rotate(360deg);
+ }
+ .Troof-1{
+ position: absolute;
+ height: 140px;
+ width:190px;
+ opacity: 0.1;
+ transition: all 2s ease-in-out;
+ transform: translate3d(-55vw,75vh,0) !important;
+ }
+ .scrolled .Troof-1{
+ position: absolute;
+ height: 140px;
+ opacity: 0;
+ width:190px;
+ transform: translate3d(21.2vw,30vh,0) rotate(360deg) !important;
+ }
+ .roof-1{
+ position: absolute;
+ height: 140px;
+ width:190px;
+ transform: translate3d(-730px,90px,0);
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .roof-1{
+ position: absolute;
+ height: 140px;
+ width:200px;
+ transform: translate3d(645px,-5px,0) rotate(360deg);
+ }
+
+ .Troof-2{
+ position: absolute;
+ height: 170px;
+ width:90px;
+ opacity: 0.2;
+ transition: all 2s ease-in-out;
+ transform: translate3d(-115px,445px,0) !important;
+ }
+ .scrolled .Troof-2{
+ position: absolute;
+ height: 170px;
+ width:90px;
+ opacity: 0;
+ transform: translate3d(205px,155px,0) rotate(360deg) !important;
+ }
+ .roof-2{
+ position: absolute;
+ height: 170px;
+ opacity: 0.3;
+ width:90px;
+ transition: all 2s ease-in-out;
+ transform: translate3d(-115px,65px,0) rotate(360deg) !important;
+ }
+ .scrolled .roof-2{
+ position: absolute;
+ opacity: 1;
+ height: 170px;
+ width:90px;
+ transform: translate3d(700px,-35px,0) !important;
+ }
+ .Troof-3{
+ position: absolute;
+ height: 120px;
+ width:190px;
+ opacity: 0.2;
+ z-index: 0;
+ transform: translate3d(-625px,470px,0);
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .Troof-3{
+ position: absolute;
+ height: 120px;
+ width:190px;
+ opacity: 0;
+ fill: black;
+ z-index: 0;
+ transform: translate3d(325px,270px,0);
+ }
+ .roof-3{
+ position: absolute;
+ height: 100px;
+ width:190px;
+ z-index: 0;
+ transform: translate3d(548px,-50px,0);
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .roof-3{
+ position: absolute;
+ height: 100px;
+ width:190px;
+ z-index: 0;
+ transform: translate3d(725px,15px,0);
+ }
+
+ .Troof-4{
+ position: absolute;
+ height: 140px;
+ opacity: 0.06;
+ width:85px;
+ transform: translate3d(250px,330px,0) !important;
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .Troof-4{
+ position: absolute;
+ height: 140px;
+ opacity: 0;
+ width:85px;
+ transform: translate3d(300px,200px,0) !important;
+ }
+ .roof-4{
+ position: absolute;
+ height: 140px;
+ opacity: 0.2;
+ width:85px;
+ transform: translate3d(250px,130px,0) !important;
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .roof-4{
+ position: absolute;
+ opacity: 1;
+ height: 140px;
+ width:85px;
+ transform: translate3d(705px,-5px,0) !important;
+ }
+ .Tgate{
+ position: absolute;
+ height: 80px;
+ width:30px;
+ transform: translate3d(80px,85vh,0) !important;
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .Tgate{
+ position: absolute;
+ height: 80px;
+ width:30px;
+ opacity: 0;
+ transform: translate3d(20px,55vh,0) !important;
+ }
+ .gate{
+ position: absolute;
+ height: 80px;
+ width:30px;
+ transform: translate3d(80px,65px,0) !important;
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .gate{
+ position: absolute;
+ height: 80px;
+ width:30px;
+ transform: translate3d(700px,145px,0) !important;
+ }
+
+ .Twindow-1{
+ opacity: 0.06;
+ position: absolute;
+ height: 60px;
+ width:30px;
+ transform: translate(31vw,52vh) !important;
+ transition: all 2s ease-in-out !important;
+ }
+ .scrolled .Twindow-1{
+ opacity: 0;
+ position: absolute;
+ height: 60px;
+ width:30px;
+ transform: translate3d(22.5vw,45vh,0) !important;
+ }
+ .window-1{
+ opacity: 0.2;
+ position: absolute;
+ height: 60px;
+ width:30px;
+ transform: translate(31vw,-17px) !important;
+ transition: all 2s ease-in-out !important;
+ }
+ .scrolled .window-1{
+ opacity: 1 !important;
+ position: absolute;
+ height: 60px;
+ width:30px;
+ transform: translate3d(660px,120px,0) !important;
+ }
+ .Twindow-2{
+ opacity: 0.06;
+ position: absolute;
+ height: 60px;
+ width:30px;
+ transform: translate3d(28vw,52vh,0) !important;
+ transition: all 2s ease-in-out !important;
+ }
+ .scrolled .Twindow-2{
+ opacity: 0;
+ position: absolute;
+ height: 60px;
+ width:30px;
+ transform: translate3d(28vw,45vh,0) !important;
+ }
+ .window-2{
+ opacity: 0.2;
+ position: absolute;
+ height: 60px;
+ width:30px;
+ transform: translate3d(28vw,-17px,0) !important;
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .window-2{
+ opacity: 1;
+ position: absolute;
+ height: 60px;
+ width:30px;
+ transform: translate3d(738px,120px,0) !important;
+ }
+ .Twindow-3{
+ opacity: 0.06;
+ position: absolute;
+ height: 60px;
+ width:30px;
+ transform: translate(25vw,52vh) !important;
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .Twindow-3{
+ opacity: 0;
+ position: absolute;
+ height: 60px;
+ width:30px;
+ transform: translate3d(32.5vw,42vh,0) !important;
+ }
+ .window-3{
+ opacity: 0.2;
+ position: absolute;
+ height: 60px;
+ width:30px;
+ transform: translate(25vw,-18px) !important;
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .window-3{
+ opacity: 1;
+ position: absolute;
+ height: 60px;
+ width:30px;
+ transform: translate3d(790px,120px,0) !important;
+ }
+ .Twindow-4{
+ opacity: 0.06;
+ position: absolute;
+ height: 60px;
+ width:30px;
+ transform: translate(22vw,52vh) !important;
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .Twindow-4{
+ opacity: 0;
+ position: absolute;
+ height: 60px;
+ width:30px;
+ transform: translate3d(37vw,42vh,0) !important;
+ }
+ .window-4{
+ opacity: 0.2;
+ position: absolute;
+ height: 60px;
+ width:30px;
+ transform: translate(22vw,-18px) !important;
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .window-4{
+ opacity: 1;
+ position: absolute;
+ height: 60px;
+ width:30px;
+ transform: translate3d(850px,120px,0) !important;
+ }
+ .Twindow-5{
+ opacity: 0.06;
+ position: absolute;
+ height: 40px;
+ width:25px;
+ transform: translate(19vw,54vh) !important;
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .Twindow-5{
+ opacity: 0;
+ position: absolute;
+ height: 40px;
+ width:25px;
+ transform: translate3d(32.7vw,42vh,0) !important;
+ }
+ .window-5{
+ opacity: 0.2;
+ position: absolute;
+ height: 40px;
+ width:25px;
+ transform: translate(19vw,-10px) !important;
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .window-5{
+ opacity: 1;
+ position: absolute;
+ height: 40px;
+ width:25px;
+ transform: translate3d(825px,70px,0) !important;
+ }
+ .Twindow-6{
+ position: absolute;
+ z-index: 1;
+ opacity: 0.06;
+ height: 35px;
+ width:25px;
+ transform: translate(16vw,54vh) !important;
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .Twindow-6{
+ position: absolute;
+ z-index: 1;
+ opacity: 0;
+ height: 35px;
+ width:25px;
+ transform: translate3d(25.5vw,50vh,0) !important;
+ }
+ .window-6{
+ opacity: 0.2;
+ position: absolute;
+ z-index: 1;
+ height: 35px;
+ width:25px;
+ transform: translate3d(-75px,-10px,0) !important;
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .window-6{
+ opacity: 1;
+ position: absolute;
+ z-index: 1;
+ height: 35px;
+ width:25px;
+ transform: translate3d(715px,60px,0) !important;
+ }
+
+
+ .Tchimney{
+ position: absolute;
+ opacity: 0.2;
+ width: 25px;
+ height: 25px;
+ transform: translate3d(430px,330px,0) !important;
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .Tchimney{
+ position: absolute;
+ opacity: 0;
+ width: 25px;
+ height: 25px;
+ transform: translate3d(430px,300px,0) !important;
+
+ }
+ .chimney{
+ position: absolute;
+ width: 25px;
+ opacity: 0.2;
+ height: 25px;
+ transform: translate3d(420px,-60px,0) !important;
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .chimney{
+ position: absolute;
+ opacity: 1;
+ width: 25px;
+ height: 25px;
+ transform: translate3d(800px,0px,0) !important;
+
+ }
+
+ /* --------Plant CSS---------- */
+ .Tplant-1{
+ position: absolute;
+ height: 80px;
+ width:60px;
+ opacity: 0.2;
+ z-index: 0;
+ transform: translate3d(510px,520px,0) !important;
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .Tplant-1{
+ position: absolute;
+ height: 80px;
+ width:60px;
+ opacity: 0;
+ z-index: 0;
+ transform: translate3d(510px,390px,0) !important;
+ }
+ .plant-1{
+ position: absolute;
+ height: 80px;
+ width:60px;
+ z-index: 0;
+ opacity: 0.3;
+ transform: translate3d(510px,100px,0) !important;
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .plant-1{
+ position: absolute;
+ height: 80px;
+ width:60px;
+ z-index: 0;
+ opacity: 1;
+ transform: translate3d(888px,85px,0) !important;
+ }
+
+ .Tplant-2{
+ position: absolute;
+ height: 90px;
+ width:70px;
+ opacity:0.2;
+ z-index: 0;
+ transform: translate3d(208px,590px,0) !important;
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .Tplant-2{
+ position: absolute;
+ height: 90px;
+ width:70px;
+ opacity: 0;
+ z-index: 0;
+ transform: translate3d(207px,390px,0) !important;
+ }
+ .plant-2{
+ position: absolute;
+ height: 110px;
+ width:75px;
+ z-index: 0;
+ opacity: 0.1;
+ transform: translate3d(208px,90px,0) !important;
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .plant-2{
+ position: absolute;
+ height: 110px;
+ width:75px;
+ opacity: 1;
+ z-index: 0;
+ transform: translate3d(580px,93px,0) !important;
+ }
+
+ /* -------------------Sun Css-------------------- */
+
+ .Tsun-circle{
+ position: absolute;
+ opacity: 0.06;
+ width: 620px;
+ height: 600px;
+ transform: translate(-860px,-50px);
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .Tsun-circle{
+ position: absolute;
+ opacity: 0;
+ width: 80px;
+ height: 60px;
+ transform: translate(430px,100px);
+ }
+
+ .sun-circle{
+ position: absolute;
+ opacity: 0;
+ width: 620px;
+ height: 600px;
+ transform: translate(-860px,-350px);
+ transition: all 2s ease-in-out;
+ }
+ .scrolled .sun-circle{
+ position: absolute;
+ opacity: 0.9;
+ width: 80px;
+ height: 60px;
+ transform: translate(750px,-270px);
+ 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
deleted file mode 100644
index 58e3ed5..0000000
--- a/frontend/src/style/blog/blogmain.css
+++ /dev/null
@@ -1,89 +0,0 @@
-.blog-container {
- height: 100vh;
-}
-.insights {
- justify-content: center;
- align-items: center;
- color: white;
- font-size: 55px !important;
- padding-bottom: 20px;
- width: auto;
- left: 0;
- right: 0;
-}
-.lorem {
- /* display: flex; */
- justify-content: center;
- align-items: center;
- color: #3cbcb1;
- font-size: 20px;
-}
-.trending {
- background-color: #171717;
- display: flex;
- justify-content: center;
- align-items: center;
- height: 80px;
- width: 280px;
- gap: 30px;
- margin-left: auto;
- margin-right: auto;
- border-radius: 16px;
- margin-top: 50px;
- margin-bottom: 50px;
- font-size: large;
-}
-.cl {
- background-color: #9ca3af;
- color: white !important;
- width: 120px;
- height: 65px;
- border: 6px solid black;
- border-radius: 16px;
- text-align: center;
- line-height: 50px;
- /* background-color: black; */
-}
-
-.cla {
- background-color: #171717;
- color: white !important;
-}
-.content{
- margin-left: auto;
- margin-right: auto;
-}
-.box-content {
- color: white;
- text-align: left;
-}
-.vertical-line {
- padding: 0 10px 0 10px;
-}
-.heading {
- color: #3cbcb1 !important;
- font-size: 18.5px !important;
- margin-top: 12.5px;
- text-align: left !important;
-}
-.box-img img {
- height: 220px;
- border-radius: 16px;
-}
-.Readmore {
- text-decoration: none;
- color: #5aa7a0;
-}
-.read Link {
- text-decoration: none;
- color: #9ca3af !important;
-}
-
-.box-footer {
- display: flex;
- align-items: center;
- justify-content: space-between;
-}
-.box-footer-1 p {
- line-height: 15%;
-}
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 9729e66..05dd4f0 100644
--- a/frontend/src/style/home/home-1.css
+++ b/frontend/src/style/home/home-1.css
@@ -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-2.css b/frontend/src/style/home/home-2.css
index f0b0d5f..271e3a2 100644
--- a/frontend/src/style/home/home-2.css
+++ b/frontend/src/style/home/home-2.css
@@ -27,9 +27,9 @@
transition: all 1.5s ease-in-out !important;
}
.scrolled .tagline2 {
- font-size: 30px;
+ font-size: 10px !important;
position: relative;
- transform: translateX(-35%) !important;
+ transform: translateX(-5%) !important;
color: #ffffff !important;
transition: all 1.5s ease-in-out !important;
}
diff --git a/frontend/src/style/home/home-4.css b/frontend/src/style/home/home-4.css
index a74bc18..819422f 100644
--- a/frontend/src/style/home/home-4.css
+++ b/frontend/src/style/home/home-4.css
@@ -1,92 +1,94 @@
-
@media (max-width: 480px) {
- /* ----------------TOP HOME------------------- */
- .bottom-home{
- margin-left: 3% !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{
- 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;
- 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;
- }
- .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;
- padding: 10% 5% 0 13%;
- top: 0% !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;
+ margin-bottom: 20px !important;
+ 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: 11% !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: 10%;
- 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
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
new file mode 100644
index 0000000..c6f1838
--- /dev/null
+++ b/frontend/src/style/testimonial.css
@@ -0,0 +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%;
+}
+.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;
+
+}
+
+
+
+
+
+
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
new file mode 100644
index 0000000..95d2c85
--- /dev/null
+++ b/frontend/tailwind.config.js
@@ -0,0 +1,28 @@
+
+/* eslint-disable import/no-anonymous-default-export */
+/** @type {import('tailwindcss').Config} */
+export default {
+ content: [
+ "./index.html",
+ "./src/**/*.{js,ts,jsx,tsx}",
+ ],
+ theme: {
+ extend: {
+ keyframes: {
+ typing: {
+ 'from': { width: '0' },
+ 'to': { width: '100%' },
+ },
+ blinkCaret: {
+ 'from, to': { borderColor: 'transparent' },
+ '50%': { borderColor: 'rgb(0, 255, 238)' },
+ },
+ },
+ animation: {
+ typing: 'typing 3s steps(40, end) forwards',
+ blinkCaret: 'blinkCaret 0.75s step-end infinite',
+ },
+ },
+ },
+ plugins: [],
+}
\ No newline at end of file