Skip to content

Commit

Permalink
Merge pull request #6 from alokthakur490/main
Browse files Browse the repository at this point in the history 
prizesection(hover_effect)
  • Loading branch information
@parteekcoder
parteekcoder authored Jan 11, 2024
2 parents 4acf87b + 834e3b3 commit 45bf21c
Show file tree
Hide file tree
Showing 18 changed files with 63 additions and 37 deletions.
Binary file removed public/2nd Prize Container.png
View file
Binary file not shown.
Binary file removed public/Picture (1).png
View file
Binary file not shown.
Binary file removed public/Picture (2).png
View file
Binary file not shown.
Binary file removed public/background image.png
View file
Binary file not shown.
Binary file removed public/bg.png
View file
Binary file not shown.
Binary file removed public/bg1.png
View file
Binary file not shown.
Binary file removed public/heading bg image (1).png
View file
Binary file not shown.
Binary file removed public/heading bg image.png
View file
Binary file not shown.
Binary file removed public/heading bg.png
View file
Binary file not shown.
0 public/Picture.png → public/images/Picture.png
View file
File renamed without changes
0 public/center.png → public/images/center.png
View file
File renamed without changes
0 public/image131.png → public/images/image131.png
View file
File renamed without changes
0 public/image132.png → public/images/image132.png
View file
File renamed without changes
0 public/image135.png → public/images/image135.png
View file
File renamed without changes
0 public/right.png → public/images/right.png
View file
File renamed without changes
0 public/right_prize.png → public/images/right_prize.png
View file
File renamed without changes
64 changes: 34 additions & 30 deletions src/components/PrizeSection.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ const PrizeSection = (props) => {
<div className={styles.left_card}>
<img
className={styles.left_card_img}
src="Picture.png"
src="images/Picture.png"
alt="sec_prize"
></img>
<div className={styles.left_card_content}>
Expand All @@ -48,23 +48,23 @@ const PrizeSection = (props) => {
<div>2ND PRIZE</div>
</div>
<div className={styles.left_card_list}>
<li>1. Goodies</li>
<li>2. Geeks for Geeks(800/- INR coupon on all courses)</li>
<li>3. Echo-ar Free premium tier services</li>
<li>4. Online Mock Interviews from Interview Buddy </li>
<li>5. Lifetime upgrades of Taskade Unlimited</li>
<li>6. 1 Year of 1Passwords Families</li>
<li>7. 3 months of Draftbit Starter</li>
<li>8. Sashido Credits</li>
<li>9. 30 Days Free Receipt Credits</li>
<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>
</div>
</div>
</div>
</div>
<div className={styles.center_card}>
<img
className={styles.center_card_img}
src="center.png"
src="images/center.png"
alt="first_prize"
></img>
<div className={styles.center_card_content}>
Expand All @@ -73,23 +73,26 @@ const PrizeSection = (props) => {
<div>1ST PRIZE</div>
</div>
<div className={styles.center_card_list}>
<li>1. Goodies</li>
<li>2. Geeks for Geeks(800/- INR coupon on all courses)</li>
<li>3. Echo-ar Free premium tier services</li>
<li>4. Online Mock Interviews from Interview Buddy </li>
<li>5. Lifetime upgrades of Taskade Unlimited</li>
<li>6. 1 Year of 1Passwords Families</li>
<li>7. 3 months of Draftbit Starter</li>
<li>8. Sashido Credits</li>
<li>9. 30 Days Free Receipt Credits</li>

<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>


</div>
</div>
</div>
</div>
<div className={styles.right_card}>
<img
className={styles.right_card_img}
src="right.png"
src="images/right.png"
alt="sec_prize"
></img>
<div className={styles.right_card_content}>
Expand All @@ -98,15 +101,16 @@ const PrizeSection = (props) => {
<div>3RD PRIZE</div>
</div>
<div className={styles.right_card_list}>
<li>1. Goodies</li>
<li>2. Geeks for Geeks(800/- INR coupon on all courses)</li>
<li>3. Echo-ar Free premium tier services</li>
<li>4. Online Mock Interviews from Interview Buddy </li>
<li>5. Lifetime upgrades of Taskade Unlimited</li>
<li>6. 1 Year of 1Passwords Families</li>
<li>7. 3 months of Draftbit Starter</li>
<li>8. Sashido Credits</li>
<li>9. 30 Days Free Receipt Credits</li>
<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>

</div>
</div>
</div>
Expand Down
36 changes: 29 additions & 7 deletions src/styles/prizeSection.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,15 @@
}


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

/* 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 */
}
.container {
width: 100%;
display: flex;
Expand Down Expand Up @@ -100,7 +109,7 @@
width: 117px;
height: 38px;
flex-shrink: 0;
background: url("../../public/image135.png") lightgray 50% / cover no-repeat;
background: url("../../public/images/image135.png") lightgray 50% / cover no-repeat;
}

.left_card_prize_img>div {
Expand All @@ -119,14 +128,15 @@
}

.left_card_list {
list-style: none;
list-style: decimal;
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;
}

.center_card {
Expand Down Expand Up @@ -169,7 +179,7 @@
width: 168px;
height: 39px;
flex-shrink: 0;
background: url("../../public/image131.png") lightgray 50% / cover no-repeat;
background: url("../../public/images/image131.png") lightgray 50% / cover no-repeat;
}

.center_card_prize_img>div {
Expand All @@ -186,14 +196,15 @@
}

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

Expand Down Expand Up @@ -237,7 +248,7 @@
width: 117px;
height: 38px;
flex-shrink: 0;
background: url("../../public/right_prize.png") lightgray 50% / cover no-repeat;
background: url("../../public/images/right_prize.png") lightgray 50% / cover no-repeat;
}

.right_card_prize_img>div {
Expand All @@ -256,14 +267,15 @@
}

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

@media only screen and (max-width: 1250px) {
Expand All @@ -273,7 +285,7 @@
padding: 0 4% 0 4%;
flex-direction: column;
align-items: center;
gap: 10px;
gap: 22px;
}

.top_right,
Expand Down Expand Up @@ -338,4 +350,14 @@
.right_card {
order: 3;
}

.left_card ,.center_card,.right_card{
/* Your existing styles for left_card */
transition: none; /* Add a smooth transition effect */
}

/* New styles for hover effect */
.left_card:hover ,.center_card:hover,.right_card:hover{
transform: none; /* You can adjust the scaling factor as needed */
}
}

0 comments on commit 45bf21c

Please sign in to comment.