└── Fitness Blender
    ├── Demo.css
    ├── Images
        ├── banana.png
        ├── health.jpg
        ├── coconut.png
        ├── facebook.png
        ├── feature-1.jpg
        ├── feature-2.jpg
        ├── feature-3.jpg
        ├── feature-4.jpg
        ├── healthy.jpg
        ├── instagram.png
        ├── mushroom.png
        ├── pinterest.png
        ├── twitter.png
        ├── workout.jpg
        ├── workouts.jpg
        ├── youtube.png
        ├── Background2.jpg
        ├── motivation.jpg
        ├── sweet-potato.png
        └── Fitness Blender.jpg
    ├── Demo.html
    ├── signupajax.php
    ├── performlogin.php
    ├── insertsignupdata.php
    ├── login.html
    ├── signupformValidation.js
    ├── signup.php
    ├── login.css
    ├── fitness.html
    ├── workoutmain.php
    ├── workoutmain.css
    ├── main.css
    ├── main.php
    ├── healthyliving.php
    ├── healthyliving.css
    └── fitness.css


/Fitness Blender/Demo.css:
--------------------------------------------------------------------------------
1 | #heading{
2 |     background-color: red;
3 | }


--------------------------------------------------------------------------------
/Fitness Blender/Images/banana.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anujvyas/Web-Development-Projects/master/Fitness Blender/Images/banana.png


--------------------------------------------------------------------------------
/Fitness Blender/Images/health.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anujvyas/Web-Development-Projects/master/Fitness Blender/Images/health.jpg


--------------------------------------------------------------------------------
/Fitness Blender/Images/coconut.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anujvyas/Web-Development-Projects/master/Fitness Blender/Images/coconut.png


--------------------------------------------------------------------------------
/Fitness Blender/Images/facebook.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anujvyas/Web-Development-Projects/master/Fitness Blender/Images/facebook.png


--------------------------------------------------------------------------------
/Fitness Blender/Images/feature-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anujvyas/Web-Development-Projects/master/Fitness Blender/Images/feature-1.jpg


--------------------------------------------------------------------------------
/Fitness Blender/Images/feature-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anujvyas/Web-Development-Projects/master/Fitness Blender/Images/feature-2.jpg


--------------------------------------------------------------------------------
/Fitness Blender/Images/feature-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anujvyas/Web-Development-Projects/master/Fitness Blender/Images/feature-3.jpg


--------------------------------------------------------------------------------
/Fitness Blender/Images/feature-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anujvyas/Web-Development-Projects/master/Fitness Blender/Images/feature-4.jpg


--------------------------------------------------------------------------------
/Fitness Blender/Images/healthy.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anujvyas/Web-Development-Projects/master/Fitness Blender/Images/healthy.jpg


--------------------------------------------------------------------------------
/Fitness Blender/Images/instagram.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anujvyas/Web-Development-Projects/master/Fitness Blender/Images/instagram.png


--------------------------------------------------------------------------------
/Fitness Blender/Images/mushroom.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anujvyas/Web-Development-Projects/master/Fitness Blender/Images/mushroom.png


--------------------------------------------------------------------------------
/Fitness Blender/Images/pinterest.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anujvyas/Web-Development-Projects/master/Fitness Blender/Images/pinterest.png


--------------------------------------------------------------------------------
/Fitness Blender/Images/twitter.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anujvyas/Web-Development-Projects/master/Fitness Blender/Images/twitter.png


--------------------------------------------------------------------------------
/Fitness Blender/Images/workout.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anujvyas/Web-Development-Projects/master/Fitness Blender/Images/workout.jpg


--------------------------------------------------------------------------------
/Fitness Blender/Images/workouts.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anujvyas/Web-Development-Projects/master/Fitness Blender/Images/workouts.jpg


--------------------------------------------------------------------------------
/Fitness Blender/Images/youtube.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anujvyas/Web-Development-Projects/master/Fitness Blender/Images/youtube.png


--------------------------------------------------------------------------------
/Fitness Blender/Images/Background2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anujvyas/Web-Development-Projects/master/Fitness Blender/Images/Background2.jpg


--------------------------------------------------------------------------------
/Fitness Blender/Images/motivation.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anujvyas/Web-Development-Projects/master/Fitness Blender/Images/motivation.jpg


--------------------------------------------------------------------------------
/Fitness Blender/Images/sweet-potato.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anujvyas/Web-Development-Projects/master/Fitness Blender/Images/sweet-potato.png


--------------------------------------------------------------------------------
/Fitness Blender/Images/Fitness Blender.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anujvyas/Web-Development-Projects/master/Fitness Blender/Images/Fitness Blender.jpg


--------------------------------------------------------------------------------
/Fitness Blender/Demo.html:
--------------------------------------------------------------------------------
1 | <DOCTYPE html>
2 | <html>
3 |     <head>
4 |         <link rel="stylesheet" href="Demo.css">
5 |     </head>
6 |     <body>
7 |     </body>
8 | </html>


--------------------------------------------------------------------------------
/Fitness Blender/signupajax.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 |     
 3 |     $db = mysqli_connect("localhost", "root", "", "fitnessblender");
 4 | 
 5 |     if(isset($_POST["user_name"])){
 6 |         $username =  mysqli_real_escape_string($db, $_POST['user_name']);
 7 |         $query = "select * from members where username = '".$username."'";
 8 |         $result = mysqli_query($db, $query);
 9 |         $num = mysqli_num_rows($result);
10 |         echo $num;
11 |     }
12 | ?>


--------------------------------------------------------------------------------
/Fitness Blender/performlogin.php:
--------------------------------------------------------------------------------
 1 | <?php 
 2 | 	session_start();				//function to start the session.
 3 | 
 4 | 	$db = mysqli_connect("localhost", "root", "", "fitnessblender");
 5 | 
 6 | 	$username = mysqli_real_escape_string($db, $_POST['username']);
 7 | 	$password = mysqli_real_escape_string($db, $_POST['password']);
 8 | 
 9 | 	$query = "select * from members where username='".$username."' and password='".$password."'";
10 | 	$result = mysqli_query($db, $query);
11 | 	$num = mysqli_num_rows($result);
12 | 
13 | 	if($num != '1'){
14 | 		
15 |     	header("Location:login.html");
16 |     }
17 |     else{
18 |     	$_SESSION['userid'] = $username;
19 |     	header("Location:main.php");
20 |     }
21 | ?>


--------------------------------------------------------------------------------
/Fitness Blender/insertsignupdata.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 |     session_start();				//function to start the session.
 3 | 
 4 |     $db = mysqli_connect("localhost", "root", "", "fitnessblender");
 5 | 
 6 |     $name = mysqli_real_escape_string($db, $_POST['fullname']);
 7 |     $email =  mysqli_real_escape_string($db, $_POST['email']);
 8 |     $mobileno = $_POST['mobno'];
 9 |     $gender =  mysqli_real_escape_string($db, $_POST['gender']);
10 |     $username =  mysqli_real_escape_string($db, $_POST['uname']);
11 |     $password =  mysqli_real_escape_string($db, $_POST['pass']);
12 | 
13 |     $query = "INSERT INTO members (name, email, mobileno, gender, username, password) VALUES ('$name', '$email', '$mobileno', '$gender', '$username', '$password')";
14 |     mysqli_query($db, $query);
15 |     $_SESSION['userid'] = $username;
16 |     header("Location:main.php");
17 | ?>


--------------------------------------------------------------------------------
/Fitness Blender/login.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="utf-8"/>
 5 |         <title>Log In - Fitness Blender</title>
 6 |         <link rel="stylesheet" href="login.css"> 
 7 |     </head>
 8 |     <body>
 9 |         <div class="formlogin">
10 |             <form class="loginform" action="performlogin.php" method="POST">
11 |                 <br><p class="heading">Login Page</p><br>
12 |                 <input class="value" type="text" name="username" placeholder="Enter username" autocomplete="off" required/><br><br>
13 |                 <input class="value" type="password" name="password" placeholder="Enter password" required/><br><br>
14 |                 <button class="submit">Log-In</button><br><br>
15 |                 <p class="message">Not Registered? <a href="signup.php" class="account">Sign-Up</a></p>
16 |             </form>
17 |         </div>
18 |     </body>
19 | </html>


