Skip to content

Instantly share code, notes, and snippets.

@enijaward

enijaward/Junction Fitness: Source Code

Last active February 12, 2022 14:59
Show Gist options
  • Save enijaward/8dd3fb53d91c665985d26ff138fd17bd to your computer and use it in GitHub Desktop.
Save enijaward/8dd3fb53d91c665985d26ff138fd17bd to your computer and use it in GitHub Desktop.
Download ZIP
HTML, CSS, & JavaScript for Junction Fitness Website
Raw
blueberry.css
/*
* jQuery Blueberry Slider v0.4 BETA
* http://marktyrrell.com/labs/blueberry/
*
* Copyright (C) 2011, Mark Tyrrell <me@marktyrrell.com>
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
.blueberry { margin: 0 auto; }
.blueberry .slides {
display: block;
position: relative;
overflow: hidden;
}
.blueberry .slides li {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
.blueberry .slides li img {
display: block;
width: 100%;
max-width: none;
}
.blueberry .slides li.active { display: block; position: relative; }
.blueberry .crop li img { width: auto; }
.blueberry .pager {
height: 40px;
text-align: center;
}
.blueberry .pager li { display: inline-block; }
.blueberry .pager li a,
.blueberry .pager li a span {
display: block;
height: 4px;
width: 4px;
}
.blueberry .pager li a {
padding: 18px 8px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-o-border-radius: 6px;
-ms-border-radius: 6px;
-khtml-border-radius: 6px;
border-radius: 6px;
}
.blueberry .pager li a span {
overflow: hidden;
background: #c0c0c0;
text-indent: -9999px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-o-border-radius: 2px;
-ms-border-radius: 2px;
-khtml-border-radius: 2px;
border-radius: 2px;
}
.blueberry .pager li.active a span { background: #404040; }
Raw
contact.html
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<title>Contact page for final project</title>
<link href="css/styles.css" type = "text/css" rel= "stylesheet">
</head>
<body>
<header>
<div class="headerinner">
<a href="index.html">
<img id = "logo" src="images/logo.jpg" alt="Logo"></a>
<div class="number">
<h3>Get fit today!</h3>
<p><strong>206-492-7974</strong></p>
</div>
</div> <!-- end header inner -->
<nav>
<ul>
<li><a href ="index.html">Home</a></li>
<li><a href ="facility.html">Facility</a></li>
<li><a href ="staff.html">Staff</a></li>
<li><a href ="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<form action="formhandler.php" method="post">
<fieldset>
<legend>Contact Us</legend>
<p class="visit">Please message for rates, day passes, inquiries, or to set an appointment for a tour. We would love to hear from you!</p>
<label>Name</label>
<input placeholder="Asha Tran" type="text" name="name">
<label>Email</label>
<input placeholder="ashatran@gmail.com" type="text" name="email">
<label>Subject</label>
<input placeholder="Inquiry" type="text" name="subject">
<label>Message</label>
<!-- do not put SIZE or ROWS into this texarea element. -->
<textarea name="message"></textarea>
<!-- value is what it's goign to say on the submit button. -->
<input type="submit" value="Submit">
</fieldset>
</form>
<div class="box">
<h3>》Staffed Hours《</h3>
<h5>Monday-Thursday: 10am-1pm and 3pm-7pm</h5>
<h5>Friday: 10pm-2pm</h5>
<h5>Saturday: 9am-2pm</h5>
<h5>Sunday: not staffed</h5>
</div>
<div class="box">
<h3>》More《</h3>
<h5>4714 42nd Ave SW</h5>
<h5>Seattle, WA 98116</h5>
<h5>junctionfitness@gmail.com</h5>
<h5>206-492-7974</h5>
</div>
<footer>
<ul>
<li>Copyright 2020 &copy;</li>
<li>All Rights Reserved</li>
<li><a href ="../index.html">Web Design by Enija</a></li>
<li><a href ="https://validator.w3.org/nu/?doc=http%3A%2F%2Fcompass.northseattle.edu%2F~eward%2Fit111%2Ftemplate%2Fcontact.html">Valid</a></li>
</ul>
</footer>
</div>
</body>
</html>
Raw
facility.html
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<title>Facility page for final project</title>
<link href="css/styles.css" type = "text/css" rel= "stylesheet">
<link rel="stylesheet" href="css/blueberry.css" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://kit.fontawesome.com/9bc13e3a60.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap" rel="stylesheet">
<style>
.blueberry { max-width: 960px; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="js/jquery.blueberry.js"></script>
<script>
$(window).load(function() {
$('.blueberry').blueberry();
});
</script>
</head>
<body>
<header>
<div class="headerinner">
<a href="index.html">
<img id = "logo" src="images/logo.jpg" alt="Logo">
</a>
<div class="number">
<h3>Get fit today!</h3>
<p><strong>206-492-7974</strong></p>
</div>
</div> <!-- end header inner -->
<nav>
<ul>
<li><a href ="index.html">Home</a></li>
<li><a href ="facility.html">Facility</a></li>
<li><a href ="staff.html">Staff</a></li>
<li><a href ="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<!-- blueberry -->
<div class="blueberry">
<ul class="slides">
<li><img src="images/facility4.jpg" alt="facility"></li>
<li><img src="images/facility3.png" alt="facility"></li>
<li><img src="images/facility5.jpg" alt="facility"></li>
<li><img src="images/facility1.jpg" alt="facility"></li>
</ul>
</div>
<!-- blueberry -->
<aside class="facility">
<img class="front" src="images/front.jpg" alt="Front of Facility and owner">
</aside>
<main>
<h2>Our Facility</h2>
<p class="staff">The only independent (non-franchise), and locally owned 24/7 gym in the West Seattle Junction area. Stop in and check out everything you need to reach your goals: Personal Training, Free Weights, Cybex Cardio, Heavy Bag and much more. We work hard at making Junction Fitness the cleanest, friendliest fitness facility in the area. Step into a non-intimidating atmosphere, open to our members 24/7 with their own personal keycard. Our goal is to help you achieve RESULTS! Whether you are looking for weight loss, getting in shape or training for an event - our great personal trainers will help you meet your goals! If you are tired of the "big box" crowds, give us a try.</p>
</main>
<div class="comein">
<h5 class="one">Come on in, schedule a tour to check out our gym for yourself!</h5>
</div>
<div class="map">
<!-- embedded google maps. I used the https://www.embedgooglemap.net/ map code generator. produces errors on validator page. -->
<div class="mapouter"><div class="gmap_canvas"><iframe width="600" height="500" id="gmap_canvas" src="https://maps.google.com/maps?q=junction%20fitness%20&t=&z=15&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe><a href="https://www.embedgooglemap.net"></a></div><style>.mapouter{position:relative;text-align:right;height:500px;width:600px;}.gmap_canvas {overflow:hidden;background:none!important;height:500px;width:600px;}</style></div>
</div>
<footer>
<ul>
<li>Copyright 2020 &copy;</li>
<li>All Rights Reserved</li>
<li><a href ="../index.html">Web Design by Enija</a></li>
<li><a href ="https://validator.w3.org/nu/?doc=http%3A%2F%2Fcompass.northseattle.edu%2F%7Eeward%2Fit111%2Ftemplate%2Ffacility.html">Valid</a></li>
</ul>
</footer>
</div> <!-- end wrapper! -->
</body>
</html>
Raw
index.html
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<title>Home page for the final project</title>
<link href="css/styles.css" type = "text/css" rel= "stylesheet">
</head>
<body>
<header>
<div class="headerinner">
<a href="index.html">
<img id = "logo" src="images/logo.jpg" alt="Logo">
</a>
<div class="number">
<h3>Get fit today!</h3>
<p><strong>206-492-7974</strong></p>
</div>
</div> <!-- end header inner -->
<nav>
<ul>
<li><a href ="index.html">Home</a></li>
<li><a href ="facility.html">Facility</a></li>
<li><a href ="staff.html">Staff</a></li>
<li><a href ="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<div id="banner">
<!-- <img src="images/facility2.jpg" alt="Banner Image">
</div> end banner -->
<aside>
<div class="home3">
<img class="homeimages" src="images/gym1.jpg" alt="Man lifting weight">
<img class="homeimages" src="images/gym2.jpg" alt="Men and Women working out">
<img class="homeimages" src="images/senior.png" alt="Man training senior man in gym">
<img class="homeimages" src="images/cardio.jpg" alt="Women running on treadmill in gym">
</div>
</aside>
<main class="homemain">
<div class="home1">
<h3>24 hour Access.</h3>
<h3>No Contracts.</h3>
<h3>Personal Training.</h3>
<!-- <h2>The time is now. Jumpstart your health today!</h2> -->
</div>
<img class="homeimages2" src="images/training.png" alt="Man and woman training woman in gym">
<img class="homeimages2" src="images/group.jpg" alt="Men and Women training in gym with weight">
</main>
<footer>
<ul>
<li>Copyright 2020 &copy;</li>
<li>All Rights Reserved</li>
<li><a href ="../index.html">Web Design by Enija</a></li>
<li><a href ="https://validator.w3.org/nu/?doc=http%3A%2F%2Fcompass.northseattle.edu%2F%7Eeward%2Fit111%2Ftemplate%2Findex.html">Valid</a></li>
</ul>
</footer>
</div> <!-- end wrapper! -->
</div>
</body>
</html>
Raw
staff.html
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<title>Staff page for final project</title>
<link href="css/styles.css" type = "text/css" rel= "stylesheet">
</head>
<body>
<header>
<div class="headerinner">
<a href="index.html">
<img id = "logo" src="images/logo.jpg" alt="Logo">
</a>
<div class="number">
<h3>Get fit today!</h3>
<p><strong>206-492-7974</strong></p>
</div>
</div> <!-- end header inner -->
<nav>
<ul>
<li><a href ="index.html">Home</a></li>
<li><a href ="facility.html">Facility</a></li>
<li><a href ="staff.html">Staff</a></li>
<li><a href ="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<aside class="team">
<img src="images/staff2.jpg" alt="Group photo of staff" class= "staffphoto">
</aside>
<main>
<h2>Staff and Personal Trainers</h2>
<p class="staff">We all need a little help with exercise sometimes, whether we're just starting out or we've been at it for a long time. Still, there are people who shy away from personal training, unsure of what they'll get out of the experience. There are a number of reasons people work with peronal trainers. Some want an individualized program so they can lose weight or get in shape while others simply need to be held accountable for their workouts. No matter what level of fitness you are at, a personal trainer may be just what you need to take it to the next level of your fitness journey.</p>
</main>
<div class="staff2">
<img src="images/shay.jpg" alt="Staff, Shay" class="center">
<h3>- Shay Stuffen -</h3>
<h4>Front desk</h4>
<p>Shay is the "front line" of our gym, and is always willing to help out members and potential new members with questions or tours of our club. She is currently enrolled to become a personal trainer with NASM (National Acadamy of Sports Medicine). Shay has been in the West Seattle area for several years and attended Seattle Central (Associates of Applied Science) for Nursing.<i> She is now looking forward to acquiring her certification with NASM, and start helping our members reach their goals.</i></p>
<img src="images/ks.jpg" alt="Staff, KS" class="center">
<h3>- KS Shabazz -</h3>
<h4>Trainer</h4>
<p>KS Shabazz is an ISSA Certified Personal Trainer and a Precision Nutrition Certified Nutrition Coach.<i> His mission is to help GenX'ers, with slowing a metabolism, make fitness & nutrition fit into their lifestyle so they can look better, feel better and get out there and live life to the fullest!</i> KS is the son of a PE teacher and has been around sports all his life including playing high school football and later picking up boxing and martial arts. After 5 years of spending his days in the tech industry as a pre-sales engineer and daydreaming about working out, he decided to devote his life to helping other GenX'ers get healthy and get moving. As an older athlete himself, he understands what it's like to stay in shape while dealing with aches and pains from childhood sports injuries and an aging body. His fitness methodology is rooted in functional fitness training and he believes that with the right combination of proper nutrition, exercise, and rest, he can help you reach your fitness goals in a challenging yet safe way. Every one of his clients gets a customized exercise program that starts where you are and gradually progresses so you don't have to worry about whether or not you're "fit enough" to start. Because transforming your body begins with a good nutrition plan, he can help with that too if you need guidance.
</p>
<img src="images/mike.jpg" alt="Staff, Mike" class="center">
<h3>- Mike Van Winkle -</h3>
<h4>Trainer</h4>
<p>Mike suffered a serious injury when he was 18, leaving him in constant pain, even after 2 years of rehab. He was depressed, discouraged and searching for answers from anyone. Quickly learning that if he wanted to find out an educated answer, he would have to go to school and learn everything he could about exercise science and kinesiology. Further understanding why he was in pain and if there was a way out of the pain. The understanding of muscles, joints, and connective tissues that he gained is what helped him down a path of pain free living. Whatever your fitness goals are, it's just as important to learn that your path to get there is going to be different person to person as everyone has walked a different path. A fitness fad will not get you there. Mike feels it takes a personalized plan, based on correcting the muscle imbalances that we all have. <i>His passion is developing that plan, getting you to your fitness goals without the guessing game, teaching you how to work out properly, and hopefully adding to your quality of life.</i> Training for 10 years, graduate from Ashmead College in Exercise Science, and certified through the NSCA.</p>
<img src="images/alex.jpg" alt="Staff, Alex" class="center">
<h3>- Alex Conner - </h3>
<h4>Trainer</h4>
<p>Lex is a West Seattle Native. Certified through NCCPT (National Council for Certified Personal Trainers) A former 300lb two time All-Metro high school football player at WSHS. He lost nearly 100lbs and has kept the weight off for the past 10 years. He now is helping others along their life journeys, drawing from his past experiences of struggles and triumphs. He has a extensive background in martial arts and boxing. He is also a Seattle Marathon and New York City Marathon finisher. <i>Lex takes pride in motivating and brining the best out of his clients. If you’re looking for a trainer that is going to bring out the best in you then Lex will be the perfect fit.</i> </p>
<img src="images/donald.jpg" alt="Staff, Donald" class="center">
<h3>- Donald Ward -</h3>
<h4>Trainer & Owner</h4>
<p>Donald started his journey at this gym location as a member, later hired on as a (NASM) Personal Trainer, then Manager, and now Owner of this location as an independent gym. Being a West Seattle (Junction) neighbor for years, he knew that West Seattle was the area to open his very own gym, and help the community reach their fitness goals.<i> A strong believer in providing the best customer service to the community, and a strong supporter of locally owned businesses.</i> If you don't catch Donald training his clients, you can catch him working the front desk, mopping/cleaning, or getting a workout himself... he is for sure a "hands on" owner that will bend over backwards to keep his members happy.</p>
</div>
<footer>
<ul>
<li>Copyright 2020 &copy;</li>
<li>All Rights Reserved</li>
<li><a href ="../index.html">Web Design by Enija</a></li>
<li><a href ="https://validator.w3.org/nu/?doc=http%3A%2F%2Fcompass.northseattle.edu%2F%7Eeward%2Fit111%2Ftemplate%2Fstaff.html">Valid</a></li>
</ul>
</footer>
</div> <!-- end wrapper! -->
</body>
</html>
Raw
styles.css
* {
padding: 0px;
margin: 0px;
}
a {
color: #666;
}
body {
font-size: 100%;
font-family: verdana, helvetica, arial;
}
#wrapper {
width: 940px;
margin: 200px auto 20px auto;
}
header {
margin-bottom: 17px;
position: fixed;
top: 0;
left: 0;
width: 100%;
background: white;
z-index: 1;
}
#logo {
display: inline;
height: 80px;
}
/* navigation */
nav {
height: 50px;
background: black;
line-height: 50px;
}
nav ul {
list-style-type: none;
width: 1000px;
margin: 0 auto;
}
nav li {
float: left;
width: 25%;
text-align: center;
}
nav a {
text-decoration: none;
display: block;
color: white;
}
nav a:hover {
background: gray;
}
main {
width: 460px;
margin-bottom: 20px;
margin-top: 70px;
float: right;
display: block;
}
.container {
clear: both;
margin-bottom: 20px;
overflow: hidden;
}
aside {
background: white;
width: 300px;
float: left;
margin-bottom: 20px;
margin-top: 30px;
padding-left: 20px;
clear: both;
}
footer {
height: 50px;
clear: both;
font-size: .875em;
line-height: 50px;
margin-top: 50px;
}
footer ul {
list-style-type: none;
float: right;
}
footer li {
float: left;
margin-left: 30px;
color: #666;
}
footer a {
color: #666;
}
img {
display: block;
max-width: 100%;
}
h1, h2, h3 {
margin-bottom: 8px;
font-family: times, serif;
line-height: 1.1;
text-align: center;
}
h1 {
font-size: 2.488em;
font-weight: 200;
color: red;
padding: 30px;
margin-bottom: 30px;
}
main h2 {
font-size: 2.074em;
color: red;
line-height: 1.1;
padding-bottom: 20px;
padding-top: 30px;
}
h3 {
font-size: 1.728em;
color: red;
text-transform: uppercase;
font-weight: 200;
padding: 20px;
}
p {
font-size: 1em;
margin-bottom: 30px;
line-height: 1.4;
text-align: center;
margin-bottom: 30px;
padding-bottom: 60px;
}
.visit {
font-size: 1em;
line-height: 1.4;
text-align: center;
}
.headerinner {
width: 940px;
margin: 20px auto;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
border: 3px solid black;
margin-bottom: 30px;
height: 100%;
}
.staff {
font-size: 1em;
margin-bottom: 30px;
line-height: 1.4;
text-align: center;
margin-bottom: 70px;
}
.staffphoto {
margin-top: 20px;
max-width: 400px;
}
/* form styling!!! */
form {
/* this makes it so if we want to place the form in the aside, it will fit! */
max-width: 580px;
color: #534b62;
margin: 20px auto;
}
fieldset {
padding: 10px;
}
label {
display:block;
margin-bottom: 10px;
}
input {
width: 100%;
height: 25px;
margin-bottom: 10px;
}
input[type=radio]{
width: auto;
height: auto;
margin-right: 5px;
}
input[type=checkbox]{
width: auto;
height: auto;
margin-right: 5px;
}
input[type=submit] {
width: auto;
/* width will always fit the words with using auto. */
}
textarea {
width: 100%;
height: 60px;
margin-bottom: 10px;
}
form li {
list-style-type: none;
/* this gets rid of the bullet point. we dont want it to show. */
}
form ul {
margin-left: 10px;
margin-bottom: 10px;
}
select {
margin-bottom: 10px;
}
legend {
font-size: 30px;
font-style: italic;
padding: 10px;
color: black;
text-align: center;
}
.front {
margin: 20px auto;
}
.facility {
float: left;
padding: 10px;
clear: both;
margin-top: 70px;
width: 400px;
margin-bottom: 100px;
}
.one {
text-align: center;
margin: 20px auto;
}
h3 {
margin: 20px auto;
text-decoration: none;
margin-bottom: 0px;
padding: 7px;
}
h4 {
text-align: center;
margin-bottom: 20px;
}
.team {
background: white;
width: 300px;
float: left;
margin-bottom: 20px;
padding-left: 20px;
clear: both;
margin-top: 100px;
margin-bottom: 100px;
}
.staff2 {
clear:both;
}
.comein {
text-align: center;
clear: both;
}
h5 {
margin: 40px;
}
.map {
margin: 20px auto;
padding-left: 170px;
}
.box {
background-color: gray;
padding: 20px;
border-radius: 20px;
margin-bottom: 10px;
}
.box h1, h2, h4 {
color: white;
}
.box h3 {
color: white;
padding: 10px;
}
h5 {
text-align: center;
}
.number {
float: right;
height: 20px;
}
pre {
text-align: center;
}
i {
font-weight: 20px;
color: red;
}
.home1 {
background-color: black;
float: right;
height: 300px;
width: 460px;
margin-bottom: 10px;
padding-top: 90px;
display: inline;
}
.thxmessage {
margin: 20px auto;
color: blue;
padding: 100px;
}
.home3 {
float: left;
width: 450px;
height: 300px;
padding-top: 0px;
margin-top: 0px;
}
.homeimages {
display: block;
max-width: 100%;
padding-bottom: 10px;
padding-left: 0px;
margin-left: 0px;
}
.homeimages2 {
display: block;
width: 200%;
padding-bottom: 10px;
padding-left: 0px;
margin-left: 0px;
float: right;
}
.homemain {
width: 460px;
margin-bottom: 20px;
margin-top: 30px;
float: right;
display: block;
}
.thxmessage h4 {
color: black;
}
.staff2 h4 {
color: black;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment