diff --git a/src/components/About/About.css b/src/components/About/About.css index c458e2d..dd0a2d5 100644 --- a/src/components/About/About.css +++ b/src/components/About/About.css @@ -180,7 +180,7 @@ height: 100vh; width: 100vw; position: relative; - overflow: hidden; + /* overflow: hidden; */ display: flex; align-items: center; justify-content: center; @@ -210,38 +210,49 @@ .circle1 { position: absolute; - bottom: -500px; - height: 1000px; + bottom: -450px; + height: 900px; width: auto; - left: -500px; + z-index: 2; + left: -450px; transform: rotate(-200deg); animation: rotate 15s linear infinite; + opacity: 0.5; } .circle2 { position: absolute; - bottom: -400px; - height: 800px; + bottom: -350px; + height: 700px; width: auto; - left: -400px; + left: -350px; transform: rotate(-180deg); animation: rotate 20s linear infinite; + z-index: 2; + opacity: 0.5; +} + +.aboutsvg1{ + display: none; } .circle3 { position: absolute; - bottom: -200px; - height: 400px; + bottom: -150px; + height: 300px; width: auto; - left: -200px; + left: -150px; width: auto; animation: rotate 25s linear infinite; + z-index: 2; + opacity: 0.5; } -svg { +.aboutsvg { backdrop-filter: blur(10px); width: 90%; height: 90%; + z-index: 3; } .details-container { @@ -321,6 +332,14 @@ html{ display: none; } + .aboutsvg1{ + height: 90%; + display: flex; + width: 95%; + backdrop-filter: blur(10px); + z-index: 3; + } + .circle1 { height: 600px; width: auto; diff --git a/src/components/About/About.jsx b/src/components/About/About.jsx index c88fe12..fdbf21a 100644 --- a/src/components/About/About.jsx +++ b/src/components/About/About.jsx @@ -85,6 +85,30 @@ const About = () => { + + + + + + + + + + + + + + + + + + + + + + + +

Level up your coding skills and slay real-world challenges! Whether you're a seasoned developer or a coding newbie, HFT is the place to diff --git a/src/components/Contact/ContactPage.jsx b/src/components/Contact/ContactPage.jsx index a0b03e1..d11ae7f 100644 --- a/src/components/Contact/ContactPage.jsx +++ b/src/components/Contact/ContactPage.jsx @@ -64,7 +64,7 @@ export default function Contact() { ]; return ( <> -

+

Contact Us

diff --git a/src/components/FAQ/FAQ.jsx b/src/components/FAQ/FAQ.jsx index b416083..ca88547 100644 --- a/src/components/FAQ/FAQ.jsx +++ b/src/components/FAQ/FAQ.jsx @@ -32,7 +32,7 @@ const FAQ = () => { }, ]; return ( -
+

FREQUENTLY ASKED diff --git a/src/components/Timeline/Timeline.jsx b/src/components/Timeline/Timeline.jsx index 06b4701..9b3d514 100644 --- a/src/components/Timeline/Timeline.jsx +++ b/src/components/Timeline/Timeline.jsx @@ -9,7 +9,7 @@ const TimelineSection = () => { return (

{ TIMELINE

diff --git a/src/components/WhyParticipate/InfoCard.jsx b/src/components/WhyParticipate/InfoCard.jsx index fdb17cc..b005e78 100644 --- a/src/components/WhyParticipate/InfoCard.jsx +++ b/src/components/WhyParticipate/InfoCard.jsx @@ -16,11 +16,11 @@ const InfoCard = ({ width={150} height={150} /> */} -

+

{title}

-
- +
+

{text}

diff --git a/src/components/WhyParticipate/WhyParticipate.css b/src/components/WhyParticipate/WhyParticipate.css index 80db743..a9b8fd4 100644 --- a/src/components/WhyParticipate/WhyParticipate.css +++ b/src/components/WhyParticipate/WhyParticipate.css @@ -7,6 +7,22 @@ font-family: "neue"; } +.bottom-right1{ + position: absolute; + top: 0; + left: 0; + transform: scaleY(-1); + width: 100vw; +} + +.top-left1{ + position: absolute; + bottom: 0; + left: -100px; + transform: rotate(180deg); + transform: scaleY(-1); +} + /* .swiper-button-next{ position: absolute; color: #fff; @@ -130,10 +146,12 @@ html{ } */ .main-container { - background-image: url(../../assets/WhyParticipate/bgimg2.png); - background-size: cover; - background-repeat: no-repeat; + /* background-image: url(../../assets/WhyParticipate/bgimg2.png); */ + /* background-size: cover; */ + /* background-repeat: no-repeat; */ + background-color: #000; min-height: 800px; + background-repeat: no-repeat; height: 100vh; width: 100vw; position: relative; @@ -149,6 +167,45 @@ html{ padding-top: 50px; padding-bottom: 30px; max-height: 700px; + padding-left: 50px; + padding-right: 50px; + z-index: 2; +} + +.circle11 { + position: absolute; + bottom: -500px; + height: 1000px; + width: auto; + z-index: 2; + right: -500px; + transform: rotate(-200deg); + /* animation: rotate 15s linear infinite; */ +} + + .circle21 { + position: absolute; + bottom: -400px; + height: 800px; + width: auto; + right: -400px; + transform: rotate(130deg); + /* animation: rotate 20s linear infinite; */ + z-index: 2; + opacity: 0.5; +} + +.circle31 { + position: absolute; + bottom: -200px; + height: 400px; + width: auto; + right: -200px; + width: auto; + /* animation: rotate 25s linear infinite; */ + transform: rotate(130deg); + z-index: 2; + opacity: 0.5; } .swiper-wrapper { @@ -178,17 +235,17 @@ html{ } .swiper-button-next { - position: absolute; - color: #fff; - height: 50px; - width: 50px; - background-image: url(../../assets/WhyParticipate/arrow.png); - cursor: pointer; - z-index: 10; - display: flex; - top: 50%; - right: -10px; - transition: 0.4s ease-in-out; + position: absolute; + color: #fff; + height: 50px; + width: 50px; + background-image: url(../../assets/WhyParticipate/arrow.png); + cursor: pointer; + z-index: 10; + display: flex; + top: 50%; + right: -10px; + transition: 0.4s ease-in-out; } .cardtitle { @@ -198,7 +255,7 @@ html{ } .cardp { - font-size: 1.3rem; + font-size: 1.2rem; margin-bottom: 10px; } .cardcontainer1:hover { @@ -236,15 +293,27 @@ html{ .main-container { background-image: url(../../assets/WhyParticipate/bgimg3.png); + background-repeat: no-repeat; + background-size: cover; } .swiper-button-next { right: 5px; } + .swiper{ + padding-left: 0; + padding-right: 0; + } + .swiper-button-prev { left: 5px; } + + .circle21, .circle31 { + display: none; + } + } .star { @@ -362,10 +431,21 @@ html{ } .cardp { - font-size: 1rem; + font-size: 1.2rem; } } +@media(max-height:790px){ + .cardp{ + font-size: 1rem; + } +} +@media(min-height: 790px) and (max-height:850px){ + .cardp{ + font-size: 1.03rem; + } +} + @media (min-width: 200px) and (max-width: 450px) { .cardcontainer1 { scale: 0.8; diff --git a/src/components/WhyParticipate/WhyParticipate.jsx b/src/components/WhyParticipate/WhyParticipate.jsx index 9ae04c4..5922b18 100644 --- a/src/components/WhyParticipate/WhyParticipate.jsx +++ b/src/components/WhyParticipate/WhyParticipate.jsx @@ -1,10 +1,16 @@ import React, {useState, useRef, useEffect} from "react"; import InfoCard from "./InfoCard"; +import Image from "next/image"; import {FaChevronLeft, FaChevronRight} from "react-icons/fa"; import {Swiper, SwiperSlide} from "swiper/react"; import "swiper/css"; import "swiper/css/effect-coverflow"; import "swiper/css/pagination"; +import top_left from "../../assets/backgrounds/about/topleft.png"; +import bottom_right from "../../assets/backgrounds/about/bottomright.png"; +import circle1 from "../../assets/backgrounds/about/circle1.png"; +import circle2 from "../../assets/backgrounds/about/circle2.png"; +import circle3 from "../../assets/backgrounds/about/circle3.png"; import { EffectCoverflow, Pagination, @@ -128,6 +134,11 @@ const WhyParticipate = () => { <>
+ + + {/* */} + +

WHY PARTICIPATE @@ -148,8 +159,8 @@ const WhyParticipate = () => { }} breakpoints={{ 480: {slidesPerView: 1, spaceBetween: 10}, - 768: {slidesPerView: 1.7, spaceBetween: 20}, - 1024: {slidesPerView: 2, spaceBetween: 30}, + 768: {slidesPerView: 1.4, spaceBetween: 20}, + 1024: {slidesPerView: 2, spaceBetween: 20}, 1280: {slidesPerView: 2, spaceBetween: 40}, 1536: {slidesPerView: 3, spaceBetween: 60}, }}