diff --git a/src/App.js b/src/App.js
index dbb38f8f6..84c03e7c7 100644
--- a/src/App.js
+++ b/src/App.js
@@ -44,7 +44,7 @@ import Journey from "./Pages/UserJourney/Journey";
import MutechLeaderboard from "./Pages/MutechLeaderBoard/MutechLeaderBoard";
import CodeStorm from "./Pages/Events/GTA/CodeStorm/CodeStorm";
import KKEMLearningFest from "./Pages/KKEMLearningFest/KKEMLearningFest";
-
+import Launchpad from "./Pages/Launchpad/Launchpad";
import MaveliPortfolio from "./Pages/Events/MaveliPortfolio/MaveliPortfolio";
import Level1 from "./Pages/CapTF/Level1";
import Spiderman from "./Pages/CapTF/Spiderman";
@@ -96,6 +96,7 @@ function App() {
} />
} />
} />
+ } />
}>
} />
} />
@@ -147,13 +148,14 @@ function App() {
/>
} />
} />
- } />
+
} />
} />
} />
} />
+ } />
diff --git a/src/Pages/Launchpad/Launchpad.jsx b/src/Pages/Launchpad/Launchpad.jsx
new file mode 100644
index 000000000..21bd7cb2f
--- /dev/null
+++ b/src/Pages/Launchpad/Launchpad.jsx
@@ -0,0 +1,172 @@
+import React from 'react'
+import Navbar from '../../Components/Navbar/Navbar'
+import Footer from '../../Components/Footer/Footer'
+import styles from './Launchpad.module.css'
+import './steps.css'
+const Launchpad = () => {
+ return (
+ <>
+
+
+
+
+
+
+ Welcome aboard LAUNCHPAD 2024
+
+
+ The IEEE LAUNCHPAD Job Fair is an opportunity to secure your spotlight
+ and connect with potential employers through karma points!{" "}
+ {/*
+ */}
+ This event is designed to facilitate meaningful interactions between talented individuals
+ like yourself and companies seeking top-tier talent.
+
+
+
+
+
+
+
+
+
+
How to join Launchpad?
+
+
+
+
+
+
+
+
+
+
1
+
+
Step One
+
+ Register{" "}
+
+ here
+
+ {" "}and get ready for the adventure! Once you receive your confirmation email, we're set to chart a course to your future!
+
+
+
+
+
+
+
+
2
+
+
Step Two
+
+ Join the GTech µLearn Discord Server! Dive into the action {" "}
+
+
+ here
+ {" "}
+ and join fellow Launchpad enthusiasts!
+
+
+
+
+
+
+
+
3
+
+
Step Three
+
+ Conquer the 21-day challenge and earn Karma points !
+ Log in, climb the ranks from Level 1 to 3 , and
+ don't miss our daily Office Hours from 8 to 9 pm for support.
+
+
+
+
+
+
+
+
4
+
+
Step Four
+
+ Gear up for the Qualification Test – show it who's boss!
+ This is your chance to shine and set yourself apart from the pack.
+
+
+
+
+
+
+
+
5
+
+
Step Five
+
+ Passed the test? Congratulations ! You're in the company pool,
+ where opportunities await to advance your career further!
+
+
+
+
+
+
+
+
6
+
+
Step Six
+
+ Lights, camera, interview! It's your time to shine.
+ Show off your skills and make a lasting impression!
+
+
+
+
+
+
+
+
+ Bravo! You've secured your dream career! Get ready to dive into your exciting new role, and make a splash in the professional world!
+
+
+
+
+
+ >
+ )
+}
+
+export default Launchpad
\ No newline at end of file
diff --git a/src/Pages/Launchpad/Launchpad.module.css b/src/Pages/Launchpad/Launchpad.module.css
new file mode 100644
index 000000000..25c5ad5a0
--- /dev/null
+++ b/src/Pages/Launchpad/Launchpad.module.css
@@ -0,0 +1,248 @@
+.mainContainer {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: center;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+}
+
+a {
+ display: inline-block;
+ vertical-align: bottom;
+ white-space: nowrap;
+ max-width: 90%;
+
+ white-space: pre-wrap;
+ /* CSS3 */
+ white-space: -moz-pre-wrap;
+ /* Mozilla, since 1999 */
+ white-space: -pre-wrap;
+ /* Opera 4-6 */
+ white-space: -o-pre-wrap;
+ /* Opera 7 */
+ word-wrap: break-word;
+ /* Internet Explorer 5.5+ */
+}
+
+.steps_ulist {
+ list-style: disc;
+ margin-left: 1.5rem;
+ max-width: 50rem;
+}
+
+.sample_message a {
+ white-space: pre-wrap;
+ /* CSS3 */
+ white-space: -moz-pre-wrap;
+ /* Mozilla, since 1999 */
+ white-space: -pre-wrap;
+ /* Opera 4-6 */
+ white-space: -o-pre-wrap;
+ /* Opera 7 */
+ word-wrap: break-word;
+ /* Internet Explorer 5.5+ */
+}
+
+.steps_ulist img {
+ margin: 1rem 0 0;
+ border-radius: 0.3rem;
+}
+
+.first_view_container {
+ margin: 2rem;
+}
+
+.first_view {
+ display: flex;
+ flex-direction: column-reverse;
+ justify-content: space-evenly;
+ align-items: center;
+}
+
+.fv_img {
+ display: block;
+ width: 20rem;
+}
+
+.fv_heading {
+ font-size: 2.8rem;
+ font-weight: 700;
+ color: #404040;
+ font-family: "Noto Sans", sans-serif;
+ margin-bottom: 0.5rem;
+ text-align: center;
+}
+
+.fv_heading span {
+ color: #f6842c;
+}
+
+.fv_content,
+.fv_content_karma {
+ margin: 0.5rem auto 0;
+ font-family: "Poppins", sans-serif;
+ font-size: 1rem;
+ text-align: center;
+}
+
+.fv_content_karma {
+ color: #f6842c;
+ font-weight: 500;
+ font-size: 1.1rem;
+}
+
+.screenshots {
+ max-width: 50rem;
+ margin: 5rem auto 0;
+}
+
+.screenshots img {
+ margin-bottom: 3rem;
+ border-radius: 0.5rem;
+}
+
+.ss_title {
+ font-size: 1.2rem;
+ font-weight: 500;
+ margin-bottom: 1rem;
+}
+
+@media only screen and (min-width: 1000px) {
+ .first_view_container {
+ margin: 6rem;
+ }
+
+ .first_view {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .fv_heading {
+ font-size: 4.25rem;
+ }
+
+ .fv_content {
+ width: 80%;
+ font-size: 1.1rem;
+ }
+
+ .fv_img {
+ display: block;
+ width: 30rem;
+ }
+}
+
+/* Second Section Sytles */
+
+.second_view_container {
+ margin: 2rem;
+ margin-top: 4rem;
+}
+
+.sv_heading {
+ font-family: "Noto Sans", sans-serif;
+ font-size: 2rem;
+ font-weight: 700;
+ line-height: 2.75rem;
+ color: #f78c40;
+ text-align: center;
+}
+
+.sv_content {
+ margin-top: 0.25rem;
+ font-size: 0.9rem;
+}
+
+@media only screen and (min-width: 1000px) {
+ .second_view_container {
+ margin: 6rem;
+ }
+
+ .sv_heading {
+ font-size: 2.25rem;
+ line-height: 4rem;
+ }
+
+ .sv_content {
+ margin-top: 0;
+ font-size: 1.05rem;
+ width: 40%;
+ }
+}
+
+.steps {
+ margin-top: 1rem;
+}
+
+.steps_ulist_sub li {
+ margin-top: 0.5rem;
+}
+
+b {
+ color: #404040;
+}
+
+.steps_ulist li {
+ margin-top: 1rem;
+}
+
+.sample_container {
+ margin: 2rem auto 0;
+ background: #f5f5f5;
+ padding: 2rem;
+ border-radius: 0.2rem;
+ max-width: 50rem;
+}
+
+.callout {
+ margin: 2rem auto 0;
+ border: 1px solid #f78c4080;
+ padding: 2rem;
+ border-radius: 0.2rem;
+ max-width: 50rem;
+}
+
+.sample_header {
+ font-size: 1.1rem;
+ font-weight: 500;
+ color: #404040;
+}
+
+.sample_message {
+ margin: 0.5rem 0;
+}
+
+.sample_img {
+ margin-top: 1rem;
+ width: 20rem;
+ border-radius: 5px;
+}
+
+@media only screen and (min-width: 1000px) {
+
+ .sample_container,
+ .callout {
+ margin: 4rem auto 0;
+ }
+
+ .steps_ulist_sub li {
+ width: 45%;
+ }
+
+ .sample_message {
+ margin-top: 0;
+ font-size: 1.05rem;
+ }
+
+ .sample_img {
+ margin-top: 1rem;
+ width: 15rem;
+ border-radius: 5px;
+ }
+}
\ No newline at end of file
diff --git a/src/Pages/Launchpad/assets/steps/goal.svg b/src/Pages/Launchpad/assets/steps/goal.svg
new file mode 100644
index 000000000..83adbddc7
--- /dev/null
+++ b/src/Pages/Launchpad/assets/steps/goal.svg
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/Pages/Launchpad/assets/steps/intervieww.svg b/src/Pages/Launchpad/assets/steps/intervieww.svg
new file mode 100644
index 000000000..310378005
--- /dev/null
+++ b/src/Pages/Launchpad/assets/steps/intervieww.svg
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/Pages/Launchpad/assets/steps/medal.svg b/src/Pages/Launchpad/assets/steps/medal.svg
new file mode 100644
index 000000000..4e4ab9a7a
--- /dev/null
+++ b/src/Pages/Launchpad/assets/steps/medal.svg
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/Pages/Launchpad/assets/steps/reg.jpg b/src/Pages/Launchpad/assets/steps/reg.jpg
new file mode 100644
index 000000000..e3b557866
Binary files /dev/null and b/src/Pages/Launchpad/assets/steps/reg.jpg differ
diff --git a/src/Pages/Launchpad/assets/steps/reg.svg b/src/Pages/Launchpad/assets/steps/reg.svg
new file mode 100644
index 000000000..3f01aec6d
--- /dev/null
+++ b/src/Pages/Launchpad/assets/steps/reg.svg
@@ -0,0 +1,10 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/Pages/Launchpad/assets/steps/studentreg.png b/src/Pages/Launchpad/assets/steps/studentreg.png
new file mode 100644
index 000000000..45071d7ab
Binary files /dev/null and b/src/Pages/Launchpad/assets/steps/studentreg.png differ
diff --git a/src/Pages/Launchpad/assets/steps/team.webp b/src/Pages/Launchpad/assets/steps/team.webp
new file mode 100644
index 000000000..a68bad8d6
Binary files /dev/null and b/src/Pages/Launchpad/assets/steps/team.webp differ
diff --git a/src/Pages/Launchpad/assets/steps/test.svg b/src/Pages/Launchpad/assets/steps/test.svg
new file mode 100644
index 000000000..c9276a318
--- /dev/null
+++ b/src/Pages/Launchpad/assets/steps/test.svg
@@ -0,0 +1,82 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/Pages/Launchpad/steps.css b/src/Pages/Launchpad/steps.css
new file mode 100644
index 000000000..608ec2594
--- /dev/null
+++ b/src/Pages/Launchpad/steps.css
@@ -0,0 +1,505 @@
+* {
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+h2 {
+ margin: 5%;
+ text-align: center;
+ font-size: 2rem;
+ font-weight: 100;
+}
+
+.ktimeline {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ margin: 40px auto;
+ position: relative;
+}
+
+.ktimeline__event {
+ margin-bottom: 20px;
+ position: relative;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ margin: 20px 0;
+ border-radius: 6px;
+ -ms-flex-item-align: center;
+ align-self: center;
+ width: 50vw;
+}
+
+.ktimeline__event:nth-child(2n + 1) {
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: reverse;
+ -ms-flex-direction: row-reverse;
+ flex-direction: row-reverse;
+}
+
+.ktimeline__event:nth-child(2n + 1) .ktimeline__event__date {
+ border-radius: 0 6px 6px 0;
+}
+
+.ktimeline__event:nth-child(2n + 1) .ktimeline__event__content {
+ border-radius: 6px 0 0 6px;
+}
+
+.ktimeline__event:nth-child(2n + 1) .ktimeline__event__icon:before {
+ content: "";
+ width: 2px;
+ height: 100%;
+ background: #ffc773;
+ position: absolute;
+ top: 0%;
+ left: 50%;
+ right: auto;
+ z-index: -1;
+ -webkit-transform: translateX(-50%);
+ transform: translateX(-50%);
+ -webkit-animation: fillTop 2s forwards 2s ease-in-out;
+ animation: fillTop 2s forwards 2s ease-in-out;
+}
+
+.ktimeline__event:nth-child(2n + 1) .ktimeline__event__icon:after {
+ content: "";
+ width: 100%;
+ height: 2px;
+ background: #ffc773;
+ position: absolute;
+ right: 0;
+ z-index: -1;
+ top: 50%;
+ left: auto;
+ -webkit-transform: translateY(-50%);
+ transform: translateY(-50%);
+ -webkit-animation: fillLeft 2s forwards 2s ease-in-out;
+ animation: fillLeft 2s forwards 2s ease-in-out;
+}
+
+.ktimeline__event__title {
+ font-size: 1.2rem;
+ line-height: 1.4;
+ text-transform: uppercase;
+ font-weight: 600;
+ color: #fa8322;
+ letter-spacing: 1.5px;
+ margin-bottom: 0.5rem;
+}
+
+.ktimeline__event__content {
+ padding: 20px;
+ -webkit-box-shadow: 0 15px 30px -6px rgba(187, 187, 187, 0.25),
+ 0 9px 18px -9px rgba(0, 0, 0, 0.3), 0 -6px 18px -4px rgba(0, 0, 0, 0.025);
+ box-shadow: 0 15px 30px -6px rgba(187, 187, 187, 0.25),
+ 0 9px 18px -9px rgba(0, 0, 0, 0.3), 0 -6px 18px -4px rgba(0, 0, 0, 0.025);
+ background: #fff;
+ width: calc(40vw - 84px);
+ border-radius: 0 6px 6px 0;
+}
+
+.ktimeline__event__date {
+ color: #ffc773;
+ font-size: 2.5rem;
+ font-weight: 600;
+ background: #fa8322;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ white-space: nowrap;
+ padding: 0 3rem;
+ border-radius: 6px 0 0 6px;
+}
+
+.ktimeline__event__icon {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ color: #fa8322;
+ padding: 20px;
+ -ms-flex-item-align: center;
+ align-self: center;
+ margin: 0 20px;
+ background: #f8f8f8;
+ border-radius: 100%;
+ width: 40px;
+ -webkit-box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25),
+ 0 18px 36px -18px rgba(0, 0, 0, 0.3), 0 -12px 36px -8px rgba(0, 0, 0, 0.025);
+ box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25),
+ 0 18px 36px -18px rgba(0, 0, 0, 0.3), 0 -12px 36px -8px rgba(0, 0, 0, 0.025);
+ padding: 40px;
+ height: 40px;
+ position: relative;
+}
+
+.ktimeline__event__icon i {
+ font-size: 32px;
+}
+
+.ktimeline__event__icon img {
+ width: 2.5rem;
+ position: absolute;
+ height: auto;
+ height: 2.5rem;
+ opacity: 0.6;
+}
+
+.ktimeline__event__icon:before {
+ content: "";
+ width: 2px;
+ height: 100%;
+ background: #f8f8f8;
+ position: absolute;
+ top: 0%;
+ z-index: -1;
+ left: 50%;
+ -webkit-transform: translateX(-50%);
+ transform: translateX(-50%);
+ -webkit-animation: fillTop 2s forwards 2s ease-in-out;
+ animation: fillTop 2s forwards 2s ease-in-out;
+}
+
+.ktimeline__event__icon:after {
+ content: "";
+ width: 100%;
+ height: 2px;
+ background: #f8f8f8;
+ position: absolute;
+ left: 0%;
+ z-index: -1;
+ top: 50%;
+ -webkit-transform: translateY(-50%);
+ transform: translateY(-50%);
+ -webkit-animation: fillLeftOdd 2s forwards 2s ease-in-out;
+ animation: fillLeftOdd 2s forwards 2s ease-in-out;
+}
+
+.ktimeline__event__description {
+ -ms-flex-preferred-size: 60%;
+ flex-basis: 60%;
+}
+
+.ktimeline__event__description a {
+ white-space: pre-wrap;
+ /* CSS3 */
+ white-space: -moz-pre-wrap;
+ /* Mozilla, since 1999 */
+ white-space: -pre-wrap;
+ /* Opera 4-6 */
+ white-space: -o-pre-wrap;
+ /* Opera 7 */
+ word-wrap: break-word;
+ /* Internet Explorer 5.5+ */
+}
+
+.ktimeline__event--type2:after {
+ background: #43d0fc;
+}
+
+.ktimeline__event--type2 .ktimeline__event__date {
+ color: rgb(250, 251, 252);
+ background: #43d0fc;
+}
+
+.ktimeline__event--type2:nth-child(2n + 1) .ktimeline__event__icon:before,
+.ktimeline__event--type2:nth-child(2n + 1) .ktimeline__event__icon:after {
+ background: #87bbfe;
+}
+
+.ktimeline__event--type2 .ktimeline__event__icon {
+ background: #f8f8f8;
+ color: #43d0fc;
+}
+
+.ktimeline__event--type2 .ktimeline__event__icon:before,
+.ktimeline__event--type2 .ktimeline__event__icon:after {
+ background: #87bbfe;
+}
+
+.ktimeline__event--type2 .ktimeline__event__title {
+ color: #43d0fc;
+}
+
+.ktimeline__event--type3:after {
+ background: #24b47e;
+}
+
+.ktimeline__event--type3 .ktimeline__event__date {
+ color: #ffffff;
+ background-color: #24b47e;
+}
+
+.ktimeline__event--type3:nth-child(2n + 1) .ktimeline__event__icon:before,
+.ktimeline__event--type3:nth-child(2n + 1) .ktimeline__event__icon:after {
+ background: #aff1b6;
+}
+
+.ktimeline__event--type3 .ktimeline__event__icon {
+ background: #f8f8f8;
+ color: #24b47e;
+}
+
+.ktimeline__event--type3 .ktimeline__event__icon:before,
+.ktimeline__event--type3 .ktimeline__event__icon:after {
+ background: #aff1b6;
+}
+
+.ktimeline__event--type3 .ktimeline__event__title {
+ color: #24b47e;
+}
+
+.ktimeline__event--type4:after {
+ background: #606060;
+}
+
+.ktimeline__event--type4 .ktimeline__event__date {
+ color: #fff;
+ background-color: #606060;
+}
+
+.ktimeline__event--type4:nth-child(2n + 1) .ktimeline__event__icon:before,
+.ktimeline__event--type4:nth-child(2n + 1) .ktimeline__event__icon:after {
+ background: #828282;
+}
+
+.ktimeline__event--type4 .ktimeline__event__icon {
+ background: #f8f8f8;
+ color: #ffff;
+}
+
+.ktimeline__event--type4 .ktimeline__event__icon:before,
+.ktimeline__event--type4 .ktimeline__event__icon:after {
+ background: #828282;
+}
+
+.ktimeline__event--type4 .ktimeline__event__title {
+ color: #606060;
+}
+
+.ktimeline__event:last-child .ktimeline__event__icon:before {
+ content: none;
+}
+
+.ktimeline__event--type5 .ktimeline__event__date {
+ color: #ffffff;
+ background-color: #f0db4f;
+}
+
+.ktimeline__event--type5.ktimeline__event--type4 {
+ background: #f0db4f;
+}
+
+.ktimeline__event--type5:nth-child(2n + 1) .ktimeline__event__icon:before,
+.ktimeline__event--type5:nth-child(2n + 1) .ktimeline__event__icon:after {
+ background: #fced8b;
+}
+
+.ktimeline__event--type5 .ktimeline__event__icon {
+ background: #ffffff;
+ color: #f0db4f;
+}
+
+.ktimeline__event--type5 .ktimeline__event__icon:before,
+.ktimeline__event--type5 .ktimeline__event__icon:after {
+ background: #fced8b;
+}
+
+.ktimeline__event--type5 .ktimeline__event__title {
+ color: #f0db4f;
+}
+
+.ktimeline__event--type6 .ktimeline__event__date {
+ color: #ffffff;
+ background-color: #35a898;
+}
+
+.ktimeline__event--type6.ktimeline__event--type4 {
+ background: #35a898;
+}
+
+.ktimeline__event--type6:nth-child(2n + 1) .ktimeline__event__icon:before,
+.ktimeline__event--type6:nth-child(2n + 1) .ktimeline__event__icon:after {
+ background: #35a898;
+}
+
+.ktimeline__event--type6 .ktimeline__event__icon {
+ background: #ffffff;
+ color: #35a898;
+}
+
+.ktimeline__event--type6 .ktimeline__event__icon:before,
+.ktimeline__event--type6 .ktimeline__event__icon:after {
+ background: #35a898;
+}
+
+.ktimeline__event--type6 .ktimeline__event__title {
+ color: #35a898;
+}
+
+@media (max-width: 786px) {
+ .ktimeline__event {
+ width: 100%;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -ms-flex-item-align: center;
+ -ms-grid-row-align: center;
+ align-self: center;
+ }
+
+ .ktimeline__event__content {
+ width: 100%;
+ }
+
+ .ktimeline__event__icon {
+ border-radius: 6px 6px 0 0;
+ width: 100%;
+ margin: 0;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ }
+
+ .ktimeline__event__icon:before,
+ .ktimeline__event__icon:after {
+ display: none;
+ }
+
+ .ktimeline__event__date {
+ display: none;
+ border-radius: 0;
+ text-align: center;
+ padding: 20px;
+ }
+
+ .ktimeline__event:nth-child(2n + 1) {
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -ms-flex-item-align: center;
+ -ms-grid-row-align: center;
+ align-self: center;
+ }
+
+ .ktimeline__event:nth-child(2n + 1) .ktimeline__event__date {
+ border-radius: 0;
+ padding: 20px;
+ }
+
+ .ktimeline__event:nth-child(2n + 1) .ktimeline__event__icon {
+ border-radius: 6px 6px 0 0;
+ margin: 0;
+ }
+}
+
+@-webkit-keyframes fillLeft {
+ 100% {
+ right: 100%;
+ }
+}
+
+@keyframes fillLeft {
+ 100% {
+ right: 100%;
+ }
+}
+
+@-webkit-keyframes fillTop {
+ 100% {
+ top: 100%;
+ }
+}
+
+@keyframes fillTop {
+ 100% {
+ top: 100%;
+ }
+}
+
+@-webkit-keyframes fillLeftOdd {
+ 100% {
+ left: 100%;
+ }
+}
+
+@keyframes fillLeftOdd {
+ 100% {
+ left: 100%;
+ }
+}
+
+/* ktimeline Styles */
+.lni-cake {
+ width: 4rem;
+}
+
+.third-section {
+ margin: 7vh 0;
+ /* margin-bottom: 15vh; */
+}
+
+.tsheading {
+ text-align: center;
+ color: #404040;
+ font-size: 2.1rem;
+ font-weight: 600;
+}
+
+@media only screen and (min-width: 1000px) {
+ .tsheading {
+ font-size: 3rem;
+ margin-bottom: 4vh;
+ }
+}
+
+.inputfield {
+ margin-top: 2rem;
+ width: 20rem;
+ padding: 0.4rem 2.25rem;
+}
+
+.submit-btn {
+ background-color: #f6832a;
+ color: white;
+ border: none;
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+ border-radius: 5px;
+ padding: 0.45rem 2.25rem;
+}
+
+@media only screen and (min-width: 1000px) {
+ .inputfield {
+ margin-top: 2rem;
+ width: 20rem;
+ padding: 0.4rem 2.25rem;
+ border-width: unset;
+ }
+
+ .submit-btn {
+ background-color: #f6832a;
+ color: white;
+ border: none;
+ border-radius: 5px;
+ padding: 0.45rem 2.25rem;
+ margin: 0px 10px;
+ }
+}
\ No newline at end of file
diff --git a/src/Pages/Launchpad/steps.css.map b/src/Pages/Launchpad/steps.css.map
new file mode 100644
index 000000000..fa39f72ee
--- /dev/null
+++ b/src/Pages/Launchpad/steps.css.map
@@ -0,0 +1,9 @@
+{
+ "version": 3,
+ "mappings": "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",
+ "sources": [
+ "steps.scss"
+ ],
+ "names": [],
+ "file": "steps.css"
+}
\ No newline at end of file
diff --git a/src/Pages/Launchpad/steps.scss b/src/Pages/Launchpad/steps.scss
new file mode 100644
index 000000000..3338a5a20
--- /dev/null
+++ b/src/Pages/Launchpad/steps.scss
@@ -0,0 +1,332 @@
+@import "~bootstrap/scss/bootstrap";
+
+
+$content-width: calc(40vw - 84px);
+$margin: 20px;
+$spacing: 20px;
+$bdrs: 6px;
+$circle-size: 40px;
+$icon-size: 32px;
+$bdrs-icon: 100%;
+
+$color1: #fa8322;
+$color2: #ffc773;
+
+$color3: #87bbfe;
+$color4: #555ac0;
+
+$color5: #24b47e;
+$color6: #aff1b6;
+
+* {
+ box-sizing: border-box;
+}
+
+html {
+ font-size: 14px;
+}
+
+body {
+ background: #f6f9fc;
+ font-family: "Open Sans", sans-serif;
+ color: #525f7f;
+}
+
+h2 {
+ margin: 5%;
+ text-align: center;
+ font-size: 2rem;
+ font-weight: 100;
+}
+
+.timeline {
+ display: flex;
+ flex-direction: column;
+ margin: $margin auto;
+ position: relative;
+
+ &__event {
+ margin-bottom: $spacing;
+ position: relative;
+ display: flex;
+ margin: $spacing 0;
+ border-radius: $bdrs;
+ align-self: center;
+ width: 50vw;
+
+ &:nth-child(2n + 1) {
+ flex-direction: row-reverse;
+
+ .timeline__event__date {
+ border-radius: 0 $bdrs $bdrs 0;
+ }
+
+ .timeline__event__content {
+ border-radius: $bdrs 0 0 $bdrs;
+ }
+
+ .timeline__event__icon {
+ &:before {
+ content: "";
+ width: 2px;
+ height: 100%;
+ background: $color2;
+ position: absolute;
+ top: 0%;
+ left: 50%;
+ right: auto;
+ z-index: -1;
+ transform: translateX(-50%);
+ animation: fillTop 2s forwards 4s ease-in-out;
+ }
+
+ &:after {
+ content: "";
+ width: 100%;
+ height: 2px;
+ background: $color2;
+ position: absolute;
+ right: 0;
+ z-index: -1;
+ top: 50%;
+ left: auto;
+ transform: translateY(-50%);
+ animation: fillLeft 2s forwards 4s ease-in-out;
+ }
+ }
+ }
+
+ &__title {
+ font-size: 1.2rem;
+ line-height: 1.4;
+ text-transform: uppercase;
+
+ font-weight: 600;
+ color: $color1;
+ letter-spacing: 1.5px;
+ }
+
+ &__content {
+ padding: $spacing;
+ box-shadow: 0 15px 30px -6px rgba(187, 187, 187, 0.25),
+ 0 9px 18px -9px rgba(0, 0, 0, 0.3),
+ 0 -6px 18px -4px rgba(0, 0, 0, 0.025);
+ background: #fff;
+ width: $content-width;
+ border-radius: 0 $bdrs $bdrs 0;
+ }
+
+ &__date {
+ color: $color2;
+ font-size: 1.5rem;
+ font-weight: 600;
+ background: $color1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ white-space: nowrap;
+ padding: 0 $spacing;
+ border-radius: $bdrs 0 0 $bdrs;
+ }
+
+ &__icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: $color1;
+ padding: $spacing;
+ align-self: center;
+ margin: 0 $spacing;
+ background: $color2;
+ border-radius: $bdrs-icon;
+ width: $circle-size;
+ box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25),
+ 0 18px 36px -18px rgba(0, 0, 0, 0.3),
+ 0 -12px 36px -8px rgba(0, 0, 0, 0.025);
+ padding: 40px;
+ height: $circle-size;
+ position: relative;
+
+ i {
+ font-size: $icon-size;
+ }
+
+ &:before {
+ content: "";
+ width: 2px;
+ height: 100%;
+ background: $color2;
+ position: absolute;
+ top: 0%;
+ z-index: -1;
+ left: 50%;
+ transform: translateX(-50%);
+ animation: fillTop 2s forwards 4s ease-in-out;
+ }
+
+ &:after {
+ content: "";
+ width: 100%;
+ height: 2px;
+ background: $color2;
+ position: absolute;
+ left: 0%;
+ z-index: -1;
+ top: 50%;
+ transform: translateY(-50%);
+ animation: fillLeftOdd 2s forwards 4s ease-in-out;
+ }
+ }
+
+ &__description {
+ flex-basis: 60%;
+ }
+
+ &--type2 {
+ &:after {
+ background: $color4;
+ }
+
+ .timeline__event__date {
+ color: $color3;
+ background: $color4;
+ }
+
+ &:nth-child(2n + 1) {
+ .timeline__event__icon {
+
+ &:before,
+ &:after {
+ background: $color3;
+ }
+ }
+ }
+
+
+ .timeline__event__icon {
+ background: $color3;
+ color: $color4;
+
+ &:before,
+ &:after {
+ background: $color3;
+ }
+ }
+
+ .timeline__event__title {
+ color: $color4;
+ }
+
+ // .timeline__event__title {}
+ }
+
+ &--type3 {
+ &:after {
+ background: $color5;
+ }
+
+ .timeline__event__date {
+ color: $color6;
+ background-color: $color5;
+ }
+
+ &:nth-child(2n + 1) {
+ .timeline__event__icon {
+
+ &:before,
+ &:after {
+ background: $color6;
+ }
+ }
+ }
+
+ .timeline__event__icon {
+ background: $color6;
+ color: $color5;
+
+ &:before,
+ &:after {
+ background: $color6;
+ }
+ }
+
+ .timeline__event__title {
+ color: $color5;
+ }
+
+ // .timeline__event__title {}
+ }
+
+ &:last-child {
+ .timeline__event__icon {
+ &:before {
+ content: none;
+ }
+ }
+ }
+ }
+}
+
+@media (max-width: 786px) {
+ .timeline__event {
+ width: 65vw;
+ flex-direction: column;
+ align-self: center;
+
+ &__content {
+ width: 100%;
+ }
+
+ &__icon {
+ border-radius: $bdrs $bdrs 0 0;
+ width: 100%;
+ margin: 0;
+ box-shadow: none;
+
+ &:before,
+ &:after {
+ display: none;
+ }
+ }
+
+ &__date {
+ border-radius: 0;
+ text-align: center;
+ padding: $spacing;
+ }
+
+ &:nth-child(2n + 1) {
+ flex-direction: column;
+ align-self: center;
+
+ .timeline__event__date {
+ border-radius: 0;
+ padding: $spacing;
+ }
+
+ .timeline__event__icon {
+ border-radius: $bdrs $bdrs 0 0;
+ margin: 0;
+ }
+ }
+ }
+}
+
+@keyframes fillLeft {
+ 100% {
+ right: 100%;
+ }
+}
+
+@keyframes fillTop {
+ 100% {
+ top: 100%;
+ }
+}
+
+@keyframes fillLeftOdd {
+ 100% {
+ left: 100%;
+ }
+}
\ No newline at end of file