Restaurant Item

Developer
Rob
Size
10,105 Kb
Views
28,336
  1. Restaurant Item Previews
  2. Restaurant Item HTML Codes
  3. Restaurant Item CSS Codes
  4. Restaurant Item JS Codes

How do I make an restaurant item?

An experiment for listing restaurants. -masonry layout intact. What is a restaurant item? How do you make a restaurant item? This script and codes were developed by Rob on 15 August 2022, Monday.

Restaurant Item Previews
IQ Test

Restaurant Item - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Restaurant Item</title> <meta name="viewport" content="width=device-width"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
/*
.list { width:36%; padding:0 1em 2em 0; position:absolute; top:0; bottom:0; left:0; overflow-y:auto;
}
*/
.hidden { display:none;
}
.sort { float:left; width:100%; margin:1em 0 2em; display:none;
}
.sort ul { float:left; margin:0.5em 1em; padding:0; list-style:none;
}
.sort li { float:left; padding:0.2em 0.4em; margin:0 0.2em; cursor:pointer;
}
.sort li:hover { background:#f09f3b; color:#fff;
}
.list { padding:0; margin:0; width:100%; float:left;	column-count: 3; column-gap:10px; -moz-column-count: 3; -moz-column-gap: 10px; -webkit-column-count: 3; -webkit-column-gap: 10px;
}
.list:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;
}
.item ul, .item p { font-family:'PT Serif', sans-serif; font-size:0.9em;
}
.item { float:left; clear:both; display:inline; width:98%; margin:3% 1%; padding:0 0 2.4em; background-color:#f4f4f4; list-style:none; border-bottom:2px solid #ededed; position:relative; overflow:hidden; -moz-box-shadow: 0px 0px 8px 0px #ccc; -webkit-box-shadow: 0px 0px 8px 0px #ccc; box-shadow: 0px 0px 8px 0px #ccc; -moz-column-break-inside:avoid; -webkit-column-break-inside:avoid; column-break-inside:avoid; page-break-inside: avoid;
}
.item:hover {
}
.item:nth-child(even) { border-top:5px solid #76dde3;
}
.item:nth-child(odd) { border-top:5px solid #f09f3b;
}
.item .top { float:left; width:100%; position:relative; margin-bottom:1em; background:#000; height:280px; -webkit-background-size: cover !important; -moz-background-size: cover !important; -o-background-size: cover !important; background-size: cover !important; -webkit-filter: grayscale(0.2); -moz-filter: grayscale(0.2); -o-filter: grayscale(0.2); filter: grayscale(0.2);
}
.item:hover .top { -webkit-filter: grayscale(0); -moz-filter: grayscale(0); -o-filter: grayscale(0); filter: grayscale(0);
}
.star { position:absolute; top:0; right:7px; padding:4px 3px 0; width:26px; font-size:20px; text-align:center; color:#fff; z-index:2; opacity:0.4; cursor:pointer;
}
.star:hover { opacity:1;
}
.item:nth-child(even) .star.loved { opacity:1; background:#76dde3;
}
.item:nth-child(odd) .star.loved { opacity:1; background:#f09f3b;
}
.open-map .star { display:none;
}
.item:nth-child(even) .star.loved:before { content:''; position:absolute; bottom:-15px; left:0;	width: 0;	height: 0;	border-top: 15px solid #76dde3;	border-right: 15px solid transparent;
}
.item:nth-child(even) .star.loved:after { content:''; position:absolute; bottom:-15px; right:0;	width: 0;	height: 0;	border-top: 15px solid #76dde3;	border-left: 15px solid transparent;
}
.item:nth-child(odd) .star.loved:before { content:''; position:absolute; bottom:-15px; left:0;	width: 0;	height: 0;	border-top: 15px solid #f09f3b;	border-right: 15px solid transparent;
}
.item:nth-child(odd) .star.loved:after { content:''; position:absolute; bottom:-15px; right:0;	width: 0;	height: 0;	border-top: 15px solid #f09f3b;	border-left: 15px solid transparent;
}
.item .headline { position:absolute; bottom:0; width:100%; padding:1em 0.5em 0.5em;
}
.headline a { text-decoration:none;
}
.item h1 { padding:0; margin:0; font-family: 'Maven Pro', sans-serif; font-weight:500; font-size:2em; color:#fff; text-decoration:none;
}
.item:nth-child(even) a:hover h1 { color:#76dde3;
}
.item:nth-child(odd) a:hover h1 { color:#f09f3b;
}
.item h3 { margin:0; font-family: 'Maven Pro', sans-serif; font-weight:400; font-size:1.1em; color:#f2f2f2; margin:-0.2em 0 0;
}
.item:nth-child(even) a:hover h3 { color:#76dde3;
}
.item:nth-child(odd) a:hover h3 { color:#f09f3b;
}
.item .desc { color:#555; margin:1em 0.5em 0;
}
.item ul { color:#777; margin:0.8em 0; list-style:none; padding:0 2em 0 2.5em; font-style:italic;
}
.item ul li:before { content:'- ';
}
.item ul .cost { font-style:normal; font-family:sans-serif; color:#444;
}
.item ul .cost:before { content:'';
}
.map-open { position:absolute; bottom:0; width:100%; text-align:center; background-color:#ededed; color:#26bef0; font-family:'Maven Pro', sans-serif; padding: 0.3em 0; cursor:pointer;
}
.map-open:hover { background:#e9e9e9; padding-bottom:0.8em;
}
.map-close { position:absolute; top:0; right:0; padding:1em; opacity:1; cursor:pointer;
}
.map-close:hover { opacity:0.8;
}
.map-close:before { content:''; position:absolute; top:8px; right:16px; width:4px; height:20px; background:#fff; -webkit-transform: rotate(45deg);
}
.map-close:after { content:''; position:absolute; background:#fff; width:4px; height:20px; top:8px; right:16px; -webkit-transform: rotate(-45deg);
}
.item .address { width:100%; color:#fff; padding:0.4em 0.5em 0.5em; height:6em; position:relative;
}
.item .address p { position:absolute; bottom:0; font-family:'Maven Pro', sans-serif; font-size:1.2em; margin:0 0 0.5em;
}
.address span { clear:left; float:left;
}
.address span:nth-child(2) { font-size:0.8em; color:#f7f7f7;
}
.map-overlay { position:absolute; bottom:0; top:100%; width:100%; z-index:4;
}
.open-map .map-overlay { top:0;
}
.map-wrap { position:absolute; top:6em; bottom:0; width:100%; background:#f4f4f4;
}
.map-wrap iframe { position:relative; width:100%; height:100%; z-index:2;
}
/*
8dd9cd
76dde3
de9948
f09f3b
*/
h1, h3 { -webkit-transition:color .2s ease-in; -moz-transition:color .2s ease-in; -o-transition:color .2s ease-in; transition:color .2s ease-in;
}
img, .map-close, .star { -webkit-transition:opacity .2s ease-in; -moz-transition:opacity .2s ease-in; -o-transition:opacity .2s ease-in; transition:opacity .2s ease-in;}
div { -webkit-transition:background-color .2s ease-in; -moz-transition:background-color .2s ease-in; -o-transition:background-color .2s ease-in; transition:background-color .2s ease-in;}
.map-overlay, .map-open { -webkit-transition:all .3s ease; -moz-transition:all .3s ease; -o-transition:all .3s ease; transition:all .3s ease;}
/*
{ background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.65) 21%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(21%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.65) 21%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.65) 21%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.65) 21%,rgba(0,0,0,0) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.65) 21%,rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 );
}
*/
.item .headline, .address { background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 88%, rgba(0,0,0,0.85) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(88%,rgba(0,0,0,0.85)), color-stop(100%,rgba(0,0,0,0.85))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.85) 88%,rgba(0,0,0,0.85) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.85) 88%,rgba(0,0,0,0.85) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.85) 88%,rgba(0,0,0,0.85) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.85) 88%,rgba(0,0,0,0.85) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#d9000000',GradientType=0 ); /* IE6-9 */
}
#cocolo .top { background: url(http://s3.amazonaws.com/s3.unlike.net/photos/0028/3607/cocolo2small2.2_635x400.jpg) no-repeat top right;
}
#makoto .top { background: url(http://www.makoto-berlin.de/img/home/home_pic01.jpg) no-repeat top left;
}
#kuchi .top { background: url(http://www.kuchi.de/images/bg3.jpg) no-repeat top right;
}
#goko .top { background: url(http://assets0.qypecdn.net/uploads/photos/0364/9466/1334433073569_gallery2.jpg) no-repeat center center;
}
#yumcha .top { background: url(http://www.yumchaheroes.de/images/090616_yumcha_front1jpeg_cr.jpg) no-repeat center center;
}
#yamyam .top { background: url(http://s3-media2.ak.yelpcdn.com/bphoto/bk4yJale4WkHEmdZF8SfQQ/l.jpg) no-repeat center center;
}
#augustiner .top { background: url(http://www.augustiner-braeu-berlin.de/AugustinerGalerie/1.jpg) no-repeat center center;
}
#weihenstephaner .top { background: url(http://www.weihenstephaner-berlin.de/wp-content/uploads/2012/backgrounds/josef_stueberl_2.jpg) no-repeat center center;
}
#maxmoritz .top { background: url(http://www.maxundmoritzberlin.de/raeume/bilder/inhaltraeume_09.jpg) no-repeat center center;
}
#bird .top { background: url(http://s3-media2.ak.yelpcdn.com/bphoto/-InB4PCCgnoZy5jJ_0gJzg/l.jpg) no-repeat center center;
}
#wimbiss .top { background: url(http://assets0.qypecdn.net/uploads/photos/0262/6924/1822533234_gallery2.jpg) no-repeat center center;
}
#mariabonita .top { background: url(http://s3-media2.ak.yelpcdn.com/bphoto/7yth0zyx4REMgYoF49a8VQ/l.jpg) no-repeat center center;
}
@media only screen and (max-width: 850px) and (min-width: 551px) { /* .item { width:48%; } */ .list { column-count:2; -moz-column-count: 2; -webkit-column-count: 2; }
}
@media only screen and (max-width: 550px) { /* .item { width:98%; } */ .list { column-count:1; -moz-column-count: 1; -webkit-column-count: 1; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <link href='http://fonts.googleapis.com/css?family=PT+Serif:400,700,400italic|Maven+Pro:400,500' rel='stylesheet' type='text/css'>
<div class="sort"> <ul class="type"> <li class="asian">asian</li> <li class="german">german</li> <li class="mexican">mexican</li> <li class="american">american</li> </ul>
</div>
<ul class="list" id="container"> <li class="item" id="cocolo" data-type="asian"> <div class="top"> <span class="star">&#9733;</span> <div class="headline"> <a href="http://unlike.net/berlin/food/cocolo"> <h1>Cocolo</h1> <h3>Japanese (Ramen Bar)</h3> </a> </div> </div> <p class="desc"> The best food in Berlin. Small, cramped, and delicious. You have never had ramen like this in the US. Next to Kuchi Mitte. Wonderfully nice staff. </p> <ul class="notes"> <li class="cost">€€</li> <li>Opens at 6pm</li> <li>No reservations</li> <li>More than 4 people? Don't even try</li> </ul> <a class="map-open">view map</a> <div class="map-overlay"> <div class="address"> <a class="map-close" title="close map"></a> <p> <span>GipsStraße 3</span> <span>Mitte</span> </p> </div> <div class="map-wrap">
<iframe class="iframe" frameborder="0" height="0" width="0" scrolling="no" marginheight="0" marginwidth="0" src="" data-src="https://www.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=cocolo+ramen+berlin&amp;aq=&amp;sll=37.0625,-95.677068&amp;sspn=41.95363,79.013672&amp;ie=UTF8&amp;hq=cocolo+ramen&amp;hnear=Berlin,+Germany&amp;t=m&amp;ll=52.52724,13.3992&amp;spn=0.018276,0.036392&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe> <span class="spinner"></span> </div> </div> </li> <li class="item" id="makoto" data-type="asian"> <div class="top"> <span class="star">&#9733;</span> <div class="headline"> <a href="http://www.makoto-berlin.de/"> <h1>Makoto</h1> <h3>Japanese (Ramen Bar)</h3> </a> </div> </div> <p class="desc"> Another ramen bar. Not quite as good as Cocolo, but still very nice. </p> <ul class="notes"> <li class="cost">€-€€</li> <li>Larger selection and more seating</li> <li>No reservations necessary</li> </ul> <a class="map-open">view map</a> <div class="map-overlay"> <div class="address"> <a class="map-close" title="close map"></a> <p> <span>Alte Schönhauser Str. 13</span> <span>Prenzlauer Berg/Mitte</span> </p> </div> <div class="map-wrap">
<iframe class="iframe" frameborder="0" height="0" width="0" scrolling="no" marginheight="0" marginwidth="0" src="" data-src="https://www.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=makoto+Alte+Sch%C3%B6nhauser+Str.+13&amp;aq=&amp;sll=52.528272,13.407741&amp;sspn=0.007898,0.01929&amp;ie=UTF8&amp;hq=makoto+Alte+Sch%C3%B6nhauser+Str.+13&amp;hnear=&amp;t=m&amp;cid=13488581870447392001&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe> <span class="spinner"></span> </div> </div> </li> <li class="item" id="kuchi" data-type="asian"> <div class="top"> <span class="star">&#9733;</span> <div class="headline"> <a href="http://www.kuchi.de/"> <h1>Kuchi Mitte</h1> <h3>Japanese (Sushi)</h3> </a> </div> </div> <p class="desc"> Excellent sushi and yaki-skewers. Also try the duck-noodle soup and the soba noodles. </p> <ul class="notes"> <li class="cost">€€€</li> <li>Reservations are sometimes necessary in peak hours</li> <li>On the more expensive side</li> </ul> <a class="map-open">view map</a> <div class="map-overlay"> <div class="address"> <a class="map-close" title="close map"></a> <p> <span>Gipsstraße 3</span> <span>Mitte</span> </p> </div> <div class="map-wrap">
<iframe class="iframe" frameborder="0" height="0" width="0" scrolling="no" marginheight="0" marginwidth="0" src="" data-src="https://www.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Kuchi+Mitte,+Gipsstra%C3%9Fe,+Berlin,+Germany&amp;aq=0&amp;oq=kuchi+mitte&amp;sll=52.52756,13.408213&amp;sspn=0.003949,0.009645&amp;ie=UTF8&amp;hq=Kuchi&amp;hnear=Gipsstra%C3%9Fe,+10119+Berlin,+Germany&amp;t=m&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe> <span class="spinner"></span> </div> </div> </li> <li class="item" id="goko" data-type="asian"> <div class="top"> <span class="star">&#9733;</span> <div class="headline"> <a href="http://www.go-ko.com/site_deutsch/index_intro.html"> <h1>Goko</h1> <h3>Japanese (Sushi)</h3> </a> </div> </div> <p class="desc"> Smaller place, but with good sushi and nice specials. </p> <ul class="notes"> <li class="cost">€€-€€€</li> <li>Reservations are not generally needed</li> <li>Slightly cheaper than Kuchi Mitte</li> </ul> <a class="map-open">view map</a> <div class="map-overlay"> <div class="address"> <a class="map-close" title="close map"></a> <p> <span>Neue Schönhauser Straße 12</span> <span>Mitte</span> </p> </div> <div class="map-wrap">
<iframe class="iframe" frameborder="0" height="0" width="0" scrolling="no" marginheight="0" marginwidth="0" src="" data-src="https://www.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Goko,+Neue+Sch%C3%B6nhauser+Stra%C3%9Fe,+Berlin,+Germany&amp;aq=0&amp;oq=goko&amp;sll=52.527236,13.399284&amp;sspn=0.007898,0.01929&amp;ie=UTF8&amp;hq=Goko,&amp;hnear=Neue+Sch%C3%B6nhauser+Stra%C3%9Fe,+10178+Berlin,+Germany&amp;t=m&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe> <span class="spinner"></span> </div> </div> </li> <li class="item" id="yumcha" data-type="asian"> <div class="top"> <span class="star">&#9733;</span> <div class="headline"> <a href="http://www.yumchaheroes.de/"> <h1>Yumcha Heroes</h1> <h3>Chinese (Dumplings)</h3> </a> </div> </div> <p class="desc"> Traditional Chinese dumplings&mdash;delicious. Try the Shanghai dumpling. </p> <ul class="notes"> <li class="cost">€€-€€€</li> <li>Definitely reserve a place if more than 2 people and during peak hours</li> </ul> <a class="map-open">view map</a> <div class="map-overlay"> <div class="address"> <a class="map-close" title="close map"></a> <p> <span>Weinbergsweg 8</span> <span>Mitte</span> </p> </div> <div class="map-wrap">
<iframe class="iframe" frameborder="0" height="0" width="0" scrolling="no" marginheight="0" marginwidth="0" src="" data-src="https://www.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Yumcha+Heroes,+Weinbergsweg,+Berlin,+Germany&amp;aq=0&amp;oq=yumcha+he&amp;sll=52.525896,13.404243&amp;sspn=0.007898,0.01929&amp;ie=UTF8&amp;hq=Yumcha+Heroes,&amp;hnear=Weinbergsweg,+10119+Berlin,+Germany&amp;t=m&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe> </div> </div> </li> <li class="item" id="yamyam" data-type="asian"> <div class="top"> <span class="star">&#9733;</span> <div class="headline"> <a href="http://www.yamyam-berlin.de/"> <h1>Yamyam</h1> <h3>Korean</h3> </a> </div> </div> <p class="desc"> Korean food&mdash;try the Bibimbab! Great if you need something spicy. </p> <ul class="notes"> <li class="cost">€€</li> <li>Somewhat small&mdash;reservations necessary for large groups if at peak hours</li> </ul> <a class="map-open">view map</a> <div class="map-overlay"> <div class="address"> <a class="map-close" title="close map"></a> <p> <span>Alte Schönhauser Straße 6</span> <span>Mitte</span> </p> </div> <div class="map-wrap">
<iframe class="iframe" frameborder="0" height="0" width="0" scrolling="no" marginheight="0" marginwidth="0" src="" data-src="https://www.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Yamyam+Berlin,+Alte+Sch%C3%B6nhauser+Stra%C3%9Fe,+Berlin,+Germany&amp;aq=0&amp;oq=yamyam&amp;sll=52.532357,13.402719&amp;sspn=0.007897,0.01929&amp;ie=UTF8&amp;hq=Yamyam&amp;hnear=Alte+Sch%C3%B6nhauser+Stra%C3%9Fe,+Berlin,+Germany&amp;t=m&amp;cid=12724045971918258912&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe> <span class="spinner"></span> </div> </div> </li> <li class="item" id="augustiner" data-type="german"> <div class="top"> <span class="star">&#9733;</span> <div class="headline"> <a href="http://www.augustiner-braeu-berlin.de/"> <h1>Augustiner</h1> <h3>German</h3> </a> </div> </div> <p class="desc"> Great Bavarian-style German food and excellent beer (Edelstoff!). Am Gendarmenmarkt. </p> <ul class="notes"> <li class="cost">€€-€€€</li> <li>Reservations are sometimes necessary in peak hours</li> </ul> <a class="map-open">view map</a> <div class="map-overlay"> <div class="address"> <a class="map-close" title="close map"></a> <p> <span>Charlottenstraße 55</span> <span>Mitte</span> </p> </div> <div class="map-wrap">
<iframe class="iframe" frameborder="0" height="0" width="0" scrolling="no" marginheight="0" marginwidth="0" src="" data-src="https://maps.google.com/maps?ie=UTF8&amp;q=augustiner+am+gendarmenmarkt&amp;fb=1&amp;hq=augustiner+am+gendarmenmarkt&amp;cid=0,0,10498042889565214697&amp;hnear=&amp;t=m&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe> <span class="spinner"></span> </div> </div> </li> <li class="item" id="maxmoritz" data-type="german"> <div class="top"> <span class="star">&#9733;</span> <div class="headline"> <a href="http://www.maxundmoritzberlin.de/"> <h1>Max and Moritz</h1> <h3>German</h3> </a> </div> </div> <p class="desc"> Excellent German Wirtshaus&mdash;not the typical Bavarian fare. </p> <ul class="notes"> <li class="cost">€€</li> <li>Very nice atmosphere</li> <li>Not too expensive</li> </ul> <a class="map-open">view map</a> <div class="map-overlay"> <div class="address"> <a class="map-close" title="close map"></a> <p> <span>Oranienstraße 162</span> <span>Kreuzberg</span> </p> </div> <div class="map-wrap">
<iframe class="iframe" frameborder="0" height="0" width="0" scrolling="no" marginheight="0" marginwidth="0" src="" data-src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=max+und+moritz+wirtshaus+berlin&amp;aq=&amp;sll=37.0625,-95.677068&amp;sspn=41.95363,79.013672&amp;ie=UTF8&amp;hq=max+und+moritz+wirtshaus&amp;hnear=Berlin,+Germany&amp;t=m&amp;cid=7633028295984220267&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe> <span class="spinner"></span> </div> </div> </li> <li class="item" id="weihenstephaner" data-type="german"> <div class="top"> <span class="star">&#9733;</span> <div class="headline"> <a href="http://www.weihenstephaner-berlin.de/"> <h1>Weihenstephaner</h1> <h3>German</h3> </a> </div> </div> <p class="desc"> Nice German (Bavarian) style food, outside seating, and a great atmosphere. Good beer! </p> <ul class="notes"> <li class="cost">€€</li> <li>Reservations are generally not needed when outside seating is available</li> </ul> <a class="map-open">view map</a> <div class="map-overlay"> <div class="address"> <a class="map-close" title="close map"></a> <p> <span>Charlottenstraße 55</span> <span>Mitte</span> </p> </div> <div class="map-wrap">
<iframe class="iframe" frameborder="0" height="0" width="0" scrolling="no" marginheight="0" marginwidth="0" src="" data-src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Weihenstephaner,+Neue+Promenade,+Berlin,+Germany&amp;aq=0&amp;oq=weihen&amp;sll=52.515033,13.391111&amp;sspn=0.0079,0.01929&amp;ie=UTF8&amp;hq=Weihenstephaner,&amp;hnear=Neue+Promenade,+10178+Berlin,+Germany&amp;t=m&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe> <span class="spinner"></span> </div> </div> </li> <li class="item" id="bird" data-type="american"> <div class="top"> <span class="star">&#9733;</span> <div class="headline"> <a href="http://www.thebirdinberlin.com/"> <h1>The Bird</h1> <h3>American (burgers/steaks)</h3> </a> </div> </div> <p class="desc"> BEST BURGERS. Excellent steaks, wings, burgers. Chili-cheese fries. Very nice staff. </p> <ul class="notes"> <li class="cost">€€</li> <li>Very well-known&mdash;make a reservation!</li> <li>Or sit at the bar and enjoy Angry Hour (2 for 1 beers from 6-8pm)</li> <li>Just speak English&mdash;don't bother with German here</li> </ul> <a class="map-open">view map</a> <div class="map-overlay"> <div class="address"> <a class="map-close" title="close map"></a> <p> <span>Am Falkplatz 5</span> <span>Prenz'l Berg</span> </p> </div> <div class="map-wrap">
<iframe class="iframe" frameborder="0" height="0" width="0" scrolling="no" marginheight="0" marginwidth="0" src="" data-src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=the+bird&amp;aq=&amp;sll=52.502691,13.415852&amp;sspn=0.015805,0.038581&amp;ie=UTF8&amp;hq=the+bird&amp;hnear=&amp;t=m&amp;cid=6993597605716290502&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe> <span class="spinner"></span> </div> </div> </li> <li class="item" id="wimbiss" data-type="???"> <div class="top"> <span class="star">&#9733;</span> <div class="headline"> <a href="http://www.w-derimbiss.de/"> <h1>W-Imbiss</h1> <h3>??? (vegetarian naan and wraps)</h3> </a> </div> </div> <p class="desc"> Great food. Excellent salads, Naan pizzas, wraps, even burritos and quesadillas. Add salmon to anything. </p> <ul class="notes"> <li class="cost">€-€€</li> <li>Small place, but generally not over-crowded.</li> <li>Walk-in type ordering&mdash;no reservations</li> </ul> <a class="map-open">view map</a> <div class="map-overlay"> <div class="address"> <a class="map-close" title="close map"></a> <p> <span>Kastanienallee 49</span> <span>Prenz'l Berg/Mitte</span> </p> </div> <div class="map-wrap">
<iframe class="iframe" frameborder="0" height="0" width="0" scrolling="no" marginheight="0" marginwidth="0" src="" data-src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=W-Imbiss,+Kastanienallee,+Berlin,+Germany&amp;aq=0&amp;oq=w-imbiss&amp;sll=52.543973,13.405466&amp;sspn=0.007895,0.01929&amp;ie=UTF8&amp;hq=W-Imbiss,&amp;hnear=Kastanienallee,+Berlin,+Germany&amp;t=m&amp;cid=9944147158519289514&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe> <span class="spinner"></span> </div> </div> </li> <li class="item" id="mariabonita" data-type="mexican"> <div class="top"> <span class="star">&#9733;</span> <div class="headline"> <a href="http://mariabonitaberlin.wordpress.com/"> <h1>Maria Bonita</h1> <h3>Mexican (tacos)</h3> </a> </div> </div> <p class="desc"> Come here when you need Mexican food. Not tex-mex, but delicious tacos and burritos. </p> <ul class="notes"> <li class="cost">€-€€</li> <li>Tiny place with outside seating</li> <li>Walk-in type ordering</li> <li>Corona!</li> </ul> <a class="map-open">view map</a> <div class="map-overlay"> <div class="address"> <a class="map-close" title="close map"></a> <p> <span>Danziger Straße 33</span> <span>Prenz'l Berg</span> </p> </div> <div class="map-wrap">
<iframe class="iframe" frameborder="0" height="0" width="0" scrolling="no" marginheight="0" marginwidth="0" src="" data-src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Maria+Bonita,+Danziger+Stra%C3%9Fe,+Berlin,+Germany&amp;aq=0&amp;oq=maria+boni&amp;sll=52.534668,13.405445&amp;sspn=0.007897,0.01929&amp;ie=UTF8&amp;hq=Maria+Bonita,&amp;hnear=Danziger+Stra%C3%9Fe,+Berlin,+Germany&amp;t=m&amp;z=15&amp;iwloc=A&amp;output=embed"></iframe> <span class="spinner"></span> </div> </div> </li> </ul> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/masonry/3.1.1/masonry.pkgd.js'></script> <script src="js/index.js"></script>
</body>
</html>

Restaurant Item - Script Codes CSS Codes

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
/*
.list { width:36%; padding:0 1em 2em 0; position:absolute; top:0; bottom:0; left:0; overflow-y:auto;
}
*/
.hidden { display:none;
}
.sort { float:left; width:100%; margin:1em 0 2em; display:none;
}
.sort ul { float:left; margin:0.5em 1em; padding:0; list-style:none;
}
.sort li { float:left; padding:0.2em 0.4em; margin:0 0.2em; cursor:pointer;
}
.sort li:hover { background:#f09f3b; color:#fff;
}
.list { padding:0; margin:0; width:100%; float:left;	column-count: 3; column-gap:10px; -moz-column-count: 3; -moz-column-gap: 10px; -webkit-column-count: 3; -webkit-column-gap: 10px;
}
.list:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;
}
.item ul, .item p { font-family:'PT Serif', sans-serif; font-size:0.9em;
}
.item { float:left; clear:both; display:inline; width:98%; margin:3% 1%; padding:0 0 2.4em; background-color:#f4f4f4; list-style:none; border-bottom:2px solid #ededed; position:relative; overflow:hidden; -moz-box-shadow: 0px 0px 8px 0px #ccc; -webkit-box-shadow: 0px 0px 8px 0px #ccc; box-shadow: 0px 0px 8px 0px #ccc; -moz-column-break-inside:avoid; -webkit-column-break-inside:avoid; column-break-inside:avoid; page-break-inside: avoid;
}
.item:hover {
}
.item:nth-child(even) { border-top:5px solid #76dde3;
}
.item:nth-child(odd) { border-top:5px solid #f09f3b;
}
.item .top { float:left; width:100%; position:relative; margin-bottom:1em; background:#000; height:280px; -webkit-background-size: cover !important; -moz-background-size: cover !important; -o-background-size: cover !important; background-size: cover !important; -webkit-filter: grayscale(0.2); -moz-filter: grayscale(0.2); -o-filter: grayscale(0.2); filter: grayscale(0.2);
}
.item:hover .top { -webkit-filter: grayscale(0); -moz-filter: grayscale(0); -o-filter: grayscale(0); filter: grayscale(0);
}
.star { position:absolute; top:0; right:7px; padding:4px 3px 0; width:26px; font-size:20px; text-align:center; color:#fff; z-index:2; opacity:0.4; cursor:pointer;
}
.star:hover { opacity:1;
}
.item:nth-child(even) .star.loved { opacity:1; background:#76dde3;
}
.item:nth-child(odd) .star.loved { opacity:1; background:#f09f3b;
}
.open-map .star { display:none;
}
.item:nth-child(even) .star.loved:before { content:''; position:absolute; bottom:-15px; left:0;	width: 0;	height: 0;	border-top: 15px solid #76dde3;	border-right: 15px solid transparent;
}
.item:nth-child(even) .star.loved:after { content:''; position:absolute; bottom:-15px; right:0;	width: 0;	height: 0;	border-top: 15px solid #76dde3;	border-left: 15px solid transparent;
}
.item:nth-child(odd) .star.loved:before { content:''; position:absolute; bottom:-15px; left:0;	width: 0;	height: 0;	border-top: 15px solid #f09f3b;	border-right: 15px solid transparent;
}
.item:nth-child(odd) .star.loved:after { content:''; position:absolute; bottom:-15px; right:0;	width: 0;	height: 0;	border-top: 15px solid #f09f3b;	border-left: 15px solid transparent;
}
.item .headline { position:absolute; bottom:0; width:100%; padding:1em 0.5em 0.5em;
}
.headline a { text-decoration:none;
}
.item h1 { padding:0; margin:0; font-family: 'Maven Pro', sans-serif; font-weight:500; font-size:2em; color:#fff; text-decoration:none;
}
.item:nth-child(even) a:hover h1 { color:#76dde3;
}
.item:nth-child(odd) a:hover h1 { color:#f09f3b;
}
.item h3 { margin:0; font-family: 'Maven Pro', sans-serif; font-weight:400; font-size:1.1em; color:#f2f2f2; margin:-0.2em 0 0;
}
.item:nth-child(even) a:hover h3 { color:#76dde3;
}
.item:nth-child(odd) a:hover h3 { color:#f09f3b;
}
.item .desc { color:#555; margin:1em 0.5em 0;
}
.item ul { color:#777; margin:0.8em 0; list-style:none; padding:0 2em 0 2.5em; font-style:italic;
}
.item ul li:before { content:'- ';
}
.item ul .cost { font-style:normal; font-family:sans-serif; color:#444;
}
.item ul .cost:before { content:'';
}
.map-open { position:absolute; bottom:0; width:100%; text-align:center; background-color:#ededed; color:#26bef0; font-family:'Maven Pro', sans-serif; padding: 0.3em 0; cursor:pointer;
}
.map-open:hover { background:#e9e9e9; padding-bottom:0.8em;
}
.map-close { position:absolute; top:0; right:0; padding:1em; opacity:1; cursor:pointer;
}
.map-close:hover { opacity:0.8;
}
.map-close:before { content:''; position:absolute; top:8px; right:16px; width:4px; height:20px; background:#fff; -webkit-transform: rotate(45deg);
}
.map-close:after { content:''; position:absolute; background:#fff; width:4px; height:20px; top:8px; right:16px; -webkit-transform: rotate(-45deg);
}
.item .address { width:100%; color:#fff; padding:0.4em 0.5em 0.5em; height:6em; position:relative;
}
.item .address p { position:absolute; bottom:0; font-family:'Maven Pro', sans-serif; font-size:1.2em; margin:0 0 0.5em;
}
.address span { clear:left; float:left;
}
.address span:nth-child(2) { font-size:0.8em; color:#f7f7f7;
}
.map-overlay { position:absolute; bottom:0; top:100%; width:100%; z-index:4;
}
.open-map .map-overlay { top:0;
}
.map-wrap { position:absolute; top:6em; bottom:0; width:100%; background:#f4f4f4;
}
.map-wrap iframe { position:relative; width:100%; height:100%; z-index:2;
}
/*
8dd9cd
76dde3
de9948
f09f3b
*/
h1, h3 { -webkit-transition:color .2s ease-in; -moz-transition:color .2s ease-in; -o-transition:color .2s ease-in; transition:color .2s ease-in;
}
img, .map-close, .star { -webkit-transition:opacity .2s ease-in; -moz-transition:opacity .2s ease-in; -o-transition:opacity .2s ease-in; transition:opacity .2s ease-in;}
div { -webkit-transition:background-color .2s ease-in; -moz-transition:background-color .2s ease-in; -o-transition:background-color .2s ease-in; transition:background-color .2s ease-in;}
.map-overlay, .map-open { -webkit-transition:all .3s ease; -moz-transition:all .3s ease; -o-transition:all .3s ease; transition:all .3s ease;}
/*
{ background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.65) 21%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(21%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.65) 21%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.65) 21%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.65) 21%,rgba(0,0,0,0) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.65) 21%,rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 );
}
*/
.item .headline, .address { background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 88%, rgba(0,0,0,0.85) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(88%,rgba(0,0,0,0.85)), color-stop(100%,rgba(0,0,0,0.85))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.85) 88%,rgba(0,0,0,0.85) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.85) 88%,rgba(0,0,0,0.85) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.85) 88%,rgba(0,0,0,0.85) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.85) 88%,rgba(0,0,0,0.85) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#d9000000',GradientType=0 ); /* IE6-9 */
}
#cocolo .top { background: url(http://s3.amazonaws.com/s3.unlike.net/photos/0028/3607/cocolo2small2.2_635x400.jpg) no-repeat top right;
}
#makoto .top { background: url(http://www.makoto-berlin.de/img/home/home_pic01.jpg) no-repeat top left;
}
#kuchi .top { background: url(http://www.kuchi.de/images/bg3.jpg) no-repeat top right;
}
#goko .top { background: url(http://assets0.qypecdn.net/uploads/photos/0364/9466/1334433073569_gallery2.jpg) no-repeat center center;
}
#yumcha .top { background: url(http://www.yumchaheroes.de/images/090616_yumcha_front1jpeg_cr.jpg) no-repeat center center;
}
#yamyam .top { background: url(http://s3-media2.ak.yelpcdn.com/bphoto/bk4yJale4WkHEmdZF8SfQQ/l.jpg) no-repeat center center;
}
#augustiner .top { background: url(http://www.augustiner-braeu-berlin.de/AugustinerGalerie/1.jpg) no-repeat center center;
}
#weihenstephaner .top { background: url(http://www.weihenstephaner-berlin.de/wp-content/uploads/2012/backgrounds/josef_stueberl_2.jpg) no-repeat center center;
}
#maxmoritz .top { background: url(http://www.maxundmoritzberlin.de/raeume/bilder/inhaltraeume_09.jpg) no-repeat center center;
}
#bird .top { background: url(http://s3-media2.ak.yelpcdn.com/bphoto/-InB4PCCgnoZy5jJ_0gJzg/l.jpg) no-repeat center center;
}
#wimbiss .top { background: url(http://assets0.qypecdn.net/uploads/photos/0262/6924/1822533234_gallery2.jpg) no-repeat center center;
}
#mariabonita .top { background: url(http://s3-media2.ak.yelpcdn.com/bphoto/7yth0zyx4REMgYoF49a8VQ/l.jpg) no-repeat center center;
}
@media only screen and (max-width: 850px) and (min-width: 551px) { /* .item { width:48%; } */ .list { column-count:2; -moz-column-count: 2; -webkit-column-count: 2; }
}
@media only screen and (max-width: 550px) { /* .item { width:98%; } */ .list { column-count:1; -moz-column-count: 1; -webkit-column-count: 1; }
}

