<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/balinthi/pen/kXvaqy?depth=everything&order=popularity&page=30&q=shop&show_forks=false" />
<style class="cp-pen-styles">body {
background-color: #2e2d3c;
}
a {
text-decoration: none;
}
.container {
background-image: url(https://p1.picsto.re/bqXic.jpg);
position: absolute;
left: 40%;
width: 312px;
height: 650px;
border-radius: 4px;
margin: auto;
margin-top: 50px;
-webkit-box-shadow: 0px 3px 14px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 3px 14px 0px rgba(0,0,0,0.3);
box-shadow: 0px 3px 14px 0px rgba(0,0,0,0.3);
}
.spacer {
margin: 15px;
}
.header > h2 {
width: 240px;
text-align: center;
text-transform: uppercase;
font-size: 15px;
color: #e7e7e7;
float: left;
margin: 0 !important;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 13px;
}
.header > a {
float: left;
color: #e7e7e7;
font-size: 20px;
}
.map {
float: right;
color: #e7e7e7;
}
.listing {
padding-top: 43px;
}
.first {
margin-bottom: 20px;
}
.image {
width: 100%;
height: 176px;
background-color: #313040;
border-radius: 4px 4px 5px 5px;
-webkit-box-shadow: 0px 3px 16px -2px rgba(0,0,0,0.7);
-moz-box-shadow: 0px 3px 16px -2px rgba(0,0,0,0.7);
box-shadow: 0px 3px 16px -2px rgba(0,0,0,0.7);
}
.image > h3 {
position: absolute;
background-color: black;
opacity: 0.8;
border-radius: 50px;
width: 40px;
padding-top: 3px;
height: 19px;
text-align: center;
color: white;
font-size: 15px;
margin-top: 10px;
margin-left: 10px;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 10px;
}
.border {
border-top: 3px solid transparent;
margin-top: -2px;
border-image: url(https://p1.picsto.re/nGjJ1.png) 3 0 0 5 repeat;
}
.description {
position: absolute;
background-color: #f8f5f6;
height: 57px;
width: 282px;
margin-top: -57px;
border-radius: 0 0 4px 4px;
}
.description > p {
margin-top: 16px;
color: #3f321e;
line-height: 13px;
padding-left: 10px;
float: left;
font-family: 'Playfair Display', serif;
font-weight: 700;
font-size: 18px;
}
span {
font-size: 10px;
font-family: 'Oswald', sans-serif;
font-weight: 400;
text-transform: uppercase;
color: #a49f98;
}
.icon {
width: 34px;
height: 34px;
border-radius: 10px;
background-color: red;
margin-top: 10px;
margin-left: 10px;
float: left;
}
.orange {
background-color: #ff922b;
border: 1px solid #ec8420;
}
.red {
background-color: #ff4062;
border: 1px solid #f6113a;
}
.blue {
background-color: #2bb2ff;
border: 1px solid #0ca0f5;
}
.like {
width: 41px;
float: right;
text-align: center;
padding-top: 12px;
}
.like > a {
color: #a49f98;
font-size: 17px;
}
h4 {
margin: -3px !important;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 12px;
color: #a49f98;
}
.food1 {
background-image: url(https://p1.picsto.re/X538D.jpg);
background-repeat: no-repeat;
}
.food2 {
background-image: url(https://p1.picsto.re/Zz5Xg.jpg);
background-repeat: no-repeat;
}
.food3 {
background-image: url(https://p1.picsto.re/WQr1d.jpg);
background-repeat: no-repeat;
}
.icon-orange {
color: white;
padding-top: 7px;
padding-left: 7px;
font-size: 20px !important;
text-shadow: 2px 2px 2px #ec8420;
}
.icon-red {
color: white;
padding-top: 7px;
padding-left: 7px;
font-size: 20px !important;
text-shadow: 2px 2px 2px #ef6113a;
}
.icon-blue {
color: white;
padding-top: 7px;
padding-left: 6px;
font-size: 20px !important;
text-shadow: 2px 2px 2px #0ca0f5;
}</style></head><body>
<html>
<head>
<title>Food shop - iPhone</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Playfair+Display:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container">
<div class="spacer">
<div class="header">
<a href="#" class="material-icons">menu</a>
<h2>The Paleo Paddock</h2>
<a href="#" class="material-icons">local_offer</a>
</div>
<div class="listing">
<div class="first">
<div class="image food1">
<h3>200m</h3>
</div>
<div class="description">
<div class="border"></div>
<div class="icon orange">
<a href="#" class="material-icons icon-orange">restaurant_menu</a>
</div>
<p>il domacca </br> <span>78 5th avenue, new york<span></p>
<div class="like">
<a href="#" class="material-icons">near_me</a>
<h4>84</h4>
</div>
</div>
</div>
<div class="first">
<div class="image food2">
<h3>350m</h3>
</div>
<div class="description">
<div class="border"></div>
<div class="icon red">
<a href="#" class="material-icons icon-red">local_pizza</a>
</div>
<p>Mc Grady </br> <span>79 5th avenue, new york<span></p>
<div class="like">
<a href="#" class="material-icons active">near_me</a>
<h4>93</h4>
</div>
</div>
</div>
<div class="first">
<div class="image food3">
<h3>900m</h3>
</div>
<div class="description">
<div class="border"></div>
<div class="icon blue">
<a href="#" class="material-icons icon-blue">restaurant</a>
</div>
<p>Fish Kingdom </br> <span>80 5th avenue, new york<span></p>
<div class="like">
<a href="#" class="material-icons">near_me</a>
<h4>12</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
</body></html>
