From ba9eed60b9f1eace018fdd6c30a8443a754a7193 Mon Sep 17 00:00:00 2001 From: RISHI RAJ SAHA <132642857+rishinhk004@users.noreply.github.com> Date: Thu, 11 Apr 2024 13:54:59 +0530 Subject: [PATCH] Minorchanges (#19) * fixes * link fix * nav-bar added and footer fixes * nav-bar added and footer fixes * nav-bar added and footer fixes * nav-bar added and footer fixes * minor fix * minor fix * minor fix * minor fix * comments removed * minor fixes and about sec add * brochure add * brochure add * brochure add * responsiveness fix * minor fixes * responsive fix and minor fixes * minor fix * minor fix * minor fix * NewEvents commit * minor fix * minor fix * minor fix * scroll fix * scroll fix * Events Page Added * minor fixes and Event page fix * minor fixes * Events Fixed * Loader task * Loader added * Loader added * minor fixes * minor fixes and favicon added * minor fixes and favicon added * logo changed * logo changed * minor fixes * minor fixes * favicon changed * blur add * blur add * blur add * gallery page fix * scrollbar add --------- Co-authored-by: Arindom --- .../About/AboutUs/AboutUs.module.scss | 2 +- .../Gallery/GalleryHeader/GalleryHeader.jsx | 34 ++++--- .../GalleryHeader/GalleryHeaderStyles.css | 64 ------------- .../GalleryHeaderStyles.module.scss | 65 +++++++++++++ src/Components/Gallery/styles.css | 2 +- src/Components/Hero/Foreground.jsx | 4 +- .../SponsorHeading/SponsorHeading.jsx | 34 ++++--- .../SponsorHeading/SponsorHeadingStyles.css | 59 ------------ .../SponsorHeadingStyles.module.scss} | 9 +- src/Components/Sponsors/SponsorsStyle.css | 7 +- src/Pages/Artist/Artist.module.scss | 1 + src/Pages/Events/EventHeader.module.scss | 2 + src/Pages/Events/Events.jsx | 94 ++++++++++++++----- src/Pages/Events/Events.module.scss | 59 +++++++++--- src/Pages/Gallery/Gallery.jsx | 18 ++-- .../Gallery/GalleryHeader/GalleryHeader.jsx | 34 ++++--- .../GalleryHeaderStyles.module.scss | 65 +++++++++++++ src/Pages/Gallery/styles.css | 2 +- src/Pages/Home/Home.jsx | 2 +- src/Pages/Home/Home.module.scss | 1 + src/index.scss | 13 +++ 21 files changed, 344 insertions(+), 227 deletions(-) delete mode 100644 src/Components/Gallery/GalleryHeader/GalleryHeaderStyles.css create mode 100644 src/Components/Gallery/GalleryHeader/GalleryHeaderStyles.module.scss delete mode 100644 src/Components/Sponsors/SponsorHeading/SponsorHeadingStyles.css rename src/{Pages/Gallery/GalleryHeader/GalleryHeaderStyles.css => Components/Sponsors/SponsorHeading/SponsorHeadingStyles.module.scss} (88%) create mode 100644 src/Pages/Gallery/GalleryHeader/GalleryHeaderStyles.module.scss diff --git a/src/Components/About/AboutUs/AboutUs.module.scss b/src/Components/About/AboutUs/AboutUs.module.scss index ce32857..4def929 100644 --- a/src/Components/About/AboutUs/AboutUs.module.scss +++ b/src/Components/About/AboutUs/AboutUs.module.scss @@ -95,7 +95,7 @@ width: 100vw; padding-top: 0; padding-bottom: 0; - margin-bottom: 0; + margin-bottom: 2rem; max-height: max-content; display: flex; flex-direction: row; diff --git a/src/Components/Gallery/GalleryHeader/GalleryHeader.jsx b/src/Components/Gallery/GalleryHeader/GalleryHeader.jsx index 01bdfc3..9ff26b2 100644 --- a/src/Components/Gallery/GalleryHeader/GalleryHeader.jsx +++ b/src/Components/Gallery/GalleryHeader/GalleryHeader.jsx @@ -1,21 +1,27 @@ -import './GalleryHeaderStyles.css' +import styles from './GalleryHeaderStyles.module.scss' import Lottie from 'lottie-react' -import Dhol from "../../../Lottiefiles/drum right.json"; +import rdrum from "../../../Lottiefiles/drum right.json"; const GalleryHeader = () => { return ( -
-
- -
-
-

Photo Gallery

- an underline -
-
- -
-
+
+
+
+ +
+
+

Photo Gallery

+ logo +
+
+ +
+
+
) } diff --git a/src/Components/Gallery/GalleryHeader/GalleryHeaderStyles.css b/src/Components/Gallery/GalleryHeader/GalleryHeaderStyles.css deleted file mode 100644 index bc312b9..0000000 --- a/src/Components/Gallery/GalleryHeader/GalleryHeaderStyles.css +++ /dev/null @@ -1,64 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Snippet&display=swap'); - -.header_container { - display: flex; - gap: 0rem; - justify-content: center; - align-items: flex-start; - text-align: center; - position: relative; -} - -.title_div { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} - -.title { - font-family: "Snippet", sans-serif; - font-weight: bolder; - font-size: 2rem; - color: rgba(255, 255, 255, 0.89); - text-transform: uppercase; -} - -.drum_left, .drum_right { - width: 6rem; -} - -.drum_left { - transform: scaleX(-1); -} - -.curl { - width: 16rem; - height: auto; -} - - - - - -/* ===== MEDIA QUERIES ===== */ - -@media (max-width: 475px){ - .title { - font-size: 1.5rem; - color: rgba(255, 255, 255, 0.89); - } - - .drum_left, .drum_right { - width: 5rem; - } - - .curl { - width: 12rem; - height: auto; - } - - .header_container { - gap: .2rem; - } -} \ No newline at end of file diff --git a/src/Components/Gallery/GalleryHeader/GalleryHeaderStyles.module.scss b/src/Components/Gallery/GalleryHeader/GalleryHeaderStyles.module.scss new file mode 100644 index 0000000..73b38e1 --- /dev/null +++ b/src/Components/Gallery/GalleryHeader/GalleryHeaderStyles.module.scss @@ -0,0 +1,65 @@ +.top { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + gap: 0rem; + margin-bottom: 4rem; + height: fit-content; + max-width: 100vw; + margin-top: 3rem; + .inner { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 0rem; + } + .header { + display: flex; + flex-direction: column; + align-items: center; + position: relative; + top: 2rem; + width: 50%; + justify-content: center; + flex-wrap: nowrap; + margin-left: 1rem; + margin-right: 1rem; + .logo { + height: 4.3rem; + width: 20rem; + } + } + + .ldrum, + .rdrum { + height: 6rem; + width: 6rem; + } + .ldrum { + transform: scaleX(-1); + } + .heading { + text-align: center; + text-transform: uppercase; + color: #ffffff; + font-family: "Snippet", sans-serif; + white-space: nowrap; + font-weight: 700; + font-size: 2.2rem; + } + } + + @media screen and (max-width:364px) { + .top{ + scale: 0.8; + .header{ + width: 33%; + } + .heading{ + white-space: break-spaces; + } + + } + } \ No newline at end of file diff --git a/src/Components/Gallery/styles.css b/src/Components/Gallery/styles.css index 850104e..8dc691d 100644 --- a/src/Components/Gallery/styles.css +++ b/src/Components/Gallery/styles.css @@ -1,5 +1,5 @@ .gallery-container { - margin-top: 8rem; + margin-top: 2rem; } @media (max-width: 768px) { diff --git a/src/Components/Hero/Foreground.jsx b/src/Components/Hero/Foreground.jsx index dac9b35..ebc6695 100644 --- a/src/Components/Hero/Foreground.jsx +++ b/src/Components/Hero/Foreground.jsx @@ -5,7 +5,7 @@ const Foreground = () => { return (
- + { d="M3001.67 772.705C3003.35 773.45 3003.44 774.189 3001.94 774.924C3001.34 774.226 3001.25 773.487 3001.67 772.705Z" fill="#F5BD39" /> - + { return ( -
-
- -
-
-

Sponsors

- an underline -
-
- -
-
+
+
+
+ +
+
+

Sponsors

+ logo +
+
+ +
+
+
) } diff --git a/src/Components/Sponsors/SponsorHeading/SponsorHeadingStyles.css b/src/Components/Sponsors/SponsorHeading/SponsorHeadingStyles.css deleted file mode 100644 index b642fa2..0000000 --- a/src/Components/Sponsors/SponsorHeading/SponsorHeadingStyles.css +++ /dev/null @@ -1,59 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Snippet&display=swap'); - -.header_container { - display: flex; - /* width: 60%; */ - justify-content: center; - align-items: center; - text-align: center; -} - -.title_div { - display: flex; - flex-direction: column; - justify-content: space-between; -} - -.title { - font-family: "Snippet", sans-serif; - font-weight: bolder; - font-size: 2rem; - color: rgba(255, 255, 255, 0.89); - text-transform: uppercase; -} - -.drum_left, .drum_right { - width: 6rem; -} - -.curl { - width: 14rem; - height: auto; -} - - - - - -/* MEDIA QUERIES */ - -@media (max-width: 475px){ - .title { - font-size: 1.5rem; - color: rgba(255, 255, 255, 0.89); - } - - .drum_left, .drum_right { - width: 5rem; - height: 5rem; - } - - .curl { - width: 10rem; - height: auto; - } - - .header_container { - gap: .2rem; - } -} \ No newline at end of file diff --git a/src/Pages/Gallery/GalleryHeader/GalleryHeaderStyles.css b/src/Components/Sponsors/SponsorHeading/SponsorHeadingStyles.module.scss similarity index 88% rename from src/Pages/Gallery/GalleryHeader/GalleryHeaderStyles.css rename to src/Components/Sponsors/SponsorHeading/SponsorHeadingStyles.module.scss index 6a8389b..5733ab3 100644 --- a/src/Pages/Gallery/GalleryHeader/GalleryHeaderStyles.css +++ b/src/Components/Sponsors/SponsorHeading/SponsorHeadingStyles.module.scss @@ -7,6 +7,7 @@ margin-bottom: 4rem; height: fit-content; max-width: 100vw; + margin-top: 6rem; .inner { display: flex; flex-direction: row; @@ -20,7 +21,7 @@ align-items: center; position: relative; top: 2rem; - width: 33%; + width: 35%; justify-content: center; flex-wrap: nowrap; margin-left: 1rem; @@ -47,4 +48,10 @@ font-weight: 700; font-size: 2.2rem; } + } + + @media screen and (max-width:364px) { + .top{ + scale: 0.8; + } } \ No newline at end of file diff --git a/src/Components/Sponsors/SponsorsStyle.css b/src/Components/Sponsors/SponsorsStyle.css index 82e2921..090734a 100644 --- a/src/Components/Sponsors/SponsorsStyle.css +++ b/src/Components/Sponsors/SponsorsStyle.css @@ -1,8 +1,5 @@ .container { - padding-top: 4rem; + padding-top:0; margin-bottom: 4rem; -} - -.SponsorCardContainer { margin-top: 2rem; -} \ No newline at end of file +} diff --git a/src/Pages/Artist/Artist.module.scss b/src/Pages/Artist/Artist.module.scss index 2f570e3..8ad0766 100644 --- a/src/Pages/Artist/Artist.module.scss +++ b/src/Pages/Artist/Artist.module.scss @@ -2,6 +2,7 @@ width: 100%; min-height: 100vh; overflow: hidden; + padding-top: 3rem; } .top { display: flex; diff --git a/src/Pages/Events/EventHeader.module.scss b/src/Pages/Events/EventHeader.module.scss index 99ecd9e..d94deae 100644 --- a/src/Pages/Events/EventHeader.module.scss +++ b/src/Pages/Events/EventHeader.module.scss @@ -8,6 +8,8 @@ height: fit-content; max-width: 100vw; margin-top: 6rem; + padding-top: 2rem; + .inner { display: flex; flex-direction: row; diff --git a/src/Pages/Events/Events.jsx b/src/Pages/Events/Events.jsx index cfcc9a9..1d8466b 100644 --- a/src/Pages/Events/Events.jsx +++ b/src/Pages/Events/Events.jsx @@ -1,5 +1,5 @@ import { Swiper, SwiperSlide } from "swiper/react"; -import { useEffect } from "react"; +import { useEffect, useState } from "react"; import { Pagination, Navigation } from "swiper/core"; import EventHeader from "./EventHeader"; import style from "./Events.module.scss"; @@ -8,39 +8,81 @@ import EventsArr from "./Events.json"; import "swiper/css/navigation"; const Events = () => { + const [isSmallScreen, setIsSmallScreen] = useState(false); + + useEffect(() => { + const handleResize = () => { + setIsSmallScreen(window.innerWidth < 768); + }; + + window.addEventListener("resize", handleResize); + + return () => { + window.removeEventListener("resize", handleResize); + }; + }, []); + useEffect(() => { window.scrollTo(0, 0); }, []); + const renderSwiper = () => { + return ( +
+
+ + {EventsArr.map((e) => { + return ( + + {e.id} +

{e.name}

+
{e.text}
+ + ); + }) + } + +
+
+ ) + } + + const renderEvents = () => { + return ( +
+
+ {EventsArr.map((e) => { + return ( +
+
+ {e.id} +
+

{e.name}

+
+
{e.text}
+
+
+ ); + }) + } +
+
+ + ) + } + + return (
-
-
- - {EventsArr.map((e) => { - return ( - - {e.id} -

{e.name}

-
{e.text}
- - ); - })} - -
-
+ {!isSmallScreen && renderSwiper()} + {isSmallScreen && renderEvents()}
); diff --git a/src/Pages/Events/Events.module.scss b/src/Pages/Events/Events.module.scss index 1880628..6e61b62 100644 --- a/src/Pages/Events/Events.module.scss +++ b/src/Pages/Events/Events.module.scss @@ -3,11 +3,7 @@ --swiper-button-next-color: blue } -.navigation.nextEl - .ParentDivision { - - padding-top: 5rem; background-image: url(https://res.cloudinary.com/dl0knguhb/image/upload/v1712137199/pngwing_3_slripp.webp); background-repeat: no-repeat; background-size: cover; @@ -43,10 +39,9 @@ display: flex; flex-direction: column; width: 60%; - backdrop-filter: blur(20px); margin-bottom: 4rem; padding: 1rem; - background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%); + background: linear-gradient(153deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%); border-radius: 16px; backdrop-filter: blur(60px) brightness(100%); -webkit-backdrop-filter: blur(60px) brightness(100%); @@ -176,16 +171,50 @@ button { width: 85vw; } } -@media screen and (max-width: 700px) { - .BottomDiv { - width: 80vw; - } +.BottomDiv2{ + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap:3rem; + width: 80%; + margin-bottom: 4rem; + padding: 1rem; } -@media screen and (max-width: 550px) { - .EventText { - font-size: 12px; +.card{ + background: linear-gradient(153deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%); + border-radius: 16px; + backdrop-filter: blur(60px) brightness(100%); + -webkit-backdrop-filter: blur(60px) brightness(100%); + border-color: transparent; + border: 4px solid; + height: 100%; + width:130%; + border-image: radial-gradient(rgb(255,0,214.2),rgba(21,21,21,0)) 1; + box-shadow: 0px 1px 24px -1px rgba(0, 0, 0, 0.2); + .images{ + padding-top: 2rem; + display: flex; + align-items: center; + justify-content: center; + width:100%; + .image{ + width:80%; + } } - .BottomDiv { - width: 95%; + .h1{ + font-size: 1.5rem; + margin-bottom: .3rem; + } + .text_class{ + width: 100%; + display: flex; + align-items: center; + justify-content: center; + .EventText{ + text-align: justify; + width:100%; + font-size: .9rem; + } } } diff --git a/src/Pages/Gallery/Gallery.jsx b/src/Pages/Gallery/Gallery.jsx index 4a8889a..7ac35f2 100644 --- a/src/Pages/Gallery/Gallery.jsx +++ b/src/Pages/Gallery/Gallery.jsx @@ -5,10 +5,10 @@ import 'swiper/css/effect-coverflow'; import 'swiper/css/pagination'; import './styles.css'; import { EffectCoverflow, Pagination, Autoplay } from 'swiper/core'; -let img1 = "https://res.cloudinary.com/dyn3q57b8/image/upload/f_auto,q_auto,fl_lossy/v1/Oikyotaan%20'24%20assets/Gallery/image1" -let img2 = "https://res.cloudinary.com/dyn3q57b8/image/upload/f_auto,q_auto,fl_lossy/v1/Oikyotaan%20'24%20assets/Gallery/image2" -let img3 = "https://res.cloudinary.com/dyn3q57b8/image/upload/f_auto,q_auto,fl_lossy/v1/Oikyotaan%20'24%20assets/Gallery/image3" import GalleryHeader from './GalleryHeader/GalleryHeader'; +const img1 = "https://res.cloudinary.com/dyn3q57b8/image/upload/f_auto,q_auto,fl_lossy/v1/Oikyotaan%20'24%20assets/Gallery/image1" +const img2 = "https://res.cloudinary.com/dyn3q57b8/image/upload/f_auto,q_auto,fl_lossy/v1/Oikyotaan%20'24%20assets/Gallery/image2" +const img3 = "https://res.cloudinary.com/dyn3q57b8/image/upload/f_auto,q_auto,fl_lossy/v1/Oikyotaan%20'24%20assets/Gallery/image3" @@ -24,12 +24,12 @@ const Gallery = ()=> { { disableOnInteraction: false, }} - pagination={true} + pagination modules={[EffectCoverflow, Pagination, Autoplay]} className="mySwiper" > diff --git a/src/Pages/Gallery/GalleryHeader/GalleryHeader.jsx b/src/Pages/Gallery/GalleryHeader/GalleryHeader.jsx index 9807604..2a268d2 100644 --- a/src/Pages/Gallery/GalleryHeader/GalleryHeader.jsx +++ b/src/Pages/Gallery/GalleryHeader/GalleryHeader.jsx @@ -1,21 +1,27 @@ -import './GalleryHeaderStyles.css' +import styles from './GalleryHeaderStyles.module.scss' import Lottie from 'lottie-react' -import Dhol from "../../../Lottiefiles/drum right.json"; +import rdrum from "../../../Lottiefiles/drum right.json"; const GalleryHeader = () => { return ( -
-
- -
-
-

Photo Gallery

- an underline -
-
- -
-
+
+
+
+ +
+
+

Photo GAllery

+ logo +
+
+ +
+
+
) } diff --git a/src/Pages/Gallery/GalleryHeader/GalleryHeaderStyles.module.scss b/src/Pages/Gallery/GalleryHeader/GalleryHeaderStyles.module.scss new file mode 100644 index 0000000..e8106ed --- /dev/null +++ b/src/Pages/Gallery/GalleryHeader/GalleryHeaderStyles.module.scss @@ -0,0 +1,65 @@ +.top { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + gap: 0rem; + margin-bottom: 4rem; + height: fit-content; + max-width: 100vw; + margin-top: 3rem; + .inner { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 0rem; + } + .header { + display: flex; + flex-direction: column; + align-items: center; + position: relative; + top: 2rem; + width: 50%; + justify-content: center; + flex-wrap: nowrap; + margin-left: 1rem; + margin-right: 1rem; + .logo { + height: 4.3rem; + width: 20rem; + } + } + + .ldrum, + .rdrum { + height: 6rem; + width: 6rem; + } + .ldrum { + transform: scaleX(-1); + } + .heading { + text-align: center; + text-transform: uppercase; + color: #ffffff; + font-family: "Snippet", sans-serif; + white-space: nowrap; + font-weight: 700; + font-size: 2.2rem; + } +} + +@media screen and (max-width:364px) { + .top{ + scale: 0.8; + .header{ + width: 33%; + } + .heading{ + white-space: break-spaces; + } + + } +} \ No newline at end of file diff --git a/src/Pages/Gallery/styles.css b/src/Pages/Gallery/styles.css index 384c63b..cfc4e18 100644 --- a/src/Pages/Gallery/styles.css +++ b/src/Pages/Gallery/styles.css @@ -5,7 +5,7 @@ .galleryPage-container { - padding-top: 8rem; + padding-top: 5.5rem; min-height: 100vh; width:100%; } diff --git a/src/Pages/Home/Home.jsx b/src/Pages/Home/Home.jsx index 0fb5496..9c0c73a 100644 --- a/src/Pages/Home/Home.jsx +++ b/src/Pages/Home/Home.jsx @@ -1,6 +1,6 @@ +import { useEffect } from "react"; import styles from "./Home.module.scss"; import {Gallery, Sponsors, AboutUs, AboutNits} from '../../Components' -import { useEffect } from "react"; import Hero from "../../Components/Hero/Hero"; const Home = () => { diff --git a/src/Pages/Home/Home.module.scss b/src/Pages/Home/Home.module.scss index 2630396..0493921 100644 --- a/src/Pages/Home/Home.module.scss +++ b/src/Pages/Home/Home.module.scss @@ -2,6 +2,7 @@ .home { min-height: 100vh; padding-top: 4rem; + overflow: hidden; } body { diff --git a/src/index.scss b/src/index.scss index 0cda3f4..64d1a78 100644 --- a/src/index.scss +++ b/src/index.scss @@ -42,3 +42,16 @@ body { background-color: #3d029d; } +body::-webkit-scrollbar { + width: 0.4rem; +} + +body::-webkit-scrollbar-track { + background:linear-gradient(to bottom, #3d029d 0%, #3f1560 100%); + border: 1px solid black; +} + +body::-webkit-scrollbar-thumb { + background:linear-gradient(153deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%); + border-radius: 2px; +} \ No newline at end of file