<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 ---------->
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<div class="container">
<nav class="navbar navbar-default navbar-fixed-top" id="navbar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false" id="toggle-btn">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"> </span>
<span class="icon-bar"> </span>
<span class="icon-bar"> </span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" id="menu">
<li> <a href="#about-us" id="about" > about us </a> </li>
<li> <a href="#food-items"> our menu </a> </li>
<li> <a href="#arrangments"> special offers </a> </li>
<li> <a> <img src="https://demo.kallyas.net/phaeton-restaurant-bar-pub/wp-content/uploads/sites/7/2016/11/logo.png" id="img-logo"> </a> </li>
<li> <a href="#order-now"> reservation </a> </li>
<li> <a href="#Contact"> location </a> </li>
<li> <a href="#discount"> subscribe </a> </li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 col-xs-12">
<p class="title"> organic natural food </p>
<p class="brief"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod </p>
<p> <button type="button" id="see"> <a href="#food-items" style="color:white;text-decoration:none;"> SEE OUR MENU </a> </button> </p>
</div>
</div>
</div>
</div> <!-- bg-container closed here -->
<!-- about us -->
<section id="about-us">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-xs-12 intro-about">
<div>
<p class="about font-bold"> ABOUT </p>
<p class="desc" data-aos="slide-up" > Our Chefs offer you perfect cooking, best served dishes with fresh ingredients and old recipes. We have only carefully sourced and seasonal ingredients in our disposal to make rustic dishes. We provide you with daily self-made bread, sourdough pizza, roasted fish-meat-vegetables and many more. </p>
<p> <button type="button" id="read-more" data-aos="zoom-in-up" class="font-bold"> READ MORE </button> </p>
</div>
</div>
<div class="col-md-6 col-xs-12" id="img-contain" data-aos="zoom-out-right">
</div>
</div>
</div>
</section>
<section class="todays-speciality">
<div class="container-fluid">
<div class="row" id="today" data-aos="zoom-in-right">
<div class="col-md-12 col-xs-12">
<p class="today-title"> Today's Speciality </p>
<p class="today-brief"> Chicken with vegetables: mashed potatoes, bean pods, croutons, cranberry jam,rosemary </p>
<p> <button type="button" id="menu-btn"> 7 day's menu </button> </p>
<div>
</div>
</div>
</section>
<section class="food-items" id="food-items">
<div class="container-fluid">
<h1 id="menu-title" class="font-bold"> menu </h1>
<div class="row">
<div class="col-md-3 col-xs-12" data-aos="flip-left">
<span class="category font-bold"> meat </span>
<div class="lists">
<ul class="list font-bold">
</ul>
</div>
</div>
<div class="col-md-3 col-xs-12" data-aos="flip-left">
<span class="category font-bold"> sides</span>
<div class="lists">
<ul class="list font-bold">
</ul>
</div>
</div>
<div class="col-md-3 col-xs-12" data-aos="flip-left">
<span class="category font-bold"> pasta </span>
<div class="lists">
<ul class="list font-bold">
</ul>
</div>
</div>
</div>
</div>
</section>
<section id="delivery">
<div class="container-fluid" >
<div class="row">
<div class="col-md-6 col-xs-12 pic" data-aos="flip-down">
</div>
<div class="col-md-6 col-xs-12 description-delivery" data-aos="flip-right" >
<span id="delivery-title"> Delivery </span>
<p class="delivery-desc"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
<p> <button type="button" id="order" class="font-bold"> <a href="#order-now" style="text-decoration:none;color:black;"> order now </a> </button> </p>
</div>
</div>
</div>
</section>
<section id="service" class="service-bg" >
<div class="container-fluid" data-aos="zoom-in-up">
<div class="row">
<div class="col-md-12 col-xs-12" >
<p class="service-title"> best service ever </p>
<p class="service-brief"> Our 3 Michelin Stars ensure that your experience regarding our cuisine will be one that you will not forget. </p>
<p> <img src="https://demo.kallyas.net/phaeton-restaurant-bar-pub/wp-content/uploads/sites/7/2016/06/3-flowers.png" class="img-service"/> </p>
</div>
</div>
</div>
<div class="zn-bgSource-overlay" style="background-color:rgba(53,53,53,0.3);width:100%;height:650px;"></div>
</section>
<section id="arrangments">
<div class="container-fluid event">
<div class="row">
<div class="col-md-3 col-xs-12 event-mgmt" data-aos="fade-up">
<div class="img-bg img-circle">
<img src="https://s4.postimg.org/41nxsk4st/wedding-cake_2.png">
</div>
<div class="birthday" >
<span class="font-setting"> birthdays </span>
<p class="description">Book a table for two with the best Italian dishes served for the anniversary. Or reserve a bigger one for a huge family to get together one sunny day. Gather your friends together </p>
</div>
</div>
<div class="col-md-3 col-xs-12 event-mgmt" data-aos="fade-up">
<div class="img-bg img-circle">
<img src="https://s21.postimg.org/h3hfabufr/business-meeting.png">
</div>
<div class="meeting" >
<span class="font-setting"> meetings </span>
<p class="description"> You can also impress your boss by choosing the best place for corporate party with your co-workers. Reserve a spacious room, set the menu, choose the drinks and invite guests.</p>
</div>
</div>
<div class="col-md-3 col-xs-12 event-mgmt" data-aos="fade-up">
<div class="img-bg img-circle">
<img src="https://s2.postimg.org/49b7a0lsp/christmas-ribbon.png">
</div>
<div class="wedding">
<span class="font-setting"> weddings </span>
<p class="description"> 75 seats for 75 guests are all at your disposal. Organize a party for a huge company and have fun in the restauran. Show your friends the real world of European cuisine and especially Italian vibes.</p>
</div>
</div>
</div>
</div>
</section>
<section id="tasty-desserts">
<div class="container-fluid">
<div class="row" id="dessert" data-aos="zoom-in-up" >
<div class="col-md-12 col-xs-12">
<p class="tasty-title"> Tasty Desserts </p>
<p class="tasty-desc"> Whether you crave sweet, savory, decadent or healthy,<br>
we have hundreds of top-rated dessert recipes to satisfy your taste buds. </p>
</div>
</div>
</div>
</section>
<section id="order-now">
<div class="container-fluid">
<div class="row">
<div class="col-md-3 col-xs-12 details" data-aos="zoom-in-up" >
<p class="heading font-bold"> Events </p>
<p class="sub-detail"> We put at your disposal our place and staff to celebrate your Birthday, the 10th year anniversary with your colleagues even your Weddings. </p>
<p> <button type="button" class="find font-bold"> Find Out More </button> </p>
</div>
<div class="col-md-3 col-xs-12 details" data-aos="zoom-in-up" >
<p class="heading font-bold"> Opening Hours </p>
<p style="font-weight:bold;font-family:'Montserrat';font-size:1.30em;margin-top:30px;"> Monday - Saturday </p>
<p style="font-weight:300;font-family:'Montserrat';"> 12pm - 10:30pm </p>
<p style="font-weight:bold;font-family:'Montserrat';font-size:1.30em;"> Sunday </p>
<p style="font-weight:300;font-family:'Montserrat';"> 12pm - 9pm </>
<p style="font-weight:300;font-family:'Montserrat';margin-top:30px;"> Fruits de mer & cold food available 3-5:00pm </p>
</div>
<div class="col-md-3 col-xs-12 details" data-aos="zoom-in-up" >
<p class="heading font-bold"> find a table </p>
<p class="sub-detail"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut. </p>
<p class="call"> <i class="fa fa-phone"> </i> CALL: 0800 1800 1800 </p>
</div>
</div>
</div>
</section>
<section class="discount" id="discount">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 col-xs-12 dis-coupon">
<p class="dis-title"> discount coupon </p>
<p class="mail"> Enter your email address for a 20% off voucher next time you come visit us</p>
<p> <input type="text" placeholder="Your email address" class="mail-address"> </input> <button type="submit" id="subscribe" class="font-bold"/> SUBSCRIBE </button> </p>
</p>
<ul class="social-media">
<li> <a> <i class="fa fa-facebook"> </i> </a> </li>
<li> <a> <i class="fa fa-twitter"> </i> </a> </li>
<li> <a> <i class="fa fa-linkedin"> </i> </a> </li>
</ul>
<ul class="hori-menu font-bold">
<li> <a href="#about-us"> About Us </a> </li>
<li> <a href="#food-items"> our menu </a> </li>
<li> <a href="#arrangments"> special offers </a> </li>
<li> <a href="#order-now"> reservation </a> </li>
<li> <a href=""> location </a> </li>
<li> <a href="#discount"> subscribe </a> </li>
</ul>
<div>
</div>
</div>
</section>
</body>
</html>
*
{
box-sizing:border-box;
}
html
{
overflow-x:hidden;
}
body
{
width:100%;
height:100%;
margin:0;
}
.pic,#service,#today,.container,#dessert
{
background-size:cover;
background-repeat:no-repeat;
background-position:center center;
}
#menu li a,#see,#read-more,.hori-menu li a,.find,#order,#menu-btn,b,.category
{
font-family:'Montserrat',sans-serif;
}
.title,.dis-title,.about,.heading ,.today-title,.service-title,.tasty-title,#delivery-title,#menu-title ,.font-setting
{
font-family: 'Amatic SC',cursive;
}
.brief ,.desc,.lists .list,.sub-detail,.description,.tasty-desc,.mail,.mail-address,.delivery-desc,.today-brief,.service-brief
{
font-family:'Open Sans',sans-serif;
}
#menu li a,.col-md-12, .title, #see, .dis-title,.event-mgmt
{
text-align:center;
}
#menu li a,.col-md-12, .title, #see, .dis-title ,.today-title,.service-title,.tasty-title
{
color:white;
text-transform:uppercase;
}
.font-bold,li span
{
font-weight:bold;
}
#img-logo
{
margin-top:-27px;
width:70%;
overflow:hidden;
transition: all 0.3s ease-in-out;
}
.container
{
width:100%;
height:660px;
position:relative;
top:0;
left:0;
background-position:left top;
background-repeat:no-repeat;
background-attachment:scroll;
background-image:url('https://s2.postimg.org/nwsl0o20p/slide1.jpg');
}
#menu li a#about
{
margin-left:80px;
}
#navbar
{
margin:0;
background-color:rgba(0,0,0,0.2);
border:none;
height:40px;
}
.navbar-header
{
transition: height 0.3s ease-in-out;
}
#menu li a
{
width:100%;
margin-top:15px;
margin-left:40px;
font-weight:900;
font-size:0.90em;
letter-spacing:2px;
transition: all 0.3s ease-in-out;
}
nav.navbar.shrink {
height:50px;
}
nav.shrink a {
padding-top: 10px !important;
}
nav.shrink #img-logo
{
position:relative;
top:5px;
max-height:50px;
overflow:hidden;
}
#menu li a:hover
{
text-decoration:underline;
}
.col-md-12
{
position:absolute;
top:220px;
width:100%;
}
.title
{
font-size:4em;
letter-spacing:20px;
word-spacing:10px;
font-weight:700;
}
.brief
{
font-size:1.20em;
font-weight:300;
background-color:rgba(0,0,0,0);
}
.col-md-12 #see
{
background-color:black;
}
.col-md-12 #see
{
border:none;
padding:20px;
margin:20px;
width:250px;
font-size:1em;
}
#about-us
{
width:100%;
height:560px;
}
#about-us .intro-about
{
background-color:white;
position:relative;
top:150px;
left:90px;
}
#img-contain
{
height:560px;
background-image:url('https://demo.kallyas.net/phaeton-restaurant-bar-pub/wp-content/uploads/sites/7/2016/07/about-chefs.jpg');
background-position:center;
position:relative;
left:80px;
width:670px;
}
.about
{
width:100%;
font-size:2.50em;
letter-spacing:5px;
}
.desc
{
margin-top:20px;
max-width:500px;
font-size:1.20em;
font-weight:500;
color:#333333;
}
#read-more
{
background-color:transparent;
border:2px solid black;
height:60px;
padding:20px;
width:180px;
margin-top:25px;
color:black;
font-size:0.85em;
}
.todays-speciality
{
width:100%;
height:600px;
position:relative;
}
#today
{
position:absolute;
background-image:url('https://demo.kallyas.net/phaeton-restaurant-bar-pub/wp-content/uploads/sites/7/2016/06/section2.jpg');
width:100%;
height:100%;
}
.today-title,.service-title,.tasty-title
{
font-size:4em;
letter-spacing:20px;
word-spacing:10px;
font-weight:500;
text-transform:uppercase;
background-color:rgba(0,0,0,0);
}
.service-title,.tasty-title
{
font-weight:600;
}
.today-brief,.service-brief
{
font-size:1.30em;
font-weight:300;
background-color:rgba(0,0,0,0);
}
.img-service
{
margin-top:25px;
}
#menu-btn
{
background-color:black;
color:white;
border:none;
padding:20px;
margin:20px;
width:250px;
font-size:1.30em;
text-transform:capitalize;
}
#menu-btn:focus,#read-more:focus,#see:focus
{
outline:none;
}
.food-items
{
background-color:#efefef;
width:100%;
height:620px;
}
#menu-title
{
margin-top:100px;
width:100%;
font-size:3em;
text-align:center;
}
.category
{
float:right;
text-transform:uppercase;
color:#cccccc;
font-size:0.95em;
margin-top:40px;
}
.lists .list
{
position:relative;
list-style:none;
color:#535353;
width:430px;
margin-top:100px;
margin-left:200px;
font-size:1.10em;
}
li span
{
color:#cccccc;
letter-spacing:1.5px;
}
b
{
color:#cc9900;
}
.list li
{
margin-bottom:15px;
}
#delivery
{
width:100%;
height:520px;
position:relative;
}
.pic
{
position:relative;
top:150px;
width:650px;
margin-left:17px;
background-image:url('https://demo.kallyas.net/phaeton-restaurant-bar-pub/wp-content/uploads/sites/7/2016/06/delivery.jpg');
height:500px;
}
#service
{
width:100%;
height:650px;
background-image: url('https://s23.postimg.org/ougvldo0b/bestservice.jpg');
position:relative;
transform: translate3d(0px, 120px, 0px);
z-index:-1;
}
#arrangments
{
width:100%;
position:relative;
}
.event-mgmt
{
position:relative;
width:430px;
height:500px;
top:180px;
left:150px;
}
.img-bg > img
{
top:50px;
left:60px;
width:90px;
height:90px;
z-index:1;
display:inline-block;
position:absolute;
}
.img-bg
{
position:relative;
width:200px;
height:190px;
background-color:black;
transition:background-color .2s ease-out;
overflow:hidden;
}
.img-circle:hover
{
width:215px;
height:210px;
}
.birthday,.meeting,.wedding
{
position:absolute;
top:230px;
left:-50px;
max-width:350px;
}
.font-setting
{
font-size:3em;
letter-spacing:3px;
font-weight:600;
}
.tasty-desc
{
color:white;
font-size:1.30em;
margin:auto;
font-weight:300;
background-color:rgba(0,0,0,0.2.5);
}
.description
{
font-size:1em;
margin-top:20px;
}
#dessert
{
position:relative;
top:180px;
background-image:url('https://demo.kallyas.net/phaeton-restaurant-bar-pub/wp-content/uploads/sites/7/2016/06/tasty-deserts.jpg');
width:1500px;
height:800px;
}
.description-delivery
{
position:relative;
top:135px;
left:150px;
}
#delivery-title
{
font-size:3em;
font-weight:600;
}
.delivery-desc
{
font-size:1.20em;
max-width:450px;
margin-top:20px;
}
#order
{
margin-top:30px;
padding:20px 30px 20px 30px;
background-color:white;
border:2px solid black;
font-size:0.85em;
width:120px;
text-transform:uppercase;
}
#order-now
{
width:100%;
height:520px;
position:relative;
background-color:white;
}
.details
{
width:430px;
margin-top:80px;
left:100px;
}
.heading
{
font-size:2.70em;
position:relative;
}
.sub-detail
{
position:absolute;
top:80px;
max-width:358px;
font-size:1.20em;
}
.find
{
margin-top:130px;
border:2px solid black;
padding:20px 30px 20px 30px;
background-color:white;
text-transform:uppercase;
font-size:0.95em;
}
.call
{
position:relative;
top:165px;
font-size:1.30em;
}
.discount
{
background-color:black;
width:100%;
height:600px;
position:relative;
}
.dis-coupon
{
position:absolute;
}
.dis-title
{
width:100%;
font-size:3em;
font-weight:500;
letter-spacing:3px;
}
.mail
{
position:relative;
text-align:center;
width:100%;
font-size:1.30em;
font-weight:300;
}
.mail-address
{
margin-top:30px;
width:300px;
color:white;
font-size:1em;
background-color:transparent;
border:2px solid white;
padding:20px;
}
#subscribe
{
font-family:sans-serif;
background-color:#ffcc00;
color:white;
padding:23px;
width:150px;
border-radius:5px;
border:transparent;
margin-left:10px;
}
#subscribe:focus
{
outline:none;
}
.social-media
{
margin-top:50px;
}
.social-media,.hori-menu
{
list-style:none;
}
.social-media li,.hori-menu li
{
display:inline;
}
.social-media li
{
margin:10px;
}
.social-media li i
{
color:gray;
font-size:1.50em;
}
.social-media li i a:focus
{
outline: none;
}
.hori-menu
{
margin-top:35px;
}
.hori-menu li
{
margin:10px;
}
.hori-menu li a
{
color:gray;
text-transform:uppercase;
font-size:0.75em;
text-decoration:none;
}
.hori-menu li a:hover
{
color:lightgray;
}
@media (max-width:468px)
{
html
{
width:360px;
}
body
{
font-size:1.35em;
}
#about-us .intro-about
{
position:relative;
left:10px;
top:10px;
}
#read-more
{
margin-bottom:50px;
}
#about-us #img-contain
{
width:100%;
height:300px;
}
.food-items
{
height:700px;
background-color:white;
}
.category
{
text-align:center;
width:100%;
}
.lists .list
{
position:relative;
margin-left:10px;
}
.pic
{
width:360px;
position:relative;
left:-15px;
margin-top:200px;
height:350px;
}
.description-delivery
{
position:relative;
left:10px;
margin-top:40px;
}
.birthday,.meeting,.wedding
{
position:absolute;
left:-150px;
}
.img-bg
{
position:absolute;
left:-60px;
}
.service-bg
{
margin-top:460px;
}
#dessert
{
width:360px;
height:800px;
}
#order-now
{
height:1100px;
}
.details
{
position:relative;
left:10px;
}
#subscribe
{
margin-top:20px;
}
.todays-speciality
{
position:relative;
top:120px;
}
#menu-title
{
position:relative;
top:50px;
}
.category
{
margin-top:90px;
}
.social-media li a
{
margin-top:10px;
}
.hori-menu li a
{
display:block;
font-size:0.85em;
}
#discount
{
height:900px;
}
#menu
{
background-color:white;
}
#menu li a
{
color:black;
position:relative;
left:-40px;
}
#menu li a#about
{
position:relative;
left:-80px;
padding:5px;
}
#menu li a #img-logo
{
display:none;
}
#img-contain
{
margin-left:-80px;
position:relative;
bottom:20px;
}
}
/*
AOS.init({
offset:80,
duration: 1000,
easing: 'ease-in',
disable:'mobile'
https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js
https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css
});*/
$(document).ready(function()
{
$('.nav a').on('click', function(){
$('.navbar-toggle').click()
});
});
$(window).scroll(function() {
if ($(document).scrollTop() > 60) {
$('nav').addClass('shrink');
} else {
$('nav').removeClass('shrink');
}
});
var food_items = new Array(" Chicken Breast "," Fresh Grilled Asparagus","Pork-Stuffed Skins"," Grilled Chicken"," Steak Frites");
var menus = document.querySelectorAll('.list');
for(var i=0;i< menus.length ;i++)
{
menus[i].innerHTML = "<li>" + food_items[0] +"<span>"+"................."+"</span>"+ "<b>"+"$19.50"+"</b>"+"</li>"
+ "<li>" + food_items[1] +"<span>"+"......"+"</span>"+ "<b>"+"$25.00"+"</b>"+ "</li>"
+ "<li>" + food_items[2] + "<span>"+"............."+"</span>"+ "<b>"+"$25.50"+"</b>"+"</li>"
+ "<li>" + food_items[3] + "<span>"+"................."+"</span>"+ "<b>"+"$25.49"+"</b>"+"</li>"
+ "<li>" + food_items[4] +"<span>"+"....................."+"</span>"+ "<b>"+"$25.00"+"</b>"+ "</li>" ;
}
