Skip to content

Instantly share code, notes, and snippets.

@strax

strax/index.html

Created November 2, 2011 20:19
Show Gist options
  • Save strax/1334776 to your computer and use it in GitHub Desktop.
Save strax/1334776 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Checkout details &mdash; Cloudchat</title>
<link href="screen.css" media="screen, projection" rel="stylesheet" type="text/css">
</head>
<body id="checkout">
<section class="dialog">
<header>
<h1>Credit card information</h1>
<p>We use your card for good, we promise.</p>
</header>
<form action="" method="POST" id="payment-form">
<div class="row">
<label>Card Number</label>
<input type="text" size="20" autocomplete="off" class="card-number">
</div>
<div class="row">
<label>CVC</label>
<input type="text" size="4" autocomplete="off" class="card-cvc">
</div>
<div class="row">
<label>Expiration (MM/YYYY)</label>
<input type="text" size="2" class="card-expiry-month">
<span> / </span>
<input type="text" size="4" class="card-expiry-year">
</div>
<div class="centered">
<a href="#" class="card-cancel-button button red" style="float: left; margin-top: 10px">Cancel</a>
<button type="submit" class="card-submit-button button blue large" style="float: right">Submit Payment &rarr;</button>
</div>
<div style="clear: both"></div>
<br><br><img src="icons/visa02.png">&nbsp;<img src="icons/visaelectron.png">&nbsp;<img src="icons/mastercard.png">
</form>
</section>
</body>
</html>
Raw
screen.css
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}
/*
Payment CSS
*/
body {
background: #e6e3db url(background.png);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.dialog {
overflow: hidden;
width: 500px;
background: #e6e3db;
margin: 50px auto;
padding: 25px;
-webkit-border-radius: 10px;
-webkit-box-shadow: 0 0 8px #444;
}
.dialog h1 {
font-size: 28px;
font-weight: normal;
text-shadow: 0 1px 1px #666;
margin-bottom: 10px;
}
.dialog header {
border-bottom: 1px solid #2daebf;
}
.dialog header p {
font: 13px "Helvetica Neue";
color: #555;
text-shadow: 0 -1px 1px rgba(0,0,0,0.1);
margin-bottom: 10px;
}
.dialog form {
margin-top: 10px;
}
.dialog form .row {
padding: 5px 0;
margin-bottom: 5px;
}
.dialog form label {
display: inline-block;
font-size: 13px;
font-weight: bold;
text-shadow: 0 1px 1px #ddd;
width: 150px;
}
.dialog form input[type=text] {
border: 1px solid #999;
border-radius: 5px;
padding: 5px 10px;
font-family: "Helvetica Neue";
font-size: 13px;
outline: none;
-webkit-box-shadow: 0 0 3px #999;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}
.dialog form input[type=text]:focus {
border: 1px solid #2daebf;
-webkit-box-shadow: 0 0 3px #2daebf;
}
/* Credit card */
.card-cvc {
font-family: monospace;
letter-spacing: 7px;
padding-right: 4px !important;
}
.centered {
padding-top: 10px;
border-top: 1px solid #2daebf;
margin-top: 10px;
}
.card-submit-button {
margin-top: 5px;
}
/* Buttons */
.button, .button:visited {
font-family: "Helvetica Neue";
font-weight: bold;
font-size: 13px;
background: #222 url(button-overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
border: 0;
color: #fff;
text-decoration: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
}
/* Sizes */
.button.small {
font-size: 11px;
}
.button.large {
font-size: 14px;
padding: 8px 14px 9px;
}
.button:hover {
background-color: #111;
color: #fff;
}
.button:active {
top: 1px;
}
.button.blue, .button.blue:active {
background-color: #2daebf;
}
.button.blue:hover {
background-color: #007d9a;
}
.button.red, .button.red:active {
background-color: #923535;
}
.button.red:hover {
background-color: #771f1f;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment