Skip to content

Commit

Permalink
Merge branch 'satya2' of https://github.com/POSUA-NITS/Posua-2024 int…
Browse files Browse the repository at this point in the history 
…o satya2
  • Loading branch information
@satyaaa111
satyaaa111 committed Mar 28, 2024
2 parents 598e2c1 + 236bb6b commit d4ddefc
Show file tree
Hide file tree
Showing 14 changed files with 733 additions and 268 deletions.
100 changes: 75 additions & 25 deletions src/Components/Borhomthuri/Borhomthuri.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,64 @@
/* eslint-disable func-names */
/* eslint-disable no-param-reassign */
/* eslint-disable prefer-arrow-callback */

import { useState, useEffect } from "react";
import styles from "./Borhomthuri.module.scss";
// import Film from "./Filmy";
// import Card from "./Card";
import data from "../../assets/Edition.json";
import LottieHeading from "../LottieHeading/LottieHeading";
// import ScrolBar from "./ScrolBar";
// import FrontCover from "./FrontCover";

const Borhomthuri = () => {
/* implementing lazy load via ioa */
const config = {
rootMargin: "0px 0px 0px 0px",
threshold: 0.2,
};

const [loaded, setIsLoaded] = useState(false);
useEffect(() => {
const observer = new window.IntersectionObserver(function (entries, self) {
entries.forEach((entry) => {
if (entry.isIntersecting) {
loadImages(entry.target);
self.unobserve(entry.target);
}
});
}, config);
const imgs = document.querySelectorAll("[data-src]");
imgs.forEach((img) => {
observer.observe(img);
});
return () => {
imgs.forEach((img) => {
observer.unobserve(img);
});
};
});

const loadImages = (image) => {
image.src = image.dataset.src;
};

return (
<div className={styles.superParent}>
<div className={styles.ParentClass}>
{/* <Pepa /> */}
<div id={styles.leftrangoliholder_borhom}>
<img
src="https://res.cloudinary.com/dp92qug2f/image/upload/v1711549216/leftrangoli_jp6whi.png"
src=""
data-src="https://res.cloudinary.com/dp92qug2f/image/upload/v1711607934/leftrangoli_jp6whi-min_eicyyv.webp"
className={loaded ? "loadedClass" : "loadingClass"}
onLoad={() => setIsLoaded(true)}
alt=""
/>
</div>

<div id={styles.rightrangoliholder_borhom}>
<img
src="https://res.cloudinary.com/dp92qug2f/image/upload/v1711549216/rightrangoli_jvpnus.png"
src=""
data-src="https://res.cloudinary.com/dp92qug2f/image/upload/v1711608053/rightrangoli_jvpnus-min_h2l42o.webp"
className={loaded ? "loadedClass" : "loadingClass"}
onLoad={() => setIsLoaded(true)}
alt=""
/>
</div>
Expand All @@ -46,9 +85,18 @@ const Borhomthuri = () => {
target="_blank"
style={{ margin: "1.2rem" }}
>
<img src={item.src} alt="magazine" />
<img
src={item.edition_num}
src=""
data-src={item.src}
className={loaded ? "loadedClass" : "loadingClass"}
onLoad={() => setIsLoaded(true)}
alt="magazine"
/>
<img
src=""
data-src={item.edition_num}
className={loaded ? "loadedClass" : "loadingClass"}
onLoad={() => setIsLoaded(true)}
alt="Edition"
style={{
margin: "0 auto",
Expand All @@ -64,13 +112,19 @@ const Borhomthuri = () => {
<div className={styles.cameraImg}>
<img
alt="Camera"
src="https://res.cloudinary.com/dp92qug2f/image/upload/v1711559065/camera_posua24_l7ndyp.png"
src=""
data-src="https://res.cloudinary.com/dp92qug2f/image/upload/v1711607582/camera_posua24_l7ndyp-min_o41997.webp"
className={loaded ? "loadedClass" : "loadingClass"}
onLoad={() => setIsLoaded(true)}
/>
</div>

<div id={styles.camerafoucs}>
<img
src="https://res.cloudinary.com/dp92qug2f/image/upload/v1711559384/camera_focus_posua24_orhnta.png"
src=""
data-src="https://res.cloudinary.com/dp92qug2f/image/upload/v1711607671/camera_focus_posua24_orhnta-min_o0quzy.webp"
className={loaded ? "loadedClass" : "loadingClass"}
onLoad={() => setIsLoaded(true)}
alt=""
/>
</div>
Expand All @@ -95,9 +149,18 @@ const Borhomthuri = () => {
target="_blank"
style={{ margin: "1.2rem" }}
>
<img src={item.src} alt="magazine" />
<img
src={item.edition_num}
src=""
data-src={item.src}
className={loaded ? "loadedClass" : "loadingClass"}
onLoad={() => setIsLoaded(true)}
alt="magazine"
/>
<img
src=""
data-src={item.edition_num}
className={loaded ? "loadedClass" : "loadingClass"}
onLoad={() => setIsLoaded(true)}
alt="Edition"
style={{
margin: "0 auto",
Expand All @@ -107,19 +170,6 @@ const Borhomthuri = () => {
</a>
))}
</div>
{/* <ScrolBar /> */}
{/* <div className={styles.movingCards}>
{
data.map((item)=>(
<Card imgSrc={item.src} srcMag={item.link} />
))
}
</div> */}

{/* <div id={styles.random}>
<img src="https://res.cloudinary.com/dhpqjrbha/image/upload/c_pad,b_auto:predominant,fl_preserve_transparency/v1711056519/Group_2608667_reshtk.jpg?_s=public-apps" alt="" />
</div> */}
{/* Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium ratione, perspiciatis vitae sit asperiores quia sunt quasi maxime. Nihil, officia qui fuga reprehenderit obcaecati ipsam alias vel hic laudantium pariatur aliquam mollitia reiciendis explicabo? */}
</div>
</div>
</div>
Expand Down
41 changes: 39 additions & 2 deletions src/Components/Shared/Footer/Footer.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,52 @@
import React from "react";
/* eslint-disable func-names */
/* eslint-disable no-param-reassign */
/* eslint-disable prefer-arrow-callback */

import { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import styles from "./Footer.module.scss";
import fontStyles from "./fontStyles.module.scss"; // Import font styles
const Footer = () => {
/* implementing lazy load via ioa */
const config = {
rootMargin: "0px 0px 0px 0px",
threshold: 0.2,
};

const [loaded, setIsLoaded] = useState(false);
useEffect(() => {
const observer = new window.IntersectionObserver(function (entries, self) {
entries.forEach((entry) => {
if (entry.isIntersecting) {
loadImages(entry.target);
self.unobserve(entry.target);
}
});
}, config);
const imgs = document.querySelectorAll("[data-src]");
imgs.forEach((img) => {
observer.observe(img);
});
return () => {
imgs.forEach((img) => {
observer.unobserve(img);
});
};
});

const loadImages = (image) => {
image.src = image.dataset.src;
};
return (
<footer className={`${styles.Container} ${fontStyles.PhilosopherFont}`}>
<div className={styles.posua}>
<Link to="/">
<img
src="https://res.cloudinary.com/dclhahfvz/image/upload/v1710953023/New_Posua_logo_kyknan.png"
src=""
data-src="https://res.cloudinary.com/dp92qug2f/image/upload/v1711607487/New_Posua_logo_kyknan-min_bbxthz.webp"
alt="Posua Logo"
className={loaded ? "loadedClass" : "loadingClass"}
onLoad={() => setIsLoaded(true)}
/>
</Link>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/Components/Shared/Footer/Footer.module.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.Container {
background-color: beige;
background-image: url(https://res.cloudinary.com/dp92qug2f/image/upload/v1711374389/footerbg_posua24_zhs2zn.webp);
background-image: url(https://res.cloudinary.com/dp92qug2f/image/upload/v1711607805/footerbg_posua24_zhs2zn_1_dzjf5u.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
Expand Down
52 changes: 48 additions & 4 deletions src/Pages/About/About.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,61 @@
// import AboutPepa from "./AboutPepa";
/* eslint-disable func-names */
/* eslint-disable no-param-reassign */
/* eslint-disable prefer-arrow-callback */

import { useState, useEffect } from "react";
import LottieHeading from "../../Components/LottieHeading/LottieHeading";
import styles from "./About.module.scss";
const About = () => {
/* implementing lazy load via ioa */
const config = {
rootMargin: "0px 0px 0px 0px",
threshold: 0.2,
};

const [loaded, setIsLoaded] = useState(false);
useEffect(() => {
const observer = new window.IntersectionObserver(function (entries, self) {
entries.forEach((entry) => {
if (entry.isIntersecting) {
loadImages(entry.target);
self.unobserve(entry.target);
}
});
}, config);
const imgs = document.querySelectorAll("[data-src]");
imgs.forEach((img) => {
observer.observe(img);
});
return () => {
imgs.forEach((img) => {
observer.unobserve(img);
});
};
});

const loadImages = (image) => {
image.src = image.dataset.src;
};

return (
<div>
<div className={styles.AboutClass}>
<div id={styles.leftrangoliholder}>
<img
src="https://res.cloudinary.com/dp92qug2f/image/upload/v1711549216/leftrangoli_jp6whi.png"
src=""
data-src="https://res.cloudinary.com/dp92qug2f/image/upload/v1711607934/leftrangoli_jp6whi-min_eicyyv.webp"
className={loaded ? "loadedClass" : "loadingClass"}
onLoad={() => setIsLoaded(true)}
alt=""
/>
</div>

<div id={styles.rightrangoliholder}>
<img
src="https://res.cloudinary.com/dp92qug2f/image/upload/v1711549216/rightrangoli_jvpnus.png"
src=""
data-src="https://res.cloudinary.com/dp92qug2f/image/upload/v1711608053/rightrangoli_jvpnus-min_h2l42o.webp"
className={loaded ? "loadedClass" : "loadingClass"}
onLoad={() => setIsLoaded(true)}
alt=""
/>
</div>
Expand Down Expand Up @@ -44,7 +85,10 @@ const About = () => {

<div id={styles.cicularrangoliholder}>
<img
src="https://res.cloudinary.com/dp92qug2f/image/upload/v1711288702/rangoli_404_posua_d0je3u.png"
src=""
data-src="https://res.cloudinary.com/dp92qug2f/image/upload/v1711288702/rangoli_404_posua_d0je3u.png"
className={loaded ? "loadedClass" : "loadingClass"}
onLoad={() => setIsLoaded(true)}
alt=""
/>
</div>
Expand Down
43 changes: 32 additions & 11 deletions src/Pages/Events/EventCarousel.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,46 +44,67 @@

@media screen and (max-width: 1000px) {
.cardContainer {
left: 35vw;
top: 50vh;
left: 18vw;
top: 30vh;
scale: 0.5;
}
}

@media screen and (max-width: 815px) {
@media screen and (max-width: 821px) {
.cardContainer {
left: 30vw;
left: 15vw;
}
}

@media screen and (max-width: 620px) {
.cardContainer {
left: 15vw;
}
}

@media screen and (max-width: 600px) {
.cardContainer {
left: 25vw;
scale: 0.8;
left: 13vw;
}
}

@media screen and (max-width: 540px) {
.cardContainer {
left: 20vw;
left: 12vw;
top: 35vh;
}
}

@media screen and (max-width: 465px) {
.cardContainer {
left: 10vw;
top: 38vh;
}
}

@media screen and (max-width: 450px) {
.cardContainer {
left: 15vw;
left: 10vw;
}
}

@media screen and (max-width: 420px) {
.cardContainer {
left: 8vw;
scale: 0.4;
}
}

@media screen and (max-width: 390px) {
.cardContainer {
top: 60vh;
left: 10vw;
left: 5vw;
scale: 0.3;
}
}

@media screen and (max-width: 365px) {
.cardContainer {
left: 5vw;
left: 2vw;
}
}

Expand Down
Loading

0 comments on commit d4ddefc

Please sign in to comment.