--------------------------------------------------------------------------------
/Fitness Blender/signupformValidation.js:
--------------------------------------------------------------------------------
 1 | function validate(){
 2 |     var name = document.getElementById('name');
 3 |     var mobile = document.getElementById('mobile');
 4 |     var username = document.getElementById('username');
 5 |     var password = document.getElementById('password');
 6 |     var confirmpassword = document.getElementById('confirmpassword');
 7 | 
 8 |     if(!isNaN(name.value)){
 9 |         document.getElementById('signup-name').innerHTML="-- Name must contain characters only. --";
10 |         return false;
11 |     }
12 |     else{
13 |         document.getElementById('signup-name').innerHTML="";
14 |     }
15 |     
16 |     if(isNaN(mobile.value)){
17 |         document.getElementById('signup-mobile').innerHTML="-- Please enter numbers only. --";
18 |         return false;
19 |     }
20 |     else{
21 |         document.getElementById('signup-mobile').innerHTML="";
22 |     }
23 | 
24 |     if(mobile.value.length!==10){
25 |         document.getElementById('signup-mobile').innerHTML="-- Mobile number must contain 10 digits. --";
26 |         return false;
27 |     }
28 |     else{
29 |         document.getElementById('signup-mobile').innerHTML="";
30 |     }
31 | 
32 |     if(username.value.length<=2 || username.value.length>15){
33 |         document.getElementById('signup-username').innerHTML="-- Username length should be between 3 to 15 characters. --";
34 |         return false;
35 |     }
36 |     else{
37 |         document.getElementById('signup-username').innerHTML="";
38 |     }
39 | 
40 |     if(!isNaN(username.value)){
41 |         document.getElementById('signup-username').innerHTML="-- Username must contain characters. --";
42 |         return false;
43 |     }
44 |     else{
45 |         document.getElementById('signup-username').innerHTML="";
46 |     }
47 | 
48 |     if(!isNaN(username.value.charAt(0))){
49 |         document.getElementById('signup-username').innerHTML="-- Username must start with a character. --";
50 |         return false;
51 |     }
52 |     else{
53 |         document.getElementById('signup-username').innerHTML="";
54 |     }
55 | 
56 |     if(password.value.length<= 6 || password.value.length>20){
57 |         document.getElementById('signup-password').innerHTML="-- Password length should be between 7 to 20 characters. --";
58 |         return false;
59 |     }
60 |     else{
61 |         document.getElementById('signup-password').innerHTML="";
62 |     }
63 | 
64 |     if(confirmpassword.value!==password.value){
65 |         document.getElementById('signup-confirmpassword').innerHTML="-- Password not matching. --";
66 |         return false;
67 |     }
68 |     else{
69 |         document.getElementById('signup-confirmpassword').innerHTML="";
70 |     }
71 | }


--------------------------------------------------------------------------------
/Fitness Blender/signup.php:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <meta charset="utf-8"/>
 5 |         <title>Become a member of Fitness Blender</title>
 6 |         <link rel="stylesheet" href="login.css">
 7 |         <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
 8 |         <script src="signupformValidation.js"></script>
 9 |     </head>
10 |     <body>
11 |         <div class="formsign">
12 |             <form class="signupform" onsubmit="return validate()" action="insertsignupdata.php" method="POST">
13 |                 <br><p class="heading">Sign-Up Page</p><br>
14 |                 <input class="value" id="name" type="text" name="fullname" placeholder="Enter Name" required/><br><span class="errormessage" id="signup-name"></span><br>
15 |                 <input class="value" id="email" type="email" name="email" placeholder="Enter Email" required/><br><span class="errormessage" id="signup-email"></span><br>
16 |                 <input class="value" id="mobile" type="text" name="mobno" placeholder="Enter Mobile Number" required/><br><span class="errormessage" id="signup-mobile"></span><br>
17 |                 <input class="radiovalue" type="radio"  name="gender" value="m"/> Male
18 |                 <input class="radiovalue" type="radio" name="gender" value="f"/> Female<br><br>
19 |                 <input class="value" id="username" type="text" name="uname" placeholder="Enter Username" autocomplete="off" required/><br><span id="signup-username"></span><br>
20 |                 <input class="value" id="password" type="password" name="pass" placeholder="Enter Password" required/><br><span class="errormessage" id="signup-password"></span><br>
21 |                 <input class="value" id="confirmpassword" type="password" name="confirmpass" placeholder="Confirm Password" required/><br><span class="errormessage" id="signup-confirmpassword"></span><br>
22 |                 <input class="submit" id="signinbutton" type="submit" name="submit" value="Sign-Up"><br><br>
23 |                 <p class="message">Already Registered? <a href="login.html" class="account">Log-In</a></p>
24 |             </form>
25 |         </div> 
26 |     </body>
27 |     <script>
28 |         $(document).ready(function(){
29 |             $('#username').blur(function(){
30 | 
31 |                 var user = $(this).val();       // 'this' refers to #username.
32 |                 $.ajax({
33 | 
34 |                     url:'signupajax.php',
35 |                     method:'POST',
36 |                     data:{user_name: user},
37 |                     success: function(data){
38 | 
39 |                         if(data != '0'){
40 |                             $('#signup-username').html('<span class="danger">-- Username not available --</span>');
41 |                             $('#signinbutton').attr("disabled", true);
42 |                         }
43 |                         else{
44 |                             $('#signup-username').html('<span class="success">-- Username available --</span>');
45 |                             $('#signinbutton').attr("disabled", false);
46 |                         }
47 |                     }
48 |                 })
49 |             });
50 |         });
51 |     </script>
52 | </html>


--------------------------------------------------------------------------------
/Fitness Blender/login.css:
--------------------------------------------------------------------------------
  1 |  @import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
  2 | 
  3 | *{
  4 |     margin: 0;
  5 |     padding: 0;
  6 |     font-family: 'Poppins', sans-serif;
  7 | }
  8 | 
  9 | body{
 10 |     width: 100%;
 11 |     height: 100vh;
 12 |     background-image: linear-gradient(120deg, #845ec2, #d65db1, #ff6f91, #ff9671, #ffc75f, #f9f871);
 13 |     background-size: 500%;
 14 |     background-position: left;  
 15 |     animation: bg-animation 10s infinite alternate;
 16 | }
 17 | 
 18 | @keyframes bg-animation{
 19 |     0%{
 20 |         background-position: left;
 21 |     }
 22 |     100%{
 23 |         background-position: right;
 24 |     }
 25 | }
 26 | 
 27 | .formlogin{
 28 |     position: relative;
 29 |     width: 290px;
 30 |     height: 270px;
 31 |     left: 38%;
 32 |     top: 150px;
 33 |     background-color: #ffffff;
 34 |     border-radius: 10px;
 35 | }
 36 | 
 37 | .formsign{
 38 |     position: relative;
 39 |     width: 300px;
 40 |     height: 580px;
 41 |     left: 38%;
 42 |     top: 20px;
 43 |     background-color: #ffffff;
 44 |     border-radius: 10px;
 45 | }
 46 | 
 47 | .heading{
 48 |     text-align: center;
 49 |     letter-spacing: 1px;    
 50 |     font-size: 20px;
 51 |     font-weight: bold;
 52 |     text-decoration: underline;
 53 | }
 54 | 
 55 | .signupform, .loginform{
 56 |     position: absolute;
 57 |     left: 33px;
 58 |     right: 33px;
 59 |     text-align: center;
 60 |     letter-spacing: 1px;
 61 |     font-weight: normal;
 62 | }
 63 | 
 64 | .value{
 65 |     position: static;
 66 |     text-align: center;
 67 |     height: 28px;
 68 |     width: 200px;
 69 |     border-top: 0px;
 70 |     border-left: 0px;
 71 |     border-right: 0px;
 72 |     border-bottom: 1px solid #000000;
 73 |     border-radius: 5px;
 74 |     transition: 0.7s ease-in-out 0.0s;
 75 | }
 76 | 
 77 | .radiovalue{
 78 |     position: static;
 79 |     text-align: center;
 80 |     letter-spacing: 1px;
 81 | }
 82 | 
 83 | .radiovalue:focus, .value:focus {
 84 |     border: 1px solid #0652DD;
 85 | }
 86 | 
 87 | .submit{
 88 |     position: static;
 89 |     padding: 2px;
 90 |     width: 100px;
 91 |     text-align: center;
 92 |     border: 1px dashed #000000;
 93 |     border-radius: 4px;
 94 |     transition: 0.5s ease-in-out 0.0s;
 95 |     cursor: pointer;
 96 | }
 97 | 
 98 | .submit:hover{
 99 |     background-color: #ffffff;
100 |     border: 1px solid #000000;
101 |     box-shadow: 0px 5px 20px 4px #7f8c8d;
102 | }
103 | 
104 | .account{
105 |     position: static;
106 |     text-align: center;
107 |     letter-spacing: 0px;
108 |     font-size: small;
109 |     margin-left: 10px;
110 |     margin-top: 15px;
111 | }
112 | 
113 | .account:visited{
114 |     color: red;
115 | }
116 | 
117 | .errormessage{
118 |     z-index: 1;
119 |     font-size: 9px;
120 |     font-style: italic;
121 |     color: #000000;
122 | }
123 | 
124 | .danger{
125 |     color: #e74c3c;
126 |     font-size: 10px;
127 |     font-weight: bold;
128 |     font-style: italic;
129 | }
130 | 
131 | .success{
132 |     color: #730068;
133 |     font-size: 10px;
134 |     font-weight: bold;
135 |     font-style: italic;
136 | }


--------------------------------------------------------------------------------
/Fitness Blender/fitness.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | 	<head lang="en">
 5 | 		<meta charset="utf-8"/>
 6 | 		<title>Fitness Blender</title>
 7 | 		<link rel="stylesheet" href="fitness.css">
 8 | 		<script src="https://kit.fontawesome.com/608fb092f5.js" crossorigin="anonymous"></script>
 9 | 	</head>
10 | 	<body>
11 | 		<div class="navbar" id="menu_small">
12 | 			<a class="logo" href="#contact-us-div">Fitness Blender</a>
13 | 			<ul class="navoptions">
14 | 				<li><a class="option" href="#home">Home</a></li>
15 | 				<li><a class="option" href="#workout">Workout</a></li>
16 | 				<li><a class="option" href="#motivation">Motivation</a></li>
17 | 				<li><a class="option" href="#tips">Health</a></li>
18 | 				<li><a class="option" href="#contact-us-div">About Us</a></li>
19 | 				<li><a class="option" href="login.html">Log In</a></li>
20 | 			</ul>
21 | 		</div><a href="#" id="iconbar" onclick="return responsive_design()"><i class="fas fa-bars"></i></a>
22 | 		<div class="banner-area parallax" id="home">
23 | 			<div class="text-part">
24 | 				<h1 data-text="no pain. no gain.",>no pain no gain</h1>
25 | 			</div>
26 | 		</div>
27 | 		<div id="workout" class="workout parallax">
28 | 			<p>Fitness is not about being better than someone else...<br>It's about being better than you used to be.</p>
29 | 			<footer>-- There are fitness plans available for free... So what are you waiting for? Go and register today. --</footer>
30 | 		</div>
31 | 		<div id="motivation" class="motivation parallax">
32 | 			<p>Today I will do what others won’t,<br>so tomorrow I can accomplish what others can’t.</p>
33 | 			<footer>-- 365 Days of Motivation --</footer>
34 | 		</div>
35 | 		<div id="tips" class="health parallax">
36 | 			<p>Proper nutrition is the difference between feeling exhausted<br>and getting the most out of a workout.</p>
37 | 			<footer>-- We provide you with the healthiest diets made and tested by us. --</footer>
38 | 		</div>
39 | 		<div id="contact-us-div">
40 | 			<div id="contact-us">
41 | 				<p id="footer-heading">- About Fitness Blender - </p>
42 | 				<p id="footer-title">Created by Anuj, Pranav and Janhavi<br>—a team passionate about helping you<br>achieve your health and fitness goals.</p>
43 | 				<div class="first-div">
44 | 					<p class="number">35+</p>
45 | 					<p class="number-desc">35+ million workouts completed<br>each month by our amazing<br>Fitness Blender Family.</p>
46 | 				</div>
47 | 				<div class="footer-div">
48 | 					<p class="number">500+</p>
49 | 					<p class="number-desc">500+ free workout videos for<br>every fitness level + effective &<br>affordable workout programs.</p>
50 | 				</div>
51 | 				<div class="footer-div last">
52 | 					<p class="number">10+</p>
53 | 					<p class="number-desc">26+ years of combined experience<br>helping people achieve their<br>fitness & health goals.</p>
54 | 				</div>
55 | 				<div class="social-main">
56 | 					<div class="first-social"><a target="_blank" href="https://www.youtube.com/user/FitnessBlender"><img src="./Images/youtube.png" alt="IMG"/></a></div>
57 | 					<div class="social"><a target="_blank" href="https://www.pinterest.com/FitnessBlender/"><img src="./Images/pinterest.png" alt="IMG"/></a></div>
58 | 					<div class="social"><a target="_blank" href="https://www.facebook.com/fitnessblender/"><img src="./Images/facebook.png" alt="IMG"/></a></div>
59 | 					<div class="social"><a target="_blank" href="https://www.instagram.com/fitnessblender/"><img src="./Images/instagram.png" alt="IMG"/></a></div>
60 | 					<div class="social"><a target="_blank" href="https://twitter.com/FitnessBlender"><img src="./Images/twitter.png" alt="IMG"/></a></div>
61 | 				</div>
62 | 			</div>
63 | 		</div>
64 | 		<script>
65 | 			function responsive_design(){
66 | 				var e = document.getElementById('menu_small');
67 | 				if( e.className === 'navbar'){
68 | 					e.className += 'responsive';
69 | 				}
70 | 				else{
71 | 					e.className = 'navbar';
72 | 				}
73 | 			}
74 | 		</script>
75 | 	</body>
76 | </html>


--------------------------------------------------------------------------------
/Fitness Blender/workoutmain.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 	session_start();
 3 | ?>
 4 | 
 5 | <!DOCTYPE html>
 6 | <html lang="en">
 7 | 	<head>
 8 | 		<meta charset="utf-8"/>
 9 | 		<title>Workout & Programs</title>
10 | 		<link rel="stylesheet" href="workoutmain.css">
11 | 	</head>
12 | 	<body>
13 | 		<div class="navbar">
14 | 			<a class="logo" href="#">Fitness Blender</a>
15 | 			<ul class="navoptions">
16 | 				<li><a class="option" href="main.php">Home</a></li>
17 | 				<li><a class="option" href="healthyliving.php">Healthy Living</a></li>
18 | 				<li><a class="option" href="#contact-us-div">Contact Us</a></li>
19 | 				<li><a class="option" href="#"><?php echo "Hello! " .$_SESSION['userid'];?></a></li>
20 | 				<li><a class="option" href="fitness.html">Logout</a></li>
21 | 			</ul>
22 | 		</div><span id="home"></span><br><br>
23 | 		<div id="mainimage">
24 | 			<p id=title>Workout & Programs</p>
25 | 			<p id="mainheading">Find Your Fitness.<br>Something for Everyone.</p>
26 | 			<p id="subheading">A huge selection of workout videos and programs to help you look<br>and feel your best.</p>
27 | 		</div>
28 | 		<div class="workout-segment" style="background-color: #FFFFFF">
29 | 			<h1 id="workheading">Select Workout according to your choice.</h1>
30 | 			<div id="buttons">
31 | 				<button class="buttons-style" id="easy" onclick="return easy()">Beginner's Workout<br>(Easy)</button><br>
32 | 				<button class="buttons-style" id="normal" onclick="return normal()">Intermediate's Workout<br>(Normal)</button><br>
33 | 				<button class="buttons-style" id="hardcore" onclick="return hardcore()">Expert's Workout<br>(Hardcore)</button>
34 | 			</div>
35 | 			<div id="workout-video">
36 | 				<div id="easy-video"><iframe width="560" height="315" src="https://www.youtube.com/embed/SibjPw9Khz4?rel=0&amp;mute=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
37 | 				<div id="normal-video"><iframe width="560" height="315" src="https://www.youtube.com/embed/t6UnYPkY8Ls?rel=0&amp;mute=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
38 | 				<div id="hardcore-video"><iframe width="560" height="315" src="https://www.youtube.com/embed/E4tiWhsQhQg?rel=0&amp;mute=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
39 | 			</div>
40 | 		</div>
41 | 		<div id="contact-us-div">
42 | 			<div id="contact-us">
43 | 				<p id="footer-heading">- About Fitness Blender - </p>
44 | 				<p id="footer-title">Created by Anuj, Pranav and Janhavi<br>—a team passionate about helping you<br>achieve your health and fitness goals.</p>
45 | 				<div class="first-div">
46 | 					<p class="number">35+</p>
47 | 					<p class="number-desc">35+ million workouts completed<br>each month by our amazing<br>Fitness Blender Family.</p>
48 | 				</div>
49 | 				<div class="footer-div">
50 | 					<p class="number">500+</p>
51 | 					<p class="number-desc">500+ free workout videos for<br>every fitness level + effective &<br>affordable workout programs.</p>
52 | 				</div>
53 | 				<div class="footer-div">
54 | 					<p class="number">10+</p>
55 | 					<p class="number-desc">26+ years of combined experience<br>helping people achieve their<br>fitness & health goals.</p>
56 | 				</div>
57 | 				<div class="first-social"><a target="_blank" href="https://www.youtube.com/user/FitnessBlender"><img src="./Images/youtube.png" alt="IMG"/></a></div>
58 | 				<div class="social"><a target="_blank" href="https://www.pinterest.com/FitnessBlender/"><img src="./Images/pinterest.png" alt="IMG"/></a></div>
59 | 				<div class="social"><a target="_blank" href="https://www.facebook.com/fitnessblender/"><img src="./Images/facebook.png" alt="IMG"/></a></div>
60 | 				<div class="social"><a target="_blank" href="https://www.instagram.com/fitnessblender/"><img src="./Images/instagram.png" alt="IMG"/></a></div>
61 | 				<div class="social"><a target="_blank" href="https://twitter.com/FitnessBlender"><img src="./Images/twitter.png" alt="IMG"/></a></div>
62 | 			</div>
63 | 		</div>
64 | 		<script>
65 | 			function easy(){
66 | 				document.getElementById('easy-video').style.display='inline-block';
67 | 				document.getElementById('normal-video').style.display='none';
68 | 				document.getElementById('hardcore-video').style.display='none';
69 | 				return;
70 | 			}
71 | 			function normal(){
72 | 				document.getElementById('easy-video').style.display='none';
73 | 				document.getElementById('normal-video').style.display='inline-block';
74 | 				document.getElementById('hardcore-video').style.display='none';
75 | 				return;
76 | 			}
77 | 			function hardcore(){
78 | 				document.getElementById('easy-video').style.display='none';
79 | 				document.getElementById('normal-video').style.display='none';
80 | 				document.getElementById('hardcore-video').style.display='inline-block';
81 | 				return;
82 | 			}
83 | 		</script>
84 | 	</body>
85 | </html>


--------------------------------------------------------------------------------
/Fitness Blender/workoutmain.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
  2 | 
  3 | *{
  4 | 	margin: 0px;
  5 | 	padding: 0px;
  6 | 	font-family: 'Poppins', sans-serif;
  7 | }
  8 | 
  9 | html{
 10 | 	scroll-behavior: smooth;
 11 | }
 12 | 
 13 | .navbar{
 14 | 	position: fixed;
 15 | 	display : flex;
 16 | 	line-height: 50%;
 17 | 	justify-content: center;
 18 | 	align-items: center;
 19 | 	flex-direction: row;
 20 | 	flex-wrap: wrap;
 21 | 	background-color: #dfe6e9;
 22 | 	width: 100%;
 23 | 	height: 50px;
 24 | 	z-index: 1;
 25 | 	opacity: 0.7;
 26 | }
 27 | 
 28 | .logo{
 29 | 	flex: 1 1 auto;
 30 | 	margin-left: 4%;
 31 | 	color: #000000;
 32 | 	text-transform: uppercase;
 33 | 	text-decoration: none;
 34 | 	letter-spacing: 0px;
 35 | 	font-weight: lighter;
 36 | 	font-size: 30px;
 37 | 	transition: 0.7s ease-in-out 0.0s;
 38 | }
 39 | 
 40 | .logo:hover{
 41 | 	margin-left: 2%;
 42 | 	font-size: 40px;
 43 | }
 44 | 
 45 | .navoptions{
 46 | 	display: flex;
 47 | 	justify-content: right;
 48 | 	list-style: none;
 49 | 	margin-right: 1%;
 50 | }
 51 | 
 52 | .option{
 53 | 	margin: 14px;
 54 | 	color: #000000;
 55 | 	text-decoration: none;
 56 | 	text-transform: uppercase;
 57 | 	font-size: 12px;
 58 | 	font-weight: lighter;
 59 | }
 60 | 
 61 | .option:hover{
 62 | 	text-decoration: underline;
 63 | }
 64 | 
 65 | #mainimage{
 66 | 	position: relative;
 67 | 	background-image: url("./Images/workouts.jpg");
 68 | 	background-repeat: no-repeat;
 69 | 	width: 100%;
 70 | 	height: 100vh;
 71 | }
 72 | 
 73 | #title{
 74 | 	position: absolute;
 75 | 	color: #0abde3;
 76 | 	font-size: 25px;
 77 | 	font-weight: bolder;
 78 | 	text-transform: uppercase;
 79 | 	text-decoration: underline;
 80 | 	top: 140px;
 81 | 	left: 130px;
 82 | }
 83 | 
 84 | #mainheading{
 85 | 	position: absolute;
 86 | 	color: #FFFFFF;
 87 | 	font-size: 40px;
 88 | 	font-weight: bolder;
 89 | 	top: 200px;
 90 | 	left: 130px;
 91 | }
 92 | 
 93 | #subheading{
 94 | 	position: absolute;
 95 | 	color: #FFFFFF;
 96 | 	font-size: 15px;
 97 | 	font-weight: lighter;
 98 | 	top: 330px;
 99 | 	left: 130px;
100 | }
101 | 
102 | .workout-segment{
103 | 	position: relative;
104 | 	height: 560px;
105 | 	width: 1350px;
106 | 	background-color: #FFFFFF;
107 | }
108 | 
109 | #workheading{
110 | 	width: 100%;
111 | 	text-align: center;
112 | 	padding: 30px 15px;
113 | 	text-transform: uppercase;
114 | }
115 | 
116 | #buttons{
117 | 	position: static;
118 | 	width: 35%;
119 | 	height: 100vh;
120 | 	float: left;
121 | }
122 | 
123 | .buttons-style{
124 | 	position: static;
125 | 	width: 350px;
126 | 	text-align: center;
127 | 	margin-top: 20px;
128 | 	margin-left: 60px;
129 | 	margin-bottom: 20px;
130 | 	padding: 15px 30px;
131 | 	overflow: hidden;
132 | 	background-color: #FFFFFF;
133 | 	border: 0px;
134 | 	transition: 0.3s;
135 | }
136 | 
137 | .buttons-style:hover{
138 | 	color: #FFFFFF;
139 | 	background: #2196f3;
140 | 	box-shadow: 0 0 10px #2196f3, 0 0 40px #2196f3, 0 0 80px #2196f3;
141 | 	tansition-delay: 0.2s;
142 | 	cursor: pointer;
143 | }
144 | 
145 | #workout-video{
146 | 	position: static;
147 | 	margin-top: 30px;
148 | }
149 | 
150 | #easy-video, #normal-video, #hardcore-video{
151 | 	position: static;
152 | 	display: none;
153 | 	float: left;
154 | }
155 | 
156 | #contact-us-div{
157 | 	position: relative;
158 | }
159 | 
160 | #contact-us{
161 | 	position: absolute;
162 | 	height: 100vh;
163 | 	width: 100%;
164 | 	background-color: #2f3542;
165 | }
166 | 
167 | #footer-heading{
168 | 	position: static;
169 | 	color: #b2bec3;
170 | 	text-align: center;
171 | 	padding-top: 120px;
172 | 	font-size: 16px;
173 | 	font-weight: lighter;
174 | 	text-transform: uppercase;
175 | }
176 | 
177 | #footer-title{
178 | 	position: static;
179 | 	color: #FFFFFF;
180 | 	font-size: 40px;
181 | 	padding-top: 35px;
182 | 	text-align: center;
183 | 	letter-spacing: -1px;
184 | }
185 | 
186 | .first-div{
187 | 	position: static;
188 | 	float: left;
189 | 	padding-left: 20%;
190 | 	padding-top: 30px;
191 | 	text-align: center;
192 | }
193 | 
194 | .number{
195 | 	position: static;
196 | 	margin-left: 45px;
197 | 	font-size: 60px;
198 | 	color: #7efff5;
199 | }
200 | 
201 | .number-desc{
202 | 	position: static;
203 | 	color: #FFFFFF;
204 | 	font-weight: lighter;
205 | 	font-size: 13px;
206 | 	text-align: center;
207 | }
208 | 
209 | .footer-div{
210 | 	position: static;
211 | 	float: left;
212 | 	padding-top: 30px;
213 | 	margin-left: 100px;
214 | 	text-align: center;
215 | }
216 | 
217 | .social-main{
218 | 	width: 100%;
219 | 	text-align: center;
220 | }
221 | 
222 | .first-social{
223 | 	position: static;
224 | 	float: left;
225 | 	padding-left: 40%;
226 | 	padding-top: 30px;
227 | }
228 | 
229 | .social{
230 | 	position: static;
231 | 	float: left;
232 | 	padding-left: 30px;
233 | 	padding-top: 30px;
234 | }
235 | 
236 | .first-social:hover, .social:hover{
237 | 	cursor: pointer;
238 | }


--------------------------------------------------------------------------------
/Fitness Blender/main.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
  2 | 
  3 | *{
  4 | 	margin: 0px;
  5 | 	padding: 0px;
  6 | 	font-family: 'Poppins', sans-serif;
  7 | }
  8 | 
  9 | html{
 10 | 	scroll-behavior: smooth;
 11 | }
 12 | 
 13 | .navbar{
 14 | 	position: fixed;
 15 | 	display : flex;
 16 | 	line-height: 50%;
 17 | 	justify-content: center;
 18 | 	align-items: center;
 19 | 	flex-direction: row;
 20 | 	flex-wrap: wrap;
 21 | 	background-color: #dfe6e9;
 22 | 	width: 100%;
 23 | 	height: 50px;
 24 | 	z-index: 1;
 25 | 	opacity: 0.7;
 26 | }
 27 | 
 28 | .logo{
 29 | 	flex: 1 1 auto;
 30 | 	margin-left: 4%;
 31 | 	color: #000000;
 32 | 	text-transform: uppercase;
 33 | 	text-decoration: none;
 34 | 	letter-spacing: 0px;
 35 | 	font-weight: lighter;
 36 | 	font-size: 30px;
 37 | 	transition: 0.7s ease-in-out 0.0s;
 38 | }
 39 | 
 40 | .logo:hover{
 41 | 	margin-left: 2%;
 42 | 	font-size: 40px;
 43 | }
 44 | 
 45 | .navoptions{
 46 | 	display: flex;
 47 | 	justify-content: right;
 48 | 	list-style: none;
 49 | 	margin-right: 1%;
 50 | }
 51 | 
 52 | .option{
 53 | 	margin: 14px;
 54 | 	color: #000000;
 55 | 	text-decoration: none;
 56 | 	text-transform: uppercase;
 57 | 	font-size: 12px;
 58 | 	font-weight: lighter;
 59 | }
 60 | 
 61 | .option:hover{
 62 | 	text-decoration: underline;
 63 | }
 64 | 
 65 | #mainimage{
 66 | 	background-image: url("./Images/Fitness Blender.jpg");
 67 | 	background-color: #3CD4CC;
 68 | 	background-repeat: no-repeat;
 69 | 	width: 100%;
 70 | 	height: 582px;
 71 | 	overflow: hidden;
 72 | }
 73 | 
 74 | #mainheading{
 75 | 	color: #FFFFFF;
 76 | 	font-size: 40px;
 77 | 	font-weight: bolder;
 78 | 	margin-top: 230px;
 79 | 	margin-left: 130px;
 80 | }
 81 | 
 82 | #subheading{
 83 | 	color: #000000;
 84 | 	font-size: 13px;
 85 | 	font-weight: lighter;
 86 | 	margin-top: 40px;
 87 | 	margin-left: 130px;
 88 | }
 89 | 
 90 | .main-segments{
 91 | 	width: 100%;
 92 | 	height: 768px;
 93 | 	background-color: #FFFFFF;
 94 | }
 95 | 
 96 | .segment-float{
 97 | 	display: relative;
 98 | 	float: left;
 99 | 	height: 768px;
100 | }
101 | 
102 | .segment-float-right{
103 | 	display: relative;
104 | 	float: right;
105 | 	height: 768px;
106 | }
107 | 
108 | .left-image{
109 | 	margin-left: -175px;
110 | }
111 | 
112 | .right-image{
113 | 	width: 800px;
114 | 	height: 700px;
115 | 	margin-right: -100px;
116 | 	margin-left: 50px;
117 | }
118 | 
119 | .right-image{
120 | 		margin-left: -30px;
121 | }
122 | 
123 | .segment-heading-right{
124 | 	font-size: 37px;
125 | 	font-weight: bold;
126 | 	margin-left: 90px;
127 | 	margin-top: 180px;
128 | }
129 | 
130 | .segment-content-right{
131 | 	font-size: 17px;
132 | 	font-weight: lighter;
133 | 	margin-left: 90px;
134 | 	margin-top: 30px;
135 | }
136 | 
137 | .segment-link-right{
138 | 	margin-left: 90px;
139 | 	margin-top: 30px;
140 | }
141 | 
142 | .segment-link-anchor{
143 | 	color: #3498db;
144 | 	text-decoration: none;
145 | }
146 | 
147 | .segment-link-anchor:hover{
148 | 	text-decoration: underline;
149 | }
150 | 
151 | .segment-heading-left{
152 | 	font-size: 34px;
153 | 	font-weight: bold;
154 | 	margin-right: 100px;
155 | 	margin-left: 30px;
156 | 	margin-top: 180px;
157 | }
158 | 
159 | .segment-content-left{
160 | 	font-size: 17px;
161 | 	font-weight: lighter;
162 | 	margin-right: 100px;
163 | 	margin-left: 30px;
164 | 	margin-top: 30px;
165 | }
166 | 
167 | .segment-link-left{
168 | 	margin-right: 100px;
169 | 	margin-left: 30px;
170 | 	margin-top: 30px;
171 | }
172 | 
173 | #contact-us-div{
174 | 	position: relative;
175 | }
176 | 
177 | #contact-us{
178 | 	position: absolute;
179 | 	height: 100vh;
180 | 	width: 100%;
181 | 	background-color: #2f3542;
182 | }
183 | 
184 | #footer-heading{
185 | 	position: static;
186 | 	color: #b2bec3;
187 | 	text-align: center;
188 | 	padding-top: 120px;
189 | 	font-size: 16px;
190 | 	font-weight: lighter;
191 | 	text-transform: uppercase;
192 | }
193 | 
194 | #footer-title{
195 | 	position: static;
196 | 	color: #FFFFFF;
197 | 	font-size: 40px;
198 | 	padding-top: 35px;
199 | 	text-align: center;
200 | 	letter-spacing: -1px;
201 | }
202 | 
203 | .first-div{
204 | 	position: static;
205 | 	float: left;
206 | 	padding-left: 20%;
207 | 	padding-top: 30px;
208 | 	text-align: center;
209 | }
210 | 
211 | .number{
212 | 	position: static;
213 | 	margin-left: 45px;
214 | 	font-size: 60px;
215 | 	color: #7efff5;
216 | }
217 | 
218 | .number-desc{
219 | 	position: static;
220 | 	color: #FFFFFF;
221 | 	font-weight: lighter;
222 | 	font-size: 13px;
223 | 	text-align: center;
224 | }
225 | 
226 | .footer-div{
227 | 	position: static;
228 | 	float: left;
229 | 	padding-top: 30px;
230 | 	margin-left: 100px;
231 | 	text-align: center;
232 | }
233 | 
234 | .social-main{
235 | 	width: 100%;
236 | 	text-align: center;
237 | }
238 | 
239 | .first-social{
240 | 	position: static;
241 | 	float: left;
242 | 	padding-left: 40%;
243 | 	padding-top: 30px;
244 | }
245 | 
246 | .social{
247 | 	position: static;
248 | 	float: left;
249 | 	padding-left: 30px;
250 | 	padding-top: 30px;
251 | }
252 | 
253 | .first-social:hover, .social:hover{
254 | 	cursor: pointer;
255 | }


--------------------------------------------------------------------------------
/Fitness Blender/main.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 	session_start();
 3 | ?>
 4 | 
 5 | <!DOCTYPE html>
 6 | <html lang="en">
 7 | 	<head>
 8 | 		<meta charset="utf-8"/>
 9 | 		<title>Welcome to the world of fitness.</title>
10 | 		<link rel="stylesheet" href="main.css">
11 | 	</head>
12 | 	<body>
13 | 		<div class="navbar">
14 | 			<a class="logo" href="#home">Fitness Blender</a>
15 | 			<ul class="navoptions">
16 | 				<li><a class="option" href="workoutmain.php">Workouts & Programs</a></li>
17 | 				<li><a class="option" href="healthyliving.php">Healthy Living</a></li>
18 | 				<li><a class="option" href="#contact-us-div">Contact Us</a></li>
19 | 				<li><a class="option" href="#"><?php echo "Hello! " .$_SESSION['userid'];?></a></li>
20 | 				<li><a class="option" href="fitness.html">Logout</a></li>
21 | 			</ul>
22 | 		</div><span id="home"></span><br><br>
23 | 		<div id="mainimage">
24 | 			<p id="mainheading">Workout videos for every<br>fitness level.<br>Absolutely FREE.</p>
25 | 			<p id="subheading">Earn your WORKOUT COMPLETE™</p>
26 | 		</div>
27 | 		<div class="main-segments">
28 | 			<div class="segment-float">
29 | 				<img class="left-image" src="./Images/feature-1.jpg"/>
30 | 			</div>
31 | 			<div class="segment-float">
32 | 				<p class="segment-heading-right">Over 500 free workout<br>videos with new workouts<br>released every week.</p>
33 | 				<p class="segment-content-right">We believe fitness should be accessible to everyone, everywhere,<br>regardless of income or access to a gym. That's why we offer<br>hundreds of free,professionally built workout videos,<br>for every fitness level and goal.</p>
34 | 				<p class="segment-link-right"><a class="segment-link-anchor" href="workoutmain.php">View All Our Workout Videos</a></p>
35 | 			</div>
36 | 		</div>
37 | 		<div class="main-segments">
38 | 			<div class="segment-float-right">
39 | 				<img class="right-image" src="./Images/feature-2.jpg"/>
40 | 			</div>
41 | 			<div class="segment-float-right">
42 | 				<p class="segment-heading-left">Find support and<br>encouragement from the<br> mostpositive community on<br>the web.</p>
43 | 				<p class="segment-content-left">Our community forum is a great place to share helpful workout<br>and nutrition information and cheer each other on. Share tips,<br>challenges and triumphs, results and progress with Fitness<br>Blender members from all over the world.</p>
44 | 				<p class="segment-link-left"><a class="segment-link-anchor" href="#">See the Latest Community Discussions</a></p>
45 | 			</div>
46 | 		</div>
47 | 		<div class="main-segments">
48 | 			<div class="segment-float">
49 | 				<img class="left-image" src="./Images/feature-3.jpg"/>
50 | 			</div>
51 | 			<div class="segment-float">
52 | 				<p class="segment-heading-right">A customizable calendar to<br>manage your programs and<br>monitor your progress.</p>
53 | 				<p class="segment-content-right">Sign up for a free membership & build your own<br>workout program using our online workout calendar. You’ll be able<br>to schedule your workouts, add new programs, track your<br>workouts, save your favorite workout videos, and more.</p>
54 | 				<p class="segment-link-right"><a class="segment-link-anchor" href="#">Become a Member Today</a></p>
55 | 			</div>
56 | 		</div>
57 | 		<div class="main-segments">
58 | 			<div class="segment-float-right">
59 | 				<img class="right-image" src="./Images/feature-4.jpg"/>
60 | 			</div>
61 | 			<div class="segment-float-right">
62 | 				<p class="segment-heading-left">Workout programs on your<br>own schedule. Get your<br>Workout complete today!</p>
63 | 				<p class="segment-content-left">Improve your body, health and mindset with our<br>customized workout programs and meal plans that will guide<br>and encourage you every step of the way. Our programs use our<br>online workout videos to provide detailed, day-by-day<br>instruction, creating incredible, sustainable results.</p>
64 | 				<p class="segment-link-left"><a class="segment-link-anchor" href="workoutmain.php">Learn More About Our Programs</a></p>
65 | 			</div>
66 | 		</div>
67 | 		<div id="contact-us-div">
68 | 			<div id="contact-us">
69 | 				<p id="footer-heading">- About Fitness Blender - </p>
70 | 				<p id="footer-title">Created by Anuj, Pranav and Janhavi<br>—a team passionate about helping you<br>achieve your health and fitness goals.</p>
71 | 				<div class="first-div">
72 | 					<p class="number">35+</p>
73 | 					<p class="number-desc">35+ million workouts completed<br>each month by our amazing<br>Fitness Blender Family.</p>
74 | 				</div>
75 | 				<div class="footer-div">
76 | 					<p class="number">500+</p>
77 | 					<p class="number-desc">500+ free workout videos for<br>every fitness level + effective &<br>affordable workout programs.</p>
78 | 				</div>
79 | 				<div class="footer-div">
80 | 					<p class="number">10+</p>
81 | 					<p class="number-desc">26+ years of combined experience<br>helping people achieve their<br>fitness & health goals.</p>
82 | 				</div><br>
83 | 				<div class="first-social"><a target="_blank" href="https://www.youtube.com/user/FitnessBlender"><img src="./Images/youtube.png"/></a></div>
84 | 				<div class="social"><a target="_blank" href="https://www.pinterest.com/FitnessBlender/"><img src="./Images/pinterest.png"/></a></div>
85 | 				<div class="social"><a target="_blank" href="https://www.facebook.com/fitnessblender/"><img src="./Images/facebook.png"/></a></div>
86 | 				<div class="social"><a target="_blank" href="https://www.instagram.com/fitnessblender/"><img src="./Images/instagram.png"/></a></div>
87 | 				<div class="social"><a target="_blank" href="https://twitter.com/FitnessBlender"><img src="./Images/twitter.png"/></a></div>
88 | 			</div>
89 | 		</div>
90 | 	</body>
91 | </html>


