Skip to content

Instantly share code, notes, and snippets.

/index.html

Created March 30, 2014 23:36
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anonymous/9881826 to your computer and use it in GitHub Desktop.
Save anonymous/9881826 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by A Non Ymous.
Raw
index.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Park City Gazette Subscription</title>
<link href="pcg.css" rel="stylesheet" type="text/css"/>
<link href="sform.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="header">
<img src="pcglogo.jpg" alt="The Park City Gazette" />
</div>
<div id="leftColumn">
<h2><a href="#">Home Page</a></h2>
<h2><a href="#">News</a></h2>
<ul>
<li><a href="#">Local</a></li>
<li><a href="#">State</a></li>
<li><a href="#">National</a></li>
<li><a href="#">International</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Weather</a></li>
</ul>
<h2><a href="#">Classifieds</a></h2>
<ul>
<li><a href="#">For Sale</a></li>
<li><a href="#">Wanted</a></li>
<li><a href="#">Employment</a></li>
<li><a href="#">Real Estate</a></li>
<li><a href="#">Personals</a></li>
</ul>
<h2><a href="#">Tourism</a></h2>
<ul>
<li><a href="#">Attractions</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Parks</a></li>
<li><a href="#">Camping</a></li>
</ul>
<h2><a href="#">Subscriptions</a></h2>
<h2><a href="#">Contact Us</a></h2>
</div>
<div id="rightColumn">
<h1>Subscriptions</h1>
<p>Yes, I want to subscribe to the Park City Gazette! <br />
I can choose from one of the following options:</p>
<form id="subForm" name="subForm"
action="http//www.theparkcitygazette.com/subscribe"
method="post">
<fieldset id="subPlans">
<input type ="radio" name="plan1" id="plan1" value="1" />
<label for="subplan">6 mo./$24</label>
<input type ="radio" name="plan2" id="plan2" value="2" />
<label for="subplan">12 mo./$45</label>
<input type ="radio" name="plan3" id="plan3" value="3" />
<label for="subplan">18 mo./$64</label>
<input type ="radio" name="plan4" id="plan4" value="4" />
<label for="subplan">24 mo./$80 (best value)</label>
</fieldset>
<label for="cName" class="floatLabel">Name</label>
<input type ="text" class="floatCtrl" size="50" />
<label for="address" class="floatLabel">Address</label>
<textarea name="address" class="floatCtrl" rows="6" cols="50" ></textarea>
<label for="agree" id="agreeLabel" class="floatLabel">
<input type="checkbox" />
Yes, I wish to pay online by entering my credit card information below.
</label>
<fieldset id="payment">
<label for="cardType" class="floatLabel">Credit Card</label>
<select name="cardType" id="cardType" class="floatCtrl" size="4">
<option value="Amex">American Express</option>
<option value="Disc">Discover</option>
<option value="MC">Master Charge</option>
<option value="Visa">Visa</option>
</select>
<label for="cardname" class="floatlabel" >Name on Card</label>
<input type="text" name="cardName" class="floatctrl" size="30" />
<label for="cardNumber" class="floatLabel" >Card Number</label>
<input type="text" name="cardNumber" class="floatCtrl" size="30" />
<label for="expDate" class="floatLabel">Expiration Date</label>
<select name="expMonth" class="floatCtrl">
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select name="expYear" class="floatCtrl">
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
</select>
</fieldset>
<fieldset id="buttons">
<input type="submit" value="Subscribe" />
<input type="reset" value="Cancel" />
</fieldset>
</form>
<address>
Park City Gazette &bull;
801 Main Street &bull;
Estes Park, CO 80517 &bull;
1 (800) 555-2918
</address>
</div>
</body>
</html>
Raw
style.css
body
{margin: 0px; background-image: url(parch.jpg);
font-family: Arial, Helvetica, sans-serif}
#header
{position: absolute; top: 20px; left: 80px}
#leftColumn
{position: absolute; top: 180px; left: 10px;
width: 100px; color: rgb(63,56,46)}
#leftColumn h2
{font-size: 14px; margin: 10px 0px 0px 2px;
font-weight: normal}
#leftColumn ul
{list-style-type: none; margin: 0px; padding: 0px;
margin-left: 22px; font-size: 12px}
#leftColumn ul li
{margin: 0px; padding: 0px; line-height: 1.4}
#leftColumn a
{text-decoration: none; color: black}
#leftColumn a:visited
{color: black}
#leftColumn a:hover
{text-decoration: underline}
#rightColumn
{position: absolute; top: 180px; left: 125px; width: 600px;
font-size: 14px}
#rightColumn h1
{font-size: 24px; margin: 0px; padding: 0px;
text-align: center; font-weight: normal;
letter-spacing: 5px}
#rightColumn p
{text-align: center}
#rightColumn address
{font-size: 10px; font-style: normal; text-align: center;
border-top: 1px solid rgb(63,56,46); margin-bottom: 20px}
#subPlans {background-color: white; padding: 5px; margin-bottom: 20px; text-align: center}
#subPlans label {margin-right: 15px}
.floatLabel {display: block; float: left; clear: left; width: 150px; margin-bottom: 10px; text-align: right}
.floatCtrl {display: block; float: left; margin-left: 20px; margin-bottom: 10px}
#agreeLabel {width: 600px; margin: 20 px 0 px 20px 0px; text-align: center}
#payment {clear: left; background-color: white; width: 400px; margin-left: 100px; padding: 5px}
#buttons {text-align: center; margin: 10px 0px 10px 0px; border-style: none}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment