Skip to content

Instantly share code, notes, and snippets.

@dvnckr

dvnckr/dabblet.css

Created August 19, 2012 23:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dvnckr/3398524 to your computer and use it in GitHub Desktop.
Save dvnckr/3398524 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
dabblet.css
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Jim's House Painters</title>
<!--
The Summer of Learning, 2012
Assignment #2: Amazing Forms and Buttons
Instructions:
Use this base file as a starting point, and add form fields to make this form look
like the screenshot (homework-screenshot.png) in your folder.
You'll need these form fields:
- First Name (required)
- Last Name (required)
- Phone Number
- Type of Paint (should be a datalist, with "Gloss", "Semi-Gloss", and "Matte")
- Date of Service (should be a color picker)
- Color Choice (should be a color picker)
- And a beautiful "submit" button of your design.
You don't have to match the screenshot exactly.
Can you make it work in IE6 or IE7? Check it here: http://browserstack.com/ (requires account.) You'll need Modernizr and at least one polyfill!
Here's Modernizr: http://modernizr.com/
Here's the polyfill we used in class: https://github.com/zoltan-dulac/html5Forms.js
Here's a tutorial for using them: http://www.useragentman.com/blog/2010/07/27/creating-cross-browser-html5-forms-now-using-modernizr-webforms2-and-html5widgets-2/
Try validating your page as HTML5 here: http://validator.w3.org/
Post your work here: http://summeroflearning.aquent.com/
Good luck!
-->
<style>
input {
margin-bottom: 20px;
width:200px;
}
h1 {
border-bottom: 3px double #ccc;
text-align: center;
margin:30px;
padding: 20px;
}
label {
float: left;
padding-right: 20px;
text-align: right;
width: 150px;
}
#wrap {
width:500px;
margin: 20px auto;
margin-top: 10px;
padding: 30px;
border: 1px solid #ccc;
}
#submit {
background: silver no-repeat;
text-transform: uppercase;
border-radius: 10px;
width: auto;
clear: both;
color: white;
padding: 10px;
font-weight: bold;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
background: -webkit-linear-gradient(125deg, #00df21 0%, #ed21dd 100%); }
</style>
</head>
<body>
<div id="wrap">
<header>
<h1>House Painting Request!</h1>
</header>
<form action="#" method="GET">
<label for="first">First Name</label>
<input type="text" id="first" name="first"><br>
<label for="last">Last Name</label>
<input type="text" id="last" name="last"><br>
<label for="phone">Phone Number</label>
<input type="tel" id="phone" name="phone"><br>
<label for="">Data List</label>
<input type="text" name="favCharacter" list="characters">
<datalist id="characters">
<option value="Homer Simpson"></option>
<option value="Bart"></option>
<option value="Fred Flinstone"></option>
</datalist><br>
<label for="date">Date Picker</label>
<input type="date" id ="date" name="date"><br>
<label for="color">Color Picker</label>
<input type="color" id ="color" name="color"><br>
<input type="submit" id="submit" value="Place Request">
</form>
</div>
</body>
</html>
Raw
dabblet.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Jim's House Painters</title>
<!--
The Summer of Learning, 2012
Assignment #2: Amazing Forms and Buttons
Instructions:
Use this base file as a starting point, and add form fields to make this form look
like the screenshot (homework-screenshot.png) in your folder.
You'll need these form fields:
- First Name (required)
- Last Name (required)
- Phone Number
- Type of Paint (should be a datalist, with "Gloss", "Semi-Gloss", and "Matte")
- Date of Service (should be a color picker)
- Color Choice (should be a color picker)
- And a beautiful "submit" button of your design.
You don't have to match the screenshot exactly.
Can you make it work in IE6 or IE7? Check it here: http://browserstack.com/ (requires account.) You'll need Modernizr and at least one polyfill!
Here's Modernizr: http://modernizr.com/
Here's the polyfill we used in class: https://github.com/zoltan-dulac/html5Forms.js
Here's a tutorial for using them: http://www.useragentman.com/blog/2010/07/27/creating-cross-browser-html5-forms-now-using-modernizr-webforms2-and-html5widgets-2/
Try validating your page as HTML5 here: http://validator.w3.org/
Post your work here: http://summeroflearning.aquent.com/
Good luck!
-->
<style>
</style>
</head>
<body>
<div id="wrap">
<header>
<h1>House Painting Request!</h1>
</header>
<form action="#" method="GET">
<label for="first">First Name</label>
<input type="text" id="first" name="first"><br>
<label for="last">Last Name</label>
<input type="text" id="last" name="last"><br>
<label for="phone">Phone Number</label>
<input type="tel" id="phone" name="phone"><br>
<label for="">Data List</label>
<input type="text" name="favCharacter" list="characters">
<datalist id="characters">
<option value="Homer Simpson"></option>
<option value="Bart"></option>
<option value="Fred Flinstone"></option>
</datalist><br>
<label for="date">Date Picker</label>
<input type="date" id ="date" name="date"><br>
<label for="color">Color Picker</label>
<input type="color" id ="color" name="color"><br>
<input type="submit" id="submit" value="Place Request">
</form>
</div>
</body>
</html>
Raw
settings.json
{"view":"split","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment