Completing About Us

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 (
- <div>
- About IIT KGP
+ <>
+ <div className={Classes.container}>
+ <div className={Classes.infoBox}>
+ <div className={Classes.logoBox}>
+ <div className={Classes.logo}>
+ <img src={iitkgpLogo} alt="IIT KGP Logo" className={Classes.logo} />
+ </div>
+ </div>
+
+ <div className={Classes.content}>
+ 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 
+ </div>
+ <div className={Classes.buttonContainer}>
+ <div className={Classes.button}>
+ Learn More
+ </div>
+ </div>
+ </div>
  </div>
+ </>
  )
 }
 

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;
+
+ }
+
+
+}

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 (
- <div>
- About Tech Meet
- </div>
+ <>
+ <div className={Classes.container}>
+ <div className={Classes.info1}>
+ 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.
+ </div>
+ <div className={Classes.visionbox}>
+ <div className={Classes.title}>
+ OUR VISION 
+ </div>
+ <div className={Classes.imgbox}>
+ <img className={Classes.imgbox} src={logo} alt={'Logo InterIIT'} />
+ </div>
+ </div>
+ <div className={Classes.info2}>
+ 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.
+
+
+ </div>
+ </div>
+
+ </>
  )
 }
 

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;
+ }
+}

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%);
+ }
+}
 
 

src/components/NavBar/NavBar.css

@@ -20,3 +20,8 @@
 .bg-dark {
  background-color: rgb(0, 1, 3) !important;
 }
+
+.navitem{
+ margin: 1rem 3rem 1rem 3rem;
+
+}

src/components/NavBar/NavBar.js

@@ -50,9 +50,8 @@ export default function NavBar() {
  className="justify-content-end navrouterlinks"
  style={{ width: "100%" }}
  >
- <Nav.Link href="/">Home</Nav.Link>
- <Nav.Link href="/AboutUs">About</Nav.Link>
- <Nav.Link href="/Events">Events</Nav.Link>
+ <Nav.Link className="navitem" href="/about">AboutUs</Nav.Link>
+ <Nav.Link className="navitem" href="/Events">Events</Nav.Link>
  </Nav>
  </Navbar.Collapse>
  </Container>

src/components/WinnersTimeline/WinnersTimeline.js

@@ -1,10 +1,37 @@
 import React from 'react'
+import Classes from './WinnersTimeline.module.css';
 
 function WinnersTimeline() {
  return (
- <div>
- Winners Timeline 
+ <>
+ <div className={Classes.container}>
+ <div className={Classes.timeline}>
+ <YearWinners year ={2020}/>
+ <YearWinners year ={2019}/>
+ <YearWinners year ={2018}/>
+ <YearWinners year ={2017}/>
+ </div>
  </div>
+ </>
+ )
+}
+
+const YearWinners =({year}) =>{
+ return (
+ <div className={Classes.winnersList}>
+ <div className={Classes.year}>{Math.floor(year/10)}<span className={Classes.gradient}>{year%10}</span></div>
+ <div className={Classes.winnerBox}>
+ <div className={Classes.imgbox}>
+ {/* <img src="" alt="" /> */}
+ </div>
+ <div className={Classes.imgbox}>
+ {/* <img src="" alt="" /> */}
+ </div>
+ <div className={Classes.imgbox}>
+ {/* <img src="" alt="" /> */}
+ </div>
+ </div>
+ </div>
  )
 }