borhomthuri initial commit (yet to be completed)

src/Components/Borhomthuri/Borhomthuri.jsx

@@ -0,0 +1,27 @@
+import Pepa from "./Pepa";
+import styles from "./Borhomthuri.module.scss";
+import Film from "./Filmy";
+
+import ScrolBar from "./ScrolBar";
+// import FrontCover from "./FrontCover";
+const Borhomthuri = () => {
+  return (
+    <div className={styles.superParent}>
+      <div className={styles.ParentClass}>
+        <Pepa />
+        <Film />
+        <ScrolBar />
+        {/* <FrontCover/> */}
+        <div className={styles.text}>
+          Borhomthuri is the annual souvenir of POSUA.It enfolds indispensable parts of
+          Assamese Culture and also the emotions of students in the form of enthralling
+          articles,poems,stories and sketches.Borhomthuri reflects the ardour of NITS
+          Family towards POSUA and provides an opportunity for the literary skills of
+          students to get revived
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Borhomthuri;

src/Components/Borhomthuri/Borhomthuri.module.scss

@@ -0,0 +1,28 @@
+.superParent {
+  min-height: 100vh;
+}
+.text {
+  position: relative;
+  left: 30%;
+  top: 10%;
+  color: rgb(109, 12, 12);
+  font-family: "Alata", sans-serif;
+  font-weight: 600;
+  font-size: 14px;
+  font-style: normal;
+  display: flex;
+  justify-content: center;
+  text-align: center;
+  width: 15%;
+  height: 20%;
+  min-height: 150vh;
+}
+.ParentClass {
+  background-color: rgb(228, 197, 156);
+  background-image: url(https://res.cloudinary.com/dl0knguhb/image/upload/v1710772395/posua%2024/Group_di1ejb.svg),
+    url(../../assets/sideFlower.svg);
+  background-position: right, left;
+  background-repeat: no-repeat;
+}
+// .Border {
+// }

src/Components/Borhomthuri/Filmy.jsx

@@ -0,0 +1,16 @@
+import styles from "./Filmy.module.scss";
+// import FilmImg from "./FILM.svg";
+const Film = () => {
+  return (
+    <div>
+      <div className={styles.FilmClass}>
+        <img
+          alt=""
+          src="https://res.cloudinary.com/dl0knguhb/image/upload/v1711138935/Vector_yz2omx.png"
+          className={styles.cam}
+        />
+      </div>
+    </div>
+  );
+};
+export default Film;

src/Components/Borhomthuri/Filmy.module.scss

@@ -0,0 +1,18 @@
+.FilmClass {
+  //   scale: 1.3;
+
+  scale: 0.5;
+  margin-left: auto;
+  margin-right: 5rem;
+  width: 50%;
+  height: 70%;
+  position: absolute;
+  left: 20%;
+  top: 80%;
+  overflow: hidden;
+}
+@media screen and (max-height: 550px) {
+  .FilmClass {
+    top: 100%;
+  }
+}

src/Components/Borhomthuri/Flower.module.scss

@@ -0,0 +1,5 @@
+.Flower {
+  height: 10%;
+  width: 10%;
+  margin-left: 0%;
+}

src/Components/Borhomthuri/FrontCover.jsx

@@ -0,0 +1,12 @@
+// import styles from './FrontCover.module.scss';
+// import CoverImg from "./frontCover.svg";
+// const FrontCover = () =>{
+//     return (
+//         <div>
+//             <div className={styles.FrontCoverClass}>
+//             <img alt="" src={CoverImg} />
+//             </div>
+//         </div>
+//     )
+// }
+// export default FrontCover;

src/Components/Borhomthuri/FrontCover.module.scss

@@ -0,0 +1,2 @@
+.FrontCoverClass {
+}

src/Components/Borhomthuri/Pepa.jsx

@@ -0,0 +1,12 @@
+import styles from "./Pepa.module.scss";
+import PepaImg from "../../assets/Pepa.svg";
+const Pepa = () => {
+  return (
+    <div>
+      <div className={styles.PepaClass}>
+        <img alt="" src={PepaImg}></img>
+      </div>
+    </div>
+  );
+};
+export default Pepa;

src/Components/Borhomthuri/Pepa.module.scss

@@ -0,0 +1,6 @@
+.PepaClass {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  width: 50%;
+}

src/Components/Borhomthuri/ScrolBar.jsx

@@ -0,0 +1,70 @@
+import React from "react";
+import styles from "./ScrollBar.module.scss";
+const ScrolBar = () => {
+  return (
+    <div>
+      <div className={styles.ParentScrollClass}>
+        <div className={styles.gradFilter}>
+          <div className={styles.eachItem}>
+            {/* <img alt='' src="https://res.cloudinary.com/dl0knguhb/image/upload/v1711040716/Component_1_t7adas.webp"/> */}
+
+            <img
+              alt="11th"
+              src="https://res.cloudinary.com/dl0knguhb/image/upload/v1711030670/cover_page_xevaic.webp"
+            />
+            <img
+              alt="11"
+              src="https://res.cloudinary.com/dl0knguhb/image/upload/v1711045387/11TH_EDITION_ctibkf.png"
+            />
+          </div>
+          <div className={styles.eachItem}>
+            {/* <img alt='' src="https://res.cloudinary.com/dl0knguhb/image/upload/v1711040716/Component_1_t7adas.webp"/> */}
+            <img
+              alt="8th"
+              src="https://res.cloudinary.com/dl0knguhb/image/upload/v1711041325/Group_2608555_sx9smm.png"
+            />
+            <img
+              alt="8"
+              src="https://res.cloudinary.com/dl0knguhb/image/upload/v1711045383/8TH_EDITION_ourusl.png"
+            />
+          </div>
+          <div className={styles.eachItem}>
+            {/* <img alt='' src="https://res.cloudinary.com/dl0knguhb/image/upload/v1711040716/Component_1_t7adas.webp"/> */}
+            <img
+              alt="6th"
+              src="https://res.cloudinary.com/dl0knguhb/image/upload/v1711041848/Group_2608554_mv8wdv.png"
+            />
+            <img
+              alt="6"
+              src="https://res.cloudinary.com/dl0knguhb/image/upload/v1711045380/6TH_EDITION_o9f5hc.png"
+            />
+          </div>
+          <div className={styles.eachItem}>
+            {/* <img alt='' src="https://res.cloudinary.com/dl0knguhb/image/upload/v1711040716/Component_1_t7adas.webp"/> */}
+            <img
+              alt="5th"
+              src="https://res.cloudinary.com/dl0knguhb/image/upload/v1711041828/Group_2608553_i7rmqh.png"
+            />
+            <img
+              alt="5"
+              src="https://res.cloudinary.com/dl0knguhb/image/upload/v1711045376/5TH_EDITION_zj7naz.png"
+            />
+          </div>
+          <div className={styles.eachItem}>
+            {/* <img alt='' src="https://res.cloudinary.com/dl0knguhb/image/upload/v1711040716/Component_1_t7adas.webp"/> */}
+            <img
+              alt="4th"
+              src="https://res.cloudinary.com/dl0knguhb/image/upload/v1711041892/Group_2608552_tbpxrc.png"
+            />
+            <img
+              alt="4"
+              src="https://res.cloudinary.com/dl0knguhb/image/upload/v1711045376/4TH_EDITION_h1xtfm.png"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ScrolBar;

src/Components/Borhomthuri/ScrollBar.module.scss

@@ -0,0 +1,56 @@
+.gradFilter {
+  background-image: linear-gradient(180degrgb (228, 197, 156), transparent);
+  z-index: 2;
+  background-attachment: fixed;
+}
+.ParentScrollClass {
+  height: 70%;
+  width: 25%;
+  margin-left: 55%;
+  overflow: auto;
+  position: absolute;
+  border-radius: 0.5rem;
+  background-image: url("https://res.cloudinary.com/dl0knguhb/image/upload/v1711040716/Component_1_t7adas.webp");
+  background-size: cover;
+  .eachItem {
+    scale: 0.8;
+    margin: 0 auto;
+    z-index: -1;
+  }
+}
+.ParentScrollClass::-webkit-scrollbar {
+  display: none;
+}
+// @keyframes primary{
+//     from{
+//         top: 0%;
+//     }
+//     to{
+//         top: -100%;
+//     }
+// }
+// .ParentScrollClass2{
+//     animation: secondary 2s linear infinite;
+//     height: 70%;
+//     width: 25%;
+//     margin-left: 55%;
+//     overflow: auto;
+//     position: absolute;
+//     border-radius: .5rem ;
+//     background-image: url("https://res.cloudinary.com/dl0knguhb/image/upload/v1711040716/Component_1_t7adas.webp");
+//     background-size:cover ;
+//     .eachItem{
+//         scale:0.8;
+//         margin: 0 auto;
+//         z-index:-1;
+//     }
+// }
+// .ParentScrollClass2::-webkit-scrollbar{
+//     display:none;
+
+// }
+// @keyframes secondary{
+//     from{
+//         top
+//     }
+// }

src/Components/CoverPage.module.scss

@@ -0,0 +1,8 @@
+.CoverPageClass {
+  height: 20%;
+  width: 15%;
+  position: absolute;
+  margin-left: 60%;
+  margin-top: 10%;
+  border-radius: 7rem;
+}

src/Components/Coverpage.jsx

@@ -0,0 +1,14 @@
+import styles from "./CoverPage.module.scss";
+const CoverPage = () => {
+  return (
+    <div>
+      <div className={styles.CoverPageClass}>
+        <img
+          alt=""
+          src="https://res.cloudinary.com/dl0knguhb/image/upload/v1711030670/cover_page_xevaic.webp"
+        />
+      </div>
+    </div>
+  );
+};
+export default CoverPage;

src/Pages/Home/Home.jsx

@@ -1,5 +1,11 @@
+import Borhomthuri from "../../Components/Borhomthuri/Borhomthuri";
+import styles from "./Home.module.scss";
 const Home = () => {
-  return <div>Home page</div>;
+  return (
+    <div className={styles.home}>
+      <Borhomthuri />
+    </div>
+  );
 };
 
 export default Home;

src/Pages/Home/Home.module.scss

@@ -0,0 +1,3 @@
+.home {
+  min-height: 100vh;
+}

src/Pages/index.jsx

@@ -2,7 +2,7 @@ import Events from "./Events/Events";
 import Home from "./Home/Home";
 import Team from "./Team/Team";
 import Sponsors from "./Sponsors/Sponsors";
-import Borhomthuri from "./Borhomthuri/Borhomthuri";
+import Borhomthuri from "../Components/Borhomthuri/Borhomthuri";
 import Gallery from "./Gallery/Gallery";
 
 export { Events, Home, Team, Sponsors, Borhomthuri, Gallery };