perfectly-panda/TreeHouse:-Design-a-Contact-Form.markdown

## index.html
<body>
  <!--image sourced from free-clipart.net, textures from http://www.bettertextures.com/. Both are public domain. Thank You! -->
  <div class="container">
    <div class="image">
      <img src="http://www2.free-clipart.net/gallery/clipart/Crests_And_Emblems/Animals/Dragon__Dragon_2.jpg" alt="Dragon Crest">
    </div>

    <div class="title">
      <h1>Welcome Brave Warrior!</h1>
    </div>
    <div class="text">
      <div class="intro">
        <p>Before we enter the arena, we need to do some paperwork. Sadly, no one told the bureaucrats that true warriors don't know how to read.</p>
      </div>

      <div class="form">
       <form>
         <ul>
          <li>
            <label for="name">What name should the ladies (or lads if that is your preference) shout when you claim your victory?</label></br>
            <input type="text" name="name" value="Rawr!" size=40>
          </li>
          <li>
            <label for="email">To what email shall we send your fanmail, as well as demands for rematches from your vanquished foes?</label></br>
            <input type="text" name="email" value="ifiteyounetime@hotmail.com" size=40>
          </li>
          <li>
            <label for="message">What message do you have for those who would deny your worthiness for this challenge?</label></br>
            <textarea name="message" rows="4" cols="50">Rawr win every time. Rawr smash you for saying Rawr not worthy to fite.</textarea>
          </li>
          <li>
            <label for="submit"> I have mashed a sufficient number of buttons, I would like to go mash faces now:
            <input type="submit" name="submit">
        </form>
      </div>
    </div>
  </div>
</body>

## style.css
/*************
*   Fonts    *
*************/

@import url(http://fonts.googleapis.com/css?family=Roboto:900);
@import url(http://fonts.googleapis.com/css?family=Raleway:400,700);

/*********************
*   Container div    *
*********************/
body {
  background-color: lightpink;
  background-image: url("http://www.bettertextures.com/files/drybrush/drybrush-lightgray.jpg");
}

.container{
  background-color: white;
  padding: 5px;
  width: 75%;
  margin: auto;
  margin-top: 20px;
  overflow: auto;
  border-radius: 15px;
}


/*************
*   Title    *
*************/

.title {
  font-family: 'Roboto', Sans-Serif;
  font-size: 1.5em;
  display: inline-block;
  max-width: 70%;
  margin: 0px 4.5%;
  float: left;
}

/*************
*   Image    *
*************/

.image{
  display: block;
  float: left;
  margin: 30px 20px 50px 20px;
  max-width: 25% 10px;
}

/************
*   Text    *
************/

.text{
  font-family: Raleway, sans-serif;
  font-size: 1.125em;
  line-height:1.5em;
}

/*************
*   Intro    *
*************/

.intro{
  display: inline-block;
  max-width: 70%;
  margin: 0px 2.5%;
  float: right;
}

/************
*   Form    *
************/

.form{
  display: inline-block;
  max-width: 70%;
  margin: 0px 2.5% 10px 2.5%;
  padding-top: 2px;
  border-top: 1px solid lightgray;
  float: right;
}

.form ul {
  list-style-type: none;
  margin: 0 0px 0 -40px;
}

## TreeHouse:-Design-a-Contact-Form.markdown

      
    Raw
  

              TreeHouse:-Design-a-Contact-Form.markdown
            
          
    TreeHouse: Design a Contact Form

Built for Team Treehouse weekly forum contest.
A Pen by Samara Soucy on CodePen.
License.
	<body>
	<!--image sourced from free-clipart.net, textures from http://www.bettertextures.com/. Both are public domain. Thank You! -->
	<div class="container">
	<div class="image">
	<img src="http://www2.free-clipart.net/gallery/clipart/Crests_And_Emblems/Animals/Dragon__Dragon_2.jpg" alt="Dragon Crest">
	</div>

	<div class="title">
	<h1>Welcome Brave Warrior!</h1>
	</div>
	<div class="text">
	<div class="intro">
	<p>Before we enter the arena, we need to do some paperwork. Sadly, no one told the bureaucrats that true warriors don't know how to read.</p>
	</div>

	<div class="form">
	<form>
	<ul>
	<li>
	<label for="name">What name should the ladies (or lads if that is your preference) shout when you claim your victory?</label></br>
	<input type="text" name="name" value="Rawr!" size=40>
	</li>
	<li>
	<label for="email">To what email shall we send your fanmail, as well as demands for rematches from your vanquished foes?</label></br>
	<input type="text" name="email" value="ifiteyounetime@hotmail.com" size=40>
	</li>
	<li>
	<label for="message">What message do you have for those who would deny your worthiness for this challenge?</label></br>
	<textarea name="message" rows="4" cols="50">Rawr win every time. Rawr smash you for saying Rawr not worthy to fite.</textarea>
	</li>
	<li>
	<label for="submit"> I have mashed a sufficient number of buttons, I would like to go mash faces now:
	<input type="submit" name="submit">
	</form>
	</div>
	</div>
	</div>
	</body>
	/*************
	* Fonts *
	*************/

	@import url(http://fonts.googleapis.com/css?family=Roboto:900);
	@import url(http://fonts.googleapis.com/css?family=Raleway:400,700);

	/*********************
	* Container div *
	*********************/
	body {
	background-color: lightpink;
	background-image: url("http://www.bettertextures.com/files/drybrush/drybrush-lightgray.jpg");
	}

	.container{
	background-color: white;
	padding: 5px;
	width: 75%;
	margin: auto;
	margin-top: 20px;
	overflow: auto;
	border-radius: 15px;
	}


	/*************
	* Title *
	*************/

	.title {
	font-family: 'Roboto', Sans-Serif;
	font-size: 1.5em;
	display: inline-block;
	max-width: 70%;
	margin: 0px 4.5%;
	float: left;
	}

	/*************
	* Image *
	*************/

	.image{
	display: block;
	float: left;
	margin: 30px 20px 50px 20px;
	max-width: 25% 10px;
	}

	/************
	* Text *
	************/

	.text{
	font-family: Raleway, sans-serif;
	font-size: 1.125em;
	line-height:1.5em;
	}

	/*************
	* Intro *
	*************/

	.intro{
	display: inline-block;
	max-width: 70%;
	margin: 0px 2.5%;
	float: right;
	}

	/************
	* Form *
	************/

	.form{
	display: inline-block;
	max-width: 70%;
	margin: 0px 2.5% 10px 2.5%;
	padding-top: 2px;
	border-top: 1px solid lightgray;
	float: right;
	}

	.form ul {
	list-style-type: none;
	margin: 0 0px 0 -40px;
	}