2014-05-15 01:23:31 +01:00
<!DOCTYPE html>
2014-05-15 00:13:56 +01:00
< html >
< head >
2014-05-15 01:22:58 +01:00
< title > Lilla Macarons< / title >
< meta charset = "UTF-8" >
2014-05-15 09:19:56 +01:00
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" / >
2014-05-15 00:13:56 +01:00
< link href = "http://fonts.googleapis.com/css?family=Niconne" rel = "stylesheet" type = "text/css" / >
< link href = "http://fonts.googleapis.com/css?family=Josefin+Sans" rel = "stylesheet" type = "text/css" / >
< style type = "text/css" >
2014-05-15 10:23:08 +01:00
html {
2014-05-15 00:13:56 +01:00
font-family: "Josefin Sans", sans-serif;
margin: 0;
2014-05-15 09:19:56 +01:00
background: url("macarons.jpg") no-repeat center top fixed;
background-size: cover;
2014-05-15 10:23:08 +01:00
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
2014-05-15 00:13:56 +01:00
color: #fff;
}
a {
color: #fff;
text-decoration: none;
}
h1#sticker {
margin: 0 auto;
text-align: center;
top: 25%;
2014-05-15 08:18:14 +01:00
left: 35%;
position: absolute;
2014-05-15 00:13:56 +01:00
font-family: 'Niconne', cursive;
font-size: 600%;
width: 2.5em;
height: 2.5em;
border-radius: 2em;
background: yellow;
line-height: 2.35em;
color: #fff;
border: 20px solid white;
}
#contact {
2014-05-15 08:18:14 +01:00
position: absolute;
2014-05-15 00:13:56 +01:00
width: 16em;
left: 3em;
top:85%;
text-align: left;
}
#contact .icons {
padding: 0 0 0 1.5em;
}
#rightmenu {
background-color: rgba(128,0,128,0.4);
color: #fff;
border-left: 3px solid purple;
position: absolute;
2014-05-15 08:18:14 +01:00
margin-left: 100%;
2014-05-15 00:13:56 +01:00
top: 0;
width: 15em;
height: 100%;
padding: 1em;
2014-05-15 09:42:23 +01:00
display: none;
2014-05-15 00:13:56 +01:00
}
.menutitle {
font-size: 150%;
}
.flavours {
line-height: 2em;
font-size: 120%;
list-style-type: none;
2014-05-15 09:49:32 +01:00
padding: 0;
font-weight: 400;
2014-05-15 00:13:56 +01:00
}
div.allergies {
font-size: 90%;
white-space: normal;
position: absolute;
top: 85%;
}
#ordertext {
display: none;
font-size: 120%;
}
#footer {
font-size: 70%;
position: absolute;
top: 97%;
width: 98%;
text-align: right;
}
< / style >
< script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" > < / script >
< script type = "text/javascript" >
function openMenu() {
$(function(){
if ( $("#rightmenu").attr("data-open") != "true" ) {
2014-05-15 09:42:23 +01:00
$("#rightmenu").css("display", "inline");
2014-05-15 00:13:56 +01:00
$("#rightmenu").animate({left: "-=" + $("#rightmenu").css("width")}, 1000);
$("#rightmenu").attr("data-open", "true");
}
});
}
function closeMenu() {
$(function(){
if ( $("#rightmenu").attr("data-open") != "false" ) {
2014-05-15 09:45:45 +01:00
$("#rightmenu").animate({left: "+=" + $("#rightmenu").css("width")}, 1000, function(){
2014-05-15 09:42:23 +01:00
$("#rightmenu").css("display", "none");
2014-05-15 09:35:54 +01:00
});
2014-05-15 09:45:45 +01:00
$("#rightmenu").attr("data-open", "false");
2014-05-15 00:13:56 +01:00
}
});
}
< / script >
< / head >
< body >
< h1 id = "sticker" onmouseover = 'openMenu(); $("#ordertext").fadeIn(2000);' > Lilla< / h1 >
< div id = "contact" >
< span id = "ordertext" > Place your order here< / span > < br / >
< span class = "icons" >
< a href = "http://facebook.com/macaronslilla" > < img src = "facebook-4-32.png" alt = "facebook" / > < / a >
< a href = "http://twitter.com/lilla_macarons" > < img src = "twitter-4-32.png" alt = "twitter" / > < / a >
< a href = "mailto:enquiries@lillamacarons.com" > < img src = "email-14-32.png" alt = "email" / > < / a >
< / span >
< / div >
< div id = "footer" >
< span id = "attribution" > Photo by < a href = "https://www.flickr.com/people/24576874@N00" > Julien Haler< / a > via Flickr< / span >
< / div >
<!-- Menu -->
< div id = "rightmenu" onclick = "closeMenu();" >
2014-05-15 01:22:58 +01:00
< p class = "menutitle" > Macaron Flavours< / p >
2014-05-15 00:13:56 +01:00
< ul class = "flavours" >
< li > < span > Earl Grey & Biscuit< / span > < / li >
< li > < span > Lemon & Orange< / span > < / li >
< li > < span > Strawberry & Custard< / span > < / li >
< li > < span > Raspberry & Vanilla< / span > < / li >
< li > < span > Double Chocolate< / span > < / li >
< li > < span > Pistachio< / span > < / li >
< li > < span > Coffee & Irish Cream< / span > < / li >
< li > < span > Chocolate & Orange< / span > < / li >
< li > < span > Hazelnut< / span > < / li >
< / ul >
< div class = "allergies" > < span > Allergy advice: Contains nuts, gluten,< br / > dairy and eggs. Please contact us for< br / > a full list of ingredients.< / span > < / div >
< / div >
<!-- /Menu -->
< / body >
2014-05-15 01:20:18 +01:00
< / html >
