Erin's Card-o-matic
A Pen by Erin Wiles on CodePen.
A Pen by Erin Wiles on CodePen.
<html> | |
<head> | |
<title>Card-o-Matic</title> | |
<link rel="stylesheet" href="css/main.css" type="text/css"> | |
<link rel="stylesheet" href="css/features.css" type="text/css"> | |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> | |
</head> | |
<body> | |
<div id='wrapper'> | |
<h1>Erin's Card-o-Matic</h1> | |
<!-- Left side with all the controls --> | |
<div id='controls'> | |
<!-- Color picker --> | |
<h2>Pick a color</h2> | |
<div id="red" class="color"></div> | |
<div id="orange" class="color"></div> | |
<div id="gold" class="color"></div> | |
<div id="green" class="color"></div> | |
<div id="blue" class="color"></div> | |
<div id="purple" class="color"></div> | |
<div id="gray" class="color"></div> | |
<div class="clearfix"></div> | |
<div id='results'></div> | |
<!-- Texture picture --> | |
<h2>Pick a texture</h2> | |
<div id="circles" class="texture"></div> | |
<div id="cloth" class="texture"></div> | |
<div id="paper" class="texture"></div> | |
<div id="swirls" class="texture"></div> | |
<div id="none" class="texture">None</div> | |
<div class="clearfix"></div> | |
<!-- Message --> | |
<h2>Pick a message</h2> | |
<!-- Recipient --> | |
<h2>Dear...</h2> | |
<!-- Sticker picker --> | |
<h2>Click a sticker to add</h2> | |
</div> | |
<!-- Right side with the live preview --> | |
<div id='preview'> | |
<div id='card-background'> | |
<div id='canvas'> | |
<div id='message-output'></div> | |
<div id='recipient-output'></div> | |
</div> | |
</div> | |
<!-- Buttons --> | |
<input type='button' id='refresh-btn' value='Start over'> | |
<input type='button' id='print-btn' value='Print'> | |
</div> | |
</div> | |
<script src="js/card-o-matic.js"></script> | |
</body> | |
</html> |
.color { | |
width:30px; | |
height:30px; | |
border: 1px solid #474747; | |
float:left; | |
margin-left: 10px; | |
cursor: pointer; | |
} | |
#red { background-color: #990000;} | |
#orange { background-color: #FF6600} | |
#gold { background-color: #FFCC00} | |
#green { background-color: #009999} | |
#blue { background-color: #336699} | |
#purple { background-color: #993399} | |
#gray { background-color: #474747} | |
.texture { | |
width: 60px; | |
height: 30px; | |
border: 1px solid #666666; | |
float:left; | |
margin-left: 10px; | |
cursor: pointer; | |
} | |
#circles { | |
background-image: url('../images/texture-circles.png');} | |
#cloth { | |
background-image: url('../images/texture-cloth.png');} | |
#paper { | |
background-image: url('../images/texture-paper.png');} | |
#swirls { | |
background-image: url('../images/texture-swirls.png');} | |
#none { | |
font-size: 1.5em; | |
color:999999; | |
text-align: center; | |
vertical-align: middle; | |
} |