Skip to content

Commit

Permalink
added_fitness_website (Avdhesh-Varshney#424)
Browse files Browse the repository at this point in the history 
* added_fitness_website

* Update vanilla.json

* Update README.md
  • Loading branch information
@aditya-bhaumik
aditya-bhaumik authored Jun 29, 2024
1 parent 5150fd3 commit 9165bf5
Show file tree
Hide file tree
Showing 16 changed files with 916 additions and 3 deletions.
82 changes: 82 additions & 0 deletions Vanilla-JS-Projects/Intermediate/Fitness-Website/README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
<h1 align='center'><b>💥 TRAVEL WEBSITE 💥</b></h1>

<!-- -------------------------------------------------------------------------------------------------------------- -->

<h3 align='center'>Tech Stack Used 🎮</h3>
<!-- enlist all the technologies used to create this project from them (Remove comment using 'ctrl+z' or 'command+z') -->

<div align='center'>

![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)
![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)
<!-- ![Bootstrap](https://img.shields.io/badge/bootstrap-%238511FA.svg?style=for-the-badge&logo=bootstrap&logoColor=white) -->
![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
<!-- ![jQuery](https://img.shields.io/badge/jquery-%230769AD.svg?style=for-the-badge&logo=jquery&logoColor=white) -->
<!-- ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB) -->
<!-- ![Redux](https://img.shields.io/badge/redux-%23593d88.svg?style=for-the-badge&logo=redux&logoColor=white) -->
<!-- ![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white) -->
<!-- ![Web3.js](https://img.shields.io/badge/web3.js-F16822?style=for-the-badge&logo=web3.js&logoColor=white) -->
<!-- ![Express.js](https://img.shields.io/badge/express.js-%23404d59.svg?style=for-the-badge&logo=express&logoColor=%2361DAFB) -->
<!-- ![Angular.js](https://img.shields.io/badge/angular.js-%23E23237.svg?style=for-the-badge&logo=angularjs&logoColor=white) -->
<!-- ![Next JS](https://img.shields.io/badge/Next-black?style=for-the-badge&logo=next.js&logoColor=white) -->
<!-- ![NodeJS](https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge&logo=node.js&logoColor=white) -->
<!-- ![Vue.js](https://img.shields.io/badge/vuejs-%2335495e.svg?style=for-the-badge&logo=vuedotjs&logoColor=%234FC08D) -->
<!-- ![MongoDB](https://img.shields.io/badge/MongoDB-%234ea94b.svg?style=for-the-badge&logo=mongodb&logoColor=white) -->
</div>


![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)

<!-- -------------------------------------------------------------------------------------------------------------- -->

## :zap: Description 📃

<div>
<!-- <p>Add Description of the project</p> -->
<p>A fitness website provides users with resources and tools for improving their physical health, including workout plans, exercise tutorials, nutrition advice, and tracking features to help users achieve their fitness goals.</p>
</div>


<!-- -------------------------------------------------------------------------------------------------------------- -->

## :zap: How to run it? 🕹️

<!-- Add steps how to run this project -->
Steps to run this website on your local machine:

Download the code: Click on the "Code" button and select "Download ZIP". Extract the downloaded ZIP file to a folder on your computer.

Open the project folder: Navigate to the folder where you extracted the ZIP file.

Open index.html: Double-click on the index.html file. This will open the website in your default web browser.

View and interact with the website: You can now explore the different pages and functionalities of the fitness website directly in your browser.


<!-- -------------------------------------------------------------------------------------------------------------- -->

## :zap: Screenshots 📸
<!-- add the screenshot of the project (Mandatory) -->

![image](https://github.com/aditya-bhaumik/WebMasterLog/assets/92214013/82096e6d-0daf-4cfd-a732-a28e0f686c2d)




![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)

<!-- -------------------------------------------------------------------------------------------------------------- -->

<h4 align='center'>Developed By <b><i>Aditya Bhaumik</i></b> 👦</h4>
<p align='center'>
<a href='https://www.linkedin.com/in/aditya-bhaumik-62b6b2220/'>
<img src='https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white' />
</a>
<a href='https://github.com/aditya-bhaumik'>
<img src='https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white' />
</a>
</p>

<h4 align='center'>Happy Coding 🧑‍💻</h4>

<h3 align="center">Show some &nbsp;❤️&nbsp; by &nbsp;🌟&nbsp; this repository!</h3>
189 changes: 189 additions & 0 deletions Vanilla-JS-Projects/Intermediate/Fitness-Website/contact.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,189 @@
/* Reset and Base Styles */
body {
font-family: Arial, sans-serif;
background: linear-gradient(135deg, #008080, #00ced1);
color: #fff;
margin: 0;
padding: 0;
}

header {
background: rgba(0, 0, 0, 0.7);
padding: 1rem 0;
}

nav {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}

.logo {
font-size: 1.5rem;
animation: fade-in 1s ease-in;
}

.nav-links {
list-style: none;
display: flex;
gap: 1rem;
animation: slide-in 1s ease-in;
}

.nav-links li a {
color: #fff;
text-decoration: none;
padding: 0.5rem;
}

.nav-links li a:hover {
background: rgba(255, 255, 255, 0.2);
border-radius: 5px;
}

.burger {
display: none;
cursor: pointer;
flex-direction: column;
gap: 0.3rem;
}

.burger div {
width: 25px;
height: 3px;
background: #fff;
}

.main-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 80vh;
padding: 2rem;
}

.contact-form-container {
background: rgba(255, 255, 255, 0.1);
padding: 2rem;
border-radius: 5px;
transition: transform 0.2s, background 0.2s;
text-align: center;
max-width: 600px;
width: 100%;
}

.contact-form-container:hover {
transform: scale(1.05);
background: rgba(255, 255, 255, 0.2);
}

.contact-form-container h2 {
margin-bottom: 1rem;
font-size: 2rem;
color: #fff;
}

.contact-form-container p {
margin-bottom: 2rem;
font-size: 1.2rem;
color: #ddd;
}

.contact-form-container input,
.contact-form-container textarea {
border: 1px solid #ddd;
border-radius: 5px;
padding: 0.75rem;
margin-bottom: 1rem;
width: 100%;
font-size: 1rem;
}

.contact-form-container input[type="submit"] {
background-color: #ff5733;
border: none;
color: white;
cursor: pointer;
font-size: 1rem;
padding: 1rem;
transition: transform 0.2s, background-color 0.2s;
}

.contact-form-container input[type="submit"]:hover {
background-color: #c70039;
transform: scale(1.05);
}

/* Animations */
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

@keyframes slide-in {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}

@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-20px);
}
60% {
transform: translateY(-10px);
}
}

.animate-fade-in {
animation: fade-in 2s ease-in;
}

.animate-slide-in {
animation: slide-in 1s ease-in;
}

.animate-bounce {
animation: bounce 2s infinite;
}

/* Responsive */
@media (max-width: 768px) {
.nav-links {
display: none;
flex-direction: column;
width: 100%;
background: rgba(0, 0, 0, 0.9);
position: absolute;
top: 60px;
left: 0;
}

.nav-links li {
text-align: center;
margin: 1rem 0;
}

.burger {
display: flex;
}

.nav-active .nav-links {
display: flex;
}
}
35 changes: 35 additions & 0 deletions Vanilla-JS-Projects/Intermediate/Fitness-Website/contact.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FitnessPro - Contact Us</title>
<link rel="stylesheet" href="contact.css">
</head>
<body>
<header>
<nav>
<div class="logo">FitnessPro</div>
<ul class="nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="exercises.html">Exercises</a></li>
<li><a href="plans.html">Plans</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>

<div class="main-container">
<div class="contact-form-container">
<h2>Contact Us</h2>
<p>We'd love to hear from you! Please fill out the form below to get in touch.</p>
<form>
<input type="text" name="name" placeholder="Your Name" required>
<input type="email" name="email" placeholder="Your Email" required>
<textarea name="message" placeholder="Your Message" rows="5" required></textarea>
<input type="submit" value="Send Message">
</form>
</div>
</div>
</body>
</html>
86 changes: 86 additions & 0 deletions Vanilla-JS-Projects/Intermediate/Fitness-Website/exercises.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FitnessPro - Exercises</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<div class="logo">FitnessPro</div>
<ul class="nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="exercises.html">Exercises</a></li>
<li><a href="plans.html">Plans</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
</header>

<main>
<section id="exercises">
<h2 class="animate-fade-in">Interactive Exercises</h2>
<div class="exercise overlay-container animate-slide-in">
<h3>Push-ups</h3>
<button onclick="startExercise('push-ups', 30)">Start</button>
<div class="exercise-info" id="push-ups-info"></div>
</div>
<div class="exercise overlay-container animate-slide-in">
<h3>Squats</h3>
<button onclick="startExercise('squats', 60)">Start</button>
<div class="exercise-info" id="squats-info"></div>
</div>
<div class="exercise overlay-container animate-slide-in">
<h3>Plank</h3>
<button onclick="startExercise('plank', 90)">Start</button>
<div class="exercise-info" id="plank-info"></div>
</div>
<!-- Additional exercises -->
<div class="exercise overlay-container animate-slide-in">
<h3>Burpees</h3>
<button onclick="startExercise('burpees', 45)">Start</button>
<div class="exercise-info" id="burpees-info"></div>
</div>
<div class="exercise overlay-container animate-slide-in">
<h3>Mountain Climbers</h3>
<button onclick="startExercise('mountain-climbers', 60)">Start</button>
<div class="exercise-info" id="mountain-climbers-info"></div>
</div>
<div class="exercise overlay-container animate-slide-in">
<h3>Jumping Jacks</h3>
<button onclick="startExercise('jumping-jacks', 30)">Start</button>
<div class="exercise-info" id="jumping-jacks-info"></div>
</div>
<div class="exercise overlay-container animate-slide-in">
<h3>High Knees</h3>
<button onclick="startExercise('high-knees', 30)">Start</button>
<div class="exercise-info" id="high-knees-info"></div>
</div>
<div class="exercise overlay-container animate-slide-in">
<h3>Leg Raises</h3>
<button onclick="startExercise('leg-raises', 45)">Start</button>
<div class="exercise-info" id="leg-raises-info"></div>
</div>
<div class="exercise overlay-container animate-slide-in">
<h3>Russian Twists</h3>
<button onclick="startExercise('russian-twists', 45)">Start</button>
<div class="exercise-info" id="russian-twists-info"></div>
</div>
<div class="exercise overlay-container animate-slide-in">
<h3>Bicycle Crunches</h3>
<button onclick="startExercise('bicycle-crunches', 60)">Start</button>
<div class="exercise-info" id="bicycle-crunches-info"></div>
</div>
</section>
</main>

<script src="scripts.js"></script>
</body>
</html>
Loading

0 comments on commit 9165bf5

Please sign in to comment.