-
Notifications
You must be signed in to change notification settings - Fork 26
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
8b0a4d8
commit 4852222
Showing
7 changed files
with
252 additions
and
76 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,95 @@ | ||
import React from "react"; | ||
import { FiExternalLink } from "react-icons/fi"; | ||
import HeaderData from "../../../assets/data/HeaderContent"; | ||
import first from "../../../assets/images/PrizesImages/first.png"; | ||
import second from "../../../assets/images/PrizesImages/second.png"; | ||
import third from "../../../assets/images/PrizesImages/third.png"; | ||
import { Header } from "../../shared"; | ||
import "./Winner.scss"; | ||
|
||
const Winner = () => { | ||
return ( | ||
<div className="winners_parent" id="prizes"> | ||
<Header {...HeaderData.winner} /> | ||
|
||
<div className="winners_container"> | ||
<div className="first_runner_up winner_box desktop"> | ||
<img src={second} className="prize_logo winner_logo" alt="" /> | ||
<h1>EdgeRunners</h1> | ||
<p> | ||
Project Synode{" "} | ||
<a | ||
href="https://www.hackquest.io/en/hackathon/projects/Hack4Bengal-30-Synode-Offline-Wallet" | ||
target="_blank" | ||
rel="noopener noreferrer" | ||
> | ||
<FiExternalLink /> | ||
</a> | ||
</p> | ||
</div> | ||
<div className="winner winner_box desktop"> | ||
<img src={first} className="prize_logo winner_logo" alt="" /> | ||
{/* */} | ||
<h1>Bongo(n)</h1> | ||
<p> | ||
Project PAW-sitive{" "} | ||
<a | ||
href="https://www.hackquest.io/en/hackathon/projects/Hack4Bengal-30-PAW-sitive" | ||
target="_blank" | ||
rel="noopener noreferrer" | ||
> | ||
<FiExternalLink /> | ||
</a> | ||
</p> | ||
</div> | ||
<div className="second_runner_up winner_box desktop"> | ||
<img src={third} className="prize_logo winner_logo" alt="" /> | ||
<h1>BengalDevs</h1> | ||
<p> | ||
Project Term AI | ||
<a | ||
href="https://www.hackquest.io/en/hackathon/projects/Hack4Bengal-30-Term-AI" | ||
target="_blank" | ||
rel="noopener noreferrer" | ||
> | ||
<FiExternalLink /> | ||
</a> | ||
</p> | ||
</div> | ||
</div> | ||
<div className="winners_container mobile"> | ||
<div className="first_runner_up winner_box"> | ||
<img src={second} className="prize_logo winner_logo" alt="" /> | ||
<h1>EdgeRunners</h1> | ||
<p> | ||
Project Synode{" "} | ||
<a | ||
href="https://www.hackquest.io/en/hackathon/projects/Hack4Bengal-30-Synode-Offline-Wallet" | ||
target="_blank" | ||
rel="noopener noreferrer" | ||
> | ||
<FiExternalLink /> | ||
</a> | ||
</p> | ||
</div> | ||
|
||
<div className="second_runner_up winner_box"> | ||
<img src={third} className="prize_logo winner_logo" alt="" /> | ||
<h1>BengalDevs</h1> | ||
<p> | ||
Project Term AI{" "} | ||
<a | ||
href="https://www.hackquest.io/en/hackathon/projects/Hack4Bengal-30-Term-AI" | ||
target="_blank" | ||
rel="noopener noreferrer" | ||
> | ||
<FiExternalLink /> | ||
</a> | ||
</p> | ||
</div> | ||
</div> | ||
</div> | ||
); | ||
}; | ||
|
||
export default Winner; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,137 @@ | ||
.winners_parent { | ||
padding: 4rem 7rem; | ||
padding-bottom: 0; | ||
margin-top: 4rem; | ||
margin-bottom: 3rem; | ||
position: relative; | ||
overflow: hidden; | ||
|
||
@media screen and (max-width: 576px) { | ||
padding: 2rem 1.5rem; | ||
margin-top: 2rem; | ||
} | ||
|
||
.winners_container { | ||
display: flex; | ||
justify-content: space-between; | ||
flex-wrap: wrap; | ||
width: 90%; | ||
margin: 0 auto; | ||
margin-top: 6rem; | ||
|
||
&.mobile { | ||
display: none; | ||
} | ||
|
||
@media screen and (max-width: 1200px) { | ||
margin-top: 4rem; | ||
flex-direction: column; | ||
gap: 3rem; | ||
width: 100%; | ||
align-items: center; | ||
|
||
&.mobile { | ||
display: flex; | ||
flex-direction: row; | ||
} | ||
|
||
.first_runner_up { | ||
&.desktop { | ||
display: none; | ||
} | ||
} | ||
|
||
.second_runner_up { | ||
&.desktop { | ||
display: none; | ||
} | ||
} | ||
} | ||
|
||
.winner_box { | ||
display: flex; | ||
flex-direction: column; | ||
align-items: center; | ||
justify-content: center; | ||
width: 30%; | ||
text-align: center; | ||
font-family: var(--heading-font); | ||
|
||
h1 { | ||
font-weight: 800; | ||
} | ||
|
||
p { | ||
font-size: 1.3rem; | ||
margin-top: 1rem; | ||
font-weight: 600; | ||
display: flex; | ||
align-items: center; | ||
gap: 8px; | ||
|
||
svg { | ||
cursor: pointer; | ||
width: 25px; | ||
height: 25px; | ||
color: #ff1717; | ||
} | ||
} | ||
|
||
@media screen and (max-width: 576px) { | ||
width: 80%; | ||
margin: 0 auto; | ||
} | ||
|
||
img { | ||
@media screen and (max-width: 576px) { | ||
width: 100%; | ||
margin: 0 auto; | ||
} | ||
} | ||
} | ||
|
||
.winner { | ||
h1 { | ||
font-size: 3rem; | ||
background: #ffffff; | ||
background: linear-gradient(to right, #ffffff 0%, #ffc700 100%); | ||
-webkit-background-clip: text; | ||
-webkit-text-fill-color: transparent; | ||
|
||
@media screen and (max-width: 576px) { | ||
font-size: 2.5rem; | ||
} | ||
} | ||
} | ||
|
||
.first_runner_up { | ||
h1 { | ||
font-size: 2.5rem; | ||
|
||
background: #ffffff; | ||
background: linear-gradient(to right, #ffffff 0%, #554c4c 100%); | ||
-webkit-background-clip: text; | ||
-webkit-text-fill-color: transparent; | ||
|
||
@media screen and (max-width: 576px) { | ||
font-size: 2.5rem; | ||
} | ||
} | ||
} | ||
|
||
.second_runner_up { | ||
h1 { | ||
font-size: 2.5rem; | ||
|
||
background: #ffffff; | ||
background: linear-gradient(to right, #ffffff 0%, #ec8423 100%); | ||
-webkit-background-clip: text; | ||
-webkit-text-fill-color: transparent; | ||
|
||
@media screen and (max-width: 576px) { | ||
font-size: 2.5rem; | ||
} | ||
} | ||
} | ||
} | ||
} |
Oops, something went wrong.