Skip to content

Instantly share code, notes, and snippets.

@perfectly-panda

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

Created April 16, 2014 00:39
Show Gist options
  • Save perfectly-panda/10793289 to your computer and use it in GitHub Desktop.
Save perfectly-panda/10793289 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Samara Soucy.
Raw
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>
Raw
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;
}
Raw
TreeHouse:-Design-a-Contact-Form.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment