Skip to content

Instantly share code, notes, and snippets.

@susanBuck
Created October 29, 2012 10:07
Show Gist options
  • Select an option

  • Save susanBuck/3972728 to your computer and use it in GitHub Desktop.

Select an option

Save susanBuck/3972728 to your computer and use it in GitHub Desktop.
Card Generator Starting Point
<div id='wrapper'>
<!-- HEADING -->
<h1>Card Generator</h1>
<!-- CARD SETTINGS ON THE LEFT -->
<div id='left-side'>
<h2>Pick a color</h2>
<h2>Pick a texture</h2>
<h2>Pick a message</h2>
<h2>Enter your recipient</h2>
<h2>Add some graphics</h2>
</div>
<!-- CARD SETTINGS ON THE RIGHT -->
<div id='right-side'>
<div id='card'>
<div id='canvas'></div>
</div>
</div>
<!-- FOOTER -->
<div id='footer'></div>
</div>
$(document).ready(function() { // start doc ready; do not delete this!
}); // end doc ready; do not delete this!
* {
font-family:verdana;
}
#wrapper {
width:960px;
margin:0px auto;
}
h1 {
text-align:center;
font-size:30px;
margin-top:25px;
margin-bottom:25px;
}
h2 {
font-family:Verdana;
font-size:15px;
margin-top:30px;
margin-bottom:5px;
border-bottom:1px dotted #ccc;
}
#left-side {
width:425px;
margin-right:50px;
float:left;
}
#right-side {
width:400px;
float:left;
}
#card {
background-image:url('images/card-background.jpg');
background-repeat:no-repeat;
height:513px;
width:369px;
margin:0px auto;
}
#canvas {
width:338px;
height:469px;
position:relative;
top:33px;
left:16px;
overflow:hidden;
}
.footer {
clear:both;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment