|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<title>JavaScript Review - Banner Builder</title> |
|
|
|
<link href='http://fonts.googleapis.com/css?family=Cutive' rel='stylesheet' type='text/css'> |
|
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/pure/0.3.0/pure-min.css"> |
|
<style type="text/css"> |
|
.pure-form input[type="color"] { |
|
padding: 0.2em 0.3em; |
|
} |
|
|
|
.banner { |
|
margin: 1em 0; |
|
text-align: center; |
|
border-radius: 4px; |
|
font-family: 'Cutive', serif; |
|
text-transform: uppercase; |
|
letter-spacing: 2px; |
|
} |
|
|
|
.banner-sm { |
|
padding: 0.5em; |
|
font-size: 12px; |
|
} |
|
|
|
.banner-md { |
|
padding: 0.8em; |
|
font-size: 16px; |
|
} |
|
|
|
.banner-lg { |
|
padding: 1.2em; |
|
font-size: 20px; |
|
} |
|
|
|
.banner-xl { |
|
padding: 1.4em; |
|
font-size: 24px; |
|
} |
|
|
|
.banner-xxl { |
|
padding: 2em; |
|
font-size: 32px; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
|
|
<main role="main" class="pure-g-r"> |
|
<div class="pure-u-1-12"></div> |
|
<section class="pure-u-5-12"> |
|
<header> |
|
<h1>Banner Builder</h1> |
|
</header> |
|
<form class="pure-form pure-form-aligned"> |
|
<fieldset> |
|
<legend>Banner Configuration</legend> |
|
|
|
<div class="pure-control-group"> |
|
<label for="text">Text</label> |
|
<input type="text" name="text" id="text" placeholder="Fireworks: The Silent Killer" required> |
|
</div> |
|
|
|
<div class="pure-control-group"> |
|
<label for="text-size">Text Size</label> |
|
<select name="text-size" id="text-size" required> |
|
<option value=""></option> |
|
<option value="sm">Small</option> |
|
<option value="md">Medium</option> |
|
<option value="lg">Large</option> |
|
<option value="xl">X-Large</option> |
|
<option value="xxl">Stupid Big</option> |
|
</select> |
|
</div> |
|
|
|
<div class="pure-control-group"> |
|
<label for="text-color">Text Color</label> |
|
<input type="color" name="text-color" id="text-color"> |
|
</div> |
|
|
|
<div class="pure-control-group"> |
|
<label for="bg-color">Background Color</label> |
|
<input type="color" name="bg-color" id="bg-color"> |
|
</div> |
|
|
|
<div class="pure-control-group"> |
|
<label for="banner-count"># of Banners</label> |
|
<input type="number" min="1" max="10" name="banner-count" id="banner-count"> |
|
</div> |
|
|
|
<button type="submit" class="pure-button pure-button-primary" id="create-banners">Make My Banners!</button> |
|
</fieldset> |
|
</form> |
|
</section> |
|
<div class="pure-u-1-12"></div> |
|
<section id="banner-display" class="pure-u-1-3"></section> |
|
<div class="pure-u-1-12"></div> |
|
</main> |
|
|
|
</body> |
|
</html> |