--------------------------------------------------------------------------------
/Fitness Blender/healthyliving.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | 	session_start();
  3 | ?>
  4 | 
  5 | <!DOCTYPE html>
  6 | <html lang="en">
  7 | 	<head>
  8 | 		<meta charset="utf-8"/>
  9 | 		<title>Workout & Programs</title>
 10 | 		<link rel="stylesheet" href="healthyliving.css">
 11 | 	</head>
 12 | 	<body>
 13 | 		<div class="navbar">
 14 | 			<a class="logo" href="#home">Fitness Blender</a>
 15 | 			<ul class="navoptions">
 16 | 				<li><a class="option" href="main.php">Home</a></li>
 17 | 				<li><a class="option" href="workoutmain.php">Workouts & Programs</a></li>
 18 | 				<li><a class="option" href="#contact-us-div">Contact Us</a></li>
 19 | 				<li><a class="option" href="#"><?php echo "Hello! " .$_SESSION['userid'];?></a></li>
 20 | 				<li><a class="option" href="fitness.html">Logout</a></li>
 21 | 			</ul>
 22 | 		</div><span id="home"></span><br><br>
 23 | 		<div id="mainimage">
 24 | 			<p id=title>Healthy Living</p>
 25 | 			<p id="mainheading">Live Well, Feel Great<br>and Look Great.</p>
 26 | 			<p id="subheading">A huge selection of health and fitness content, healthy recipes<br>and transformation stories to help you get fit and stay fit!</p>
 27 | 		</div>
 28 | 		<h1 id="maincontainer-heading">Some of our healthiest recipies just for you.</h3>
 29 | 		<div class="maincontainer">
 30 | 			<div class="container">
 31 | 
 32 | 				<!-- CARD 1 -->
 33 | 				<div class="card">
 34 | 					<div class="face face1">
 35 | 						<div class="content">
 36 | 							<img src="./Images/banana.png">
 37 | 							<h4>Banana Nice Cream</h4>
 38 | 						</div>
 39 | 					</div>
 40 | 					<div class="face face2">
 41 | 						<div class="content">
 42 | 							<p>Recipe:<br>1. Cut the bananas. Put them in a container and freeze for 3 hours.<br>2. Cut the strawberries and freeze for 3 hours.<br>3. Put the fruits in a food processor and blend until smooth.<br>4. Keep blending 1-2 times.<br>5. Serve and sprinkle with coconut flakes and mint leaves.</p>
 43 | 							<a href="#">Read More.</a>
 44 | 						</div>
 45 | 					</div>
 46 | 				</div>
 47 | 
 48 | 				<!-- CARD 2 -->
 49 | 				<div class="card">
 50 | 					<div class="face face1">
 51 | 						<div class="content">
 52 | 							<img src="./Images/coconut.png">
 53 | 							<h4>Coconut Fruit Popsicles</h4>
 54 | 						</div>
 55 | 					</div>
 56 | 					<div class="face face2">
 57 | 						<div class="content">
 58 | 							<p>Recipe:<br>1. Melt the coconut cream until creamy.<br>2. Rinse and chop the fruit finely.<br>3. Mix the fruit and add 4 tsp of honey.<br>4. Stir to form a rough puree.<br>5. In popsicle molds, put a tablespoon of fruit puree & coconut cream.<br>6. Repeat until the mold is full.<br>7. Put the grips & freeze for 3 hours.<br>8. Take out from the freezer and Enjoy on a hot day!</p>
 59 | 							<a href="#">Read More.</a>
 60 | 						</div>
 61 | 					</div>
 62 | 				</div>
 63 | 
 64 | 				<!-- CARD 3 -->
 65 | 				<div class="card">
 66 | 					<div class="face face1">
 67 | 						<div class="content">
 68 | 							<img src="./Images/mushroom.png">
 69 | 							<h4>Risotto with Mushrooms</h4>
 70 | 						</div>
 71 | 					</div>
 72 | 					<div class="face face2">
 73 | 						<div class="content">
 74 | 							<p>Ingridients:<br>1. 1 tablespoon olive oil.<br>2. 1 cup barley.<br>3. 1 cup sliced mushrooms.<br>4. 5-6 cups low-sodium vegetable broth.<br>5. 1/4 cup grated Parmesan cheese, plus more to serve.<br>6. Parsley, to serve.<br>7. Salt, to taste.<br>8. Pepper, to taste.</p>
 75 | 							<a href="#">Read More.</a>
 76 | 						</div>
 77 | 					</div>
 78 | 				</div>
 79 | 
 80 | 				<!-- CARD 4 -->
 81 | 				<div class="card">
 82 | 					<div class="face face1">
 83 | 						<div class="content">
 84 | 							<img src="./Images/sweet-potato.png">
 85 | 							<h4>Sweet potato & Beet Chips</h4>
 86 | 						</div>
 87 | 					</div>
 88 | 					<div class="face face2">
 89 | 						<div class="content">
 90 | 							<p>Recipe:<br>1. Rinse and peel the vegetables.<br>2. Slice them very thinly.<br>3. Place the slices on a baking tray lined with parchment paper.<br>4. Drizzle oil of choice on top.<br>5. Roast for 10-12 minutes at 160˚C until crispy.<br>6. Remove from the oven and let cool completely.<br>7. Serve them hot with dip or enjoy plain.</p>
 91 | 							<a href="#">Read More.</a>
 92 | 						</div>
 93 | 					</div>
 94 | 				</div>
 95 | 
 96 | 			</div>
 97 | 		</div>
 98 | 		<div id="contact-us-div">
 99 | 			<div id="contact-us">
100 | 				<p id="footer-heading">- About Fitness Blender - </p>
101 | 				<p id="footer-title">Created by Anuj, Pranav and Janhavi<br>—a team passionate about helping you<br>achieve your health and fitness goals.</p>
102 | 				<div class="first-div">
103 | 					<p class="number">35+</p>
104 | 					<p class="number-desc">35+ million workouts completed<br>each month by our amazing<br>Fitness Blender Family.</p>
105 | 				</div>
106 | 				<div class="footer-div">
107 | 					<p class="number">500+</p>
108 | 					<p class="number-desc">500+ free workout videos for<br>every fitness level + effective &<br>affordable workout programs.</p>
109 | 				</div>
110 | 				<div class="footer-div">
111 | 					<p class="number">10+</p>
112 | 					<p class="number-desc">26+ years of combined experience<br>helping people achieve their<br>fitness & health goals.</p>
113 | 				</div>
114 | 				<div class="first-social"><a target="_blank" href="https://www.youtube.com/user/FitnessBlender"><img src="./Images/youtube.png" alt="IMG"/></a></div>
115 | 				<div class="social"><a target="_blank" href="https://www.pinterest.com/FitnessBlender/"><img src="./Images/pinterest.png" alt="IMG"/></a></div>
116 | 				<div class="social"><a target="_blank" href="https://www.facebook.com/fitnessblender/"><img src="./Images/facebook.png" alt="IMG"/></a></div>
117 | 				<div class="social"><a target="_blank" href="https://www.instagram.com/fitnessblender/"><img src="./Images/instagram.png" alt="IMG"/></a></div>
118 | 				<div class="social"><a target="_blank" href="https://twitter.com/FitnessBlender"><img src="./Images/twitter.png" alt="IMG"/></a></div>
119 | 			</div>
120 | 		</div>
121 | 	</body>
122 | </html>


--------------------------------------------------------------------------------
/Fitness Blender/healthyliving.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
  2 | 
  3 | *{
  4 | 	margin: 0px;
  5 | 	padding: 0px;
  6 | 	font-family: 'Poppins', sans-serif;
  7 | }
  8 | 
  9 | html{
 10 | 	scroll-behavior: smooth;
 11 | }
 12 | 
 13 | body{
 14 | 	background: #333;
 15 | }
 16 | 
 17 | .navbar{
 18 | 	position: fixed;
 19 | 	display : flex;
 20 | 	line-height: 50%;
 21 | 	justify-content: center;
 22 | 	align-items: center;
 23 | 	flex-direction: row;
 24 | 	flex-wrap: wrap;
 25 | 	background-color: #dfe6e9;
 26 | 	width: 100%;
 27 | 	height: 50px;
 28 | 	z-index: 2;
 29 | 	opacity: 0.7;
 30 | }
 31 | 
 32 | .logo{
 33 | 	flex: 1 1 auto;
 34 | 	margin-left: 4%;
 35 | 	color: #000000;
 36 | 	text-transform: uppercase;
 37 | 	text-decoration: none;
 38 | 	letter-spacing: 0px;
 39 | 	font-weight: lighter;
 40 | 	font-size: 30px;
 41 | 	transition: 0.7s ease-in-out 0.0s;
 42 | }
 43 | 
 44 | .logo:hover{
 45 | 	margin-left: 2%;
 46 | 	font-size: 40px;
 47 | }
 48 | 
 49 | .navoptions{
 50 | 	display: flex;
 51 | 	justify-content: right;
 52 | 	list-style: none;
 53 | 	margin-right: 1%;
 54 | }
 55 | 
 56 | .option{
 57 | 	margin: 14px;
 58 | 	color: #000000;
 59 | 	text-decoration: none;
 60 | 	text-transform: uppercase;
 61 | 	font-size: 12px;
 62 | 	font-weight: lighter;
 63 | }
 64 | 
 65 | .option:hover{
 66 | 	text-decoration: underline;
 67 | }
 68 | 
 69 | #mainimage{
 70 | 	position: relative;
 71 | 	background-image: url("./Images/healthy.jpg");
 72 | 	background-repeat: no-repeat;
 73 | 	width: 100%;
 74 | 	height: 100vh;
 75 | }
 76 | 
 77 | #title{
 78 | 	position: absolute;
 79 | 	color: #0abde3;
 80 | 	font-size: 25px;
 81 | 	font-weight: bolder;
 82 | 	text-transform: uppercase;
 83 | 	text-decoration: underline;
 84 | 	top: 140px;
 85 | 	left: 130px;
 86 | }
 87 | 
 88 | #mainheading{
 89 | 	position: absolute;
 90 | 	color: #FFFFFF;
 91 | 	font-size: 40px;
 92 | 	font-weight: bolder;
 93 | 	top: 200px;
 94 | 	left: 130px;
 95 | }
 96 | 
 97 | #subheading{
 98 | 	position: absolute;
 99 | 	color: #FFFFFF;
