Skip to content

Commit

Permalink
Merge pull request #69 from AnishHazra/master
Browse files Browse the repository at this point in the history 
collaboration section
  • Loading branch information
@A1Kumari
A1Kumari authored Aug 15, 2023
2 parents 3f80983 + 9bf9d78 commit 6c67b13
Show file tree
Hide file tree
Showing 15 changed files with 78 additions and 253 deletions.
Binary file added src/assets/images/Codechef_MAIT.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/images/IEEE BPIT.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/images/anveshan.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/images/csi_ipec.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/images/gfg dce.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed src/assets/images/img1.png
View file
Binary file not shown.
Binary file removed src/assets/images/img2.png
View file
Binary file not shown.
Binary file removed src/assets/images/img3.png
View file
Binary file not shown.
Binary file removed src/assets/images/img4.png
View file
Binary file not shown.
Binary file removed src/assets/images/img5.png
View file
Binary file not shown.
Binary file removed src/assets/images/img6.png
View file
Binary file not shown.
Binary file removed src/assets/images/img7.png
View file
Binary file not shown.
Binary file removed src/assets/images/img8.png
View file
Binary file not shown.
155 changes: 54 additions & 101 deletions src/components/teams/Teams.css
View file
Original file line number Diff line number Diff line change
@@ -1,105 +1,58 @@
.team {
background: #000;
box-shadow: inset 0 0 3rem rgba(0, 0, 0, 0.5);
}

.team_container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin: 0 12%;
padding-bottom: 5%;
}

.team_member {
background: #222222;
border-color: #6C63FF;
padding: 1rem;
border: 1px solid transparent;
transition: var(--transition);
position: relative;
overflow: hidden;
border-radius: 4px;
}

.team_member:hover {
background: #222222;
border-color: #363870;
}

.team_member-image img {
filter: saturate(0);
display: block;
margin-left: auto;
margin-right: auto;
width: 250px;
}

.team_member:hover img {
filter: saturate(1);
}

.team_member-info * {
text-align: center;
margin-top: 1.4rem;
}

.team_member-info p {
color: #b6b5b5;
font-family: 'IBM Plex Mono', monospace;
}

.team_member-socials {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -100%;
display: flex;
flex-direction: column;
background: #2D3061;
border-radius: 1rem 0 0 1rem;
box-shadow: -2rem 0 2rem rgba(0, 0, 0, 0.3);
transition: var(--transition);
}

.team_member:hover .team_member-socials {
right: 0;
}

.team_member-socials a {
padding: 1rem;
}

.team h2 {
color: #6B5B95;
text-align: center;
padding: 5rem;
font-weight: 900;
font-size: 40px;
font-family: 'IBM Plex Mono', monospace;
}

.team_member-info h4 {
color: #fff;
font-weight: 600;
font-family: 'IBM Plex Mono', monospace;
background: #000;
box-shadow: inset 0 0 3rem rgba(0, 0, 0, 0.5);
}
body {
background: #000;
}

@keyframes slide {
from {
transform: translateX(0);
}

@media screen and (max-width: 768px) {
.team_container {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.team_member-socials {
display: none; /* Hide the social links in mobile view */
}

.team_member {
margin-bottom: 2rem;
}
to {
transform: translateX(-100%);
}

.team > h2{
font-family: 'IBM Plex Mono', monospace;
font-weight: 900;
}

.logos {
overflow: hidden;
padding: 60px 0;
background: #000;
white-space: nowrap;
position: relative;
}

.logos:before,
.logos:after {
position: absolute;
top: 0;
width: 250px;
height: 100%;
content: "";
z-index: 2;
}

.logos:before {
left: 0;
background: linear-gradient(to left, rgba(255, 255, 255, 0), #000);
}

.logos:after {
right: 0;
background: linear-gradient(to right, rgba(255, 255, 255, 0), #000);
}

.logos:hover .logos-slide {
animation-play-state: paused;
}

.logos-slide {
display: inline-block;
animation: 35s slide infinite linear;
}

.logos-slide img {
height: 6rem;
margin: 0 40px;
}
176 changes: 24 additions & 152 deletions src/components/teams/Teams.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,11 @@
import React from "react";
import "./Teams.css";
import {FaInstagram, FaLinkedin, FaTwitter} from "react-icons/fa";
import img1 from "../../assets/images/img1.png";
import img2 from "../../assets/images/img2.png";
import img3 from "../../assets/images/img3.png";
import img4 from "../../assets/images/img4.png";
import img5 from "../../assets/images/img5.png";
import img6 from "../../assets/images/img6.png";
import img7 from "../../assets/images/img7.png";
import img8 from "../../assets/images/img8.png";
import img1 from "../../assets/images/anveshan.png";
import img2 from "../../assets/images/Codechef_MAIT.png";
import img3 from "../../assets/images/csi_ipec.png";
import img4 from "../../assets/images/gfg dce.png";
import img5 from "../../assets/images/IEEE BPIT.png";



export default function Teams() {
Expand All @@ -26,150 +23,25 @@ export default function Teams() {
</div>
</h2>
</div>
<div className="container-team team_container">
<div data-aos="fade-up">
<article className="team_member">
<div className="team_member-image">
<img src={img1}/>
</div>
<div className="team_member-info">
<h4>Himanshu Gupta</h4>
<p>Front End</p>
</div>
<div className="team_member-socials">
<a href="#" target="_black"><FaLinkedin/></a>
<a href="#" target="_black"><FaInstagram/></a>
<a href="#" target="_black"><FaTwitter/></a>
</div>
</article>
</div>
<div data-aos="fade-up">
<article className="team_member">
<div className="team_member-image">
<img src={img2}/>
</div>
<div className="team_member-info">
<h4>Jatin</h4>
<p>Machine Learning</p>
</div>
<div className="team_member-socials">
<a href="#" target="_black"><FaLinkedin/></a>
<a href="#" target="_black"><FaInstagram/></a>
<a href="#" target="_black"><FaTwitter/></a>
</div>
</article>
</div>
<div data-aos="fade-up">
<article className="team_member">
<div className="team_member-image">
<img src={img3}/>
</div>
<div className="team_member-info">
<h4>Tanisha</h4>
<p>Web Development</p>
</div>
<div className="team_member-socials">
<a href="#" target="_black"><FaLinkedin/></a>
<a href="#" target="_black"><FaInstagram/></a>
<a href="#" target="_black"><FaTwitter/></a>
</div>
</article>
</div>
<div data-aos="fade-up">
<article className="team_member">
<div className="team_member-image">
<img src={img2}/>
</div>
<div className="team_member-info">
<h4>Dhruv Gera</h4>
<p>Web and App Development</p>
</div>
<div className="team_member-socials">
<a href="https://www.linkedin.com/in/dhruv-gera/" target="_black"><FaLinkedin/></a>
<a href="#" target="_black"><FaInstagram/></a>
<a href="#" target="_black"><FaTwitter/></a>
</div>
</article>
</div>
<div data-aos="fade-up">
<article className="team_member">
<div className="team_member-image">
<img src={img4}/>
</div>
<div className="team_member-info">
<h4>Arya Kumari</h4>
<p>Web Development</p>
</div>
<div className="team_member-socials">
<a href="#" target="_black"><FaLinkedin/></a>
<a href="#" target="_black"><FaInstagram/></a>
<a href="#" target="_black"><FaTwitter/></a>
</div>
</article>
</div>
<div data-aos="fade-up">
<article className="team_member">
<div className="team_member-image">
<img src={img5}/>
</div>
<div className="team_member-info">
<h4>Nandani Singh</h4>
<p>Machine Learning</p>
</div>
<div className="team_member-socials">
<a href="#" target="_black"><FaLinkedin/></a>
<a href="#" target="_black"><FaInstagram/></a>
<a href="#" target="_black"><FaTwitter/></a>
</div>
</article></div>
<div data-aos="fade-up">
<article className="team_member">
<div className="team_member-image">
<img src={img6}/>
</div>
<div className="team_member-info">
<h4>Anish Hazra</h4>
<p>Front End Development</p>
</div>
<div className="team_member-socials">
<a href="#" target="_black"><FaLinkedin/></a>
<a href="#" target="_black"><FaInstagram/></a>
<a href="#" target="_black"><FaTwitter/></a>
</div>
</article> </div>
<div data-aos="fade-up">
<article className="team_member">
<div className="team_member-image">
<img src={img7}/>
</div>
<div className="team_member-info">
<h4>Vansh</h4>
<p>Machine Learning</p>
</div>
<div className="team_member-socials">
<a href="#" target="_black"><FaLinkedin/></a>
<a href="#" target="_black"><FaInstagram/></a>
<a href="#" target="_black"><FaTwitter/></a>
</div>
</article>
</div>
<div data-aos="fade-up">
<article className="team_member">
<div className="team_member-image">
<img src={img8}/>
</div>
<div className="team_member-info">
<h4>Shivani</h4>
<p>Machine Learning</p>
</div>
<div className="team_member-socials">
<a href="#" target="_black"><FaLinkedin/></a>
<a href="#" target="_black"><FaInstagram/></a>
<a href="#" target="_black"><FaTwitter/></a>
</div>
</article>
</div>
<div class="logos">
<div class="logos-slide">
<img src={img1} />
<img src={img2} />
<img src={img3} />
<img src={img4} />
<img src={img5} />
</div>

<div class="logos-slide">
<img src={img1} />
<img src={img2} />
<img src={img3} />
<img src={img4} />
<img src={img5} />
</div>
</div>


</section>
);
}

0 comments on commit 6c67b13

Please sign in to comment.