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 + <> +
+
+
+
+ IIT KGP Logo +
+
+ +
+ 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 +
+
+
+ Learn More +
+
+
+ ) } 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 +
+
+ {'Logo +
+
+
+ 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