<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<section id="sticky-nav">
<header class="navigation">
<div class="container">
<div class="top-logo">
<a href="#"><img src="">Logo</a>
</div>
<nav id='cssmenu' class="navigation">
<div id="head-mobile"></div>
<div class="button"></div>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li class="has-sub"><span class="submenu-button"></span><a href="services.html">Services</a>
<ul class="sub-menu">
<li><a href="services.html">Services</a></li>
<li><a href="setup.html">Setup</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="gallery.html">Gallery</a></li>
</ul>
</li>
<!-- <li><a href="delight-clients.html">Gallery</a></li>-->
<li><a href="contact.html">Contact</a></li>
<!-- <li class="book_trip"><a href="#"><i class="fa fa-map-marker"></i> Book Your Trip</a></li>-->
</ul>
</nav>
</div>
</header>
<div id="intro" class="view hm-black-strong">
<div class="caption text-center">
<div class="line"></div>
<h1>INSTANT <br> RESTURANT</h1>
<div class="line"></div>
</div>
</div>
</section>
@import url(https://fonts.googleapis.com/css?family=Raleway:300);
@import url(https://fonts.googleapis.com/css?family=Lusitana:400,700);
/*@import url('https://fonts.googleapis.com/css?family=Poppins');*/
/*start nav*/
.top-logo {
width: 15%;
float: left;
}
header{
background:rgba(0,0,0,0.6);
color:#fff;
}
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #head-mobile {
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
nav#cssmenu {
text-align: right;
line-height: 0;
}
.navigation.sticky.scrolling nav#cssmenu {
text-align: center;
margin-top: 10px;
float: none;
}
.navigation.sticky.scrolling .open_status {
display: none;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0
}
#cssmenu #head-mobile {
display: none
}
#cssmenu ul {
float: none;
text-align: center;
display: inline-block;
margin-bottom: 0;
}
#cssmenu > ul > li {
display: inline-block;
align-items: center;
padding-top: 2rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
padding-bottom: 2rem;
}
#cssmenu > ul > li > a {
padding: 10px;
font-size: 14px;
letter-spacing: 0.7px;
text-decoration: none;
color: #333;
font-weight: 500;
text-transform: uppercase;
}
.navigation.sticky.scrolling #cssmenu > ul > li > a {
color: #fff;
}
.navigation.sticky.scrolling #cssmenu > ul > li > a:hover {
color: #3B8BeB;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li:hover > a, #cssmenu ul li.active a {
color: #E91E63;
}
#cssmenu > ul > li:hover,
#cssmenu ul li.active:hover,
#cssmenu ul li.has-sub.active:hover {
-webkit-transition: background .3s ease;
-ms-transition: background .3s ease;
transition: background .3s ease;
}
#cssmenu > ul > li.has-sub > a {
padding-right: 30px !important;
}
#cssmenu > ul > li.has-sub > a:after {
position: absolute;
top: 40px;
right: 11px;
width: 8px;
height: 2px;
content: '';
}
#cssmenu > ul > li.has-sub > a:before {
position: absolute;
right: 14px;
display: block;
font-family: FontAwesome;
content: "\f107";
-webkit-transition: all .25s ease;
-ms-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu > ul > li.has-sub > a:before {
color: #ccc;
}
#cssmenu > ul > li.has-sub:hover > a:before {
transform: rotate(180deg);
}
#cssmenu ul ul {
position: absolute;
left: -9999px;
z-index: 1;
background: #fff;
transform-origin: top;
transform: rotateX(-90deg);
transition: transform 0.2s linear;
border-radius: 4px;
}
#cssmenu li:hover > ul {
left: 0;
transform: rotateX(-0deg);
}
#cssmenu ul ul li {
height: 0;
-webkit-transition: all .25s ease;
-ms-transition: all .25s ease;
transition: all .25s ease
}
#cssmenu ul ul li:hover {}
#cssmenu li:hover > ul {
left: 0;
padding-left:0;
}
#cssmenu li:hover > ul > li {
height: 100%;
}
#cssmenu ul ul ul {
margin-left: 100%;
top: 0
}
#cssmenu ul ul li a {
border-bottom: 1px solid rgba(19, 17, 17, 0.61);
padding: 11px 15px;
width: 150px;
font-size: 13px;
text-decoration: none;
color: #333;
font-weight: 500;
line-height: 13px;
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last-item > a {
border-bottom: 0
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
color: #000;
}
#cssmenu ul ul li.has-sub > a:after {
position: absolute;
top: 16px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #ddd;
content: ''
}
#cssmenu ul ul li.has-sub > a:before {
position: absolute;
top: 13px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #ddd;
content: '';
-webkit-transition: all .25s ease;
-ms-transition: all .25s ease;
transition: all .25s ease
}
#cssmenu ul ul > li.has-sub:hover > a:before {
top: 17px;
height: 0
}
#cssmenu ul ul li.has-sub:hover,
#cssmenu ul li.has-sub ul li.has-sub ul li:hover {
background: #555;
}
#cssmenu ul ul ul li.active a {
border-left: 1px solid #333
}
#cssmenu > ul > li.has-sub > ul > li.active > a,
#cssmenu > ul ul > li.has-sub > ul > li.active > a {
border-top: 1px solid #333
}
@media screen and (max-width:1000px) {
.open_status {
float: left !important;
}
#cssmenu > ul > li > a {
padding: 17px 10px;
background: #121116;
}
#cssmenu > ul > li > a {
padding: 16px 10px;
color: #ccc;
text-align: left;
}
#cssmenu ul {
float: none;
margin-top: 10px;
}
.logo {
max-width: 220px;
margin-left: 15px;
}
.logo2 {
display: none
}
nav {
width: 100%;
}
#cssmenu {
width: 100%;
float: none !important;
}
#cssmenu ul {
width: 100%;
display: none;
padding-left: 0;
}
#cssmenu ul li {
width: 100%;
border-top: 1px solid #999;
}
#cssmenu ul li:hover {
background: #363636;
}
#cssmenu ul ul li,
#cssmenu li:hover > ul > li {
height: auto
}
#cssmenu ul li a,
#cssmenu ul ul li a {
width: 100%;
border-bottom: 0
}
#cssmenu > ul > li {
float: none;
padding:0;
}
#cssmenu ul ul li a {
padding-left: 25px
}
#cssmenu ul ul li {
background: #333 !important;
}
#cssmenu ul ul li:hover {
background: #363636 !important
}
#cssmenu ul ul ul li a {
padding-left: 35px
}
#cssmenu ul ul li a {
color: #ddd;
background: none
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.active > a {
color: #fff
}
#cssmenu ul ul,
#cssmenu ul ul ul {
position: relative;
left: 0;
width: 100%;
margin: 0;
text-align: left
}
#cssmenu > ul > li.has-sub > a:after,
#cssmenu > ul > li.has-sub > a:before,
#cssmenu ul ul > li.has-sub > a:after,
#cssmenu ul ul > li.has-sub > a:before {
display: none
}
#cssmenu #head-mobile {
display: block;
padding: 26px;
color: #ddd;
font-size: 12px;
font-weight: 700;
}
#cssmenu .button {
width: 55px;
height: 46px;
position: absolute;
right: 0;
top: 18px;
cursor: pointer;
z-index: 12399994;
}
#cssmenu .button:after {
position: absolute;
top: 26px;
right: 20px;
display: block;
height: 8px;
width: 20px;
border-top: 2px solid #FF5722;
border-bottom: 2px solid #FF5722;
content: '';
}
.top-logo a img {
max-width: 130px;
width: auto;
padding-top: 5px;
padding-bottom: 10px;
}
#cssmenu .button:before {
-webkit-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
position: absolute;
top: 19px;
right: 20px;
display: block;
height: 2px;
width: 20px;
background: #FF5722;
content: '';
}
#cssmenu .button.menu-opened:after {
-webkit-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
top: 23px;
border: 0;
height: 2px;
width: 19px;
background: #FF5722;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#cssmenu .button.menu-opened:before {
top: 23px;
background: #FF5722;
width: 19px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#cssmenu .submenu-button {
position: absolute;
z-index: 99;
right: 0;
top: 0;
display: block;
border-left: 1px solid #fff;
height: 46px;
width: 46px;
cursor: pointer
}
#cssmenu .submenu-button.submenu-opened {
background: #262626
}
#cssmenu ul ul .submenu-button {
height: 34px;
width: 34px
}
#cssmenu .submenu-button:after {
position: absolute;
top: 22px;
right: 19px;
width: 8px;
height: 2px;
display: block;
background: #ddd;
content: ''
}
#cssmenu ul ul .submenu-button:after {
top: 15px;
right: 13px
}
#cssmenu .submenu-button.submenu-opened:after {
background: #fff
}
#cssmenu .submenu-button:before {
position: absolute;
top: 19px;
right: 22px;
display: block;
width: 2px;
height: 8px;
background: #ddd;
content: ''
}
#cssmenu ul ul .submenu-button:before {
top: 12px;
right: 16px
}
#cssmenu .submenu-button.submenu-opened:before {
display: none
}
#cssmenu ul ul ul li.active a {
border-left: none
}
#cssmenu > ul > li.has-sub > ul > li.active > a,
#cssmenu > ul ul > li.has-sub > ul > li.active > a {
border-top: none
}
}
.top-logo a img {
max-width: 165px;
width: auto;
padding-top: 5px;
}
.open{
display:block;
}
/*end nav*/
/*home page*/
#intro {
background: url("https://ik.imagekit.io/demo/img/responsive_images_srcset_sizes_assets/big/1.jpeg")no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:500px;
}
.caption {
width: 100%;
max-width: 100%;
position: absolute;
top:30%;
z-index: 1;
color: white;
text-transform: uppercase;
}
.caption h1 {
font-size: 3rem;
font-weight: 700;
letter-spacing: .3rem;
text-shadow: .1rem .1rem .8rem black;
padding-bottom: 1rem;
text-align:center;
}
.line{
width:350px;
height:4px;
transform:translate(490px,0px);
border-top:8px solid white;
}
@media screen and (max-width:380px) {
#cssmenu .button{
top:0px;
caption1{
font-size: 2rem;
}
}
.line{
transform:translate(16px,0px);
width:280px;
}
}
@media screen and (max-width:425px) {
#cssmenu .button{
top:6x;
}
.line{
transform:translate(60px,0px);
}
}
@media screen and (max-width:768px) {
#cssmenu .button{
top:6px;
}
.line{
transform:translate(14px,0px);
width:345;
}
}
/*end landing page*/
