Skip to content

Fix UI/UX issues in Numbers section, Animations, and Team Cards #114

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Sejal-hani wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fix UI/UX issues in Numbers section, Animations, and Team Cards #114

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 21 additions & 21 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,10 +162,6 @@
<a class="nav-link" href="#apply">Apply</a>
</li>

<li class="nav-item">

<a class="nav-link" href="#footer">Contact</a>
</li>
</ul>
</div>
</nav>
Expand Down Expand Up @@ -247,7 +243,7 @@ <h1 class="display-4 heading font-weight-bold">

<h1 class="display-5 text-center text-light">Program Offerings</h1>
<h5 class="text-center text-light">
We focus on all round development to make you interview ready 👩🏻‍💻
We focus on all round development to make you interview ready
</h5>
<div class="container">
<div class="row mt-5">
Expand Down Expand Up @@ -681,9 +677,7 @@ <h2>Organization Lead : Bangladesh<br />AVP, QA | Green Delta Insurance</h2>
<div class="detail">
<h2>
Hira Farooq<br />
<h2>Organization Lead : Pakistan<br /> APM: Vyro

</h2>
<h2>Organization Lead : Pakistan<br /> APM: Vyro</h2>
</h2>

</div>
Expand Down Expand Up @@ -767,32 +761,38 @@ <h2>Organization Lead : UAE <br />Web Developer | UI / UX Designer</h2>
<section id="numbers" class="my-1">
<div class="container-fluid mt-5 " id="placement-banner">
<div class="container text-center">
<h1 class="display-6 text-center font-weight-bold">
<h1 class="display-6 text-center font-weight-bold mb-5">
Numbers Speak Louder
</h1>
<div class="row">
<div class="col-lg-3 col-sm-6 mt-3">
<h4 class="display-4 count font-weight-bold counter" data-target="700"></h4>
<br>
<h5>Community members</h5>
<div class="stat-card h-100">
<h4 class="display-4 count font-weight-bold counter mb-3" data-target="700"></h4>
<h5>Community members</h5>
</div>
</div>
<div class="col-lg-3 col-sm-6 mt-3">
<h4 class="display-4 count font-weight-bold counter" data-target="500"></h4>
<br>
<h5>Offers and Scholarships Bagged</h5>
<div class="stat-card h-100">
<h4 class="display-4 count font-weight-bold counter mb-3" data-target="500"></h4>
<h5>Offers and Scholarships Bagged</h5>
</div>
</div>

<div class="col-lg-3 col-sm-6 mt-3">
<h4 class="display-4 count font-weight-bold counter" data-target="50"></h4>
<br>
<h5>Companies</h5>
<div class="stat-card h-100">
<h4 class="display-4 count font-weight-bold counter mb-3" data-target="50"></h4>
<h5>Companies</h5>
</div>
</div>
<div class="col-lg-3 col-sm-6 mt-3">
<h4 class="display-4 count font-weight-bold counter" data-target="22,00,000"></h4>
<br>
<h5>Average CTC</h5>
<div class="stat-card h-100">
<h4 class="display-4 count font-weight-bold counter mb-3" data-target="2200000"></h4>
<h5>Average CTC</h5>
</div>
</div>
</div>
</div>
</div>
</section>

<section id="apply" class="mentors-section">
Expand Down
59 changes: 54 additions & 5 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ body {
font-family: Nunito, sans-serif;
color: black;
background-color: #ebedee;
overflow-x: hidden;
}

/* .nav-link{
Expand Down Expand Up @@ -312,6 +313,23 @@ body {
height: 100px;
border-radius: 50%;
margin-top: -50px;
animation: floating 3s ease-in-out infinite;
}

.circle:nth-child(1) {
animation-delay: 0s;
}
.circle:nth-child(2) {
animation-delay: 0.5s;
}
.circle:nth-child(3) {
animation-delay: 1s;
}
.circle:nth-child(4) {
animation-delay: 1.5s;
}
.circle:nth-child(5) {
animation-delay: 2s;
}

#cicle-logo {
Expand Down Expand Up @@ -477,7 +495,7 @@ body {
padding: 20px 20px 0px 0px;
}
.card-testimonials:hover{
border: 3px solid #cb68f3;
border: 1px solid #cb68f3;
transform: scale(1.02);
}
.img-bx {
Expand Down Expand Up @@ -536,9 +554,36 @@ body {
transform: scale(1.2); /* Scale the icon on hover */
}

.mt-5 :hover{
transform: scale(1.1);
transition-duration: 0.8s;
.stat-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
background: rgba(255, 255, 255, 0.25); /* Glaze/Glass effect */
background: rgba(255, 255, 255, 0.15); /* Glaze/Glass effect - Reduced opacity */
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.4);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 16px;
padding: 20px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
.stat-card:hover {
transform: translateY(-10px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
background: rgba(255, 255, 255, 0.4);
background: rgba(255, 255, 255, 0.3);
}
.stat-card h4 {
font-size: 2.5rem;
color: #9549eb;
-webkit-text-fill-color: #9549eb;
transition: all 0.3s ease;
}
.stat-card:hover h4 {
background: linear-gradient(90deg, #5848ea, #9549eb, #fa709a, #5848ea);
background-size: 300% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: button-gradient 4s ease-in-out infinite;
}

.circle-mentors {
Expand Down Expand Up @@ -1386,6 +1431,11 @@ h1.big-heading {
}
}

#apply {
position: relative;
overflow: hidden;
}

/* footer */

.container-footer {
Expand Down Expand Up @@ -1504,4 +1554,3 @@ h1.big-heading {
.container-faq {
padding: 3%;
}