"shop mobile"
Bootstrap 3.0.0 Snippet by evarevirus

<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>

Related: See More


Questions / Comments: