How To Make A Website From Scratch - Drew Ryan

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Massage by Tia</title>
	<meta name= "viewport" content="width-device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="drew.css">
<style></style>
</head>
<body>
	<div id="wrapper">
		<div id="callout">
			<p>Call us at <b>215-555-5555</b></p>
		</div>
		<header>
			<a href="#"><img src="http://www.w3newbie.com/wp-content/uploads/massagelogo.png" alt="Massage By Tia" title="Massage by Tia"/></a>
		</header>
		<nav>
			<ul>
				<li class='active'><a href="#">Home</a></li>
				<li><a href="#">Facility</a></li>
				<li><a href="#">Services</a></li>
				<li><a href="#">Pricing</a></li>
				<li><a href="#">Hours</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
			<div class="clearfix"></div>
		</nav>
		<div class="banner">
			<img src="http://www.w3newbie.com/wp-content/uploads/massagebanner.png"/>
		</div>
		<center><img src="http://www.w3newbie.com/wp-content/uploads/three_sayings.png"/></center>
		<section class="left-col">
			<p style="text-indent: 50px;">Our goal at Massage by Tia is to provide a quiet
			retreat in Philadelphia where you can think you've traveled
			to a far-off place surrounded by lush and and tropical
			vegetation. Our spacious massage room has its own
			distinct feel with special care given to providing a unique
			sessions to meet the needs of the individual client. Our
			tables are heated, provide soft padding for comfort, and
			we use the best linens available in the business today.</p>
			<p style="text-indent: 50px;">Our therapists maintain their professional knowledge
			and Pennsylvania State License by attending local and
			regional certified and advanced training classes in the art
			of massage.</p>
		</section>
		<aside class="sidebar">
			<div class="therapy">
				<img src="http://www.w3newbie.com/wp-content/uploads/therapist.jpg"/>
			</div>
		</aside>
		<div class="clearfix"></div>
		<div class ="section">
			<h3>Private Massage Area</h3>
			<img src="http://www.w3newbie.com/wp-content/uploads/private.png"/>
			<p>Our private rooms are available to all guests upon booking your relaxation session
			in advance. Our masseuses will cater to every need you and your guest have in our
			private rooms. Come here to relax and renew your mind, body and spirit with the serenity
			of being free of all distractions.</p>
		</div>
		<div class ="section">
			<h3>Sauna & Steam Room</h3>
			<img src="http://www.w3newbie.com/wp-content/uploads/sauna-steam.png"/>
			<p>Our state of the art sauna and steam room are offered free to our membered clients
			and at affordable rates to those who want to open up their pore with a healthy seat
			before or after our massage services put you in an even more relaxing state.</p>
		</div>
		<div class ="section">
			<h3>Resort Retreat</h3>
			<img src="http://www.w3newbie.com/wp-content/uploads/retreat.png"/>
			<p>For eight weeks out of the year, Tia and a select few of her top masseuses travel to
			Tahiti to host and offer a resort style relaxation getaway for clients who are looking
			for the absolute most astonishing vacation they can experience. Call us for details on our
			get aways.</p>
		</div>
		<center><img src="http://www.w3newbie.com/wp-content/uploads/ease.png"/></center>
		<footer>
			<div class="section">
				<p>Massage by Tia</p>
				<p><b>215-555-5555</b><br>
				1700 Chestnut Street<br>
				Philadelphia, PA 19100<br>
				tia@massage.com</p>
			</div>

			<div class="section">
				<p> Connect With Us!</p>
				<ul>
					<li><a href="#"><img src="http://www.w3newbie.com/wp-content/uploads/facebook1.png"/></li>
					<li><a href="#"><img src="http://www.w3newbie.com/wp-content/uploads/googleplus.png"/></li>
					<li><a href="#"><img src="http://www.w3newbie.com/wp-content/uploads/twitter1.png"/></li>
					<li><a href="#"><img src="http://www.w3newbie.com/wp-content/uploads/youtube1.png"/></li>
				</ul>
			</div>

			<div class="section">
				<img src="http://www.w3newbie.com/wp-content/uploads/plant.png"/>
			</div>
		</footer>
	</div>
	<p style ="text-align: center; padding: 0px; text-decoration: none">&#169;Copyright - Massage by Tia, 2014.</p>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------------
body
{
	background: #F1F0D1;
	font-family: Verdana, Tahoma, Arial, sans-serif;
	font-size: 18px;
	overflow: auto
}
h1, h2, h3
{
	text-align: center;
	padding-left: 5%;
	color: #878E63;
}
p
{
	padding: 2%;
	color: #878E63;
	text-decoration: none;
}
img
{
	text-align: center;
	<!-- Makes sure that the images don't overflow outside of the wrapper -->
	max-width: 100%;
	height: auto;
	width: auto;
}
#wrapper
{
	margin: 0 auto;
	max-width: 1020px;
	width: 98%;
	background: #FEFBE8;
	border: 1px solid #878363;
	border-radius: 2px;
	box-shadow: 0 0 10px 0px rgba(12, 3, 25, 0.8);
}
#callout
{
	width: 100%;
	height: auto;
	background: #878E63;
	overflow: hidden;
}
#callout p
{
	text-align: right;
	font-size: 13px;
	padding: 0.1% 5% 0 0;
	color: #F1F0D1;
}

#callout p a
{
	color: #F1F0D1;
	text-decoration: none;
}

header
{
	text-align: center;
	min-height: 125px;
	padding: 5px;
	width: 96%;
}

nav ul
{
	<!-- Removes the bullets from the navigation -->
	list-style: none;
	margin: 0;
	padding-left: 50px;
}

nav ul li
{
	list-style: none;
	float: left;
	border: 1px solid #878E63;
	width: 15%;
}

nav ul li a
{
	background: #F1F0D1;
	display: block;
	padding: 5% 12%;
	font-weight: bold;
	font-size: 18px;
	color: #878E63;
	text-decoration: none;
	text-align: center;
}

nav ul li a:hover, nav ul li.active a
{
	background-color: #878E63;
	color: #F1F0D1;
}

.banner img
{
	width: 100%;
	border-top: 1px solid #878E63;
	border-bottom: 1px solid #878E63;
}

.clearfix
{
	clear: both;
}

.left-col
{
	width: 55%;
	float: left;
	margin: -2% 1% 1% 1%;
}

.sidebar
{
	width: 40%;
	float: right;
	margin: 1%;
	text-align: center;
}

.therapy
{
	float: left;
	margin: 0 auto;
	width: 100%;
	height: auto;
	padding: 1%;
}

.section
{
	width: 29%;
	float: left;
	margin: 2% 2%;
	text-align: center;
}

footer
{
	background: #878E63;
	width: 100%;
	overflow: hidden;
}

footer p, footer h3
{
	color: #F1F0D1;
}

footer p a
{
	color: #F1F0D1;
	<!-- takes away the blue and underline away from links -->
	text-decoration: none;
}

ul
{
	list-style-type: none;
	margin: 0;
	padding: 0;
}

li
{
	display: inline;
}

ul li img
{
	height: 50px;
}

/*-----------MEDIA-----------*/
<!-- This is where you put the screen adjustment details -->
@media screen and (max-width: 478px)
{
	body
	{
		font-size: 13px;
	}
}

@media screen and (max-width: 740px)
{
	nav
	{
		width: 100;
		margin-bottom: 10px;
	}

	nav ul
	{
		list-style: none;
		margin: 0 auto;
		padding-left: 0;
	}

	nav ul li
	{
		text-align: center;
		margin-left: 0 auto;
		width: 100%;
		border-top: 1px solid #878E63;
		border-right: 0px solid #878E63;
		border-bottom: 1px solid #878E63;
		border-left: 0px solid #878E63;
	}

	nav ul li a
	{
		padding: 8px 0;
		font-size 16px;
	}

	.left-col
	{
		width: 100%;
	}

	.sidebar
	{
		width: 100%;
	}

	.section
	{
		float: left;
		width: 100%;
		margin: 0;
	}
	}