Skip to content

Commit

Permalink
Merge pull request #61 from thecoding-society/newjudges
Browse files Browse the repository at this point in the history 
Judges added and commented
  • Loading branch information
@p-sarath-kumaran
p-sarath-kumaran authored Sep 19, 2024
2 parents 658d2c8 + 32487d9 commit adc2a18
Show file tree
Hide file tree
Showing 3 changed files with 324 additions and 4 deletions.
178 changes: 177 additions & 1 deletion css/style1.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -880,4 +880,180 @@ input:checked + .clash .description {
display: flex;
flex-direction: column;
}
}
}

/*========== BASE ==========*/
*,::before,::after{
box-sizing: border-box;
}

body{
margin: 0;
padding: 0;
font-family: var(--body-font);
font-size: var(--normal-font-size);
}

h3{
margin: 0;
}

a{
text-decoration: none;
}

img{
max-width: 100%;
height: auto;
}

.bd-container{
max-width: 968px;
width: calc(100% - 3rem);
margin-left: 1.5rem;
margin-right: 1.5rem;
}

/*========== CARD GLASS ==========*/
.card-j{
position: relative;
overflow: hidden;
padding: 3rem 0;
background-color: var(--body-color);
}

.card__container{
display: grid;
gap: 1.5rem;
}

.card__glass{
position: relative;
overflow: hidden;
text-align: center;
padding: 1.8rem;
background: linear-gradient(130deg,rgba(251,251,254,.6),rgba(251,251,254,.2));
box-shadow: inset 2px 2px 1px rgba(251,251,254,.3),inset -2px -2px 1px rgba(251,251,254,.2);
border-radius: 1.5rem;
backdrop-filter: blur(10px);
}

.card__img{
width: 80px;
height: 80px;
border-radius: 50%;
border: 2px solid #F4F4FB;
margin-bottom: 1rem;
}

.card__data{
margin-bottom: .5rem;
}

.card__title{
font-size: 1.125rem;
color: black;
font-weight: 700;
margin-bottom: .25rem;
}

.card__profession{
font-size: .813rem;
color: var(--text-color);
font-weight: 500;
}

.card__button{
display: inline-block;
background: linear-gradient(130deg, rgba(251,251,254,.9),rgba(251,251,254,.2));
padding: .75rem 1.5rem;
border-radius: .5rem;
color: var(--title-color);
font-weight: 500;
transition: .4s;
}

.card__button:hover{
background: linear-gradient(130deg, rgba(251,251,254,1),rgba(251,251,254,.4));
}

.card__social{
position: absolute;
top: 50%;
transform: translateY(-50%);
}

.card__link{
display: block;
font-size: 1.35rem;
color: var(--title-color);
margin: 1rem 0;
transform: translateX(-5rem);
}

.card__link:nth-child(1){
transition: .2s;
}
.card__link:nth-child(2){
transition: .5s;
}
.card__link:nth-child(3){
transition: .7s;
}

.card__glass:hover .card__link{
transform: translateX(-1.5rem);
}

.card__circle{
position: absolute;
width: 250px;
height: 250px;
background: linear-gradient(130deg, rgba(77,73,191,.8),rgba(255,255,255,.2));
border-radius: 50%;
}

.card__circle1{
top: 20%;
left: -20%;
}

.card__circle2{
bottom: -5%;
right: -25%;
background: linear-gradient(130deg, rgba(5,219,242,.8),rgba(255,255,255,.2));
}

/*========== MEDIA QUERIES ==========*/
@media screen and (min-width: 568px){
.card__container{
grid-template-columns: repeat(2, 1fr);
}
}

@media screen and (min-width: 768px){
.bd-container{
margin-left: auto;
margin-right: auto;
}

.card{
padding: 0;
}

.card__container{
height: 100vh;
grid-template-columns: repeat(3, 1fr);
align-content: center;
}

.card__circle1{
left: 5%;
top: 12%;
}

.card__circle2{
right: 8%;
bottom: 15%;
}
}
4 changes: 3 additions & 1 deletion css/style2.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,9 @@ h2 {
.back_prices {
background-color: #f0f5fa;
}

.back_judges{
background-color: rgb(208, 229, 236);
}
/* Responsive for Sections styles */
@media (min-width: 768px) {
.back_glimpse {
Expand Down
146 changes: 144 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
<!-- Favicon -->
<link rel="icon" href="img/favicon.svg" />
<title>PEC Hacks | Hackathon</title>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">
<!-- Website Details -->
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
Expand Down Expand Up @@ -890,9 +890,151 @@ <h2><b id="light-des">Community Partners</b></h2>
</div>
</div>
</section>
<!-- End of Sponsors Section -->

<!-- Start of Judges and Speaker -->

<!-- End of Sponsors Section -->
<!-- <section class="card-j back_judges">
<div class="heading">
<h1 class="heading-shadow" style="color: rgb(212, 197, 197);">Judges</h1>
<h2 class="heading-small" style="color: black">
<div style="overflow: hidden">
<div style="transform: translateY(0%); will-change: auto">J</div>
</div>
<div style="overflow: hidden">
<div style="transform: translateY(0%); will-change: auto">U</div>
</div>
<div style="overflow: hidden">
<div style="transform: translateY(0%); will-change: auto">D</div>
</div>
<div style="overflow: hidden">
<div style="transform: translateY(0%); will-change: auto">G</div>
</div>
<div style="overflow: hidden">
<div style="transform: translateY(0%); will-change: auto">E</div>
</div>
<div style="overflow: hidden">
<div style="transform: translateY(0%); will-change: auto">S</div>
</div>
</h2>
</div>
<div class="card__circle card__circle1"></div>
<div class="card__circle card__circle2"></div>
<div class="card__container bd-container">
<div class="card__glass">
<img src="img/judges/judges/1.png" alt="" class="card__img">
<div class="card__data">
<h3 class="card__title">M S Balamurugan</h3>
<span class="card__profession">Chief Talent Officer</span><br>
<span class="card__profession">Panimalar Engineering College</span>
</div>
<a href="#" class="card__button">Know more</a>
<div class="card__social">
<a href="#" class="card__link"><i class='bx bxl-instagram' ></i></a>
<a href="#" class="card__link"><i class='bx bxl-facebook'></i></a>
<a href="#" class="card__link"><i class='bx bxl-twitter' ></i></a>
</div>
</div>
<div class="card__glass">
<img src="img/judges/judges/12.jpg" alt="" class="card__img">
<div class="card__data">
<h3 class="card__title">Kamal Balakrishnan</h3>
<span class="card__profession">Chief Technology Officer</span><br>
<span class="card__profession">iPro AT Solutions</span>
</div>
<a href="#" class="card__button">Know more</a>
<div class="card__social">
<a href="#" class="card__link"><i class='bx bxl-instagram' ></i></a>
<a href="#" class="card__link"><i class='bx bxl-facebook'></i></a>
<a href="#" class="card__link"><i class='bx bxl-twitter' ></i></a>
</div>
</div>
<div class="card__glass">
<img src="img/judges/judges/8.jpg" alt="" class="card__img">
<div class="card__data">
<h3 class="card__title">Santosh Chaluvadi</h3>
<span class="card__profession">Founder & CEO</span><br>
<span class="card__profession">Supraja Technologies</span>
</div>
<a href="#" class="card__button">Know more</a>
<div class="card__social">
<a href="#" class="card__link"><i class='bx bxl-instagram' ></i></a>
<a href="#" class="card__link"><i class='bx bxl-facebook'></i></a>
<a href="#" class="card__link"><i class='bx bxl-twitter' ></i></a>
</div>
</div>
<div class="card__glass">
<img src="img/judges/judges/4.jpg" alt="" class="card__img">
<div class="card__data">
<h3 class="card__title">Naresh Jayabalan</h3>
<span class="card__profession">Senior Test Lead</span><br>
<span class="card__profession">Indium Software (India) Limited</span>
</div>
<a href="#" class="card__button">Know more</a>
<div class="card__social">
<a href="#" class="card__link"><i class='bx bxl-instagram' ></i></a>
<a href="#" class="card__link"><i class='bx bxl-facebook'></i></a>
<a href="#" class="card__link"><i class='bx bxl-twitter' ></i></a>
</div>
</div>
<div class="card__glass">
<img src="img/judges/judges/5.jpg" alt="" class="card__img">
<div class="card__data">
<h3 class="card__title">Aravindh</h3>
<span class="card__profession">Founder & CEO</span><br>
<span class="card__profession">iPro At Solutions</span>
</div>
<a href="#" class="card__button">Know more</a>
<div class="card__social">
<a href="#" class="card__link"><i class='bx bxl-instagram' ></i></a>
<a href="#" class="card__link"><i class='bx bxl-facebook'></i></a>
<a href="#" class="card__link"><i class='bx bxl-twitter' ></i></a>
</div>
</div>
<div class="card__glass">
<img src="img/judges/judges/7.jpg" alt="" class="card__img">
<div class="card__data">
<h3 class="card__title">Anil Gupta</h3>
<span class="card__profession">Lead Engineer</span><br>
<span class="card__profession">Radisys Corporation</span>
</div>
<a href="#" class="card__button">Know more</a>
<div class="card__social">
<a href="#" class="card__link"><i class='bx bxl-instagram' ></i></a>
<a href="#" class="card__link"><i class='bx bxl-facebook'></i></a>
<a href="#" class="card__link"><i class='bx bxl-twitter' ></i></a>
</div>
</div>
</div>
</section> -->

<!-- End of judges and speakers -->

<!-- Start of Partner with us -->
<section id="proposal" class="cta back_puw">
Expand Down

0 comments on commit adc2a18

Please sign in to comment.