From 325f0b61129d4e8c7aec3c617bc4a455c6c566ce Mon Sep 17 00:00:00 2001 From: Aswin Asok Date: Wed, 13 Sep 2023 10:00:45 +0530 Subject: [PATCH] feat(kkem-event-template):added-first-section --- public/assets/events/kkem/aboutImage.svg | 242 ++++++++++++++++++ public/assets/events/kkem/mU.svg | 3 + public/assets/events/kkem/titleFrame.svg | 24 ++ src/App.js | 4 +- .../KKEMEventTemplate/KKEMEventTemplate.jsx | 73 ++++++ .../KKEMEventTemplate.module.css | 168 ++++++++++++ 6 files changed, 513 insertions(+), 1 deletion(-) create mode 100644 public/assets/events/kkem/aboutImage.svg create mode 100644 public/assets/events/kkem/mU.svg create mode 100644 public/assets/events/kkem/titleFrame.svg create mode 100644 src/Pages/Events/KKEMEventTemplate/KKEMEventTemplate.jsx create mode 100644 src/Pages/Events/KKEMEventTemplate/KKEMEventTemplate.module.css diff --git a/public/assets/events/kkem/aboutImage.svg b/public/assets/events/kkem/aboutImage.svg new file mode 100644 index 000000000..61ab8d59d --- /dev/null +++ b/public/assets/events/kkem/aboutImage.svg @@ -0,0 +1,242 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/events/kkem/mU.svg b/public/assets/events/kkem/mU.svg new file mode 100644 index 000000000..451bf5147 --- /dev/null +++ b/public/assets/events/kkem/mU.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/events/kkem/titleFrame.svg b/public/assets/events/kkem/titleFrame.svg new file mode 100644 index 000000000..5f9fc437f --- /dev/null +++ b/public/assets/events/kkem/titleFrame.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/App.js b/src/App.js index dabc59b5d..b2952ba22 100644 --- a/src/App.js +++ b/src/App.js @@ -45,7 +45,8 @@ import MutechLeaderboard from "./Pages/MutechLeaderBoard/MutechLeaderBoard"; import CodeStorm from "./Pages/Events/GTA/CodeStorm/CodeStorm"; import KKEMLearningFest from "./Pages/KKEMLearningFest/KKEMLearningFest"; -import MaveliPortfolio from './Pages/Events/MaveliPortfolio/MaveliPortfolio' +import MaveliPortfolio from "./Pages/Events/MaveliPortfolio/MaveliPortfolio"; +import KKEMEventTemplate from "./Pages/Events/KKEMEventTemplate/KKEMEventTemplate"; function App() { const [redirects, setRedirects] = useState([]); const [isLoaded, setIsLoaded] = useState(false); @@ -115,6 +116,7 @@ function App() { } /> } /> } /> + } /> } /> diff --git a/src/Pages/Events/KKEMEventTemplate/KKEMEventTemplate.jsx b/src/Pages/Events/KKEMEventTemplate/KKEMEventTemplate.jsx new file mode 100644 index 000000000..f47248b69 --- /dev/null +++ b/src/Pages/Events/KKEMEventTemplate/KKEMEventTemplate.jsx @@ -0,0 +1,73 @@ +import React from "react"; +import styles from "./KKEMEventTemplate.module.css"; + +const KKEMEventTemplate = () => { + return ( + <> + +
+ title frame + mU +
+ +
+
+

Learning Fest

+

+ µLearn in association with KKEM brings you Learning Fest a series of + bootcamps to improve your skills in various domains and the chance + to earn Karma points and various other opportunities. +

+

+ 01 October 2023 - 01 November 2023 +

+ +
+ about section +
+ +
+
+

1000+

+

Participants

+
+
+

1000+

+

Participants

+
+
+

1000+

+

Participants

+
+
+ +
+

Winners Leaderboard

+
+ + ); +}; + +export default KKEMEventTemplate; diff --git a/src/Pages/Events/KKEMEventTemplate/KKEMEventTemplate.module.css b/src/Pages/Events/KKEMEventTemplate/KKEMEventTemplate.module.css new file mode 100644 index 000000000..307efc891 --- /dev/null +++ b/src/Pages/Events/KKEMEventTemplate/KKEMEventTemplate.module.css @@ -0,0 +1,168 @@ +@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"); + +.navbar { + background-color: #ffffff; + padding: 2rem 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +.container { + display: flex; + justify-content: space-between; + background-color: #fff; + padding: 1rem 2rem; + border-radius: 1.2rem; + width: 100%; + max-width: 800px; + perspective: 1000px; +} + +.container > a { + color: #000; + text-decoration: none; + font-weight: 600; + line-height: 1rem; +} +.container > a:hover { + color: #2e85fe; +} + +/* Banner */ +html { + scroll-behavior: smooth; +} + +.main { + max-width: 200rem; + margin: 0 auto; +} +.title { + width: 100%; + height: auto; + overflow: hidden; + object-fit: cover; + display: block; +} +.mU { + position: absolute; + top: -30%; + left: 20px; + height: 150%; + opacity: 0.5; +} + +.aboutSection { + margin: 2rem; + margin-top: 3rem; + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + justify-content: space-evenly; +} + +.aboutTextsHeading { + color: #24292d; + font-family: sans-serif, "Plus Jakarta Sans"; + font-size: 4rem; + font-weight: 600; + line-height: 111.5%; /* 90.499px */ +} + +.aboutTextstDescription { + color: #24292d; + font-family: sans-serif, "Plus Jakarta Sans"; + font-size: 1.35rem; + font-style: normal; + margin-top: 1rem; + font-weight: 500; + max-width: 40rem; + line-height: 127.5%; /* 38.25px */ +} + +.aboutTextDate { + color: #656565; + font-family: sans-serif, "Plus Jakarta Sans"; + font-size: 1.75rem; + font-style: normal; + color: #24292d; + font-weight: 300; + margin-top: 1rem; + line-height: 127.5%; /* 38.25px */ +} + +.aboutTextButton { + margin-bottom: 1rem; + color: #ffffff; + padding: 1rem 3.5rem; + flex-shrink: 0; + border-radius: 15.62px; + background: #52b565; + margin-top: 1.5rem; + box-shadow: 0px 0px 41.21519px 0px rgba(0, 0, 0, 0.1); +} + +.aboutSectionImage { + width: 400px; + height: 400px; +} + +@media screen and (max-width: 1224px) { + .aboutTextsHeading { + font-size: 3.5rem; + } + + .aboutSectionImage { + width: 300px; + height: 300px; + } + + .aboutTextstDescription { + font-size: 1.25rem; + } + + .aboutTextDate { + font-size: 1.5rem; + } +} + +@media screen and (max-width: 1004px) { + .aboutSection { + justify-content: flex-start; + } +} + +@media screen and (max-width: 768px) { + .aboutTextsHeading { + font-size: 3rem; + } + + .aboutTextstDescription { + font-size: 1.25rem; + } + + .aboutTextDate { + font-size: 1.25rem; + } +} + +@media screen and (max-width: 480px) { + .aboutTextsHeading { + font-size: 2.5rem; + } + + .aboutTextstDescription { + font-size: 1.1rem; + } + + .aboutTextDate { + font-size: 1.1rem; + } + + .aboutTextButton { + padding: 0.75rem 3rem; + + } +}