willshepp28/Index.html

## Index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Puppies!</title>

        <link rel="stylesheet" href="style.css">
    </head>
    <body>

        <div>
            <header id="site_header">

                <a id="logo"><img src="img/logo.png" alt="Puppy Logo"></a>

                <nav class="main_navigation">
                    <a href="#">Puppies</a>
                    <a href="#">Dog Breeds</a>
                    <a href="#">So Cute</a>
                </nav>
            </header>

            <!-- Finished -->

            <div id="page_content">

                <section>
                    <h2>Puppies are pretty much the best...</h2>

                    <p>Humans have had a strong affinity for dogs of all sorts for <a href="#">tens of thousands of years</a>. We have an undeniable and unique social connection to them. <strong>Our love of puppies</strong> is a direct extension of that affinity.</p>

                    <h3>So, why do we love puppies?</h3>

                    <ul>
                        <li>Large eyes and head</li>
                        <li>Soft fluffy bodies</li>
                        <li>Adorable antics</li>
                    </ul>
                </section>

                <section>
                    <h2>Table</h2>

                    <p>Below, you'll find some information about a few of the cutest puppies ever.</p>

                    <table>
                        <thead>
                            <tr>
                                <td>Breed</td>
                                <td>Image</td>
                                <td>Weight</td>
                                <td>Origin</td>
                                <td>Markings</td>
                            </tr>
                        </thead>
                        <tbody >
                            <tr class="border-bottom">
                                <td>Chow Chow</td>
                                <td><img src="img/puppy__12.jpg" alt=""></td>
                                <td>45-70lb</td>
                                <td>China</td>
                                <td>Think and course coat; red, brown and black</td>
                            </tr>
                            <tr class="border-bottom">
                                <td>Doberman Pinscher</td>
                                <td><img src="img/puppy__13.jpg" alt=""></td>
                                <td>32-45lb</td>
                                <td>Germany</td>
                                <td>Short coat; black, red, brown, blue</td>
                            </tr>
                            <tr class="border-bottom">
                                <td>Golden Retriever</td>
                                <td><img src="img/puppy__11.jpg" alt=""></td>
                                <td>55-75lb</td>
                                <td>Scotland</td>
                                <td>Straight or wavy fur; cream and gold</td>
                            </tr>
                        </tbody>
                    </table>

                    <br><br>

                </section>

                <section>
                    <h2>Puppy love!</h2>

                    <p>Tell us why you love puppies!</p>

                    <form action="#">

                        <div class="name">
                            <label for="first_name">First Name:</label>
                            <input type="text" name="first_name" id="first_name">
                            <label for="last_name">Last Name:</label>
                            <input type="text" name="last_name" id="last_name">
                        </div>
                        <div class="city_container">
                            <label for="city">Favorite Breed:</label>
                            <select name="city" id="city">
                                <option value="south_carolina">Chow Chow</option>
                                <option value="california">Doberman Pinscher</option>
                                <option value="new_york">Golden Retriever</option>
                            </select>
                        </div>
                        <div>
                            <label for="bio">Why do you Love Puppies?</label>
                            <br>
                            <textarea name="bio" id="bio" cols="50" rows="10">Puppies are the best because...</textarea>
                        </div>

                        <div class="submit_container">
                            <input type="submit" id="submit_button" value="Submit!">
                        </div>
                    </form>

                    <br><br>

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

## style.css
/*
font info:
    family - Helvetica, Arial, sans-serif
    line-height - 1.6


colors:
    light gray - ##eee
    gray - #dddddd
    yellow - #ffd24a
    orange - #ff8523
    blue - #1fabe5
    dark blue - #046c97
*/

* {
  box-sizing: border-box;
}

#page_content {
  width: 95%;
}


/* Global */
html, body {
  margin: 0;
  padding: 0;
  font-family: arial;
}


header {
  background-color: #ff8523;
  height: 120px;
}


.main_navigation {
  margin-top: 15px;
}

.main_navigation a {
  border: 1px solid white;
  border-radius: 5px;
  padding: 6px;
  margin-left: 5px;
  color: white;
  text-decoration: none;
}

#page_content {
  width: 95%;
  margin-left: 20px;
}

section {
  border-bottom: solid 3px  #dddddd;
}

section a {
  color: #1fabe5;
}

section li {
  font-weight: bold;
}


section h2 ,
section h3 {
  color: #1fabe5;
}

table {
  border: 2px solid #1fabe5;
  border-collapse: collapse;
  width: 100%;
  text-align: center;
  vertical-align: middle;


}

thead {
  border: 2px solid #046c97;
  background-color: #1fabe5;
  height: 50px;
  color: white;
}

.border-bottom{
  border-bottom: 2px solid #1fabe5;
}

thead td  {
  border-right: 2px solid #046c97;
}

tbody td{
  border-right: 2px solid #1fabe5;
}

form {
  background-color: #dddddd;
  border-radius: 10px;
  height: 470px;
  padding: 20px;

}

form div {
  margin-top: 25px;

  display: inline-block;
  width: 95%;
}


.name {
  background-color:  #ff8523;
  color: white;

  border-radius: 5px;
padding: 25px;
}

.name input{
  height: 33px;
}


#bio {
  border: 1px solid #1fabe5;
  border-radius: 5px;
  width: 95%;
}

