Skip to content

Commit

Permalink
Merge pull request #168 from CodinJack/main
Browse files Browse the repository at this point in the history 
Updated leaderboard style
  • Loading branch information
@GammaMicrowave
GammaMicrowave authored Dec 26, 2023
2 parents c2b00fa + 1f7f668 commit ae81f89
Show file tree
Hide file tree
Showing 2 changed files with 78 additions and 58 deletions.
85 changes: 54 additions & 31 deletions css/leaderboard.css
View file
Original file line number Diff line number Diff line change
@@ -1,62 +1,73 @@
#leaderboard {
padding: 100px 0px;
background: linear-gradient(#031717, #112e2d, #132222);

/* background: linear-gradient(#1a462f, #0e5a49, #17403E); */

background: linear-gradient(#132222, #17403e, #0c1717);
font-family: "Kufam", sans-serif;
}

#leader_content {
color: white;
/* margin-top: 45px; */
/* margin-bottom: 10px; */
margin-left: 30px;
/* border: 2px solid red; */
top: 50px;
font-size: 30px;
font-weight: 700;
#leader-content h1 {
color: #00cf90;
font-weight: 400;
font-size: 40px;
text-align: center;
margin-bottom: 80px;
}
#leadercontainer {
margin-top: 10px;
/* margin-top:50px ; */
border: solid white;
border-radius: 10px;
/* box-shadow: 10px 10px 10px; */
/* display: flex; */
flex-wrap: wrap;
justify-content: center;
align-items: center;
width: 80vw;
margin: 0 auto;
border:white solid 1px;
}
.participant {
display: flex;
background: #869695;
align-items: center;
justify-content: space-between;
transition: 0.3s ease;
height: 3rem;
margin: 3px 0px;
padding: 20px;
padding-top: 25px;
}

/* border:solid rgb(161, 158, 158); */
/* border-radius: 50px; */
/* width:90%; */
/* margin:25px 25px; */
.participant:hover {
box-shadow: 0px 40px 56px rgba(8, 157, 60, 0.05);
transition: 0.3s;
transform:translateY(-1px);
}

.participant-main {
display: flex;
background: #869695;
align-items: center;
justify-content: space-between;
/* text-align: center; */
/* box-shadow: 5px 5px 5px; */
transition: 0.3s ease;
height: 3rem;
/* justify-content: center; */
/* padding:0px 3px ; */
margin: 3px 0px;
transform: translateY(-3px);
padding:20px;
padding-top: 25px;
border-bottom:white solid 1px;
border-top-left-radius: 9px;
border-top-right-radius: 9px;
}
.particdetails {
text-align: center;
align-items: center;
color: white;
margin: 0;
padding: 10px 10px;
font-weight: 500;
width: 15vw;
/* border: 2px solid blue; */
font-weight: 100;
width: 13vw;
}
.partic{
text-align: center;
align-items: center;
color: #00cf90;
margin-top: 5px;
font-weight: 600;
width: 13vw;
}
.partici_icon {
border-radius: 50%;
Expand Down Expand Up @@ -85,7 +96,6 @@

.participant:nth-child(1) {
background: rgba(43, 74, 73, 1);
/* margin: auto 10px; */
padding: 0 5px;
}
.participant:nth-child(2) {
Expand All @@ -97,6 +107,19 @@
.participant:nth-child(4) {
background: rgba(33, 71, 70, 1);
}
.participant-main:nth-child(1) {
background: rgba(43, 74, 73, 1);
padding: 0 5px;
}
.participant-main:nth-child(2) {
background: rgba(9, 40, 39, 1);
}
.participant-main:nth-child(3) {
background: rgba(25, 54, 53, 1);
}
.participant-main:nth-child(4) {
background: rgba(33, 71, 70, 1);
}
@media screen and (max-width: 1074px) {
.participant {
font-size: 15px;
Expand Down
51 changes: 24 additions & 27 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,12 +50,12 @@
<div class="hamburger"> </div>

<ul class="menu">
<li><a href="#hero-section" class="active">HOME</a></li>
<li><a href="#about-section">ABOUT US</a></li>
<li><a href="#mentors">MENTORS</a></li>
<li><a href="#leaderboard">LEADERBOARD</a></li>
<li><a href="#projects">PROJECTS</a></li>
<li><a href="#footer">CONTACT US</a></li>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">MENTORS</a></li>
<li><a href="#">LEADERBOARD</a></li>
<li><a href="#">PROJECTS</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
</div>
</nav>
Expand Down Expand Up @@ -129,21 +129,21 @@ <h1>MENTORS</h1>

<!-- top scorers starts here-->
<section id="leaderboard">
<div id="leader_content">
<h3>LEADERBOARD</h3>
<div id="leader-content">
<h1>LEADERBOARD</h1>
</div>
<div id="leadercontainer">
<div class="participant">
<h3 class="particdetails">Sr No.</h3>
<h3 class="particdetails">Profile</h3>
<h3 class="particdetails">Name</h3>
<h3 class="particdetails">Pr Merged</h3>
<h3 class="particdetails">Total points</h3>
<div class="participant-main">
<h3 class="partic">Sr No.</h3>
<h3 class="partic">Profile</h3>
<h3 class="partic">Name</h3>
<h3 class="partic">Pr Merged</h3>
<h3 class="partic">Total points</h3>
</div>
<div class="participant">
<h3 class="particdetails">1.</h3>
<div class="particdetails">
<img src="images/gitprofilepic.jpg" class="partici_icon">
<img src="https://static-00.iconduck.com/assets.00/github-icon-2048x1988-jzvzcf2t.png" class="partici_icon">
</div>
<h3 class="particdetails">John </h3>
<h3 class="particdetails">20</h3>
Expand All @@ -153,13 +153,11 @@ <h3 class="totalpoints">280</h3>
<path d="M8 14C9.66667 14 11.075 13.4167 12.225 12.25C13.375 11.0833 13.9667 9.66667 14 8V2H8C6.33333 2.03333 4.91667 2.625 3.75 3.775C2.58333 4.925 2 6.33333 2 8C2 9.66667 2.58333 11.0833 3.75 12.25C4.91667 13.4167 6.33333 14 8 14ZM6.825 12.325L11.425 8.225C11.575 8.09167 11.6167 7.93333 11.55 7.75C11.4833 7.56667 11.35 7.45833 11.15 7.425L7.55 7.075L9.7 4.1C9.75 4.01667 9.77933 3.93733 9.788 3.862C9.79667 3.78667 9.76733 3.716 9.7 3.65C9.63333 3.56667 9.55 3.52933 9.45 3.538C9.35 3.54667 9.25833 3.584 9.175 3.65L4.6 7.75C4.45 7.88333 4.40833 8.04167 4.475 8.225C4.54167 8.40833 4.675 8.51667 4.875 8.55L8.475 8.9L6.3 11.875C6.25 11.9583 6.225 12.0373 6.225 12.112C6.225 12.1867 6.25833 12.2577 6.325 12.325C6.39167 12.3917 6.471 12.425 6.563 12.425C6.655 12.425 6.74233 12.3917 6.825 12.325ZM8 16C7.06667 16 6.18767 15.854 5.363 15.562C4.53833 15.27 3.784 14.8577 3.1 14.325L1.725 15.7C1.625 15.8 1.51267 15.875 1.388 15.925C1.26333 15.975 1.134 16 1 16C0.716667 16 0.479333 15.904 0.288 15.712C0.0966668 15.52 0.000666667 15.2827 0 15C0 14.8667 0.0249998 14.7377 0.0749998 14.613C0.125 14.4883 0.2 14.3757 0.3 14.275L1.675 12.9C1.14167 12.2167 0.729334 11.4627 0.438 10.638C0.146667 9.81333 0.000666667 8.934 0 8C0 5.76667 0.775 3.875 2.325 2.325C3.875 0.775 5.76667 0 8 0H16V8C16 10.2333 15.225 12.125 13.675 13.675C12.125 15.225 10.2333 16 8 16Z" fill="white"/>
</svg>
</div>


</div>
<div class="participant">
<h3 class="particdetails">2.</h3>
<div class="particdetails">
<img src="images/gitprofilepic.jpg" class="partici_icon">
<img src="https://static-00.iconduck.com/assets.00/github-icon-2048x1988-jzvzcf2t.png" class="partici_icon">
</div>

<h3 class="particdetails">John</h3>
Expand All @@ -174,7 +172,7 @@ <h3 class="totalpoints">280</h3>
<div class="participant">
<h3 class="particdetails">3.</h3>
<div class="particdetails">
<img src="images/gitprofilepic.jpg" class="partici_icon">
<img src="https://static-00.iconduck.com/assets.00/github-icon-2048x1988-jzvzcf2t.png" class="partici_icon">
</div>

<h3 class="particdetails">John</h3>
Expand All @@ -189,7 +187,7 @@ <h3 class="totalpoints">280</h3>
<div class="participant">
<h3 class="particdetails">4.</h3>
<div class="particdetails">
<img src="images/gitprofilepic.jpg"class="partici_icon">
<img src="https://static-00.iconduck.com/assets.00/github-icon-2048x1988-jzvzcf2t.png"class="partici_icon">
</div>

<h3 class="particdetails">John</h3>
Expand All @@ -204,7 +202,7 @@ <h3 class="totalpoints">280</h3>
<div class="participant">
<h3 class="particdetails">5.</h3>
<div class="particdetails">
<img src="images/gitprofilepic.jpg" class="partici_icon">
<img src="https://static-00.iconduck.com/assets.00/github-icon-2048x1988-jzvzcf2t.png" class="partici_icon">
</div>

<h3 class="particdetails">John</h3>
Expand All @@ -219,7 +217,7 @@ <h3 class="totalpoints">280</h3>
<div class="participant">
<h3 class="particdetails">6.</h3>
<div class="particdetails">
<img src="images/gitprofilepic.jpg" class="partici_icon">
<img src="https://static-00.iconduck.com/assets.00/github-icon-2048x1988-jzvzcf2t.png" class="partici_icon">
</div>

<h3 class="particdetails">John</h3>
Expand All @@ -234,7 +232,7 @@ <h3 class="totalpoints">280</h3>
<div class="participant">
<h3 class="particdetails">7.</h3>
<div class="particdetails">
<img src="images/gitprofilepic.jpg" class="partici_icon">
<img src="https://static-00.iconduck.com/assets.00/github-icon-2048x1988-jzvzcf2t.png" class="partici_icon">
</div>

<h3 class="particdetails">John</h3>
Expand All @@ -249,7 +247,7 @@ <h3 class="totalpoints">280</h3>
<div class="participant">
<h3 class="particdetails">8.</h3>
<div class="particdetails">
<img src="images/gitprofilepic.jpg" class="partici_icon">
<img src="https://static-00.iconduck.com/assets.00/github-icon-2048x1988-jzvzcf2t.png" class="partici_icon">
</div>

<h3 class="particdetails">John</h3>
Expand All @@ -264,7 +262,7 @@ <h3 class="totalpoints">280</h3>
<div class="participant">
<h3 class="particdetails">9.</h3>
<div class="particdetails">
<img src="images/gitprofilepic.jpg" class="partici_icon">
<img src="https://static-00.iconduck.com/assets.00/github-icon-2048x1988-jzvzcf2t.png" class="partici_icon">
</div>

<h3 class="particdetails">John</h3>
Expand All @@ -279,7 +277,7 @@ <h3 class="totalpoints">280</h3>
<div class="participant">
<h3 class="particdetails">10.</h3>
<div class="particdetails">
<img src="images/gitprofilepic.jpg" class="partici_icon">
<img src="https://static-00.iconduck.com/assets.00/github-icon-2048x1988-jzvzcf2t.png" class="partici_icon">
</div>

<h3 class="particdetails">John</h3>
Expand Down Expand Up @@ -502,6 +500,5 @@ <h4>follow us</h4>

<!-- script files -->
<script src="js/index.js"></script>
<script src="js/navbar.js"></script>
</body>
</html>

0 comments on commit ae81f89

Please sign in to comment.