diff --git a/src/components/AboutIITKGP/AboutIITKGP.js b/src/components/AboutIITKGP/AboutIITKGP.js
index d87f7f7..00e2356 100644
--- a/src/components/AboutIITKGP/AboutIITKGP.js
+++ b/src/components/AboutIITKGP/AboutIITKGP.js
@@ -1,10 +1,30 @@
import React from 'react'
+import Classes from './AboutIITKGP.module.css';
+import iitkgpLogo from '../../images/iitkgplogo.png';
function AboutIITKGP() {
return (
-
- About IIT KGP
+ <>
+
+
+
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac felis eget odio porta laoreet. Etiam at elit sed mauris congue malesuada nec id augue. Ut eu metus non libero volutpat lacinia. Maecenas urna erat, posuere sed gravida at, posuere eget nisl. Nulla non nisi neque. Maecenas auctor suscipit efficitur. Pellentesque eu urna sagittis, mattis dolor vel, ultricies urna. Nulla volutpat interdum lorem non venenatis. Nam nec vehicula sem, eget placerat nulla.In porttitor mollis risus, vel sollicitudin elit congue id. Maecenas varius felis nec felis suscipit, eget laoreet mauris semper. Nulla ut lectus neque. Sed vel posuere purus. Pellentesque at vestibulum ante. Nam commodo libero a mi pellentesque, eu rhoncus sem mollis.
+ Proin efficitur sodales tellus, blandit volutpat felis consequat venenatis. Nulla rhoncus ex at nisl facilisis semper. Nam sit amet leo nunc. Sed aliquet nibh id porta lobortis. Donec tellus velit, blandit quis sapien quis, efficitur commodo velit. Cras metus sapien, rhoncus vel neque id, rhoncus tempus tellus. Vestibulum
+
+
+
+ >
)
}
diff --git a/src/components/AboutIITKGP/AboutIITKGP.module.css b/src/components/AboutIITKGP/AboutIITKGP.module.css
new file mode 100644
index 0000000..b1826f1
--- /dev/null
+++ b/src/components/AboutIITKGP/AboutIITKGP.module.css
@@ -0,0 +1,92 @@
+.container{
+ display: flex;
+ flex-direction: column;
+ justify-content: space-evenly;
+ align-items: center;
+ background-color: hsl(246, 89%, 7%);
+ overflow-x: hidden;
+}
+
+.infoBox{
+ position: relative;
+ background-image: linear-gradient(rgba(7, 34, 85, 0.8),rgba(7, 34, 85, 0.8)),url(../../images//aboutiitkgp.png);
+ background-repeat: no-repeat;
+ background-size: 100%;
+ border: 1px solid rgba(0, 0, 0, 1);
+ -webkit-clip-path: polygon(0 8%, 44% 8%, 49% 0, 54% 8%, 100% 8%, 100% 100%, 0 100%);
+ clip-path: polygon(0 8%, 44% 8%, 49% 0, 54% 8%, 100% 8%, 100% 100%, 0 100%);
+ box-sizing: border-box;
+ box-shadow: 0px 4px 100px rgba(146, 235, 255, 0.25) outset;
+}
+
+.logoBox{
+ margin-top:10rem;
+ width:100vw;
+ height: 8rem;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-around;
+ align-items: center;
+}
+.logo{
+ width:7rem;
+ height: 7rem;
+}
+
+.content{
+ color:white;
+ font-size:1.2rem;
+ font-weight: 400;
+ margin: 2rem 15rem 2rem 15rem;
+ line-height:2rem;
+
+}
+.buttonContainer{
+ width:100vw;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-around;
+ align-items: center;
+ margin-top: 4.5rem;
+ margin-bottom: 4.5rem;
+}
+
+.button{
+ color:white;
+ background-color: #2CBED0;
+ font-size: 1.5rem;
+ font-weight: 500;
+ padding:0.6rem 4rem 0.6rem 4rem;
+ border-radius: 1rem;
+ -webkit-border-radius: 1rem;
+ -moz-border-radius: 1rem;
+ -ms-border-radius: 1rem;
+ -o-border-radius: 1rem;
+ cursor: pointer;
+}
+
+@media screen and (max-width:900px) {
+
+ .infoBox{
+ position: relative;
+ background-image: linear-gradient(rgba(7, 34, 85, 0.8),rgba(7, 34, 85, 0.8)),url(../../images//aboutiitkgp.png);
+ background-repeat: no-repeat;
+ background-size: cover;
+ border: 1px solid rgba(0, 0, 0, 1);
+ -webkit-clip-path: polygon(0 8%, 44% 8%, 49% 0, 54% 8%, 100% 8%, 100% 100%, 0 100%);
+ clip-path: polygon(0 4%, 35% 4%, 50% 0, 65% 4%, 100% 4%, 100% 100%, 0 100%);
+ box-sizing: border-box;
+ box-shadow: 0px 4px 100px rgba(146, 235, 255, 0.25) outset;
+ }
+
+ .content{
+ color:white;
+ font-size:1.2rem;
+ font-weight: 400;
+ margin: 2rem 2rem 2rem 2rem;
+ line-height:2rem;
+
+ }
+
+
+}
diff --git a/src/components/AboutTechMeet/AboutTechMeet.js b/src/components/AboutTechMeet/AboutTechMeet.js
index 335e65d..9f6f88a 100644
--- a/src/components/AboutTechMeet/AboutTechMeet.js
+++ b/src/components/AboutTechMeet/AboutTechMeet.js
@@ -1,10 +1,36 @@
import React from 'react'
+import Classes from './AboutTechMeet.module.css';
+import logo from '../../images/logo-about.png';
function AboutTechMeet() {
return (
-
- About Tech Meet
-
+ <>
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac felis eget odio porta laoreet. Etiam at elit sed mauris congue malesuada nec id augue. Ut eu metus non libero volutpat lacinia. Maecenas urna erat, posuere sed gravida at, posuere eget nisl. Nulla non nisi neque. Maecenas auctor suscipit efficitur. Pellentesque eu urna sagittis, mattis dolor vel, ultricies urna. Nulla volutpat interdum lorem non venenatis. Nam nec vehicula sem, eget placerat nulla.In porttitor mollis risus, vel sollicitudin elit congue id. Maecenas varius felis nec felis suscipit, eget laoreet mauris semper. Nulla ut lectus neque. Sed vel posuere purus. Pellentesque at vestibulum ante. Nam commodo libero a mi pellentesque, eu rhoncus sem mollis.
+ Proin efficitur sodales tellus, blandit volutpat felis consequat venenatis. Nulla rhoncus ex at nisl facilisis semper. Nam sit amet leo nunc. Sed aliquet nibh id porta lobortis. Donec tellus velit, blandit quis sapien quis, efficitur commodo velit. Cras metus sapien, rhoncus vel neque id, rhoncus tempus tellus. Vestibulum consequat ultricies sem.
+
+ Vestibulum massa lorem, congue sed massa eleifend, maximus bibendum eros. Nulla facilisi. Praesent suscipit, eros vel feugiat luctus, arcu augue facilisis dolor, ac tempor purus mauris eu magna. Aenean blandit felis imperdiet ex suscipit, a tempor magna tincidunt. Nam id justo pharetra sapien malesuada fringilla eget at orci. Etiam ac tempus felis. Nulla placerat eu ligula sit amet vehicula. Sed viverra dui vel mi venenatis euismod.
+
+ Morbi egestas gravida bibendum. Vivamus consequat gravida mi, id ornare eros congue et. Donec quis risus eu ante eleifend tempor. Morbi sit amet orci id risus bibendum imperdiet eu at leo. Aliquam erat volutpat. Aenean sagittis fringilla sodales. Donec suscipit volutpat lacinia. Nunc vel fermentum ex.
+
+
+
+ OUR VISION
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac felis eget odio porta laoreet. Etiam at elit sed mauris congue malesuada nec id augue. Ut eu metus non libero volutpat lacinia. Maecenas urna erat, posuere sed gravida at, posuere eget nisl. Nulla non nisi neque. Maecenas auctor suscipit efficitur. Pellentesque eu urna sagittis, mattis dolor vel, ultricies urna. Nulla volutpat interdum lorem non venenatis. Nam nec vehicula sem, eget placerat nulla.In porttitor mollis risus, vel sollicitudin elit congue id. Maecenas varius felis nec felis suscipit, eget laoreet mauris semper. Nulla ut lectus neque. Sed vel posuere purus. Pellentesque at vestibulum ante. Nam commodo libero a mi pellentesque, eu rhoncus sem mollis.
+ Proin efficitur sodales tellus, blandit volutpat felis consequat venenatis. Nulla rhoncus ex at nisl facilisis semper. Nam sit amet leo nunc. Sed aliquet nibh id porta lobortis. Donec tellus velit, blandit quis sapien quis, efficitur commodo velit. Cras metus sapien, rhoncus vel neque id, rhoncus tempus tellus. Vestibulum consequat ultricies sem.
+
+
+
+
+
+ >
)
}
diff --git a/src/components/AboutTechMeet/AboutTechMeet.module.css b/src/components/AboutTechMeet/AboutTechMeet.module.css
new file mode 100644
index 0000000..fb1a573
--- /dev/null
+++ b/src/components/AboutTechMeet/AboutTechMeet.module.css
@@ -0,0 +1,62 @@
+.container{
+ display: flex;
+ flex-direction: column;
+ justify-content: space-evenly;
+ align-items: center;
+ background-color: hsl(246, 89%, 7%);
+ overflow-x: hidden;
+}
+
+.info1{
+ -webkit-clip-path: polygon(10% 0, 20% 11%, 100% 11%, 100% 100%, 0 100%, 0 11%);
+ clip-path: polygon(10% 0, 20% 11%, 100% 11%, 100% 100%, 0 100%, 0 11%);
+ width: 50%;
+ color: white;
+ padding: 10rem 5rem 1rem 5rem;
+ background-image: linear-gradient(179.89deg, rgba(9, 54, 103, 0.11) 0.01%, rgba(140, 213, 255, 0.11) 9.06%, rgba(161, 201, 242, 0.0253) 62.23%, rgba(9, 32, 79, 0) 95.34%);;
+ line-height: 2.3rem;
+}
+
+.title{
+ text-align: center;
+ font-size: 3.5rem;
+ font-weight: 700;
+ text-shadow: 0px 4px 4px #153A82;
+ color: #C4C4C4;
+ margin-top: 4rem;
+}
+
+.imgbox{
+ margin-bottom: 3rem;
+}
+
+.info2{
+ width: 50%;
+ color: white;
+ padding: 5rem 5rem 1rem 5rem;
+ background-image: linear-gradient(179.89deg, rgba(9, 54, 103, 0.11) 0.01%, rgba(140, 213, 255, 0.11) 9.06%, rgba(161, 201, 242, 0.0253) 62.23%, rgba(9, 32, 79, 0) 95.34%);;
+ line-height: 2.3rem;
+ margin-bottom: 4rem;
+}
+
+@media screen and (max-width:900px) {
+
+ .info1{
+ -webkit-clip-path: polygon(15% 0, 30% 4%, 100% 4%, 100% 100%, 0 100%, 0 4%);
+ clip-path: polygon(15% 0, 30% 4%, 100% 4%, 100% 100%, 0 100%, 0 4%);
+ width: 80%;
+ color: white;
+ padding: 7rem 1rem 1rem 1rem;
+ background-image: linear-gradient(179.89deg, rgba(9, 54, 103, 0.11) 0.01%, rgba(140, 213, 255, 0.11) 9.06%, rgba(161, 201, 242, 0.0253) 62.23%, rgba(9, 32, 79, 0) 95.34%);;
+ line-height: 2.3rem;
+ }
+
+ .info2{
+ width: 80%;
+ color: white;
+ padding: 3rem 1rem 1rem 1rem;
+ background-image: linear-gradient(179.89deg, rgba(9, 54, 103, 0.11) 0.01%, rgba(140, 213, 255, 0.11) 9.06%, rgba(161, 201, 242, 0.0253) 62.23%, rgba(9, 32, 79, 0) 95.34%);;
+ line-height: 2.3rem;
+ margin-bottom: 4rem;
+ }
+}
diff --git a/src/components/AboutUs/AboutUs.module.css b/src/components/AboutUs/AboutUs.module.css
index 6a6f39f..ac0b6f3 100644
--- a/src/components/AboutUs/AboutUs.module.css
+++ b/src/components/AboutUs/AboutUs.module.css
@@ -54,9 +54,38 @@
height: 2rem;
padding:0 1.5rem 1rem 1.5rem;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 90% 100% ,10% 100%);
- clip-path: polygon();
+ clip-path: polygon(0% 0%, 100% 0%, 90% 100% ,10% 100%);
background: linear-gradient(360deg, rgba(9, 77, 140, 0.98) 0%, rgba(10, 28, 45, 0) 77.52%, rgba(7, 32, 54, 0) 80.19%, rgba(6, 29, 50, 0) 115.99%, rgba(11, 26, 39, 0) 171.83%);
}
+@media screen and (max-width:900px) {
+
+ .navbar{
+ width:90%;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-evenly;
+ padding: 2rem;
+ }
+ .navItem{
+ color:white;
+ font-size: 0.9rem;
+ font-weight: 500;
+ cursor: pointer;
+ }
+
+ .highlight{
+ color:#2CBED0;
+ font-size: 0.9rem;
+ font-weight: 500;
+ cursor: pointer;
+
+ height: 2rem;
+ padding:0 1.5rem 1rem 1.5rem;
+ -webkit-clip-path: polygon(0% 0%, 100% 0%, 90% 100% ,10% 100%);
+ clip-path: polygon(0% 0%, 100% 0%, 90% 100% ,10% 100%);
+ background: linear-gradient(360deg, rgba(9, 77, 140, 0.98) 0%, rgba(10, 28, 45, 0) 77.52%, rgba(7, 32, 54, 0) 80.19%, rgba(6, 29, 50, 0) 115.99%, rgba(11, 26, 39, 0) 171.83%);
+ }
+}
diff --git a/src/components/NavBar/NavBar.css b/src/components/NavBar/NavBar.css
index 24e2878..d538437 100644
--- a/src/components/NavBar/NavBar.css
+++ b/src/components/NavBar/NavBar.css
@@ -20,3 +20,8 @@
.bg-dark {
background-color: rgb(0, 1, 3) !important;
}
+
+.navitem{
+ margin: 1rem 3rem 1rem 3rem;
+
+}
diff --git a/src/components/NavBar/NavBar.js b/src/components/NavBar/NavBar.js
index 7f4682c..2cf5f22 100644
--- a/src/components/NavBar/NavBar.js
+++ b/src/components/NavBar/NavBar.js
@@ -50,9 +50,8 @@ export default function NavBar() {
className="justify-content-end navrouterlinks"
style={{ width: "100%" }}
>
-
Home
-
About
-
Events
+
AboutUs
+
Events
diff --git a/src/components/WinnersTimeline/WinnersTimeline.js b/src/components/WinnersTimeline/WinnersTimeline.js
index c2522e1..017fb31 100644
--- a/src/components/WinnersTimeline/WinnersTimeline.js
+++ b/src/components/WinnersTimeline/WinnersTimeline.js
@@ -1,10 +1,37 @@
import React from 'react'
+import Classes from './WinnersTimeline.module.css';
function WinnersTimeline() {
return (
-
- Winners Timeline
+ <>
+
+ >
+ )
+}
+
+const YearWinners =({year}) =>{
+ return (
+
+
{Math.floor(year/10)}{year%10}
+
+
+ {/*
*/}
+
+
+ {/*
*/}
+
+
+ {/*
*/}
+
+
+
)
}
diff --git a/src/components/WinnersTimeline/WinnersTimeline.module.css b/src/components/WinnersTimeline/WinnersTimeline.module.css
new file mode 100644
index 0000000..618fc8f
--- /dev/null
+++ b/src/components/WinnersTimeline/WinnersTimeline.module.css
@@ -0,0 +1,105 @@
+.container{
+ display: flex;
+ flex-direction: column;
+ justify-content: space-evenly;
+ align-items: center;
+ background-color: hsl(246, 89%, 7%);
+}
+
+.timeline{
+ -webkit-clip-path: polygon(0 9%, 83% 10%, 91% 0, 100% 10%, 100% 100%, 0 100%);
+ clip-path: polygon(0 9%, 80% 9%, 90% 0, 100% 9%, 100% 100%, 0 100%);
+ width: 50%;
+ padding: 6rem 5rem 1rem 5rem;
+ background-image: linear-gradient(179.89deg, rgba(9, 54, 103, 0.11) 0.01%, rgba(140, 213, 255, 0.11) 9.06%, rgba(161, 201, 242, 0.0253) 62.23%, rgba(9, 32, 79, 0) 95.34%);;
+ margin-bottom: 2rem;;
+}
+
+.winnersList{
+ display: flex;
+ flex-direction: row;
+ border-bottom: 1px solid lightblue;
+ padding:2rem;
+}
+
+.year {
+ font-size: 3.2rem;
+ font-weight: 700;
+ color: white;
+ padding: 2.2rem;
+ flex: 1;
+ color:#2CBED0;
+}
+.gradient{
+ color:white;
+}
+
+.winnerBox{
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ flex:1;
+}
+
+.imgbox{
+ width:5rem;
+ height:5rem;
+ background-color: rgba(196, 196, 196, 0.35);
+ border-radius: 50%;
+ -webkit-border-radius: 50%;
+ -moz-border-radius: 50%;
+ -ms-border-radius: 50%;
+ -o-border-radius: 50%;
+ margin: 1rem;
+}
+
+@media screen and (max-width:900px) {
+
+ .timeline{
+ -webkit-clip-path: polygon(0 9%, 83% 10%, 91% 0, 100% 10%, 100% 100%, 0 100%);
+ clip-path: polygon(0 9%, 80% 9%, 90% 0, 100% 9%, 100% 100%, 0 100%);
+ width: 55%;
+ padding: 5rem 5rem 1rem 2rem;
+ background-image: linear-gradient(179.89deg, rgba(9, 54, 103, 0.11) 0.01%, rgba(140, 213, 255, 0.11) 9.06%, rgba(161, 201, 242, 0.0253) 62.23%, rgba(9, 32, 79, 0) 95.34%);;
+ margin-bottom: 2rem;;
+ }
+
+ .year{
+ font-size: 1.5rem;
+ font-weight: 700;
+ color: white;
+ padding: 1rem;
+ flex: 0.5;
+ color:#2CBED0;
+ }
+
+ .imgbox{
+ width:2.5rem;
+ height:2.5rem;
+ background-color: rgba(196, 196, 196, 0.35);
+ border-radius: 50%;
+ -webkit-border-radius: 50%;
+ -moz-border-radius: 50%;
+ -ms-border-radius: 50%;
+ -o-border-radius: 50%;
+ margin: 0.5rem;
+ }
+
+ .winnerBox{
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ flex:2;
+ }
+
+ .winnersList{
+ display: flex;
+ flex-direction: row;
+ border-bottom: 1px solid lightblue;
+ padding:2rem 1rem 2rem 0.5rem;
+ }
+
+
+}
\ No newline at end of file
diff --git a/src/images/aboutiitkgp.png b/src/images/aboutiitkgp.png
new file mode 100644
index 0000000..25a3d3a
Binary files /dev/null and b/src/images/aboutiitkgp.png differ
diff --git a/src/images/iitkgplogo.png b/src/images/iitkgplogo.png
new file mode 100644
index 0000000..c37d001
Binary files /dev/null and b/src/images/iitkgplogo.png differ
diff --git a/src/images/logo-about.png b/src/images/logo-about.png
new file mode 100644
index 0000000..7c57683
Binary files /dev/null and b/src/images/logo-about.png differ