Restaurant Item - Script Codes JS Codes

$(document).ready(function() { /* function masonry() { //masonry
var container = document.querySelector('#container');
var msnry = new Masonry( container, { itemSelector: '.item', columnWidth: '.item'
}); }; masonry(); */ //filter /* $('.sort li').click(function() { var type = $(this).attr('class'); //alert(type); $('.list > li').each(function() { var item = $(this); var cat = item.data('type'); //alert(cat); if(cat == type) { item.addClass('hidden').removeClass('item'); } else { item.removeClass('hidden').addClass('item'); } }); masonry(); }); */ //get and set favorites from localstorage $('.item').each(function() { var itemId = $(this).attr('id'); var starState = localStorage.getItem(itemId); $('#' + itemId).find('.star').addClass(starState); }); $('.map-open').click(function() { $(this).closest('.item').addClass('open-map'); var i = $(this).parent().find('.iframe'); if(i.attr('src') == "") { i.attr("src", i.data("src")); }; }); $('.map-close').click(function() { $(this).closest('.item').removeClass('open-map'); }); $('.star').click(function() { var star = $(this); var itemId = star.closest('.item').attr('id'); if (star.hasClass('loved')) { star.removeClass('loved'); localStorage.setItem(itemId, ''); } else { star.addClass('loved'); localStorage.setItem(itemId, 'loved'); }; });
});
Restaurant Item - Script Codes
Restaurant Item - Script Codes
Home Page Home
Developer Rob
Username robooneus
Uploaded August 15, 2022
Rating 3
Size 10,105 Kb
Views 28,336
Do you need developer help for Restaurant Item?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Rob (robooneus) Script Codes
Name
Flip Button
Responsive Design Demo
Cards bkup
Content Expander
A Pen by Rob
Mini-search filter
Useless RPG
Scroll Arrow - keep hidden
Simple Page with Side Menu
Half-radial menu
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!