Stormwind City

Looking for a new vacation destination? Look no further than Stormwind City. Learn some of the city’s history, discover sites and attractions to visit and then book yourself a stay at one of the many inns throughout the city limits. There’s always something to see or do in this bustling city!

HTML 5 icon CSS 3 icon JavaScript icon jQuery icon
Stormwind City Full Page Layout

 The Planning

For our city project we were asked to choose an existing or fictional city and create either a two or more page site or a single scrolling website with multiple sections. This individual project required that we show our knowledge in creating an HTML5 form with text, textarea, radio buttons, checkboxes and an option/select list. The form also had to direct the user to a thank you page when submitted. After seeing some previous class examples I decided to do Stormwind City from World of Warcraft. I used several techniques we learned about in class like parallax scrolling of the background images, using a jQuery plugin for animation on scroll, and a sticky nav! During this project I also learned how to make the navigation items on a single scrolling page smooth scroll to their location in the content. This project is unresponsive as we hadn’t learned about media queries yet.

Stormwind City Wireframes

 The Design

For the design portion of this project I chose the colors of the Alliance Faction to stick with the Stormwind City theme. I chose a sticky nav again as it suited the long scrolling page and decided to use the parallax background that we had learned in class. I also experimented with some smooth scroll and animate on scroll features. For my form I created it as if the user were booking a stay at one of the inns throughout the city and upon completion it leads to a very simple thank you page. All images were taken by myself in game with the exception of the header logo, the Alliance coat of arms and the profession icons which are credited in the footer of the page.

 The Code

Similarly to the JavaScript Tutorials project, this was added to Github after the final project was done as we hadn’t learned about it yet. For this project I learned how to minify my code using an online minifier and how to sort my website into a development and distribution format as well as continue to learn the features and functionality of Github repositories.

Stormwind City Github Repository
Stormwind City Form

<div class="form">

<form action="thank-you.html" method="get" name="booking-form" class="booking-form">
	<div class="form-col-01">		
		<label for="fname">Enter Name:</label>
			<input type="text" id="fname" name="name-first" placeholder="First name">
			<input type="text" id="lname" class="lnameinput" name="name-last" placeholder="Last name">

		<label for="email">Email:</label>
			<input type="text" id="email" name="email" placeholder="your_name@example.com">

		<label for="location">Location:</label>
			<select id="location" name="location" class="field select medium" tabindex="1" > 
				<option value="Select a location" selected>Select A Location</option>
				<option value="Trade District Inn">Trade District Inn</option>
				<option value="Mage Quarter Inn">Mage Quarter Inn</option>
				<option value="Old Town Inn">Old Town Inn</option>
				<option value="Dwarven Inn">Dwarven Inn</option>
			</select>
	</div>

	<div class="form-col-02">
		<label for="guests" class="col-02-label">How many guests?</label>
		<br>
			<input type="radio" name="guest" id="one-guest" value="one" checked>
		<label for="one">1</label>
			<input type="radio" name="guest" id="two-guest" value="two">
		<label for="two">2</label>
			<input type="radio" name="guest" id="three-guest" value="three">
		<label for="three">3</label>
			<input type="radio" name="guest" id="four-guest" value="four">
		<label for="four">4</label>
			<input type="radio" name="guest" id="five-guest" value="five">
		<label for="five">5+</label>
		<br>
		<br>
		<label for="options" class="col-02-label">Options:</label>
		<br>
			<input type="checkbox" id="smoking" name="options" value="smoking">
		<label for="smoking">Smoking</label>
			<input type="checkbox" id="non-smoking" name="options" value="non-smoking">
		<label for="non-smoking">Non-smoking</label>
		<br>
			<input type="checkbox" id="view" name="options" value="view">
		<label for="view">Room with a view</label>
			<input type="checkbox" id="mount" name="options" value="mount">
		<label for="mount">Stable for Mount</label>
	</div>

	<div class="form-col-03">
		<label for="special">Special Requests:</label>
			<textarea></textarea>
	</div>

	<input name="submit-form" class="submit-btn" type="submit" id="submit-form" value="Submit">

</form>
</div>
		
Stormwind City Sticky Nav Logo Change

<header> 
  <nav class="normal-nav">
    <img class="nav-image" src="images/world-of-warcraft-logo.png" alt="World of Warcraft Logo">	
    <img class="sticky-nav-image" src="images/world-of-warcraft-icon.png" alt="World of Warcraft Icon">
      <ul>
        <li><a href="#link-about">About Stormwind</a></li>
        <li><a href="#link-things">Things to do</a></li>
        <li><a href="#link-sights">Sights to see</a></li>
        <li><a href="#link-streets">Streets and Transportation</a>
        <li><a href="#link-where">Where to stay</a></li>
      </ul>
  </nav>
</header>
    
<style>
/* NAV STYLES */

.normal-nav {
    position: relative;
    float: left;
    display: block;
    background-color: #144587;
    border: 3px #C69F06 solid;
    margin: 0px 80px;
    width: 90%;
    height: 70px;
    z-index: 10;
    top: 52px;
}

.normal-nav a {
    position: relative;
    text-decoration: none;
    float: left;
    width: calc(100% / 5);
    font-size: 20px;
    color: white;
    line-height: 64px;
    top: 18px;
    text-align: center;
    list-style-type: none;
    font-family: 'lifecraft', serif;
    letter-spacing: 1px;
    text-shadow: 2px 2px black;
}

.normal-nav ul {
    list-style: none;
    float: right;
    width: 80%;
}

.normal-nav a:hover {
    background-color: #2E66B1;
}

.nav-image {
    position: absolute;
    top: -33px;
    width: 300px;
    height: 140px;
}

.sticky {
	position: fixed;
	float: left;
	display: block;
	background-color: #144587;
	border: 3px #C69F06 solid;
	width: 100%;
	height: 46px;
	z-index: 9000;
	top: 0;
	left: 0;
}

.sticky a {
	position: relative;
	text-decoration: none;
	float: left;
    width: calc(100% / 5);
    font-size: 16px;
	color: white;
	line-height: 40px;
	text-align: center;
	list-style-type: none;
	font-family: 'lifecraft', serif;
	letter-spacing: 2px;
	text-shadow: 2px 2px black;
}

.sticky ul {
    list-style: none;
    float: right;
    width: 80%;
}

.sticky a:hover {
	background-color: #2E66B1;
}

.sticky-nav-image {
	display: none;
    width: 50px;
    height: 50px;
    position: relative;
    left: 10px;
    bottom: 5px;
}

.sticky .nav-image {
	display: none;
}

.sticky .sticky-nav-image {
	display: block;
}

.normal-nav li {
    margin-top: -18px;
}

.sticky li {
	margin-top: -50px;
}
</style>