Skip to content

Instantly share code, notes, and snippets.

@paulkoegel

paulkoegel/jsbin.fejagifi.css

Created April 3, 2014 23:22
Show Gist options
  • Save paulkoegel/9964841 to your computer and use it in GitHub Desktop.
Save paulkoegel/9964841 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.fejagifi.css
a {
color: #005A70;
}
.logo {
width: 200px;
height: 200px;
position: absolute;
top: 20px;
right: 50%;
margin-right: -100px;
background-image: url('https://dl.dropboxusercontent.com/u/15321563/cardioscan/logo.png');
}
/* custom breakpoint b/c the logo is placed beyond the grid - value depends on logo width and content container's width */
@media only screen and (min-width: 75.938em) {
.logo {
top: 50px;
right: 50px;
margin-right: 0;
}
}
/* logo check for retina devices */
@media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
.logo {
background-image: url('https://dl.dropboxusercontent.com/u/15321563/cardioscan/logo@2x.png');
background-size: 200px 200px;
}
}
/* main wrapper required to position the .footer always at the end of the content, but if the content's lower than the screen height it should be at the bottom of the screen - cannot use `position: fixed` for this */
.photosharing-wrapper {
/* background-size: cover;
background-image: url(https://dl.dropboxusercontent.com/u/15321563/cardioscan/windows_xp_bliss-wide.jpg); */
width: 100%;
height: auto;
min-height: 100%;
position: relative;
}
.placeholder-photo {
display: block;
margin: 0 auto;
}
.placeholder-photo-wrapper {
position: relative;
}
.placeholder-photo-label {
line-height: 1.4;
font-size: 0.9rem;
text-align: center;
position: absolute;
bottom: 20px;
left: 0;
width: 100%;
}
@media only screen and (min-width: 40.063em) {
.placeholder-photo-label {
line-height: 2;
font-size: 1.1rem;
text-align: center;
position: absolute;
bottom: 20px;
left: 0;
width: 100%;
font-weight: bold;
}
}
.share-buttons {
color: #005A70;
background-color: #e1e000;
margin: 0 auto 20px;
padding: 10px 0;
}
.button-download, .button-facebook, .button-twitter, .button-gplus, .button-email {
color: #005A70;
font-size: 1.667rem;
}
.download-note {
display: none; /* this note doesn't make sense on mobile devices */
font-size: 0.75rem;
}
@media only screen and (min-width: 40.063em) {
.download-note {
display: inline;
}
}
.main-headline {
text-align: center;
text-transform: uppercase;
font-weight: bold;
margin-top: 230px;
font-size: 3rem;
color: #005A70;
}
@media only screen and (min-width: 75.938em) {
.main-headline {
margin-top: 70px;
font-size: 3.5rem;
}
}
input.token-input {
margin-top: 15px;
width: 95%;
height: 46px;
text-transform: uppercase;
font-size: 1.3rem;
}
.token-submit {
margin-top: 15px;
text-transform: uppercase;
padding: 7px 20px;
font-size: 0.9rem;
font-weight: bold;
color: #fff;
background-color: #005A70;
height: 46px;
}
@media only screen and (min-width: 40.063em) {
font-size: 1.3rem;
}
.token-submit:hover {
background-color: #ccc;
color: #005A70;
}
.content {
padding-bottom: 60px;
}
.info-section {
margin-top: 40px;
}
.info-item {
margin-bottom: 20px;
line-height: 1.4rem;
}
.info-item p {
text-indent: -1.1rem;
padding-left: 1.1rem;
margin-top: 10px;
margin-bottom: 20px;
}
@media only screen and (min-width: 40.063em) {
.info-item p {
margin-top: 0;
margin-bottom: 0;
}
}
.info-item img {
width: 100%
}
.footer {
width: 100%;
/* max-width: initial; */
background-color: #005A70;
color: #e1e000;
text-transform: uppercase;
line-height: 2;
position: absolute;
bottom: 0;
}
.footer a {
color: #e1e000;
}
Raw
jsbin.fejagifi.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src='https://dl.dropboxusercontent.com/u/15321563/blitzbude-jsbin/liquid.min.js'></script>
<script type="text/javascript">
var Liquid = require('liquid');
</script>
<link rel="stylesheet" type="text/css" href="https://app.blitzbu.de/assets/application-9016532fb9e4082b91e8eb6a94b9ed99.css">
</head>
<body>
<div id='liquid-page'>
<div class='photosharing-wrapper'>
<div class='logo'></div>
<div class='content'>
<div class='row'>
<div class='small-12 medium-10 medium-centered large-9 large-centered columns'>
<div class='row'>
<div class='small-12 columns'>
<h1 class='main-headline'>Lächeln & gewinnen!</h1>
</div>
</div>
{% if photo %}
<div class='row collapse'>
<div class='small-12 columns text-center'>
<img class='photo' src='{{ photo.url }}'>
</div>
</div>
<div class='share-buttons'>
<div class='row collapse'>
<div class='small-4 medium-8 columns'>
<a class='button-download' href='{{ photo.download_url }}' download='{{ photo.filename }}' title='Herunterladen'>
<i class='icon-download'></i>
<span class='download-note'>
(Rechtsklick -> "Ziel Speichern unter...")
</span>
</a>
</div>
<div class='small-2 medium-1 text-center columns'>
<a class='button-facebook' href='https://www.facebook.com/sharer/sharer.php?u={{ photo.share_url }}' target='_blank' title='Auf Facebook sharen'>
<i class='icon-facebook'></i>
</a>
</div>
<div class='small-2 medium-1 text-center columns'>
<a class='button-twitter' href='https://twitter.com/share?url={{ photo.share_url }}&amp;text=' target='_blank' title='Auf Twitter sharen'>
<i class='icon-twitter'></i>
</a>
</div>
<div class='small-2 medium-1 text-center columns'>
<a class='button-gplus' href='https://plus.google.com/share?url={{ photo.share_url }}' target='_blank' title='Auf Google+ sharen'>
<i class='icon-googleplus'></i>
</a>
</div>
<div class='small-2 medium-1 text-center columns'>
<a class='button-email' href='mailto:?subject=Mein%20Blitzbude%20Foto&amp;body={{ photo.share_url }}' target='_blank' title='Per Email sharen'>
<i class='icon-mail-alt'></i>
</a>
</div>
</div>
</div>
{% else %}
<div class='row token-box'>
<div class='small-12 columns'>
<div class='placeholder-photo-wrapper'>
<img src='http://placehold.it/720x480' class='placeholder-photo'>
<div class='placeholder-photo-label'>
Möchtest du dein Bild mit deinen Freunden teilen? Gib hier einfach den
<br>
Code von deinem Blitzbude Foto-Ausdruck ein.
</div>
</div>
</div>
</div>
<form accept-charset='UTF-8' action='{{form_target}}' method='post'>
<div class='row collapse'>
<div class='small-6 left medium-8 columns'>
<input id='token' name='token' type='text' placeholder='CODE' maxlength='7' class='token-input {% if invalid_token %}error{% endif %}' />
{% if invalid_token %}
<small class='error'>Sorry, wir konnten leider kein Bild finden. Stimmt dein Code? Ja? Dann besuch uns doch bitte später noch einmal, da es bis zu 24 Stunden dauern kann, bis dein Bild freigeschaltet wird.</small>
{% endif %}
</div>
<div class='small-6 medium-4 columns end right'>
<input class='small-12 columns button right token-submit' name='commit' type='submit' value='Abschicken >' />
</div>
</form>
</div>
{% endif %}
<div class='info-section'>
<div class='row'>
<div class='small-12 columns'>
<p>Wir verlosen unter allen cardioscan Facebook-Fans ein tolles Wochenende in Hamburg – so seid auch Ihr dabei:
In nur 3 Schritten in den Urlaub!</p>
</div>
</div>
<div class='info-item'>
<div class='row'>
<div class='small-12 medium-5 columns'>
<img src='http://placehold.it/283x189'>
</div>
<div class='small-12 medium-7 columns'>
<p>1. Mit Eurem persönlichen Download-Code könnt Ihr Euer Bild auf <a href='http://cardioscan.blitzbu.de'>http://cardioscan.blitzbu.de</a> runterladen – das funktioniert per Laptop/PC oder auch ganz bequem per Smartphone.</p>
</div>
</div>
</div>
<div class='info-item'>
<div class='row'>
<div class='small-12 medium-5 columns'>
<img src='http://placehold.it/283x189'>
</div>
<div class='small-12 medium-7 columns'>
<p>2. Postet das Bild bis zum 06.04.2014 um 24 Uhr auf Eurem Facebook-Profil und verlinkt das Posting mit der <a href='https://www.facebook.com/cardioscan.de'>cardioscan Facebook-Seite</a>. Einfach ein #cardioscan.de in Euren Text einbauen. (<strong>WICHTIG:</strong> Für dieses Posting müsst Ihr die Option „Öffentlich“ auswählen – nur so können wir sehen, wer teilnimmt!)</p>
</div>
</div>
</div>
<div class='info-item'>
<div class='row'>
<div class='small-12 medium-5 columns'>
<img src='http://placehold.it/283x189'>
</div>
<div class='small-12 medium-7 columns'>
<p>3. Und schon seid Ihr bei der Verlosung der tollen Hamburg-Reise dabei. Den Gewinner geben wir bis zum 13.04.2014 bekannt – viel Glück!</p>
</div>
</div>
</div>
<div class='row'>
<div class='small-12 columns'>
Die Teilnahmebedingungen findet Ihr auf <a href='http://www.cardioscan.de' target='_blank'>http://www.cardioscan.de</a>.
</div>
</div>
</div>
</div>
</div>
</div>
<div class='footer'>
<div class='row collapse'>
<div class='small-12 medium-10 medium-centered large-9 large-centered columns text-right'>
<a href='http://www.cardioscan.de/footer/impressum.html' target='_blank'>Impressum</a>
&nbsp;
<a href='https://www.facebook.com/cardioscan.de' target='_blank'>
<i class='icon-facebook'></i>
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Raw
jsbin.fejagifi.js
$(function(){
var page = $('#liquid-page');
var pageTemplate = page.html();
page.html(Liquid.Template.parse(pageTemplate).render({ photo: { url: 'http://news.bbcimg.co.uk/media/images/52142000/jpg/_52142848_003006495-1.jpg'}, cheer: true })).show();
//page.html(Liquid.Template.parse(pageTemplate).render()).show();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment