Skip to content

Commit

Permalink
bug fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@barnilsarma
barnilsarma committed Oct 5, 2024
1 parent 3004975 commit 24eb821
Show file tree
Hide file tree
Showing 5 changed files with 193 additions and 127 deletions.
9 changes: 9 additions & 0 deletions public/images/teamcover.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
93 changes: 47 additions & 46 deletions src/Components/Teams/Card/Card.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,55 +13,56 @@ const Card = (props) => {
<p className={styles.name}>{props.name}</p>
{props.designation && <p className={styles.designation}>{props.designation}</p>}
</div>
<div className={styles.glowbox}>
<div className={styles.social}>
{props.fb && (
<div className={styles.icon}>
<a href={props.fb} target="_blank" rel="noreferrer">
<img
className={`${styles.logo} ${styles.fbImg}`}
src="https://res.cloudinary.com/dxafdfvui/image/upload/v1705083563/fbpxl_imhsav.svg"
alt="facebook"
/>
</a>
</div>
)}

<div className={styles.social}>
{props.fb && (
<div className={styles.icon}>
<a href={props.fb} target="_blank" rel="noreferrer">
<img
className={styles.logo}
src="https://res.cloudinary.com/dxafdfvui/image/upload/v1705083563/fbpxl_imhsav.svg"
alt="facebook"
/>
</a>
</div>
)}
{props.linkedin && (
<div className={styles.icon}>
<a href={props.linkedin} target="_blank" rel="noreferrer">
<img
className={`${styles.logo} ${styles.linkedinImg}`}
src="https://res.cloudinary.com/dgnlmdkyq/image/upload/v1705425898/Nits%20hacks%206.0/Teams/nnj4l11tum53qdgmny4v.png"
alt="linkedin"
/>
</a>
</div>
)}

{props.linkedin && (
<div className={styles.icon}>
<a href={props.linkedin} target="_blank" rel="noreferrer">
<img
className={styles.logo}
src="https://res.cloudinary.com/dgnlmdkyq/image/upload/v1705425898/Nits%20hacks%206.0/Teams/nnj4l11tum53qdgmny4v.png"
alt="linkedin"
/>
</a>
</div>
)}
{props.git && (
<div className={styles.icon}>
<a href={props.git} target="_blank" rel="noreferrer">
<img
className={`${styles.logo} ${styles.gitImg}`}
src="https://res.cloudinary.com/dgnlmdkyq/image/upload/v1705429562/Nits%20hacks%206.0/Teams/lavkmin5prqostnlukqh.png"
alt=" github"
/>
</a>
</div>
)}

{props.git && (
<div className={styles.icon}>
<a href={props.git} target="_blank" rel="noreferrer">
<img
className={styles.logo}
src="https://res.cloudinary.com/dgnlmdkyq/image/upload/v1705429562/Nits%20hacks%206.0/Teams/lavkmin5prqostnlukqh.png"
alt=" github"
/>
</a>
</div>
)}

{props.cf && (
<div className={styles.icon}>
<a href={props.cf} target="_blank" rel="noreferrer">
<img
className={styles.logo}
src="https://res.cloudinary.com/dgnlmdkyq/image/upload/v1705486367/Nits%20hacks%206.0/Teams/lfqewnoiatuujzkelmqk.png"
alt=" codeforces"
/>
</a>
</div>
)}
{props.cf && (
<div className={styles.icon}>
<a href={props.cf} target="_blank" rel="noreferrer">
<img
className={`${styles.logo} ${styles.cfImg}`}
src="https://res.cloudinary.com/dgnlmdkyq/image/upload/v1705486367/Nits%20hacks%206.0/Teams/lfqewnoiatuujzkelmqk.png"
alt=" codeforces"
/>
</a>
</div>
)}
</div>
</div>
</div>
</div>
Expand Down
178 changes: 113 additions & 65 deletions src/Components/Teams/Card/Card.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,28 +10,15 @@
z-index: 1;
position: relative;
overflow: visible;
transition:
box-shadow 0.3s ease,
transform 0.3s ease;
transition-duration: 1s;
cursor: pointer;

&:hover {
// Increase box-shadow on hover
box-shadow:
rgba(255, 255, 0, 0.5) 8px 8px,
rgba(255, 255, 0, 0.4) 12px 12px,
rgba(255, 255, 0, 0.3) 16px 16px,
rgba(255, 255, 0, 0.2) 20px 20px,
rgba(255, 255, 0, 0.1) 24px 24px;

// Optionally, add a slight scale effect
transform: scale(1.05); // Slightly scale up the card

.card .social {
opacity: 1;
display: inline-flex;
transform: translate Y(0);
}
}
// .card{
// .social{
// opacity: 0;
// transition-duration: 1s;
// }
// }

.topLeftLine {
position: absolute;
Expand Down Expand Up @@ -99,11 +86,11 @@
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: 0.3rem;
gap: 0rem;
border: 3px solid #ddd;
width: 18rem;
height: 23rem;

position: relative;
clip-path: polygon(
16% 0,
100% 0,
Expand All @@ -120,7 +107,7 @@
filter: drop-shadow(0px 20px 30px rgba(255, 255, 255, 0.25));

.box {
width: 90%;
width: 100%;
height: 50%;
overflow: hidden; /* Ensure the image doesn't overflow outside the box */
display: flex;
Expand All @@ -141,11 +128,10 @@
0% 80%,
0 12%
);
img {
.img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}

Expand All @@ -157,7 +143,7 @@
gap: 2px;
justify-content: flex-start;
padding-left: 1rem;

transition-duration: 0.2s;
.name {
font-size: 1rem;
font-weight: bold;
Expand All @@ -168,50 +154,112 @@
}
}

.social {
display: none;
opacity: 0;
width: 100%;
height: 4rem;
// display: inline-flex ;
background-color: white;
justify-content: space-evenly;
align-items: center;
margin-left: 2.5rem;
clip-path: polygon(
6% 0,
100% 0,
100% 20%,
100% 100%,
85% 100%,
0 99%,
0% 80%,
0 11%
);
transform: translate Y(10px);
transition:
opacity 1s ease,
transform 0.3s ease;
.icon {
width: 25%;
height: 90%;
.glowbox {
box-shadow:
0px 0px 1px 0px #606605,
0px 0px 4px 0px #606605,
0px 0px 8px 0px #606605;
width: 90%;
position: absolute;
bottom: 0;
right: 0;
background-color: #606605a7;
border: none;
transition-duration: 1s;
.social {
opacity: 0;
width: 100%;
height: 0rem;
background-color: rgb(255, 255, 255);
display: flex;
justify-content: center;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
background-color: white;
a {
background-color: white;

clip-path: polygon(
6% 0,
100% 0,
100% 20%,
100% 100%,
85% 100%,
0 99%,
0% 80%,
0 11%
);

transition-duration: 0.2s;

.icon {
display: flex;
justify-content: center;
align-items: center;
background-color: transparent;

a {
background-color: white;
}

img {
opacity: 0;
width: 2rem;
height: 2rem;
font-size: smaller;
object-fit: contain;
object-position: center;
transition-duration: 1s;
filter: grayscale(100%);
}
.gitImg {
filter: invert(100%);
}
}
img {
width: 2rem;
height: 2rem;
// border-radius: 50%;
font-size: smaller;
object-fit: contain;
object-position: center;
}
}
}
&:hover {
// Increase box-shadow on hover
// box-shadow:
// rgba(255, 255, 0, 0.5) 8px 8px,
// rgba(255, 255, 0, 0.4) 12px 12px,
// rgba(255, 255, 0, 0.3) 16px 16px,
// rgba(255, 255, 0, 0.2) 20px 20px,
// rgba(255, 255, 0, 0.1) 24px 24px;

// Optionally, add a slight scale effect
transition-duration: 1s;
.card {
.content {
transition-duration: 0.2s;
transform: translateY(-100%);
}
.glowbox {
box-shadow:
0px 0px 10px 0px #606605,
0px 0px 44.3px 0px #606605,
0px 0px 80px 0px #606605;
transition-duration: 1s;
.social {
opacity: 1;
height: 4rem;
transition-duration: 0.2s;
.icon {
img {
opacity: 1;
transition-duration: 1s;
}
}
}
}
}
transform: scale(1.001); // Slightly scale up the card
// .card {
// .social{
// opacity: 1;
// display: inline-flex;
// // transform: translateY(0);
// transition-duration: 1s;
// }
// }
}
}

Expand Down
8 changes: 7 additions & 1 deletion src/Pages/Team/Team.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,13 @@ const Teams = () => {
return (
<div className={styles.teamsCont}>
<Navbar />
<div className={styles.bgPng}></div>
<div className={styles.bgPng}>
<img
src="/images/teamcover.svg"
alt="team page background"
className={styles.coverImg}
/>
</div>

<div className={styles.page}>
<div className={styles.teamname}>
Expand Down
Loading

0 comments on commit 24eb821

Please sign in to comment.