<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-md-10" role="tablist">
<!-- Menu Category / Entrée -->
<div id="Entree" class="menu-category">
<div class="menu-category-title collapse-toggle collapsed" role="tab" data-target="#menuEntree" data-toggle="collapse" aria-expanded="false">
<div class="bg-image" style="background-image: url('http://restaurant-ovelix.com/assets/img/photos/menu-title-entree.jpg');"></div>
<h2 class="title">Nos entrées</h2>
</div>
<div id="menuEntree" class="menu-category-content collapse" aria-expanded="false" style="">
<!-- Menu Item -->
<div class="menu-item menu-list-item">
<div class="row">
<div class="col-sm-6">
<h6>Carotte à l'orange</h6>
</div>
<div class="col-sm-6 text-right">
<span class="text-muted">PRIX :</span><span> 12 €</span>
</div>
</div>
</div>
<!-- Menu Item -->
<div class="menu-item menu-list-item">
<div class="row">
<div class="col-sm-6">
<h6>Zaâlouk en salade</h6>
</div>
<div class="col-sm-6 text-right">
<span class="text-muted">PRIX :</span><span> 12 €</span>
</div>
</div>
</div>
<!-- Menu Item -->
<div class="menu-item menu-list-item">
<div class="row">
<div class="col-sm-6">
<h6>Omelette</h6>
<span class="text-muted">Fines herbes ou champignons ou autre choix</span>
</div>
<div class="col-sm-6 text-right">
<span class="text-muted">PRIX :</span><span> 12 €</span>
</div>
</div>
</div>
<!-- Menu Item -->
<div class="menu-item menu-list-item">
<div class="row">
<div class="col-sm-6">
<h6>Soupe vietnamienne</h6>
</div>
<div class="col-sm-6 text-right">
<span class="text-muted">PRIX :</span><span> 12 €</span>
</div>
</div>
</div>
<!-- Menu Item -->
<div class="menu-item menu-list-item">
<div class="row">
<div class="col-sm-6">
<h6>Crème de légumes</h6>
</div>
<div class="col-sm-6 text-right">
<span class="text-muted">PRIX :</span><span> 12.5 €</span>
</div>
</div>
</div>
<!-- Menu Item -->
<div class="menu-item menu-list-item">
<div class="row">
<div class="col-sm-6">
<h6>Nem saïgonnais</h6>
<span class="text-muted">Kefta ou crevette</span>
</div>
<div class="col-sm-6 text-right">
<span class="text-muted">PRIX :</span><span> 14.5 €</span>
</div>
</div>
</div>
<!-- Menu Item -->
<div class="menu-item menu-list-item">
<div class="row">
<div class="col-sm-6">
<h6>Carpaccio des prés</h6>
<span class="text-muted">Fines lamelles de viande de boeuf, copeau de parmesan, pistou, salade roquette</span>
</div>
<div class="col-sm-6 text-right">
<span class="text-muted">PRIX :</span><span> 14.5 €</span>
</div>
</div>
</div>
</div>
</div>
<!-- Menu Category / Salades -->
<div id="Salade" class="menu-category">
<div class="menu-category-title collapse-toggle collapsed" role="tab" data-target="#menuSalade" data-toggle="collapse" aria-expanded="false">
<div class="bg-image" style="background-image: url('http://restaurant-ovelix.com/assets/img/photos/ovelix-menu-salade.jpg');"></div>
<h2 class="title">Salades composées</h2>
</div>
<div id="menuSalade" class="menu-category-content collapse" aria-expanded="false" style="">
<!-- Menu Item -->
<div class="menu-item menu-list-item">
<div class="row">
<div class="col-sm-6">
<h6>Salade niçoise</h6>
</div>
<div class="col-sm-6 text-right">
<span class="text-muted">PRIX :</span><span> 12 €</span>
</div>
</div>
</div>
<!-- Menu Item -->
<div class="menu-item menu-list-item">
<div class="row">
<div class="col-sm-6">
<h6>Salade marocaine</h6>
</div>
<div class="col-sm-6 text-right">
<span class="text-muted">PRIX :</span><span> 12 €</span>
</div>
</div>
</div>
<!-- Menu Item -->
<div class="menu-item menu-list-item">
<div class="row">
<div class="col-sm-6">
<h6>Salade bergère</h6>
<span class="text-muted">Croutons de chèvre gratinés sur mesclun de salade rehaussé de vinaigre à la framboise et miel</span>
</div>
<div class="col-sm-6 text-right">
<span class="text-muted">PRIX :</span> 12 €</span>
</div>
</div>
</div>
<!-- Menu Item -->
<div class="menu-item menu-list-item">
<div class="row">
<div class="col-sm-6">
<h6>Salade Thaï</h6>
<span class="text-muted">Crevettes, poulet, maïs, amandes grillés sur une salade de choux blanc, carotte et laitue, sauce asiatique</span>
</div>
<div class="col-sm-6 text-right">
<span class="text-muted">PRIX :</span><span> 12 €</span>
</div>
</div>
</div>
<!-- Menu Item -->
<div class="menu-item menu-list-item">
<div class="row">
<div class="col-sm-6">
<h6>Salade César</h6>
<span class="text-muted">Poulet mariné rôtis ou petit gambas, salade romaine, croutons, sauce au parmesan</span>
</div>
<div class="col-sm-6 text-right">
<span class="text-muted">PRIX :</span><span> 12 €</span>
</div>
</div>
</div>
<!-- Menu Item -->
<div class="menu-item menu-list-item">
<div class="row">
<div class="col-sm-6">
<h6>Salade niçoise tradition</h6>
<span class="text-muted">Mesclun, basilic frais, oeufs durs, romaine, poivron vert, thon, anchois, olive noir, pomme de terre et haricot vert</span>
</div>
<div class="col-sm-6 text-right">
<span class="text-muted">PRIX :</span><span> 12 €</span>
</div>
</div>
</div>
<!-- Menu Item -->
<div class="menu-item menu-list-item">
<div class="row">
<div class="col-sm-6">
<h6>Salade Caprice</h6>
<span class="text-muted">Tomate, mozzarella, basilic le tout rehaussé dune sauce au pistou</span>
</div>
<div class="col-sm-6 text-right">
<span class="text-muted">PRIX :</span><span> 12 €</span>
</div>
</div>
</div>
</div>
</div>
<!-- Menu Category / Sandwich -->
<div id="Sandwich" class="menu-category">
<div class="menu-category-title collapse-toggle" role="tab" data-target="#menuSandwich" data-toggle="collapse" aria-expanded="false">
<div class="bg-image" style="background-image: url('http://restaurant-ovelix.com/assets/img/photos/menu-title-burgers.jpg');"></div>
<h2 class="title">Sandwiches</h2>
</div>
<div id="menuSandwich" class="menu-category-content collapse">
<!-- Menu Item -->
<div class="menu-item menu-list-item">
<div class="row">
<div class="col-sm-6">
<h6>Hamburger au choix</h6>
</div>
<div class="col-sm-6 text-right">
<span class="text-muted">PRIX :</span> 8.5 €</span>
</div>
</div>
</div>
<!-- Menu Item -->
<div class="menu-item menu-list-item">
<div class="row">
<div class="col-sm-6">
<h6>Sandwich</h6>
<span class="text-muted">Kefta ou viande</span>
</div>
<div class="col-sm-6 text-right">
<span class="text-muted">PRIX :</span> 5.5 €</span>
</div>
</div>
</div>
<!-- Menu Item -->
<div class="menu-item menu-list-item">
<div class="row">
<div class="col-sm-6">
<h6>Sandwich</h6>
<span class="text-muted">Poulet ou fromage</span>
</div>
<div class="col-sm-6 text-right">
<span class="text-muted">PRIX :</span> 5.5 €</span>
</div>
</div>
</div>
</div>
</div>
<!-- Menu Category / Pâtes -->
<div id="Pate" class="menu-category">
<div class="menu-category-title collapse-toggle" role="tab" data-target="#menuPate" data-toggle="collapse" aria-expanded="false">
<div class="bg-image" style="background-image: url('http://restaurant-ovelix.com/assets/img/photos/menu-title-pasta.jpg');"></div>
<h2 class="title">Pâtes</h2>
</div>
<div id="menuPate" class="menu-category-content collapse">
<!-- Menu Item -->
<div class="menu-item menu-list-item">
<div class="row">
<div class="col-sm-6">
<h6>Penné aux fruits de mer</h6>
</div>
<div class="col-sm-6 text-right">
<span class="text-muted">PRIX :</span><span> 16.5 €</span>
</div>
</div>
</div>
<!-- Menu Item -->
<div class="menu-item menu-list-item">
<div class="row">
<div class="col-sm-6">
<h6>Spaghettis bolognaise</h6>
</div>
<div class="col-sm-6 text-right">
<span class="text-muted">PRIX :</span><span> 12.5 €</span>
</div>
</div>
</div>
<!-- Menu Item -->
<div class="menu-item menu-list-item">
<div class="row">
<div class="col-sm-6">
<h6>Tagliatelle au pistou</h6>
</div>
<div class="col-sm-6 text-right">
<span class="text-muted">PRIX :</span><span> 12.5 €</span>
</div>
</div>
</div>
<!-- Menu Item -->
<div class="menu-item menu-list-item">
<div class="row">
<div class="col-sm-6">
<h6>Lazagne au four</h6>
</div>
<div class="col-sm-6 text-right">
<span class="text-muted">PRIX :</span><span> 12.5 €</span>
</div>
</div>
</div>
</div>
</div>
<!-- Menu Category / Tajine -->
<div id="Tajine" class="menu-category">
<div class="menu-category-title collapse-toggle" role="tab" data-target="#menuTajine" data-toggle="collapse" aria-expanded="false">
<div class="bg-image" style="background-image: url('http://restaurant-ovelix.com/assets/img/photos/ovelix-menu-tajine.png');"></div>
<h2 class="title">Tajines</h2>
</div>
<div id="menuTajine" class="menu-category-content collapse">
<!-- Menu Item -->
<div class="menu-item menu-list-item">
<div class="row">
<div class="col-sm-6">
<h6>Tajine de boeuf aux légumes</h6>
</div>
<div class="col-sm-6 text-right">
<span class="text-muted">PRIX :</span><span> 12 €</span>
</div>
</div>
</div>
<!-- Menu Item -->
<div class="menu-item menu-list-item">
<div class="row">
<div class="col-sm-6">
<h6>Tajine de boeuf aux fruits secs</h6>
</div>
<div class="col-sm-6 text-right">
<span class="text-muted">PRIX :</span><span> 12 €</span>
</div>
</div>
</div>
<!-- Menu Item -->
<div class="menu-item menu-list-item">
<div class="row">
<div class="col-sm-6">
<h6>Tajine de poulet aux poires</h6>
</div>
<div class="col-sm-6 text-right">
<span class="text-muted">PRIX :</span><span> 12 €</span>
</div>
</div>
</div>
<!-- Menu Item -->
<div class="menu-item menu-list-item">
<div class="row">
<div class="col-sm-6">
<h6>Tajine de poulet au citron</h6>
</div>
<div class="col-sm-6 text-right">
<span class="text-muted">PRIX :</span><span> 12 €</span>
</div>
</div>
</div>
<!-- Menu Item -->
<div class="menu-item menu-list-item">
<div class="row">
<div class="col-sm-6">
<h6>Tajine de kefta aux oeufs</h6>
</div>
<div class="col-sm-6 text-right">
<span class="text-muted">PRIX :</span><span> 12 €</span>
</div>
</div>
</div>
</div>
</div>
<!-- Menu Category / Viandes -->
<div id="Viande" class="menu-category">
<div class="menu-category-title collapse-toggle" role="tab" data-target="#menuViande" data-toggle="collapse" aria-expanded="false">
<div class="bg-image" style="background-image: url('http://restaurant-ovelix.com/assets/img/photos/ovalix-menu-viande.jpg');"></div>
<h2 class="title">Viandes</h2>
</div>
<div id="menuViande" class="menu-category-content collapse">
<!-- Menu Item -->
<div class="menu-item menu-list-item">
<div class="row">
<div class="col-sm-6">
<h6>Brochettes de boeuf aux herbes de l'Atlas</h6>
</div>
<div class="col-sm-6 text-right">
<span class="text-muted">PRIX :</span><span> 16.5 €</span>
</div>
</div>
</div>
<!-- Menu Item -->
<div class="menu-item menu-list-item">
<div class="row">
<div class="col-sm-6">
<h6>Brochettes de poulet mariné</h6>
</div>
<div class="col-sm-6 text-right">
<span class="text-muted">PRIX :</span><span> 16.5 €</span>
</div>
</div>
</div>
<!-- Menu Item -->
<div class="menu-item menu-list-item">
<div class="row">
<div class="col-sm-6">
<h6>Filet de beouf mascotte sauce Choron</h6>
</div>
<div class="col-sm-6 text-right">
<span class="text-muted">PRIX :</span><span> 16.5 €</span>
</div>
</div>
</div>
<!-- Menu Item -->
<div class="menu-item menu-list-item">
<div class="row">
<div class="col-sm-6">
<h6>Entrecôte maturée et grillée sauce bordelaise</h6>
</div>
<div class="col-sm-6 text-right">
<span class="text-muted">PRIX :</span><span> 16.5 €</span>
</div>
</div>
</div>
<!-- Menu Item -->
<div class="menu-item menu-list-item">
<div class="row">
<div class="col-sm-6">
<h6>Côtes d'agneau au miel et romarin, peti jus d'ail confit</h6>
</div>
<div class="col-sm-6 text-right">
<span class="text-muted">PRIX :</span><span> 16.5 €</span>
</div>
</div>
</div>
<!-- Menu Item -->
<div class="menu-item menu-list-item">
<div class="row">
<div class="col-sm-6">
<h6>Cordon bleu</h6>
</div>
<div class="col-sm-6 text-right">
<span class="text-muted">PRIX :</span><span> 12.5 €</span>
</div>
</div>
</div>
<!-- Menu Item -->
<div class="menu-item menu-list-item">
<div class="row">
<div class="col-sm-6">
<h6>Suprême de poulet à la tapenade noire et émulsion d'estragon</h6>
</div>
<div class="col-sm-6 text-right">
<span class="text-muted">PRIX :</span><span> 14.5 €</span>
</div>
</div>
</div>
<!-- Menu Item -->
<div class="menu-item menu-list-item">
<div class="row">
<div class="col-sm-6">
<h6>Wok de poulet façon Thaï avec noix de cajou</h6>
</div>
<div class="col-sm-6 text-right">
<span class="text-muted">PRIX :</span><span> 14.5 €</span>
</div>
</div>
</div>
</div>
</div>
<!-- Menu Category / Poissons -->
<div id="Poissons" class="menu-category">
<div class="menu-category-title collapse-toggle" role="tab" data-target="#menuPoissons" data-toggle="collapse" aria-expanded="false">
<div class="bg-image" style="background-image: url('http://restaurant-ovelix.com/assets/img/photos/menu-title-poissons.jpg');"></div>
<h2 class="title">Poissons</h2>
</div>
<div id="menuPoissons" class="menu-category-content collapse">
<!-- Menu Item -->
<div class="menu-item menu-list-item">
<div class="row">
<div class="col-sm-6">
<h6>Pavé de St Pierre à la hollandaise</h6>
</div>
<div class="col-sm-6 text-right">
<span class="text-muted">PRIX :</span><span> 12 €</span>
</div>
</div>
</div>
<!-- Menu Item -->
<div class="menu-item menu-list-item">
<div class="row">
<div class="col-sm-6">
<h6>Friture de solettes sauce simplissime</h6>
</div>
<div class="col-sm-6 text-right">
<span class="text-muted">PRIX :</span><span> 12 €</span>
</div>
</div>
</div>
<!-- Menu Item -->
<div class="menu-item menu-list-item">
<div class="row">
<div class="col-sm-6">
<h6>Filet de merlan frit, chutney d'ananas au gingembre frais</h6>
</div>
<div class="col-sm-6 text-right">
<span class="text-muted">PRIX :</span><span> 18.5 €</span>
</div>
</div>
</div>
<!-- Menu Item -->
<div class="menu-item menu-list-item">
<div class="row">
<div class="col-sm-6">
<h6>Friture mixte sauce tartare</h6>
</div>
<div class="col-sm-6 text-right">
<span class="text-muted">PRIX :</span><span> 16.5 €</span>
</div>
</div>
</div>
<!-- Menu Item -->
<div class="menu-item menu-list-item">
<div class="row">
<div class="col-sm-6">
<h6>Gratin de fruits de mer</h6>
</div>
<div class="col-sm-6 text-right">
<span class="text-muted">PRIX :</span><span> 18.5 €</span>
</div>
</div>
</div>
</div>
</div>
<!-- Menu Category / Desserts -->
<div id="Desserts" class="menu-category">
<div class="menu-category-title collapse-toggle collapsed" role="tab" data-target="#menuDesserts" data-toggle="collapse" aria-expanded="false">
<div class="bg-image" style="background-image: url('http://restaurant-ovelix.com/assets/img/photos/menu-title-desserts.jpg');"></div>
<h2 class="title">Desserts</h2>
</div>
<div id="menuDesserts" class="menu-category-content collapse" aria-expanded="false" style="">
<!-- Menu Item -->
<div class="menu-item menu-list-item">
<div class="row">
<div class="col-sm-6">
<h6>Pâtisserie marocaine</h6>
</div>
<div class="col-sm-6 text-right">
<span class="text-muted">PRIX :</span><span> 7 €</span>
</div>
</div>
</div>
<!-- Menu Item -->
<div class="menu-item menu-list-item">
<div class="row">
<div class="col-sm-6">
<h6>Crème brulée à la vanille</h6>
</div>
<div class="col-sm-6 text-right">
<span class="text-muted">PRIX :</span><span> 7 €</span>
</div>
</div>
</div>
<!-- Menu Item -->
<div class="menu-item menu-list-item">
<div class="row">
<div class="col-sm-6">
<h6>Crème caramel</h6>
</div>
<div class="col-sm-6 text-right">
<span class="text-muted">PRIX :</span><span> 7 €</span>
</div>
</div>
</div>
<!-- Menu Item -->
<div class="menu-item menu-list-item">
<div class="row">
<div class="col-sm-6">
<h6>Tiramisu Nutella</h6>
</div>
<div class="col-sm-6 text-right">
<span class="text-muted">PRIX :</span><span> 7 €</span>
</div>
</div>
</div>
<!-- Menu Item -->
<div class="menu-item menu-list-item">
<div class="row">
<div class="col-sm-6">
<h6>Mousse au chocolat</h6>
</div>
<div class="col-sm-6 text-right">
<span class="text-muted">PRIX :</span><span> 7 €</span>
</div>
</div>
</div>
<!-- Menu Item -->
<div class="menu-item menu-list-item">
<div class="row">
<div class="col-sm-6">
<h6>Eventail de fruits de saison découpés</h6>
</div>
<div class="col-sm-6 text-right">
<span class="text-muted">PRIX :</span><span> 7 €</span>
</div>
</div>
</div>
<!-- Menu Item -->
<div class="menu-item menu-list-item">
<div class="row">
<div class="col-sm-6">
<h6>Tarte fine aux pommes glacées</h6>
</div>
<div class="col-sm-6 text-right">
<span class="text-muted">PRIX :</span><span> 7 €</span>
</div>
</div>
</div>
<!-- Menu Item -->
<div class="menu-item menu-list-item">
<div class="row">
<div class="col-sm-6">
<h6>Sélection de glaces et sorbets</h6>
</div>
<div class="col-sm-6 text-right">
<span class="text-muted">PRIX :</span><span> 5 €</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
html {
font-size: 14px
}
@media only screen and (max-width: 575px) {
html {
font-size: 13px
}
}
.bg-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
z-index: 0
}
.menu-category {
margin-bottom: 2rem
}
.menu-category .menu-category-title {
position: relative;
height: 30vh;
min-height: 160px;
color: #fff;
padding: 3rem;
background-color: #282840
}
@media only screen and (max-width: 991px) {
.menu-category .menu-category-title {
min-height: 100px
}
}
.menu-category .menu-category-title .bg-image:after {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
content: ' ';
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent)
}
.menu-category .menu-category-title .title {
position: absolute;
bottom: 3rem;
left: 4rem;
font-size: 4rem;
z-index: 2;
margin-bottom: 0
}
@media only screen and (max-width: 1500px) {
.menu-category .menu-category-title .title {
font-size: 4.5rem
}
}
@media only screen and (max-width: 991px) {
.menu-category .menu-category-title .title {
font-size: 4rem;
bottom: 2rem;
left: 3rem
}
}
@media only screen and (max-width: 991px) {
.menu-category .menu-category-title .title {
font-size: 3rem;
left: 2rem
}
}
.menu-category .menu-category-title.collapse-toggle {
cursor: pointer;
height: 25vh;
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all 0.25s ease-out
}
.menu-category .menu-category-title.collapse-toggle:after {
position: absolute;
bottom: 3rem;
right: 3rem;
font-family: 'themify';
content: "\e64b";
display: inline-block;
font-size: 3rem;
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=50);
opacity: .5;
z-index: 2;
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all 0.25s ease-out
}
@media only screen and (max-width: 1500px) {
.menu-category .menu-category-title.collapse-toggle:after {
bottom: 2.5rem
}
}
@media only screen and (max-width: 991px) {
.menu-category .menu-category-title.collapse-toggle:after {
right: 2rem;
bottom: 2rem;
font-size: 2rem
}
}
.menu-category .menu-category-title.collapse-toggle[aria-expanded="true"] {
height: 35vh
}
.menu-category .menu-category-title.collapse-toggle[aria-expanded="true"]:after {
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg)
}
.menu-category .menu-category-content {
border: 1px solid #e0e0e0;
background-color: #fff
}
.menu-category .menu-category-content.padded {
padding: 15px
}
.menu-list-item {
padding: 1.25rem 1.5rem;
line-height: 1.2
}
.menu-list-item h6 {
font-size: 1.1rem;
font-weight: 500;
}
@media only screen and (max-width: 575px) {
.menu-list-item {
padding: 1rem
}
}
.menu-list-item:not(:last-child) {
border-bottom: 1px solid #e0e0e0
}
.menu-grid-item {
line-height: 1.2;
margin-bottom: 1.5rem
}
.menu-grid-item:not(:last-child) {
border-bottom: 1px solid #e0e0e0
}
