Skip to content

Commit

Permalink
Merge pull request #11 from alokthakur490/main
Browse files Browse the repository at this point in the history 
updated_prizesection
  • Loading branch information
@parteekcoder
parteekcoder authored Jan 12, 2024
2 parents 8bd34de + c76dc31 commit 7ce2dc7
Show file tree
Hide file tree
Showing 12 changed files with 128 additions and 50 deletions.
Binary file added public/images/1logol.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 public/images/1logor.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 public/images/2plogo.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 public/images/3logo.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 public/images/cborder.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 public/images/image151.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 public/images/image152.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 public/images/image153.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 public/images/lborder.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 public/images/rborder.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.
81 changes: 51 additions & 30 deletions src/components/PrizeSection.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,16 @@
import React from "react";
import styles from "../styles/prizeSection.module.css";
function List(props){
return(

<div className={styles.coincontainer}>
<img className={styles.coin} src = {props.imgsrc} alt = "coin"/>
<li>{props.content}</li>
</div>


);
}

const PrizeSection = (props) => {
return (
Expand Down Expand Up @@ -32,7 +43,6 @@ const PrizeSection = (props) => {
<rect x="188" y="64" width="64" height="64" fill="white" />
</svg>
</div>


<div className={styles.heading}>PRIZES</div>
<div className={styles.card_container}>
Expand All @@ -44,19 +54,23 @@ const PrizeSection = (props) => {
></img>
<div className={styles.left_card_content}>
<div className={styles.left_card_box}>
<div className={styles.logocontainer}>
<div className={styles.left_card_prize_img}>
<div>2ND PRIZE</div>
</div>
<img className={styles.logo2prize} src = "images/2plogo.png"></img>
</div>
<div className={styles.left_card_list}>
<li>Goodies</li>
<li>Geeks for Geeks(800/- INR coupon on all courses)</li>
<li>Echo-ar Free premium tier services</li>
<li>Online Mock Interviews from Interview Buddy </li>
<li>Lifetime upgrades of Taskade Unlimited</li>
<li>1 Year of 1Passwords Families</li>
<li>3 months of Draftbit Starter</li>
<li>Sashido Credits</li>
<li>30 Days Free Receipt Credits</li>

<List imgsrc = "/images/image151.png" content = "Goodies"/>
<List imgsrc = "/images/image151.png" content = "Geeks for Geeks(800/- INR coupon on all courses)"/>
<List imgsrc = "/images/image151.png" content = "Echo-ar Free premium tier services"/>
<List imgsrc = "/images/image151.png" content = "Online Mock Interviews from Interview Buddy "/>
<List imgsrc = "/images/image151.png" content = "Lifetime upgrades of Taskade Unlimited"/>
<List imgsrc = "/images/image151.png" content = "1 Year of 1Passwords Families"/>
<List imgsrc = "/images/image151.png" content = "3 months of Draftbit Starter"/>
<List imgsrc = "/images/image151.png" content = "Sashido Credits"/>
<List imgsrc = "/images/image151.png" content = "30 Days Free Receipt Credits"/>
</div>
</div>
</div>
Expand All @@ -69,21 +83,24 @@ const PrizeSection = (props) => {
></img>
<div className={styles.center_card_content}>
<div className={styles.center_card_box}>
<div className={styles.logocontainer}>
<img className={styles.logo2prize} src = "images/1logol.png"></img>
<div className={styles.center_card_prize_img}>
<div>1ST PRIZE</div>
</div>
<img className={styles.logo2prize} src = "images/1logor.png"></img>
</div>
<div className={styles.center_card_list}>

<li>Goodies</li>
<li>Geeks for Geeks(800/- INR coupon on all courses)</li>
<li>Echo-ar Free premium tier services</li>
<li>Online Mock Interviews from Interview Buddy </li>
<li>Lifetime upgrades of Taskade Unlimited</li>
<li>1 Year of 1Passwords Families</li>
<li>3 months of Draftbit Starter</li>
<li>Sashido Credits</li>
<li>30 Days Free Receipt Credits</li>

<List imgsrc = "/images/image152.png" content = "Goodies"/>
<List imgsrc = "/images/image152.png" content = "Geeks for Geeks(800/- INR coupon on all courses)"/>
<List imgsrc = "/images/image152.png" content = "Echo-ar Free premium tier services"/>
<List imgsrc = "/images/image152.png" content = "Online Mock Interviews from Interview Buddy "/>
<List imgsrc = "/images/image152.png" content = "Lifetime upgrades of Taskade Unlimited"/>
<List imgsrc = "/images/image152.png" content = "1 Year of 1Passwords Families"/>
<List imgsrc = "/images/image152.png" content = "3 months of Draftbit Starter"/>
<List imgsrc = "/images/image152.png" content = "Sashido Credits"/>
<List imgsrc = "/images/image152.png" content = "30 Days Free Receipt Credits"/>


</div>
</div>
Expand All @@ -97,19 +114,23 @@ const PrizeSection = (props) => {
></img>
<div className={styles.right_card_content}>
<div className={styles.right_card_box}>
<div className={styles.logocontainer}>
<div className={styles.right_card_prize_img}>
<div>3RD PRIZE</div>
</div>

<img className={styles.logo2prize} src = "images/3logo.png"></img>
</div>
<div className={styles.right_card_list}>
<li>Goodies</li>
<li>Geeks for Geeks(800/- INR coupon on all courses)</li>
<li>Echo-ar Free premium tier services</li>
<li>Online Mock Interviews from Interview Buddy </li>
<li>Lifetime upgrades of Taskade Unlimited</li>
<li>1 Year of 1Passwords Families</li>
<li>3 months of Draftbit Starter</li>
<li>Sashido Credits</li>
<li>30 Days Free Receipt Credits</li>
<List imgsrc = "/images/image153.png" content = "Goodies"/>
<List imgsrc = "/images/image153.png" content = "Geeks for Geeks(800/- INR coupon on all courses)"/>
<List imgsrc = "/images/image153.png" content = "Echo-ar Free premium tier services"/>
<List imgsrc = "/images/image153.png" content = "Online Mock Interviews from Interview Buddy "/>
<List imgsrc = "/images/image153.png" content = "Lifetime upgrades of Taskade Unlimited"/>
<List imgsrc = "/images/image153.png" content = "1 Year of 1Passwords Families"/>
<List imgsrc = "/images/image153.png" content = "3 months of Draftbit Starter"/>
<List imgsrc = "/images/image153.png" content = "Sashido Credits"/>
<List imgsrc = "/images/image153.png" content = "30 Days Free Receipt Credits"/>

</div>
</div>
Expand Down
97 changes: 77 additions & 20 deletions src/styles/prizeSection.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,61 @@
}


.left_card ,.center_card,.right_card{
/* Common styles for all cards */
.left_card, .center_card, .right_card {
/* Your existing styles for left_card */
transition: transform 0.3s ease-in-out; /* Add a smooth transition effect */
}

/* Hover effect for each card */
.left_card:hover {
transform: scale(1.1);
}

.center_card:hover {
transform: scale(1.1);
}

.right_card:hover {
transform: scale(1.1);
}

/* Sibling selector to reduce the size of other cards on hover */
.left_card:hover ~ .center_card,
.left_card:hover ~ .right_card,
.center_card:hover ~ .left_card,
.center_card:hover ~ .right_card,
.right_card:hover ~ .left_card,
.right_card:hover ~ .center_card {
transform: scale(0.9); /* Adjust the scaling factor for the reduced size */
}




.logo2prize{

width: 62.358px;
height: 65px;
flex-shrink: 0;

}

/* New styles for hover effect */
.left_card:hover ,.center_card:hover,.right_card:hover{
transform: scale(1.1); /* You can adjust the scaling factor as needed */
.logocontainer{
display: flex;
justify-content: center;
align-items: center;
align-content: center;

}
.coincontainer{
display: flex;
}

.coin{
width: 27.083px;
height: 25px;
flex-shrink: 0;

}
.container {
width: 100%;
Expand Down Expand Up @@ -78,7 +125,7 @@
width: 268px;
height: 169px;
flex-shrink: 0;
background: lightgray 0px 0px / 100% 100% no-repeat;
/* background: lightgray 0px 0px / 100% 100% no-repeat; */
}

.left_card_content {
Expand All @@ -88,7 +135,7 @@
width: 268.272px;
height: 381.267px;
flex-shrink: 0;
background: #00F26D;
background: url("../../public/images/lborder.png");
}

.left_card_box {
Expand Down Expand Up @@ -128,15 +175,15 @@
}

.left_card_list {
list-style: decimal;
list-style: none;
width: 226px;
color: var(--Black, #1F1F1F);
font-family: Space Grotesk;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 150%;
padding-left: 10px;
/* padding-left: 10px; */
}

.center_card {
Expand All @@ -148,7 +195,7 @@
width: 378.132px;
height: 188.374px;
flex-shrink: 0;
background: lightgray 0px 0px / 100% 100% no-repeat;
/* background: lightgray 0px 0px / 100% 100% no-repeat; */
}

.center_card_content {
Expand All @@ -158,7 +205,7 @@
width: 378px;
height: 430px;
flex-shrink: 0;
background: #FF8EFF;
background: url("../../public/images/cborder.png");
}

.center_card_box {
Expand Down Expand Up @@ -196,15 +243,15 @@
}

.center_card_list {
list-style: decimal;
list-style: none;
width: 332.424px;
color: var(--Black, #1F1F1F);
font-family: Space Grotesk;
font-size: 16px;
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 171%;
padding-left: 10px;

/* 27.36px */
}

Expand All @@ -217,7 +264,7 @@
width: 268.272px;
height: 127.575px;
flex-shrink: 0;
background: lightgray 0px 0px / 100% 100% no-repeat;
/* background: lightgray 0px 0px / 100% 100% no-repeat; */
}

.right_card_content {
Expand All @@ -227,7 +274,7 @@
width: 268.272px;
height: 381.267px;
flex-shrink: 0;
background: #006CEF;
background: url("../../public/images/rborder.png");
}

.right_card_box {
Expand Down Expand Up @@ -267,18 +314,18 @@
}

.right_card_list {
list-style: decimal;
list-style: none;
width: 226px;
color: #1F1F1F;
font-family: Space Grotesk;
font-size: 14px;
font-size: 13px;
font-style: normal;
font-weight: 400;
line-height: 150%;
padding-left: 10px;

}

@media only screen and (max-width: 1250px) {
@media only screen and (max-width: 1050px) {

.card_container {
width: 96%;
Expand Down Expand Up @@ -360,4 +407,14 @@
.left_card:hover ,.center_card:hover,.right_card:hover{
transform: none; /* You can adjust the scaling factor as needed */
}
/* Sibling selector to reduce the size of other cards on hover */
.left_card:hover ~ .center_card,
.left_card:hover ~ .right_card,
.center_card:hover ~ .left_card,
.center_card:hover ~ .right_card,
.right_card:hover ~ .left_card,
.right_card:hover ~ .center_card {
transform: none; /* Adjust the scaling factor for the reduced size */
}

}

0 comments on commit 7ce2dc7

Please sign in to comment.