Skip to content

Chetan Card Fixed #66

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

Merged
Vans30-m merged 1 commit into from
Apr 23, 2025
Merged

Chetan Card Fixed #66

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
90 changes: 58 additions & 32 deletions about.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,36 +53,66 @@ body {
background-color:black;
height: 60vh;
display: flex;
justify-content: space-evenly;
display: flex;
justify-content: center;
align-items: center;
gap: 70px;
position: relative;
z-index: 10;
padding: 4px;
}


.card {
height: 80%;
width: 28%;
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
background-size: cover;
background-position: center;
/* overflow: visible; */
transition: all ease 0.6s;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
width: 450px;
height: 500px;
overflow: hidden;
transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
transform-style: preserve-3d;
perspective: 1000px;
/* Add these properties to center children */
display: flex;
justify-content: center;
align-items: center;
}

.card:hover {
transform: translateY(-15px) rotateX(5deg);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}

.card::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transform: rotate(45deg);
transition: 0.8s;
opacity: 0;
}

#card1 {
background-image: url('pictures/Chetan.png');
.card:hover::before {
animation: shine 1.5s;
}

#card2 {
background-image: url('pictures/Tanish.png');
.profile-image {
/* Increase dimensions to something more visible */
height: 500px;
width: 500px;
/* Optional: add a border or styling to the container */
overflow: hidden;
}

#card3 {
background-image: url('pictures/Vansh.png');
.profile-image img {
/* Make the image fill its container */
width: 100%;
height: 100%;
object-fit: cover; /* This keeps the image proportional */
}

.overlay {
Expand Down Expand Up @@ -204,9 +234,10 @@ h1 {

.team-role {
color: var(--primary);
font-weight: 600;
margin-bottom: 15px;
font-weight: 6000;
margin-bottom: 25px;
display: block;
font-size: larger;
}

.social-links {
Expand Down Expand Up @@ -236,27 +267,19 @@ html.dark .social-icons a {
}

.social-icons .bxl-twitter:hover {
color: rgb(17, 17, 17);
color: rgb(221, 216, 216);
}
.google-icon svg {
width: 24px; /* Ensure SVG scales within the container */
height: 24px; /* Ensure SVG scales within the container */
}

.social-icons .bxl-github {
color: rgb(5, 5, 5);
}

.social-icons .bxl-github:hover {
color: rgb(249, 246, 246);
width: 24px;
height: 24px;
}

.social-icons .bxl-github {
color: #f5f5f5;
color: #000000;
}

.social-icons .bxl-github:hover {
color: #060505;
color: #ffffff;
}
.social-icons .bxl-linkedin {
color: rgb(45, 76, 232);
Expand All @@ -266,6 +289,10 @@ html.dark .social-icons a {
color: lightskyblue;
}

a:hover{
background-color: black;
}

.stats {
padding: 80px 20px;
background-color: var(--secondary);
Expand Down Expand Up @@ -418,5 +445,4 @@ overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
hyphens: auto;
}

}
32 changes: 21 additions & 11 deletions about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>

<!-- Set the browser tab title for the About Us page -->
<title>About Us - Fitness Website</title>
<title> Fitness Planet - About Us</title>

<!-- Link to external CSS files for styling different parts of the page -->
<link rel="stylesheet" href="about.css"> <!-- Styles specific to the About page -->
Expand Down Expand Up @@ -54,23 +54,23 @@ <h2>Our Mission</h2>
</div>
</section>

<!-- Container for displaying team member cards -->

<div id="cards-container">
<!-- Card for the first team member -->
<div class="card" id="card1">
<!-- Overlay for card content, likely shown on hover -->
<div class="profile-image">
<img src="pictures/Chetan.jpg" alt="Chetan Ajmani" >
</div>
<div class="overlay">
<!-- Team member's name -->
<h4>Chetan Ajmani</h4>
<!-- Role or title of the team member -->
<span class="team-role">JavaScript Developer & Interactive Features Expert</span>
<!-- Description of the team member's contributions -->
<p>Bringing dynamic functionality to life, I specialize in JavaScript-driven interactivity, ensuring an engaging and responsive experience.</p><br>
<p>Bringing functionality to life,I specialize in JavaScript interactivity,engaging and responsive experience.</p><br>
<!-- Container for social media links -->
<div class="social-icons">
<!-- Google profile link with custom SVG icon -->
<a href="#" class="google-icon">
<!-- SVG for Google icon with colored segments -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 48 48">
<path fill="#EA4335" d="M24 9.5c3.31 0 6.29 1.14 8.63 3.03l6.43-6.43C34.92 2.36 29.72 0 24 0 14.68 0 6.73 5.67 2.71 13.86l7.49 5.82C12.13 13.05 17.66 9.5 24 9.5z" />
<path fill="#4285F4" d="M46.2 24.5c0-1.43-.13-2.81-.38-4.13H24v8.05h12.52c-.54 2.83-2.16 5.22-4.63 6.84l7.2 5.6C43.7 36.17 46.2 30.77 46.2 24.5z" />
Expand All @@ -83,21 +83,25 @@ <h4>Chetan Ajmani</h4>
<a href="#"><i class='bx bxl-twitter'></i></a>
<!-- GitHub profile link -->
<a href="https://github.com/Chet07-R"><i class='bx bxl-github'></i></a>
<!-- LinkedIn profile link -->
<!-- LinkedIn profile link (note: href attribute seems incomplete) -->
<a href="https://www.linkedin.com/in/chetan-ajmani-679b51249/"><i class='bx bxl-linkedin'></i></a>
</div>
</div>
</div>



<!-- Card for the second team member -->
<div class="card" id="card2">
<div class="profile-image">
<img src="pictures/Tanish.png" alt="Tanish Mehta">
</div>
<div class="overlay">
<!-- Team member's name -->
<h4>Tanish Mehta</h4>
<!-- Role or title of the team member -->
<span class="team-role">Front-End Specialist & UI/UX Expert</span>
<!-- Description of the team member's contributions -->
<p>Crafting intuitive and visually engaging designs, I ensure seamless user navigation with expert HTML and CSS styling. Their keen focus on user experience makes every interaction smooth.</p><br>
<p>Crafting engaging designs,I ensure seamless user navigation with HTML and CSS styling.</p><br>
<!-- Container for social media links -->
<div class="social-icons">
<!-- Google profile link with custom SVG icon -->
Expand All @@ -115,20 +119,24 @@ <h4>Tanish Mehta</h4>
<!-- GitHub profile link -->
<a href="https://github.com/TanishMehta23"><i class='bx bxl-github'></i></a>
<!-- LinkedIn profile link (note: href attribute seems incomplete) -->
<a href="https://www.linkedin.com/in/t="https://www.linkedin.com/in/tanish-mehta-43bb102b8/"><i class='bx bxl-linkedin'></i></a>
<a href="https://www.linkedin.com/in/tanish-mehta-43bb102b8/"><i class='bx bxl-linkedin'></i></a>
</div>
</div>
</div>


<!-- Card for the third team member -->
<div class="card" id="card3">
<div class="profile-image">
<img src="pictures/Vansh.png" alt="Vansh Thakur">
</div>
<div class="overlay">
<!-- Team member's name -->
<h4>Vansh Thakur</h4>
<!-- Role or title of the team member -->
<span class="team-role">Content Strategist & Digital Optimization Specialist</span>
<!-- Description of the team member's contributions -->
<p>Driving meaningful engagement, I curate compelling content, optimize SEO, and ensure the website remains informative and impactful. Their expertise elevates the platform's reach and effectiveness.</p><br>
<p>I curate compelling content, optimize , and ensure the website remains informative and impactful.</p><br>
<!-- Container for social media links -->
<div class="social-icons">
<!-- Google profile link with custom SVG icon -->
Expand All @@ -151,6 +159,8 @@ <h4>Vansh Thakur</h4>
</div>
</div>
</div>
</div>


<!-- Section to display statistics with animated counters -->
<section class="stats">
Expand Down
Loading