Skip to content

Instantly share code, notes, and snippets.

@svanderbleek

svanderbleek/dabblet.css

Created December 27, 2013 05:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save svanderbleek/8142945 to your computer and use it in GitHub Desktop.
Save svanderbleek/8142945 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
dabblet.css
.cardspring-page {
max-width: 960px;
margin: 60px auto;
border: solid 1px #CCC;
border-radius: 4px;
background-image: linear-gradient(#CCC, #BBB);
padding: 20px;
}
@media all and (max-width: 1060px) {
body {
padding: 0;
margin: 0;
}
.cardspring-page {
margin: 0;
padding: 20px 0;
border: none;
border-radius: 0;
max-width: 1060px;
}
.cardspring-page .merchant-promotion-form {
width: 100%;
position: static;
}
.cardspring-page .merchant-promotion-info {
width: 80%;
}
}
@media all and (max-width: 960px) {
}
body {
font-family: helvetica;
}
.merchant-promotion-brand {
padding: 20px;
margin-bottom: 20px
}
.merchant-promotion-brand img {
}
.merchant-promotion-brand-info {
display: inline-block;
vertical-align: top;
}
.merchant-promotion-brand-info h2 {
display: block;
margin-top: 0;
}
.merchant-promotion-brand a {
}
.merchant-promotion-form {
background: white;
width: 106%;
position: relative;
left: -3%;
box-shadow: 0px 0px 1px 0px;
}
.merchant-promotion-media {
padding: 60px;
}
.merchant-promotion-info {
margin-top: 20px;
padding: 20px;
}
Raw
dabblet.html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="merchant-promotion-page" class="cardspring-page">
<div class="merchant-promotion-brand">
<img src="http://placekitten.com/100/100">
<div class="merchant-promotion-brand-info">
<h2>Merchant Name</h2>
<a href="">http://merchantname.com</a>
</div>
</div>
<div class="merchant-promotion-form">
<div class="merchant-promotion-media">
<img src="http://placekitten.com/200/200">
<p>Merchant Offer Description. Save <em>20%</em></p>
<input type="text">
</div>
</div>
<div class="merchant-promotion-info">
<img src="http://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318&markers=color:red%7Ccolor:red%7Clabel:C%7C40.718217,-73.998284&sensor=false">
</div>
</div>
</body>
</html>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment