Skip to content

Adding comments in about us page #58

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 22, 2025
Merged

Adding comments in about us page #58

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
192 changes: 129 additions & 63 deletions about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,130 +1,181 @@
<!DOCTYPE html>
<!-- Declare the document type as HTML5 -->
<html lang="en">
<!-- Define the HTML document with English as the primary language -->
<head>
<!-- Specify character encoding for the document to support special characters -->
<meta charset="UTF-8">
<!-- Ensure the page is responsive and scales correctly on all devices -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Include Boxicons library for social media and other icons via CDN -->
<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>
<link rel="stylesheet" href="about.css">
<link rel="stylesheet" href="navbar.css">
<link rel="stylesheet" href="footer.css">


<!-- Link to external CSS files for styling different parts of the page -->
<link rel="stylesheet" href="about.css"> <!-- Styles specific to the About page -->
<link rel="stylesheet" href="navbar.css"> <!-- Styles for the navigation bar -->
<link rel="stylesheet" href="footer.css"> <!-- Styles for the footer section -->

<!-- Define the favicon (icon displayed in the browser tab) -->
<link rel="icon" href="pictures/Fitness.png" type="image/x-icon">

<!-- Preconnect to Google Fonts to optimize font loading (if fonts are used) -->
<link rel="preconnect" href="https://fonts.gstatic.com">
</head>
<body>
<!-- Placeholder div where the navigation bar will be dynamically inserted -->
<div id="nav"></div>

<!-- Header section to introduce the page content -->
<header>
<!-- Load JavaScript for dark mode functionality specific to this page -->
<script src="dark_about.js"></script>

<!-- Container for header text content -->
<div class="header-content">
<!-- Main heading for the About page -->
<h1>Our Fitness Journey</h1>
<!-- Subtitle describing the team's purpose -->
<p class="subtitle">We're a team of passionate coders dedicated to help you achieve your health and wellness goals.</p>
</div>
</header>

<!-- Section to describe the mission of the fitness website -->
<section class="mission">
<!-- Container to center and style the mission content -->
<div class="container">
<!-- Heading for the mission section -->
<h2>Our Mission</h2>
<p class="mission-text">We believe fitness is more than just working out-it's a lifestyle that empowers you to be your best self. Our mission is to create a supportive community where everyone can discover their strength, build confidence, and transform their lives through expert guidance and innovative training techniques.</p>
<!-- Paragraph explaining the mission and vision -->
<p class="mission-text">We believe fitness is more than just working out—it’s a lifestyle that empowers you to be your best self. Our mission is to create a supportive community where everyone can discover their strength, build confidence, and transform their lives through expert guidance and innovative training techniques.</p>
</div>
</section>

<!-- Container for displaying team member cards -->
<div id="cards-container">
<!-- Card content remains the same -->
<!-- Card for the first team member -->
<div class="card" id="card1">
<!-- Overlay for card content, likely shown on hover -->
<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>
<p>Bringing dynamic functionality to life, I specializes in JavaScript-driven interactivity, ensuring an engaging and responsive experience.</p>
<!-- 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>
<!-- 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" />
<path fill="#FBBC05"
d="M10.2 28.64c-1.23-2.04-1.93-4.42-1.93-6.95s.7-4.91 1.93-6.95l-7.49-5.82C.98 13.91 0 18.76 0 23.99s.98 10.08 2.71 14.07l7.49-5.82z" />
<path fill="#34A853"
d="M24 48c6.48 0 11.91-2.15 15.88-5.83l-7.2-5.6c-2.03 1.36-4.63 2.15-8.68 2.15-6.34 0-11.87-3.55-14.81-8.86l-7.49 5.82C6.73 42.33 14.68 48 24 48z" />
<path fill="none" d="M0 0h48v48H0z" />
<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" />
<path fill="#FBBC05" d="M10.2 28.64c-1.23-2.04-1.93-4.42-1.93-6.95s.7-4.91 1.93-6.95l-7.49-5.82C.98 13.91 0 18.76 0 23.99s.98 10.08 2.71 14.07l7.49-5.82z" />
<path fill="#34A853" d="M24 48c6.48 0 11.91-2.15 15.88-5.83l-7.2-5.6c-2.03 1.36-4.63 2.15-8.68 2.15-6.34 0-11.87-3.55-14.81-8.86l-7.49 5.82C6.73 42.33 14.68 48 24 48z" />
<path fill="none" d="M0 0h48v48H0z" />
</svg>
</a>
<!-- Twitter profile link using Boxicons -->
<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 -->
<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="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>
<p>Crafting intuitive and visually engaging designs,I ensures seamless user navigation with expert HTML and CSS styling. Their keen focus on user experience makes every interaction smooth.</p><br>
<!-- 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>
<!-- Container for social media links -->
<div class="social-icons">
<!-- Google profile link with custom SVG icon -->
<a href="#" class="google-icon">
<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" />
<path fill="#FBBC05"
d="M10.2 28.64c-1.23-2.04-1.93-4.42-1.93-6.95s.7-4.91 1.93-6.95l-7.49-5.82C.98 13.91 0 18.76 0 23.99s.98 10.08 2.71 14.07l7.49-5.82z" />
<path fill="#34A853"
d="M24 48c6.48 0 11.91-2.15 15.88-5.83l-7.2-5.6c-2.03 1.36-4.63 2.15-8.68 2.15-6.34 0-11.87-3.55-14.81-8.86l-7.49 5.82C6.73 42.33 14.68 48 24 48z" />
<path fill="none" d="M0 0h48v48H0z" />
<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" />
<path fill="#FBBC05" d="M10.2 28.64c-1.23-2.04-1.93-4.42-1.93-6.95s.7-4.91 1.93-6.95l-7.49-5.82C.98 13.91 0 18.76 0 23.99s.98 10.08 2.71 14.07l7.49-5.82z" />
<path fill="#34A853" d="M24 48c6.48 0 11.91-2.15 15.88-5.83l-7.2-5.6c-2.03 1.36-4.63 2.15-8.68 2.15-6.34 0-11.87-3.55-14.81-8.86l-7.49 5.82C6.73 42.33 14.68 48 24 48z" />
<path fill="none" d="M0 0h48v48H0z" />
</svg>
</a>

<!-- Twitter profile link using Boxicons -->
<a href="#"><i class='bx bxl-twitter'></i></a>
<!-- GitHub profile link -->
<a href="https://github.com/TanishMehta23"><i class='bx bxl-github'></i></a>
<a href="https://www.linkedin.com/in/tanish-mehta-43bb102b8/"><i class='bx bxl-linkedin'></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>
</div>
</div>
</div>

<!-- Card for the third team member -->
<div class="card" id="card3">
<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>
<p>Driving meaningful engagement, I curates compelling content, optimizes SEO, and ensures the website remains informative and impactful. Their expertise elevates the platforms reach and effectiveness.</p><br>
<!-- 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>
<!-- Container for social media links -->
<div class="social-icons">
<!-- Google profile link with custom SVG icon -->
<a href="#" class="google-icon">
<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" />
<path fill="#FBBC05"
d="M10.2 28.64c-1.23-2.04-1.93-4.42-1.93-6.95s.7-4.91 1.93-6.95l-7.49-5.82C.98 13.91 0 18.76 0 23.99s.98 10.08 2.71 14.07l7.49-5.82z" />
<path fill="#34A853"
d="M24 48c6.48 0 11.91-2.15 15.88-5.83l-7.2-5.6c-2.03 1.36-4.63 2.15-8.68 2.15-6.34 0-11.87-3.55-14.81-8.86l-7.49 5.82C6.73 42.33 14.68 48 24 48z" />
<path fill="none" d="M0 0h48v48H0z" />
<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" />
<path fill="#FBBC05" d="M10.2 28.64c-1.23-2.04-1.93-4.42-1.93-6.95s.7-4.91 1.93-6.95l-7.49-5.82C.98 13.91 0 18.76 0 23.99s.98 10.08 2.71 14.07l7.49-5.82z" />
<path fill="#34A853" d="M24 48c6.48 0 11.91-2.15 15.88-5.83l-7.2-5.6c-2.03 1.36-4.63 2.15-8.68 2.15-6.34 0-11.87-3.55-14.81-8.86l-7.49 5.82C6.73 42.33 14.68 48 24 48z" />
<path fill="none" d="M0 0h48v48H0z" />
</svg>
</a>
<!-- Twitter profile link using Boxicons -->
<a href="#"><i class='bx bxl-twitter'></i></a>
<!-- GitHub profile link -->
<a href="https://github.com/Vans30m"><i class='bx bxl-github'></i></a>
<!-- LinkedIn profile link -->
<a href="https://www.linkedin.com/in/vansh-thakur-b6bbbb33a/"><i class='bx bxl-linkedin'></i></a>
</div>
</div>
</div>
</div>

<!-- Section to display statistics with animated counters -->
<section class="stats">
<!-- Container to center and style the stats content -->
<div class="container">
<!-- Grid layout for organizing stat items -->
<div class="stats-grid">
<!-- First statistic item -->
<div class="stat-item">
<!-- Counter with target value for animation -->
<h3 class="counter" data-target="5">0</h3>
<!-- Description of the statistic -->
<p>Years of Experience</p>
</div>
<!-- Second statistic item -->
<div class="stat-item">
<h3 class="counter" data-target="1500">0</h3>
<p>Happy Clients</p>
</div>
<!-- Third statistic item -->
<div class="stat-item">
<h3 class="counter" data-target="25">0</h3>
<p>Fitness Programs</p>
</div>
<!-- Fourth statistic item -->
<div class="stat-item">
<h3 class="counter" data-target="98">0</h3>
<p>Success Rate</p>
Expand All @@ -133,55 +184,70 @@ <h3 class="counter" data-target="98">0</h3>
</div>
</section>

<!-- Call-to-action section to encourage user sign-up -->
<section class="cta">
<!-- Container to center and style the CTA content -->
<div class="container">
<!-- Heading for the call-to-action -->
<h2>Ready to Transform Your Life?</h2>
<!-- Description motivating users to join -->
<p>Join our fitness community today and take the first step toward a healthier, stronger you. Our expert trainers are ready to guide you on your fitness journey.</p>
<!-- Button linking to the sign-in page -->
<a href="signin.html" class="btn">Join Now</a>
</div>
</section>

<div id="navbar"></div> <!-- Placeholder for navbar -->
<!-- Placeholder div for navigation bar (possibly used for sticky or bottom navigation) -->
<div id="navbar"></div>

<!-- Placeholder div where the footer will be dynamically inserted -->
<div id="footer"></div>

<!-- Chatbox feature for user interaction with an assistant -->
<div class="chatbox">
<!-- Container for the chat interface -->
<div class="chat-container">
<!-- Title for the chatbox -->
<div class="h1">Talk to your own assistant...</div>
</div>
<!-- Input area for user queries -->
<div class="input-area">
<!-- Text input for user to type questions -->
<input type="text" class="prompt" placeholder="Ask anything">
<button type="button" class="arrow"><img src="pictures/btn.svg" alt="img"></button>
<!-- Button to submit the query with an SVG icon -->
<button type="button" class="arrow"><img src="pictures/btn.svg" alt="Send button"></button>
</div>
</div>

<!-- Script to dynamically load the navigation bar from an external HTML file -->
<script>
// Fetch the navbar.html file and insert its content into the navbar div
fetch('navbar.html')
.then(response => response.text())
.then(data => {
document.getElementById('navbar').innerHTML = data;
});
</script>

.then(response => response.text())
.then(data => {
document.getElementById('navbar').innerHTML = data;
});
</script>

<!-- Script to dynamically load the footer from an external HTML file -->
<script>
// Fetch the footer.html file and insert its content into the footer div
fetch('footer.html')
.then(response => response.text())
.then(data => {
document.getElementById('footer').innerHTML = data;
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"
integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<!-- make sure to put gsap link before linking script.js -->
<!--gsap cdn is a js library for scrolling animations-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"
integrity="sha512-onMTRKJBKz8M1TnqqDuGBlowlH0ohFzMXYRNebz+yOcc5TQr/zAKsthzhuv0hiyUKEiQEQXEynnXCvNTOk50dg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script> <!-- plugin for gsap-->
.then(response => response.text())
.then(data => {
document.getElementById('footer').innerHTML = data;
});
</script>

<!-- Include GSAP library for creating smooth animations -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="about.js"></script>
<script src="chatbot.js"></script>
<script src="navbar.js"></script>
<!-- Include GSAP ScrollTrigger plugin for scroll-based animations -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js" integrity="sha512-onMTRKJBKz8M1TnqqDuGBlowlH0ohFzMXYRNebz+yOcc5TQr/zAKsthzhuv0hiyUKEiQEQXEynnXCvNTOk50dg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<!-- Custom JavaScript files for page-specific functionality -->
<script src="about.js"></script> <!-- Handles animations and logic for the About page -->
<script src="chatbot.js"></script> <!-- Manages the chatbot functionality -->
<script src="navbar.js"></script> <!-- Controls navigation bar behavior -->
</body>
</html>