100 | 	font-size: 15px;
101 | 	font-weight: lighter;
102 | 	top: 330px;
103 | 	left: 130px;
104 | }
105 | 
106 | #maincontainer-heading{
107 | 	position: static;
108 | 	color: #ffffff;
109 | 	text-transform: uppercase;
110 | 	font-weight: lighter;
111 | 	text-align: center;
112 | 	transition: 1s;
113 | 	animation-name: heading-animate;
114 | 	animation-duration: 3s;
115 | 	animation-direction: alternate;
116 | 	animation-iteration-count: infinite;
117 | }
118 | 
119 | @keyframes heading-animate{
120 | 	0%{
121 | 		opacity: 0.2;
122 | 		text-shadow: 0 0 10px #ffffff;
123 | 	}
124 | 	50%{
125 | 		opacity: 0.6;
126 | 		text-shadow: 0 0 30px #ffffff;
127 | 	}
128 | 	100%{
129 | 		opacity: 1;
130 | 		text-shadow: 0 0 60px #ffffff;
131 | 	}
132 | }
133 | 
134 | /*#maincontainer-heading:hover{
135 | 	opacity: 1;
136 | }*/
137 | 
138 | .maincontainer{
139 | 	height: 562px;
140 | 	background: #333;
141 | 	display: flex;
142 | 	justify-content: center;
143 | 	align-items: center;
144 | }
145 | 
146 | .container{
147 | 	width: 1000px;
148 | 	position: relative;
149 | 	display: flex;
150 | 	justify-content: space-between;
151 | }
152 | 
153 | .container .card{
154 | 	position: relative;
155 | }
156 | 
157 | .container .card .face{
158 | 	width: 250px;
159 | 	height: 220px;
160 | 	margin-left: 10px;
161 | 	margin-top: 10px;
162 | 	transition: 0.5s;
163 | }
164 | 
165 | .container .card .face.face1{
166 | 	position: relative;
167 | 	background: #333;
168 | 	display: flex;
169 | 	justify-content: center;
170 | 	align-items: center;
171 | 	z-index: 1;
172 | 	transform: translateY(120px);
173 | }
174 | 
175 | .container .card:hover .face.face1{
176 | 	transform: translateY(10px);
177 | 	background: #ff0057;
178 | }
179 | 
180 | .container .card .face.face1 .content{
181 | 	opacity: 0.2;
182 | 	transition: 0.5s;
183 | }
184 | 
185 | .container .card:hover .face.face1 .content{
186 | 	opacity: 1;
187 | }
188 | 
189 | .container .card .face.face1 img{
190 | 	max-width: 75px;
191 | 	padding: 0px 55px;
192 | }
193 | 
194 | .container .card .face.face1 h4{
195 | 	margin: 10px 0 0;
196 | 	padding: 0;
197 | 	color: #fff;
198 | 	font-weight: lighter;
199 | 	text-align: center;
200 | }
201 | 
202 | .container .card .face.face2{
203 | 	position: relative;
204 | 	background: #fff;
205 | 	display: flex;
206 | 	justify-content: center;
207 | 	align-items: center;
208 | 	padding: 20px;
209 | 	box-sizing: border-box;
210 | 	box-shadow: 0 20px 50px rgba(0,0,0,0.8);
211 | 	transform: translateY(-110px);
212 | }
213 | 
214 | .container .card:hover .face.face2{
215 | 	transform: translateY(0);
216 | }
217 | 
218 | .container .card .face.face2 .content p{
219 | 	margin: 0;
220 | 	padding: 0;
221 | 	font-size: 10px;
222 | }
223 | 
224 | .container .card .face.face2 .content a{
225 | 	margin: 10px 0 0;
226 | 	display: inline-block;
227 | 	text-decoration: none;
228 | 	font-weight: lighter;
229 | 	color: #333;
230 | 	font-size: 10px;
231 | 	padding: 3px;
232 | 	border: 1px solid #333;
233 | 	border-radius: 5px;
234 | 	transition: 0.5s;
235 | }
236 | 
237 | .container .card .face.face2 .content a:hover{
238 | 	color: #ffffff;
239 | 	background-color: #333;
240 | }
241 | 
242 | #contact-us-div{
243 | 	position: relative;
244 | }
245 | 
246 | #contact-us{
247 | 	position: absolute;
248 | 	height: 100vh;
249 | 	width: 100%;
250 | 	background-image: linear-gradient(to bottom,#333,#2f3542);
251 | }
252 | 
253 | #footer-heading{
254 | 	position: static;
255 | 	color: #b2bec3;
256 | 	text-align: center;
257 | 	padding-top: 120px;
258 | 	font-size: 16px;
259 | 	font-weight: lighter;
260 | 	text-transform: uppercase;
261 | }
262 | 
263 | #footer-title{
264 | 	position: static;
265 | 	color: #FFFFFF;
266 | 	font-size: 40px;
267 | 	padding-top: 35px;
268 | 	text-align: center;
269 | 	letter-spacing: -1px;
270 | }
271 | 
272 | .first-div{
273 | 	position: static;
274 | 	float: left;
275 | 	padding-left: 20%;
276 | 	padding-top: 30px;
277 | 	text-align: center;
278 | }
279 | 
280 | .number{
281 | 	position: static;
282 | 	margin-left: 45px;
283 | 	font-size: 60px;
284 | 	color: #7efff5;
285 | }
286 | 
287 | .number-desc{
288 | 	position: static;
289 | 	color: #FFFFFF;
290 | 	font-weight: lighter;
291 | 	font-size: 13px;
292 | 	text-align: center;
293 | }
294 | 
295 | .footer-div{
296 | 	position: static;
297 | 	float: left;
298 | 	padding-top: 30px;
299 | 	margin-left: 100px;
300 | 	text-align: center;
301 | }
302 | 
303 | .social-main{
304 | 	width: 100%;
305 | 	text-align: center;
306 | }
307 | 
308 | .first-social{
309 | 	position: static;
310 | 	float: left;
311 | 	padding-left: 40%;
312 | 	padding-top: 30px;
313 | }
314 | 
315 | .social{
316 | 	position: static;
317 | 	float: left;
318 | 	padding-left: 30px;
319 | 	padding-top: 30px;
320 | }
321 | 
322 | .first-social:hover, .social:hover{
323 | 	cursor: pointer;
324 | }


--------------------------------------------------------------------------------
/Fitness Blender/fitness.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
  2 | @import url('https://fonts.googleapis.com/css?family=Mansalva&display=swap');
  3 | 
  4 | *{
  5 | 	margin: 0px;
  6 | 	padding: 0px;
  7 | 	font-family: 'Poppins', sans-serif;
  8 | }
  9 | 
 10 | html{
 11 | 	scroll-behavior: smooth;
 12 | }
 13 | 
 14 | .navbar{
 15 | 	position: fixed;
 16 | 	display : flex;
 17 | 	line-height: 50%;
 18 | 	justify-content: center;
 19 | 	align-items: center;
 20 | 	flex-direction: row;
 21 | 	flex-wrap: wrap;
 22 | 	background-color: #dfe6e9;
 23 | 	width: 100%;
 24 | 	height: 50px;
 25 | 	z-index: 1;
 26 | 	opacity: 0.7;
 27 | }
 28 | 
 29 | .logo{
 30 | 	flex: 1 1 auto;
 31 | 	margin-left: 4%;
 32 | 	color: #000000;
 33 | 	text-transform: uppercase;
 34 | 	text-decoration: none;
 35 | 	letter-spacing: 0px;
 36 | 	font-weight: lighter;
 37 | 	font-size: 30px;
 38 | 	transition: 0.7s ease-in-out 0.0s;
 39 | }
 40 | 
 41 | .logo:hover{
 42 | 	text-decoration: underline;
 43 | }
 44 | 
 45 | .navoptions{
 46 | 	display: flex;
 47 | 	float: left;
 48 | 	justify-content: right;
 49 | 	list-style: none;
 50 | 	margin-right: 1%;
 51 | }
 52 | 
 53 | .option{
 54 | 	margin: 14px;
 55 | 	color: #000000;
 56 | 	text-decoration: none;
 57 | 	font-size: 12px;
 58 | 	font-weight: lighter;
 59 | }
 60 | 
 61 | .option:hover{
 62 | 	text-decoration: underline;
 63 | }
 64 | 
 65 | #iconbar{
 66 | 	position: fixed;
 67 | 	color: #000000;
 68 | 	top: 10px;
 69 | 	right: 20px;
 70 | 	z-index: 1;
 71 | 	opacity: 0;
 72 | 	visibility: hidden;
 73 | }
 74 | 
 75 | .banner-area{
 76 | 	position: relative;
 77 | 	width: 100%;
 78 | 	height: 100vh;
 79 | 	background-image: url("Images/Background2.jpg");
 80 | }
 81 | 
 82 | .banner-area h1{
 83 | 	width: 400px;
 84 | 	position: absolute;
 85 | 	margin: 0;
 86 | 	padding: 0;
 87 | 	top: 55%;
 88 | 	left: 50%;
 89 | 	font-weight: bold;
 90 | 	transform: translate(-50%,-50%);
 91 | 	text-transform: uppercase;
 92 | 	letter-spacing: 5px;
 93 | 	color: transparent;
 94 | }
 95 | 
 96 | .banner-area h1:before{
 97 | 	content: attr(data-text);
 98 | 	position: absolute;
 99 | 	top: 0;
100 | 	left: 0;
101 | 	width: 100%;
102 | 	height: 100%;
103 | 	color: #ffffff;
104 | 	overflow: hidden;
105 | 	border-right: 2px solid #f39c12;
106 | 	animation: type 5s linear 0.0s infinite alternate; 
107 | 	white-space: nowrap;
108 | }
109 | 
110 | @keyframes type{
111 | 	0%{
112 | 		width: 0%;
113 | 	}
114 | 	100%{
115 | 		animation-delay: 2s;
116 | 		width: 100%;
117 | 	}
118 | }
119 | 
120 | .workout{
121 | 	background-image: url('./Images/workout.jpg');
122 | 	opacity: 0.7;
123 | }
124 | 
125 | .motivation{
126 | 	background-image: url('./Images/motivation.jpg');
127 | 	opacity: 0.7;
128 | }
129 | 
130 | .health{
131 | 	background-image: url('./Images/health.jpg');
132 | 	opacity: 0.7;
133 | }
134 | 
135 | .parallax{
136 | 	height: 635px;
137 | 	background-attachment: fixed;
138 | 	background-position: center;
139 | 	background-repeat: no-repeat;
140 | 	background-size: cover;
141 | }
142 | 
143 | .parallax p{
144 | 	color: #ffffff;
145 | 	padding-top: 250px;
146 | 	text-align: center;
147 | 	font-size: 43px;
148 | 	letter-spacing: -2px;
149 | 	font-family: 'Mansalva', 'sans-serif';
150 | }
151 | 
152 | .parallax footer{
153 | 	color: #ffffff;
154 | 	padding-top: 200px;
155 | 	text-align: center;
156 | 	font-size: 25px;
157 | 	font-family: 'Mansalva', 'sans-serif';
158 | }
159 | 
160 | 
161 | #contact-us-div{
162 | 	position: relative;
163 | }
164 | 
165 | #contact-us{
166 | 	position: absolute;
167 | 	height: 100vh;
168 | 	width: 100%;
169 | 	background-color: #2f3542;
170 | }
171 | 
172 | #footer-heading{
173 | 	position: static;
174 | 	color: #b2bec3;
175 | 	text-align: center;
176 | 	padding-top: 120px;
177 | 	font-size: 16px;
178 | 	font-weight: lighter;
179 | 	text-transform: uppercase;
180 | }
181 | 
182 | #footer-title{
183 | 	position: static;
184 | 	color: #FFFFFF;
185 | 	font-size: 40px;
186 | 	padding-top: 35px;
187 | 	text-align: center;
188 | 	letter-spacing: -1px;
189 | }
190 | 
191 | .first-div{
192 | 	position: static;
193 | 	float: left;
194 | 	padding-left: 20%;
195 | 	padding-top: 30px;
196 | 	text-align: center;
197 | }
198 | 
199 | .number{
200 | 	position: static;
201 | 	margin-left: 45px;
202 | 	font-size: 60px;
203 | 	color: #7efff5;
204 | }
205 | 
206 | .number-desc{
207 | 	position: static;
208 | 	color: #FFFFFF;
209 | 	font-weight: lighter;
210 | 	font-size: 13px;
211 | 	text-align: center;
212 | }
213 | 
214 | .footer-div{
215 | 	position: static;
216 | 	float: left;
217 | 	padding-top: 30px;
218 | 	margin-left: 100px;
219 | 	text-align: center;
220 | }
221 | 
222 | .social-main{
223 | 	width: 100%;
224 | 	text-align: center;
225 | }
226 | 
227 | .first-social{
228 | 	position: static;
229 | 	float: left;
230 | 	padding-left: 40%;
231 | 	padding-top: 30px;
232 | }
233 | 
234 | .social{
235 | 	position: static;
236 | 	float: left;
237 | 	padding-left: 30px;
238 | 	padding-top: 30px;
239 | }
240 | 
241 | .first-social:hover, .social:hover{
242 | 	cursor: pointer;
243 | }
244 | 
245 | /* big landscape tablets, tablets, laptops and desktops. */
246 | 
247 | /* portrait table, e-readers, kindle. */
248 | @media (max-width: 1184px){
249 | 	.parallax p{
250 | 		font-size: 30px;
251 | 	}
252 | 	.parallax footer{
253 | 		font-size: 13px;
254 | 		padding-top: 270px;
255 | 	}
256 | 	#footer-heading{
257 | 		font-size: 12px;
258 | 		margin-top: 30px;
259 | 	}
260 | 	#footer-title{
261 | 		font-size: 30px;
262 | 		padding-top: 27px;
263 | 	}
264 | 	.first-div{
265 | 		padding-left: 15%;
266 | 		padding-top: 20px;
267 | 	}
268 | 	.number{
269 | 		margin-left: 30px;
270 | 		font-size: 40px;
271 | 	}
272 | 	.number-desc{
273 | 		font-size: 12px;
274 | 	}
275 | 	.footer-div{
276 | 		padding-top: 20px;
277 | 		margin-left: 70px;
278 | 	}
279 | }
280 | 
281 | /* smartphones: landscape Android phones, iPhone*/
282 | @media (max-width: 852px){
283 | 	#footer-heading{
284 | 		font-size: 11px;
285 | 		margin-top: 30px;
286 | 	}
287 | 	#footer-title{
288 | 		font-size: 28px;
289 | 		padding-top: 27px;
290 | 	}
291 | 	.first-div{
292 | 		padding-left: 10%;
293 | 		padding-top: 20px;
294 | 	}
295 | 	.number{
296 | 		margin-left: 24px;
297 | 		font-size: 35px;
298 | 	}
299 | 	.number-desc{
300 | 		font-size: 11px;
301 | 	}
302 | 	.footer-div{
303 | 		padding-top: 20px;
304 | 		margin-left: 40px;
305 | 	}
306 | 	.first-social{
307 | 		padding-left: 35%;
308 | 	}
309 | }
310 | 
311 | @media (max-width: 718px){
312 | 	.logo{
313 | 		padding-top: 20px;
314 | 	}
315 | 	.navbar ul{
316 | 		opacity: 0;
317 | 		visibility: hidden;
318 | 	}
319 | 	#iconbar{
320 | 		opacity: 1;
321 | 		visibility: visible;
322 | 	}
323 | 	.navbar.responsive{
324 | 		position: fixed;
325 | 		width: 100%;
326 | 		position: relative;
327 | 		z-index: 10;
328 | 		opacity: 0.8;
329 | 	}
330 | 	.navoptions{
331 | 		float: none;
332 | 		display: block;
333 | 		text-align: center;
334 | 		width: 100%;
335 | 		opacity: 1;
336 | 		visibility: visible;
337 | 		background-color: cyan;
338 | 	}
339 | 	.navbar.responsive ul li{
340 | 		float: none;
341 | 		display: block;
342 | 		text-align: center;
343 | 	}
344 | }
345 | 
346 | /* smartphones: portrait Android phones, iPhone; */
347 | @media (max-width: 680px){
348 | 	#footer-heading{
349 | 		font-size: 10px;
350 | 		margin-top: 28px;
351 | 	}
352 | 	#footer-title{
353 | 		font-size: 25px;
354 | 		padding-top: 25px;
355 | 	}
356 | 	.first-div{
357 | 		padding-left: 10%;
358 | 		padding-top: 18px;
359 | 	}
360 | 	.number{
361 | 		margin-left: 23px;
362 | 		font-size: 32px;
363 | 	}
364 | 	.number-desc{
365 | 		font-size: 10px;
366 | 	}
367 | 	.footer-div{
368 | 		padding-top: 18px;
369 | 		margin-left: 38px;
370 | 	}
371 | 	.first-social{
372 | 		padding-left: 35%;
373 | 	}
374 | }
375 | 
376 | @media (max-width: 620px){
377 | 	#footer-heading{
378 | 		font-size: 10px;
379 | 		margin-top: 25px;
380 | 	}
381 | 	#footer-title{
382 | 		font-size: 22px;
383 | 		padding-top: 22px;
384 | 	}
385 | 	.first-div{
386 | 		padding-left: 5px;
387 | 		padding-top: 18px;
388 | 	}
389 | 	.number{
390 | 		margin-left: 20px;
391 | 		font-size: 28px;
392 | 	}
393 | 	.number-desc{
394 | 		font-size: 10px;
395 | 	}
396 | 	.footer-div{
397 | 		padding-top: 16px;
398 | 		margin-left: 35px;
399 | 	}
400 | 	.first-social{
401 | 		padding-left: 50px;
402 | 	}
403 | }


--------------------------------------------------------------------------------