Snippets library

Browse Snippets
Claim your Free Profile
Add Snippet
Home / Attachments / PRO DRIVERS PERSONAL EXERCISE HUB APP
Duplicate Snippet

Embed Snippet on Your Site

PRO DRIVERS PERSONAL EXERCISE HUB APP

THE SNIPPET IS CODING FOR AN APP ENTITLED PRO DRIVERS PERSONAL EXERCISE HUB. CREATED TO PROVIDE EXERCISES TO ALL THOSE WHO DRIVE A LOT. THE EXERCISES ARE FORMULATTED WITH MOBILE USSERS IN MIND, AS WE AIM TO ENCOURAGE DRIVERS TO PARTICIPATE DURING THEIR DRIVE BREAKS.

BRIAN ROBERTS
<10
Code Preview
Comments
php
<?php
Certainly! Below is the **full HTML code** for your app, updated with all the features discussed. This includes the registration page, body profile page, tailored exercise plan page, progress sheet, blog page, and more. You can upload this code to Hostinger directly via their File Manager or FTP.
---
### **1. Full HTML Code**
#### **`index.html` (Opening Page)**
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pro Drivers Health</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header class="header">
        <div class="container">
            <h1>PRO DRIVERS HEALTH</h1>
            <p>Your Partner in Driver Wellness</p>
        </div>
    </header>
    <section class="hero">
        <div class="container">
            <h2>Welcome to Pro Drivers Health</h2>
            <p>We are dedicated to improving the health and well-being of drivers everywhere.</p>
            <a href="register.html" class="btn">Get Started</a>
        </div>
    </section>
    <section class="about">
        <div class="container">
            <h2>About Us</h2>
            <p>At Pro Drivers Health, we understand the unique challenges drivers face. Our app provides personalized exercise plans, health tracking, and educational resources to help you stay fit and healthy on the road.</p>
        </div>
    </section>
    <section class="features">
        <div class="container">
            <h2>Key Features</h2>
            <ul>
                <li>Personalized exercise plans</li>
                <li>Track your progress</li>
                <li>Share your achievements</li>
                <li>Full-body workouts</li>
            </ul>
        </div>
    </section>
    <footer class="footer">
        <div class="container">
            <p>&copy; 2023 PRO DRIVERS HEALTH. All rights reserved.</p>
        </div>
    </footer>
</body>
</html>
```
---
#### **`register.html` (Registration Page)**
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Register - Pro Drivers Health</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header class="header">
        <div class="container">
            <h1>PRO DRIVERS HEALTH</h1>
            <p>Create Your Account</p>
        </div>
    </header>
    <section class="form-section">
        <div class="container">
            <h2>Sign Up</h2>
            <form id="registerForm">
                <label for="name">Name:</label>
                <input type="text" id="name" placeholder="Your Name" required>
                <label for="email">Email:</label>
                <input type="email" id="email" placeholder="Your Email" required>
                <label for="password">Password:</label>
                <input type="password" id="password" placeholder="Your Password" required>
                <label for="confirmPassword">Confirm Password:</label>
                <input type="password" id="confirmPassword" placeholder="Confirm Password" required>
                <button type="submit" class="btn">Register</button>
            </form>
        </div>
    </section>
    <footer class="footer">
        <div class="container">
            <p>&copy; 2023 PRO DRIVERS HEALTH. All rights reserved.</p>
        </div>
    </footer>
</body>
</html>
```
---
#### **`body-profile.html` (Body Profile Page)**
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Body Profile - Pro Drivers Health</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header class="header">
        <div class="container">
            <h1>PRO DRIVERS HEALTH</h1>
            <p>Tell Us More About Your Body Profile</p>
        </div>
    </header>
    <section class="form-section">
        <div class="container">
            <h2>Your Body Profile</h2>
            <form id="bodyProfileForm">
                <label for="gender">Gender:</label>
                <select id="gender" required>
                    <option value="" disabled selected>Select Gender</option>
                    <option value="male">Male</option>
                    <option value="female">Female</option>
                    <option value="other">Other</option>
                </select>
                <label for="bodyType">Body Type:</label>
                <select id="bodyType" required>
                    <option value="" disabled selected>Select Body Type</option>
                    <option value="slim">Slim</option>
                    <option value="medium">Medium</option>
                    <option value="large">Large</option>
                </select>
                <label for="height">Height (in feet):</label>
                <input type="number" id="height" placeholder="Enter your height" required>
                <label for="healthIssues">Any Health Issues?</label>
                <textarea id="healthIssues" placeholder="Describe any health issues"></textarea>
                <label for="exerciseFrequency">How often do you exercise?</label>
                <select id="exerciseFrequency" required>
                    <option value="" disabled selected>Select Frequency</option>
                    <option value="daily">Daily</option>
                    <option value="weekly">Weekly</option>
                    <option value="monthly">Monthly</option>
                    <option value="never">Never</option>
                </select>
                <label for="lastExercise">When was the last time you exercised?</label>
                <input type="date" id="lastExercise" required>
                <label for="fitnessLevel">Are you a beginner, intermediate, or advanced?</label>
                <select id="fitnessLevel" required>
                    <option value="" disabled selected>Select Level</option>
                    <option value="beginner">Beginner</option>
                    <option value="intermediate">Intermediate</option>
                    <option value="advanced">Advanced</option>
                </select>
                <label for="fitnessGoal">What is your fitness goal?</label>
                <select id="fitnessGoal" required>
                    <option value="" disabled selected>Select Goal</option>
                    <option value="weightLoss">Weight Loss</option>
                    <option value="muscleGain">Muscle Gain</option>
                    <option value="toning">Toning</option>
                </select>
                <button type="submit" class="btn">Submit</button>
            </form>
        </div>
    </section>
    <footer class="footer">
        <div class="container">
            <p>&copy; 2023 PRO DRIVERS HEALTH. All rights reserved.</p>
        </div>
    </footer>
</body>
</html>
```
---
#### **`tailored-plan.html` (Tailored Exercise Plan Page)**
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailored Plan - Pro Drivers Health</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header class="header">
        <div class="container">
            <h1>PRO DRIVERS HEALTH</h1>
            <p>Your Personalized Exercise Plan</p>
        </div>
    </header>
    <section class="plan">
        <div class="container">
            <h2>Tailored Exercise Plan</h2>
            <div class="exercise-section">
                <h3>FULL BODY: HEAD TO TOES</h3>
                <div class="exercise-grid">
                    <div class="exercise-item">
                        <img src="images/burpees.jpg" alt="Burpees">
                        <h4><strong>BURPEES</strong></h4>
                        <p>Combine cardio and strength training by squatting, jumping, and standing.</p>
                    </div>
                    <div class="exercise-item">
                        <img src="images/jumping-jacks.jpg" alt="Jumping Jacks">
                        <h4><strong>JUMPING JACKS</strong></h4>
                        <p>Jump while raising your arms and spreading your legs for full-body activation.</p>
                    </div>
                </div>
            </div>
            <!-- Repeat similar sections for Top Body, Mid Body, Lower Body, and Arms -->
        </div>
    </section>
    <footer class="footer">
        <div class="container">
            <p>&copy; 2023 PRO DRIVERS HEALTH. All rights reserved.</p>
        </div>
    </footer>
</body>
</html>
```
---
### **2. CSS Code (`styles.css`)**
```css
/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4;
    color: #333;
}
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}
.header {
    background: #333;
    color: #fff;
    padding: 20px 0;
    text-align: center;
}
.hero, .about, .features {
    padding: 50px 0;
    text-align: center;
}
.btn {
    display: inline-block;
    padding: 10px 20px;
    background: #007BFF;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
}
.footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 20px 0;
Hosted with ❤️ by WPCode
1-click Use in WordPress

© 2023 PRO DRIVERS HEALTH. All rights reserved.

``` --- #### **`tailored-plan.html` (Tailored Exercise Plan Page)** ```html Tailored Plan - Pro Drivers Health

PRO DRIVERS HEALTH

Your Personalized Exercise Plan

Tailored Exercise Plan

FULL BODY: HEAD TO TOES

Burpees

BURPEES

Combine cardio and strength training by squatting, jumping, and standing.

Jumping Jacks

JUMPING JACKS

Jump while raising your arms and spreading your legs for full-body activation.

© 2023 PRO DRIVERS HEALTH. All rights reserved.

``` --- ### **2. CSS Code (`styles.css`)** ```css /* General Reset */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; line-height: 1.6; background-color: #f4f4f4; color: #333; } .container { width: 90%; max-width: 1200px; margin: 0 auto; } .header { background: #333; color: #fff; padding: 20px 0; text-align: center; } .hero, .about, .features { padding: 50px 0; text-align: center; } .btn { display: inline-block; padding: 10px 20px; background: #007BFF; color: #fff; text-decoration: none; border-radius: 5px; } .footer { background: #333; color: #fff; text-align: center; padding: 20px 0;

Comments

Add a Comment

Login to Deploy Snippet