Untitled

Your code looks quite good actually.
There are a few things you can and should improve.

**General points:**

You are using inconsistent quotes.<br>
You have this line on your `<head>`:

    <link href='http://fonts.googleapis.com/css?family=Ruda' rel='stylesheet' type='text/css'>

But on the rest of your code, you use `""` instead.<br>
The quotes itself make no difference in functionality, but we should keep consistency.

All your paths are relative.<br>
This doesn't pose any problem now, but it will be a nightmare if you use some server-side scripting languages and make internationalization of your code.

<hr>

Your indentation is a little off.<br>
This makes your code harder to read and maintain.

<hr>

You are using this, to set the charset:

	<meta charset="utf-8">

While this is fine, some older browsers don't support it.<br>
You should add this like too:

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<hr>

In terms of SEO, your code doesn't have a single header.<br>
Using `<h1>`, `<h2>`, `<h3>` and so on will help greatly.

<hr>

Some classes are completely useless and I have removed them.<br>
The css selectors were updated.

<hr>

And now, lets tackle file by file.

File home.html
==============

The first thing that popped to me what this line:

    <content class="content">

This tag doesn't exist.<br>
It was proposed but it never took off.<br>
The only source about this is here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/content <br>
But that is incomplete.<br>
Use the `<section>` tag instead, like this:

	<section class="content">

<hr>

Inside the `<content>` tag, you are using `<p>` with `<br>`.<br>
This means that something isn't right with your CSS.<br>
The `<p>` tag is a block element, therefore is makes a new line automatically.<br>
If you require the use of `<br>`s, join all the `<p>`s in only one, like this:

	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet felis nulla. Aliquam at ligula porttitor, eleifend quam at, congue urna. Duis vehicula aliquam lectus, sed pharetra orci aliquet et. Pellentesque felis sem, auctor a erat eu, dignissim gravida enim. Ut eget est justo. In ac pharetra ipsum. In a metus feugiat, aliquam metus in, lobortis lectus. Integer non dolor felis. Suspendisse condimentum a ex faucibus tempus. Curabitur blandit mi aliquam, aliquam libero et, hendrerit tortor. Vivamus non tortor ultrices, auctor arcu ut, luctus risus. Ut a elementum leo, quis porta augue.

		<br>

		Suspendisse eget enim arcu. In arcu dui, faucibus eget vehicula eget, hendrerit ut urna. Nunc venenatis vestibulum luctus. Etiam magna purus, posuere rutrum diam sed, porttitor condimentum velit. Proin dapibus ligula eget tellus efficitur, a maximus lectus tristique. Duis nunc risus, vehicula at dignissim sed, vehicula ut libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sed odio lobortis, viverra ipsum ut, tincidunt enim. Fusce est nulla, viverra sed blandit eget, ullamcorper sed ipsum. Donec laoreet euismod tortor, vel dapibus turpis semper a. Duis et lacus nec odio volutpat eleifend id ac mauris. Duis non orci sed urna congue rutrum. Pellentesque id dapibus eros, ut cursus elit. Cras at tellus id nulla posuere tempor. Sed eu pulvinar nibh. Sed eleifend pellentesque imperdiet.

		<br>

		Nunc et orci mauris. Nulla at odio lorem. Donec condimentum commodo elit vitae aliquam. Integer eget sagittis elit. Nulla facilisi. Aenean vel vehicula felis. Integer nec sapien et dui semper sagittis. Vivamus eu ex ut urna mattis iaculis. Maecenas auctor accumsan iaculis. Donec in arcu nisl.
	</p>

<hr>

Another thing you can change is to wrap the content of the `<content>` tag in an `<article>`.<br>
This allows you to have multiple `<article>`s.<br>

The final look of this part of the code, with SEO changes:

	<section class="content">
		<h2>Welcome to our website</h2> <!-- SEO change, text example -->
		<article>
			<h3>Welcome to our website</h3> <!-- SEO change, text example -->
			<img src="images/masthead.jpg" alt="Masthead">
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet felis nulla. Aliquam at ligula porttitor, eleifend quam at, congue urna. Duis vehicula aliquam lectus, sed pharetra orci aliquet et. Pellentesque felis sem, auctor a erat eu, dignissim gravida enim. Ut eget est justo. In ac pharetra ipsum. In a metus feugiat, aliquam metus in, lobortis lectus. Integer non dolor felis. Suspendisse condimentum a ex faucibus tempus. Curabitur blandit mi aliquam, aliquam libero et, hendrerit tortor. Vivamus non tortor ultrices, auctor arcu ut, luctus risus. Ut a elementum leo, quis porta augue.

				<br>

				Suspendisse eget enim arcu. In arcu dui, faucibus eget vehicula eget, hendrerit ut urna. Nunc venenatis vestibulum luctus. Etiam magna purus, posuere rutrum diam sed, porttitor condimentum velit. Proin dapibus ligula eget tellus efficitur, a maximus lectus tristique. Duis nunc risus, vehicula at dignissim sed, vehicula ut libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sed odio lobortis, viverra ipsum ut, tincidunt enim. Fusce est nulla, viverra sed blandit eget, ullamcorper sed ipsum. Donec laoreet euismod tortor, vel dapibus turpis semper a. Duis et lacus nec odio volutpat eleifend id ac mauris. Duis non orci sed urna congue rutrum. Pellentesque id dapibus eros, ut cursus elit. Cras at tellus id nulla posuere tempor. Sed eu pulvinar nibh. Sed eleifend pellentesque imperdiet.

				<br>

				Nunc et orci mauris. Nulla at odio lorem. Donec condimentum commodo elit vitae aliquam. Integer eget sagittis elit. Nulla facilisi. Aenean vel vehicula felis. Integer nec sapien et dui semper sagittis. Vivamus eu ex ut urna mattis iaculis. Maecenas auctor accumsan iaculis. Donec in arcu nisl.
			</p>
		</article>
	</section>

File contact.html:
==================

You have those lines of code:

	<div>
		<iframe id="contactform" src="https://docs.google.com/forms/d/1bUTpWyMaouMEQH68trQlyyx5I8EU5YQXrGvj10NNdrw/viewform?embedded=true" width="690" height="1050" frameborder="0" marginheight="0" marginwidth="0">Loading...
		</iframe>
	</div>

First, this `<div>` tag seems to have the same function as the `<content>` on the file `home.html`.<br>
This should be a section.<br>

<hr>

Another issue here is that your `<iframe>` has lots of invalid properties.<br>
Those properties **must** be removed: they generate invalid html5 code.

<hr>

This isn't an issue but your `<iframe>` has `Loading...` as it's content.<br>
This will be shown when a browser doesn't support `<iframe>`s.<br>
It is highly misleading, making the used think that something will show when it won't.<br>

<hr>

Applying all the changes:

	<section class="content">
		<h2>Contact us</h2>
		<iframe id="contactform" src="https://docs.google.com/forms/d/1bUTpWyMaouMEQH68trQlyyx5I8EU5YQXrGvj10NNdrw/viewform?embedded=true">
			<div class="error">
				<h3>Error while loading the form</h3>
				<p>
					Your browser doesn't seem to support iframes.<br>
					To contact us, you can <a href="https://docs.google.com/forms/d/1bUTpWyMaouMEQH68trQlyyx5I8EU5YQXrGvj10NNdrw/viewform?embedded=true" target="_blank">view our form on a new window.</a>
				</p>
			</div>
		</iframe>
	</section>

File style.css
==============

There aren't any issues with your css.

Obviously there is room for improvements, so, I will post them here.<br>
I won't post the changes I did on the selectors.

<hr>

Your body grows with the size of the screen.<br>
Set a maximum width on it.<br>
I saw that setting it to 640px actually looked quite well.

<hr>

Your styles that you had defined on the `<iframe>` were moved and shrinked into this:

	#contactform {
		display:block;
		width:100%; //you must set a width for iframes
		height:1010px; //this works well
		border:0px; //removes the ugly border
	}

But this raises a problem: The page grows 140px when resized to the absolutely possible minimum.<br>
You can either set a bigger height, as you had, or you can use some `@media` queries.

To your menu, I did this:

	header li {
		display: inline-block;
		font-size: 1.5em;
		font-weight: 700;
		letter-spacing: 0.5px;
		margin: 0px 25px;
		min-width: 70px;
		text-align: center;
		width: 13%;
	}
	header li a{
		display: inline-block;
		width: 100%;
	}

I added, the `display: inline-block;` and the `width: 100%;` to each item in the menu.<br>
It looks great (in my opinion) to a minimum width of 80px.

Another thing was that I changed your `font-size` from 150% to 1.5em.

The final code:
===============

**style.css:**

	body {
		font-family: 'Ruda', sans-serif;
		font-size: 87.5%;
		background-color:#efefef;
		margin: 0 auto;
		width: 100%;
		max-width:640px;
		clear:both;
		line-height:1.5;
	}
	/*
	======= MAIN HEADER =======
	*/
	header {
		margin:5px auto 5px auto;
	}
	header img {
		width: 15%;
		display: inline;
		margin: 0 auto 0 auto;
		padding: 5px 0 5px 0;
	}
	header li {
		display: inline-block;
		font-size: 1.5em;
		font-weight: 700;
		letter-spacing: 0.5px;
		margin: 0px 25px;
		min-width: 70px;
		text-align: center;
		width: 13%;
	}
	header li a{
		display: inline-block;
		width: 100%;
	}
	header nav {
		background-color: #00457C;
	}
	header ul {
		text-align: center;
		padding: 10px;
	}
	header h1 {
		color: #193365;
		display: inline;
		font-size: 300%;
		padding: 0px 0px 0px 50px;
	}
	/*
	======= SOCIAL BAR =======
	*/
	#socialbar {
		text-align: right;
	}
	#socialbar h2 {
		display: inline;
		padding-right: 5px;
	}
	#socialbar h1 {
		display: block;
		font-size: 2.4em;
	}
	#socialbar img {
		width: 4%;
		padding: 0px 5px 0px 5px;
	}
	#socialbar a {
		display:inline;
	}
	#logo {
		float:left;
		width:12%;
	}

	/*
	======= MAIN CONTENT =======
	*/

	.content p {
		width: 90%;
		margin: 0 auto;
		padding: 10px 0px 10px 0px;
	}
	.content img {
		width:75%;
		display:block;
		margin: 0 auto;
		padding: 5px 0 5px 0;
	}
	#contactform {
		display:block;
		width:100%;
		height:1050px;
		border:0px;
	}
	a {
		text-decoration: none;
		text-transform:uppercase;
		color: white;
	}
	a:hover {
		text-decoration: underline;
	}
	/*
	======= MAIN FOOTER =======
	*/
	footer {
		background-color: #00457C;
		font-size: 150%;
		margin: 0px auto 0px auto;
		color:white;
		text-align: right;
		width:100%;
	}
	footer p {
		padding: 10px;
	}

**contact.html**

	<!DOCTYPE html>
	<html lang="en">
		<head>
			<title>Kiwanis of Kennett Square</title>
			<meta charset="utf-8">
			<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
			<link href="css/styles.css" type="text/css" rel="stylesheet">
			<link href="http://fonts.googleapis.com/css?family=Ruda" rel="stylesheet" type="text/css">
		</head>

		<body>
			<div id="page">
				<header>
					<div id="socialbar">
						<img id="logo" src="images/kiwanis_logo_transparent.png" alt="Kiwanis Logo">
						<h1 align="right">Kiwanis of Kennett Square</h1>
						<h2>Find us on: </h2>
						<a href="https://www.facebook.com/kiwanisKSQ" target="_blank"><img id="socialLogo" src="images/facebook.png" alt="Facebook"></a>
						<a href="http://www.twitter.com" target="_blank"><img id="socialLogo" src="images/twitter.png" alt="Twitter"></a>
						<a href="http://www.instagram.com" target="_blank"><img id="socialLogo" src="images/instagram.png" alt="Instagram"></a>
					</div>
					<nav>
						<ul>
							<li><a href="index.html">Home</a></li>
							<li><a href="about.html">About</a></li>
							<li><a href="photos.html">Photos</a></li>
							<li><a href="contact.html">Contact</a></li>
						</ul>
					</nav>
				</header>

				<section class="content">
					<h2>Contact us</h2>
					<iframe id="contactform" src="https://docs.google.com/forms/d/1bUTpWyMaouMEQH68trQlyyx5I8EU5YQXrGvj10NNdrw/viewform?embedded=true">
						<div class="error">
							<h3>Error while loading the form</h3>
							<p>
								Your browser doesn't seem to support iframes.<br>
								To contact us, you can <a href="https://docs.google.com/forms/d/1bUTpWyMaouMEQH68trQlyyx5I8EU5YQXrGvj10NNdrw/viewform?embedded=true" target="_blank">view our form on a new window.</a>
							</p>
						</div>
					</iframe>
				</section>

			<footer>
				<p>Email us at: <a href="mailto:kiwanisksq@gmail.com" target="_top">KIWANISKSQ@GMAIL.COM</a></p>
			</footer>

			</div>
		</body>
	</html>

**home.html:**

<!DOCTYPE html>
	<html lang="en">
		<head>
			<title>Kiwanis of Kennett Square</title>
			<meta charset="utf-8">
			<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
			<link href="/css/styles.css" type="text/css" rel="stylesheet">
			<link href="http://fonts.googleapis.com/css?family=Ruda" rel="stylesheet" type="text/css">
		</head>

		<body>
			<div id="page">
				<header>
					<div id="socialbar">
						<img id="logo" src="images/kiwanis_logo_transparent.png" alt="Kiwanis Logo">
						<h1 align="right">Kiwanis of Kennett Square</h1>
						<h2>Find us on: </h2>
						<a href="https://www.facebook.com/kiwanisKSQ" target="_blank"><img id="socialLogo" src="images/facebook.png" alt="Facebook"></a>
						<a href="http://www.twitter.com" target="_blank"><img id="socialLogo" src="images/twitter.png" alt="Twitter"></a>
						<a href="http://www.instagram.com" target="_blank"><img id="socialLogo" src="images/instagram.png" alt="Instagram"></a>
					</div>
					<nav>
						<ul>
							<li><a href="index.html">Home</a></li>
							<li><a href="about.html">About</a></li>
							<li><a href="photos.html">Photos</a></li>
							<li><a href="contact.html">Contact</a></li>
						</ul>
					</nav>
				</header>

				<section class="content">
					<h2>Welcome to our website</h2> <!-- SEO change, text example -->
					<article>
						<h3>Welcome to our website</h3> <!-- SEO change, text example -->
						<img src="images/masthead.jpg" alt="Masthead">
						<p>
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet felis nulla. Aliquam at ligula porttitor, eleifend quam at, congue urna. Duis vehicula aliquam lectus, sed pharetra orci aliquet et. Pellentesque felis sem, auctor a erat eu, dignissim gravida enim. Ut eget est justo. In ac pharetra ipsum. In a metus feugiat, aliquam metus in, lobortis lectus. Integer non dolor felis. Suspendisse condimentum a ex faucibus tempus. Curabitur blandit mi aliquam, aliquam libero et, hendrerit tortor. Vivamus non tortor ultrices, auctor arcu ut, luctus risus. Ut a elementum leo, quis porta augue.

							<br>

							Suspendisse eget enim arcu. In arcu dui, faucibus eget vehicula eget, hendrerit ut urna. Nunc venenatis vestibulum luctus. Etiam magna purus, posuere rutrum diam sed, porttitor condimentum velit. Proin dapibus ligula eget tellus efficitur, a maximus lectus tristique. Duis nunc risus, vehicula at dignissim sed, vehicula ut libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sed odio lobortis, viverra ipsum ut, tincidunt enim. Fusce est nulla, viverra sed blandit eget, ullamcorper sed ipsum. Donec laoreet euismod tortor, vel dapibus turpis semper a. Duis et lacus nec odio volutpat eleifend id ac mauris. Duis non orci sed urna congue rutrum. Pellentesque id dapibus eros, ut cursus elit. Cras at tellus id nulla posuere tempor. Sed eu pulvinar nibh. Sed eleifend pellentesque imperdiet.

							<br>

							Nunc et orci mauris. Nulla at odio lorem. Donec condimentum commodo elit vitae aliquam. Integer eget sagittis elit. Nulla facilisi. Aenean vel vehicula felis. Integer nec sapien et dui semper sagittis. Vivamus eu ex ut urna mattis iaculis. Maecenas auctor accumsan iaculis. Donec in arcu nisl.
						</p>
					</article>
				</section>

			<footer>
				<p>Email us at: <a href="mailto:kiwanisksq@gmail.com" target="_top">KIWANISKSQ@GMAIL.COM</a></p>
			</footer>

			</div>
		</body>
	</html>


**Notice:** I have kept the path **relative**.<br>
This was on purpose to avoid troubles when you test the code.<br>
**Before testing my cope, copy the whole folder with the files and use that copy, not the original folder!**

Side notes:
===========

You could reduce the code by using a server-side script language, like php.<br>
This would make your website much more flexible and re-usable.

You could also use a very basic database, using sqlite ( http://www.sqlite.org/ ) or even a full mysql database.<br>
This would allow you to create a basic CMS and use it to manage the website.<br>
Use this as an exercise to create your re-usable framework.