<!DOCTYPE html>
<head>
<script src="/assets/jquery.js"></script>
<link href='https://fonts.googleapis.com/css?family=Londrina+Shadow' rel='stylesheet' type='text/css'>
<style>
body {
font-family: helvetica, sans-serif;
margin: 0 auto;
max-width: 600px;
background: #232323;
}
div {
height: 200px;
background-size: cover;
position: relative;
margin: 40px 0 0 0;
border-radius: 12px;
}
h1 {
font-family: 'Londrina Shadow', cursive;
text-align: center;
font-size: 75px;
color: #aaaaaa;
margin: 60px 0 0 0;
}
h2 {
text-align: center;
color: #bbbbbb;
margin: 0px 0 70px 0;
}
p {
color: rgba(255,255,255,1);
background: black;
background: linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
background: -webkit-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
background: -moz-linear-gradient(bottom, rgba(0,0,0,1), rgba(0,0,0,.4));
padding: 10px;
line-height: 28px;
text-align: justify;
position: absolute;
bottom: 0;
margin: 0;
height: 30px;
transition: height .5s;
-webkit-transition: height .5s;
-moz-transition: height .5s;
}
small {
opacity: 0;
}
.show-description p {
height: 150px;
}
.show-description small {
opacity: 1;
}
.first{
background-image: url("https://i.ytimg.com/vi/Se2WeG7lNI0/maxresdefault.jpg");
}
.second{
background-image: url("http://www.mickismorsels.com/wp-content/uploads/2008/11/balsamic-pork.jpg");
background-position: bottom;
}
.dessert{
background-image: url("http://www.gannett-cdn.com/-mm-/f7d85f610c6fec9e25cd9504d72dbb25dd375661/c=1-0-959-720&r=x404&c=534x401/local/-/media/2015/02/20/Phoenix/Phoenix/635600441615950922-kona-FB.jpg");
background-position: center;
}
.price {
float: right;
}
@media (max-width: 500px) {
h1 {
font-size: 50px;
margin-top: 20px;
line-height: 40px;
}
h2 {
font-size: 20px;
margin: 20px 0 30px 0;
}
div {
margin: 20px 12px 0 12px;
}
p {
font-size: 20px;
line-height: 24px;
}
small {
font-size: 16px;
}
}
</style>
</head>
<body>
<h1>Maylinn's Restaurant</h1>
<h2>''Made with mathematic equations''</h2>
<div class="first">
<p>Garlic Bread with Cheese <span class="price">185 NOK</span><br />
<small>A delicious homebaked bread inserted with one and a half slices of garlic in the middle. Served with melted cheese on top. </small></p>
</div>
<div class="second">
<p>Pork Beef w/Potato Graitin <span class="price">275 NOK</span><br />
<small>Pork beef from the finest pigs in wisconsin. 150grams of pure heaven. Served with potatoes, and different kinds of gravy, including peppergravy.</small></p>
</div>
<div class="dessert">
<p>Homemade brownies with icecream <span class="price">325 NOK</span><br />
<small>Homemade brownies made with dark chocolate and milk(allergie). Served on a small plate including 3 kinds of berries, and a pot of vanilla icecream.</small></p>
</div>
<script>
$('div').on('click', function() {
$(this).toggleClass('show-description');
});
</script>
</body>
HTML, CSS and JAVA
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.