#submit_button {
  border: 1px solid #1fabe5;
  background-color: #1fabe5;
  border-radius: 5px;
  color: white;
  height: 50px;
  width: 73px;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Puppies!</title>

	<link rel="stylesheet" href="style.css">
	</head>
	<body>

	<div>
	<header id="site_header">

	<a id="logo"><img src="img/logo.png" alt="Puppy Logo"></a>

	<nav class="main_navigation">
	<a href="#">Puppies</a>
	<a href="#">Dog Breeds</a>
	<a href="#">So Cute</a>
	</nav>
	</header>

	<!-- Finished -->

	<div id="page_content">

	<section>
	<h2>Puppies are pretty much the best...</h2>

	<p>Humans have had a strong affinity for dogs of all sorts for <a href="#">tens of thousands of years</a>. We have an undeniable and unique social connection to them. <strong>Our love of puppies</strong> is a direct extension of that affinity.</p>

	<h3>So, why do we love puppies?</h3>

	<ul>
	<li>Large eyes and head</li>
	<li>Soft fluffy bodies</li>
	<li>Adorable antics</li>
	</ul>
	</section>

	<section>
	<h2>Table</h2>

	<p>Below, you'll find some information about a few of the cutest puppies ever.</p>

	<table>
	<thead>
	<tr>
	<td>Breed</td>
	<td>Image</td>
	<td>Weight</td>
	<td>Origin</td>
	<td>Markings</td>
	</tr>
	</thead>
	<tbody >
	<tr class="border-bottom">
	<td>Chow Chow</td>
	<td><img src="img/puppy__12.jpg" alt=""></td>
	<td>45-70lb</td>
	<td>China</td>
	<td>Think and course coat; red, brown and black</td>
	</tr>
	<tr class="border-bottom">
	<td>Doberman Pinscher</td>
	<td><img src="img/puppy__13.jpg" alt=""></td>
	<td>32-45lb</td>
	<td>Germany</td>
	<td>Short coat; black, red, brown, blue</td>
	</tr>
	<tr class="border-bottom">
	<td>Golden Retriever</td>
	<td><img src="img/puppy__11.jpg" alt=""></td>
	<td>55-75lb</td>
	<td>Scotland</td>
	<td>Straight or wavy fur; cream and gold</td>
	</tr>
	</tbody>
	</table>

	<br><br>

	</section>

	<section>
	<h2>Puppy love!</h2>

	<p>Tell us why you love puppies!</p>

	<form action="#">

	<div class="name">
	<label for="first_name">First Name:</label>
	<input type="text" name="first_name" id="first_name">
	<label for="last_name">Last Name:</label>
	<input type="text" name="last_name" id="last_name">
	</div>
	<div class="city_container">
	<label for="city">Favorite Breed:</label>
	<select name="city" id="city">
	<option value="south_carolina">Chow Chow</option>
	<option value="california">Doberman Pinscher</option>
	<option value="new_york">Golden Retriever</option>
	</select>
	</div>
	<div>
	<label for="bio">Why do you Love Puppies?</label>
	<br>
	<textarea name="bio" id="bio" cols="50" rows="10">Puppies are the best because...</textarea>
	</div>

	<div class="submit_container">
	<input type="submit" id="submit_button" value="Submit!">
	</div>
	</form>

	<br><br>

	</section>
	</div>
	</div>
	</body>
	</html>
	/*
	font info:
	family - Helvetica, Arial, sans-serif
	line-height - 1.6


	colors:
	light gray - ##eee
	gray - #dddddd
	yellow - #ffd24a
	orange - #ff8523
	blue - #1fabe5
	dark blue - #046c97
	*/

	* {
	box-sizing: border-box;
	}

	#page_content {
	width: 95%;
	}



	/* Global */
	html, body {
	margin: 0;
	padding: 0;
	font-family: arial;
	}


	header {
	background-color: #ff8523;
	height: 120px;
	}



	.main_navigation {
	margin-top: 15px;
	}

	.main_navigation a {
	border: 1px solid white;
	border-radius: 5px;
	padding: 6px;
	margin-left: 5px;
	color: white;
	text-decoration: none;
	}

	#page_content {
	width: 95%;
	margin-left: 20px;
	}

	section {
	border-bottom: solid 3px #dddddd;
	}

	section a {
	color: #1fabe5;
	}

	section li {
	font-weight: bold;
	}


	section h2 ,
	section h3 {
	color: #1fabe5;
	}

	table {
	border: 2px solid #1fabe5;
	border-collapse: collapse;
	width: 100%;
	text-align: center;
	vertical-align: middle;


	}

	thead {
	border: 2px solid #046c97;
	background-color: #1fabe5;
	height: 50px;
	color: white;
	}

	.border-bottom{
	border-bottom: 2px solid #1fabe5;
	}

	thead td {
	border-right: 2px solid #046c97;
	}

	tbody td{
	border-right: 2px solid #1fabe5;
	}

	form {
	background-color: #dddddd;
	border-radius: 10px;
	height: 470px;
	padding: 20px;

	}

	form div {
	margin-top: 25px;

	display: inline-block;
	width: 95%;
	}



	.name {
	background-color: #ff8523;
	color: white;

	border-radius: 5px;
	padding: 25px;
	}

	.name input{
	height: 33px;
	}


	#bio {
	border: 1px solid #1fabe5;
	border-radius: 5px;
	width: 95%;
	}

	#submit_button {
	border: 1px solid #1fabe5;
	background-color: #1fabe5;
	border-radius: 5px;
	color: white;
	height: 50px;
	width: 73px;
	}