<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 ---------->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Yrsa" rel="stylesheet">
<header>
<div class="logo"><a href="#"> <img src="http://ec2-54-186-197-92.us-west-2.compute.amazonaws.com:5010/images/indior_transperent_favicon2.df079229.gif"/></a></div>
<nav class="menu">
<ul>
<li> <a class="menu__link" href="#" data-link="link1"><i class="fa fa-info-circle" aria-hidden="true"></i></a></li>
<li> <a class="menu__link" href="#" data-link="link2"><i class="fa fa-list" aria-hidden="true"></i></a></li>
<li> <a class="menu__link" href="#" data-link="link3"><i class="fa fa-envelope" aria-hidden="true"></i></a></li>
</ul>
</nav>
</header>
<main>
<aside class="sidebar">
<ul>
<li> <a href="">Home</a></li>
<li> <a href="#">Link 2</a></li>
<li> <a href="#">Link 3</a></li>
<li> <a href="#">Link 4</a></li>
<li> <a href="#">Link 5</a></li>
<li> <a href="#">Link 6</a></li>
</ul>
</aside>
<!-- visible on page load-->
<section class="main-content">
<h1>An travel experience like no other</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, ipsum quidem dolorum aliquam beatae odit non ad temporibus vero quod soluta iusto in nesciunt, repellendus dignissimos eum asperiores ipsam minus animi quam maiores tempora. Corporis ipsum veniam, libero, exercitationem, quod ratione dicta minus tempora aut soluta eveniet nihil voluptas aperiam.</p>
<button class="specials">Today's specials</button>
<!-- hidden content-->
<section class="link__content" id="link1">
<div class="close">
<p><a href="#"><i class="fa fa-times" aria-hidden="true"></i></a></p>
</div>
<article class="page__content">
<h1>About Us</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eaque quas eos, placeat animi voluptatum voluptatem est quaerat, tempora dignissimos porro dolores aut at facilis id iste sapiente fuga perferendis. Beatae suscipit, autem assumenda eligendi omnis error amet recusandae, non odio dicta enim consequatur aliquid pariatur consequuntur nulla fugit velit molestiae. A illum impedit, possimus ex et voluptates amet molestias quidem quam magni placeat voluptate fugiat asperiores animi sequi quisquam enim rem sint iusto. Sed voluptatum doloribus porro vel mollitia cupiditate debitis labore, aliquam enim nobis! Reiciendis doloribus error, perferendis recusandae provident nihil itaque cum commodi quidem dolore pariatur aut!</p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eaque quas eos, placeat animi voluptatum voluptatem est quaerat, tempora dignissimos porro dolores aut at facilis id iste sapiente fuga perferendis. Beatae suscipit, autem assumenda eligendi omnis error amet recusandae, non odio dicta enim consequatur aliquid pariatur consequuntur nulla fugit velit molestiae. A illum impedit, possimus ex et voluptates amet molestias quidem quam magni placeat voluptate fugiat asperiores animi sequi quisquam enim rem sint iusto. Sed voluptatum doloribus porro vel mollitia cupiditate debitis labore, aliquam enim nobis! Reiciendis doloribus error, perferendis recusandae provident nihil itaque cum commodi quidem dolore pariatur aut!</p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eaque quas eos, placeat animi voluptatum voluptatem est quaerat, tempora dignissimos porro dolores aut at facilis id iste sapiente fuga perferendis. Beatae suscipit, autem assumenda eligendi omnis error amet recusandae, non odio dicta enim consequatur aliquid pariatur consequuntur nulla fugit velit molestiae. A illum impedit, possimus ex et voluptates amet molestias quidem quam magni placeat voluptate fugiat asperiores animi sequi quisquam enim rem sint iusto. Sed voluptatum doloribus porro vel mollitia cupiditate debitis labore, aliquam enim nobis! Reiciendis doloribus error, perferendis recusandae provident nihil itaque cum commodi quidem dolore pariatur aut!</p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eaque quas eos, placeat animi voluptatum voluptatem est quaerat, tempora dignissimos porro dolores aut at facilis id iste sapiente fuga perferendis. Beatae suscipit, autem assumenda eligendi omnis error amet recusandae, non odio dicta enim consequatur aliquid pariatur consequuntur nulla fugit velit molestiae. A illum impedit, possimus ex et voluptates amet molestias quidem quam magni placeat voluptate fugiat asperiores animi sequi quisquam enim rem sint iusto. Sed voluptatum doloribus porro vel mollitia cupiditate debitis labore, aliquam enim nobis! Reiciendis doloribus error, perferendis recusandae provident nihil itaque cum commodi quidem dolore pariatur aut!</p>
</article>
</section>
<section class="link__content" id="link2">
<div class="section__menu">
<nav>
<ul>
<li> <a href="#one">Link</a></li>
<li> <a href="#two">Link</a></li>
<li> <a href="#three">Link</a></li>
<li> <a href="#four">Link</a></li>
</ul>
</nav>
<div class="close">
<p><a href="#"><i class="fa fa-times" aria-hidden="true"></i></a></p>
</div>
</div>
<article class="page__content">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eaque quas eos, placeat animi voluptatum voluptatem est quaerat, tempora dignissimos porro dolores aut at facilis id iste sapiente fuga perferendis. Beatae suscipit, autem assumenda eligendi omnis error amet recusandae, non odio dicta enim consequatur aliquid pariatur consequuntur nulla fugit velit molestiae. A illum impedit, possimus ex et voluptates amet molestias quidem quam magni placeat voluptate fugiat asperiores animi sequi quisquam enim rem sint iusto. Sed voluptatum doloribus porro vel mollitia cupiditate debitis labore, aliquam enim nobis! Reiciendis doloribus error, perferendis recusandae provident nihil itaque cum commodi quidem dolore pariatur aut!</p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eaque quas eos, placeat animi voluptatum voluptatem est quaerat, tempora dignissimos porro dolores aut at facilis id iste sapiente fuga perferendis. Beatae suscipit, autem assumenda eligendi omnis error amet recusandae, non odio dicta enim consequatur aliquid pariatur consequuntur nulla fugit velit molestiae. A illum impedit, possimus ex et voluptates amet molestias quidem quam magni placeat voluptate fugiat asperiores animi sequi quisquam enim rem sint iusto. Sed voluptatum doloribus porro vel mollitia cupiditate debitis labore, aliquam enim nobis! Reiciendis doloribus error, perferendis recusandae provident nihil itaque cum commodi quidem dolore pariatur aut!</p>
<h3 id="one">Heading One</h3>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eaque quas eos, placeat animi voluptatum voluptatem est quaerat, tempora dignissimos porro dolores aut at facilis id iste sapiente fuga perferendis. Beatae suscipit, autem assumenda eligendi omnis error amet recusandae, non odio dicta enim consequatur aliquid pariatur consequuntur nulla fugit velit molestiae. A illum impedit, possimus ex et voluptates amet molestias quidem quam magni placeat voluptate fugiat asperiores animi sequi quisquam enim rem sint iusto. Sed voluptatum doloribus porro vel mollitia cupiditate debitis labore, aliquam enim nobis! Reiciendis doloribus error, perferendis recusandae provident nihil itaque cum commodi quidem dolore pariatur aut!</p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eaque quas eos, placeat animi voluptatum voluptatem est quaerat, tempora dignissimos porro dolores aut at facilis id iste sapiente fuga perferendis. Beatae suscipit, autem assumenda eligendi omnis error amet recusandae, non odio dicta enim consequatur aliquid pariatur consequuntur nulla fugit velit molestiae. A illum impedit, possimus ex et voluptates amet molestias quidem quam magni placeat voluptate fugiat asperiores animi sequi quisquam enim rem sint iusto. Sed voluptatum doloribus porro vel mollitia cupiditate debitis labore, aliquam enim nobis! Reiciendis doloribus error, perferendis recusandae provident nihil itaque cum commodi quidem dolore pariatur aut!</p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eaque quas eos, placeat animi voluptatum voluptatem est quaerat, tempora dignissimos porro dolores aut at facilis id iste sapiente fuga perferendis. Beatae suscipit, autem assumenda eligendi omnis error amet recusandae, non odio dicta enim consequatur aliquid pariatur consequuntur nulla fugit velit molestiae. A illum impedit, possimus ex et voluptates amet molestias quidem quam magni placeat voluptate fugiat asperiores animi sequi quisquam enim rem sint iusto. Sed voluptatum doloribus porro vel mollitia cupiditate debitis labore, aliquam enim nobis! Reiciendis doloribus error, perferendis recusandae provident nihil itaque cum commodi quidem dolore pariatur aut!</p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eaque quas eos, placeat animi voluptatum voluptatem est quaerat, tempora dignissimos porro dolores aut at facilis id iste sapiente fuga perferendis. Beatae suscipit, autem assumenda eligendi omnis error amet recusandae, non odio dicta enim consequatur aliquid pariatur consequuntur nulla fugit velit molestiae. A illum impedit, possimus ex et voluptates amet molestias quidem quam magni placeat voluptate fugiat asperiores animi sequi quisquam enim rem sint iusto. Sed voluptatum doloribus porro vel mollitia cupiditate debitis labore, aliquam enim nobis! Reiciendis doloribus error, perferendis recusandae provident nihil itaque cum commodi quidem dolore pariatur aut!</p>
<h3 id="two">Heading Two</h3>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eaque quas eos, placeat animi voluptatum voluptatem est quaerat, tempora dignissimos porro dolores aut at facilis id iste sapiente fuga perferendis. Beatae suscipit, autem assumenda eligendi omnis error amet recusandae, non odio dicta enim consequatur aliquid pariatur consequuntur nulla fugit velit molestiae. A illum impedit, possimus ex et voluptates amet molestias quidem quam magni placeat voluptate fugiat asperiores animi sequi quisquam enim rem sint iusto. Sed voluptatum doloribus porro vel mollitia cupiditate debitis labore, aliquam enim nobis! Reiciendis doloribus error, perferendis recusandae provident nihil itaque cum commodi quidem dolore pariatur aut!</p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eaque quas eos, placeat animi voluptatum voluptatem est quaerat, tempora dignissimos porro dolores aut at facilis id iste sapiente fuga perferendis. Beatae suscipit, autem assumenda eligendi omnis error amet recusandae, non odio dicta enim consequatur aliquid pariatur consequuntur nulla fugit velit molestiae. A illum impedit, possimus ex et voluptates amet molestias quidem quam magni placeat voluptate fugiat asperiores animi sequi quisquam enim rem sint iusto. Sed voluptatum doloribus porro vel mollitia cupiditate debitis labore, aliquam enim nobis! Reiciendis doloribus error, perferendis recusandae provident nihil itaque cum commodi quidem dolore pariatur aut!</p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eaque quas eos, placeat animi voluptatum voluptatem est quaerat, tempora dignissimos porro dolores aut at facilis id iste sapiente fuga perferendis. Beatae suscipit, autem assumenda eligendi omnis error amet recusandae, non odio dicta enim consequatur aliquid pariatur consequuntur nulla fugit velit molestiae. A illum impedit, possimus ex et voluptates amet molestias quidem quam magni placeat voluptate fugiat asperiores animi sequi quisquam enim rem sint iusto. Sed voluptatum doloribus porro vel mollitia cupiditate debitis labore, aliquam enim nobis! Reiciendis doloribus error, perferendis recusandae provident nihil itaque cum commodi quidem dolore pariatur aut!</p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eaque quas eos, placeat animi voluptatum voluptatem est quaerat, tempora dignissimos porro dolores aut at facilis id iste sapiente fuga perferendis. Beatae suscipit, autem assumenda eligendi omnis error amet recusandae, non odio dicta enim consequatur aliquid pariatur consequuntur nulla fugit velit molestiae. A illum impedit, possimus ex et voluptates amet molestias quidem quam magni placeat voluptate fugiat asperiores animi sequi quisquam enim rem sint iusto. Sed voluptatum doloribus porro vel mollitia cupiditate debitis labore, aliquam enim nobis! Reiciendis doloribus error, perferendis recusandae provident nihil itaque cum commodi quidem dolore pariatur aut!</p>
<h3 id="three">Heading Three</h3>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eaque quas eos, placeat animi voluptatum voluptatem est quaerat, tempora dignissimos porro dolores aut at facilis id iste sapiente fuga perferendis. Beatae suscipit, autem assumenda eligendi omnis error amet recusandae, non odio dicta enim consequatur aliquid pariatur consequuntur nulla fugit velit molestiae. A illum impedit, possimus ex et voluptates amet molestias quidem quam magni placeat voluptate fugiat asperiores animi sequi quisquam enim rem sint iusto. Sed voluptatum doloribus porro vel mollitia cupiditate debitis labore, aliquam enim nobis! Reiciendis doloribus error, perferendis recusandae provident nihil itaque cum commodi quidem dolore pariatur aut!</p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eaque quas eos, placeat animi voluptatum voluptatem est quaerat, tempora dignissimos porro dolores aut at facilis id iste sapiente fuga perferendis. Beatae suscipit, autem assumenda eligendi omnis error amet recusandae, non odio dicta enim consequatur aliquid pariatur consequuntur nulla fugit velit molestiae. A illum impedit, possimus ex et voluptates amet molestias quidem quam magni placeat voluptate fugiat asperiores animi sequi quisquam enim rem sint iusto. Sed voluptatum doloribus porro vel mollitia cupiditate debitis labore, aliquam enim nobis! Reiciendis doloribus error, perferendis recusandae provident nihil itaque cum commodi quidem dolore pariatur aut!</p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eaque quas eos, placeat animi voluptatum voluptatem est quaerat, tempora dignissimos porro dolores aut at facilis id iste sapiente fuga perferendis. Beatae suscipit, autem assumenda eligendi omnis error amet recusandae, non odio dicta enim consequatur aliquid pariatur consequuntur nulla fugit velit molestiae. A illum impedit, possimus ex et voluptates amet molestias quidem quam magni placeat voluptate fugiat asperiores animi sequi quisquam enim rem sint iusto. Sed voluptatum doloribus porro vel mollitia cupiditate debitis labore, aliquam enim nobis! Reiciendis doloribus error, perferendis recusandae provident nihil itaque cum commodi quidem dolore pariatur aut!</p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eaque quas eos, placeat animi voluptatum voluptatem est quaerat, tempora dignissimos porro dolores aut at facilis id iste sapiente fuga perferendis. Beatae suscipit, autem assumenda eligendi omnis error amet recusandae, non odio dicta enim consequatur aliquid pariatur consequuntur nulla fugit velit molestiae. A illum impedit, possimus ex et voluptates amet molestias quidem quam magni placeat voluptate fugiat asperiores animi sequi quisquam enim rem sint iusto. Sed voluptatum doloribus porro vel mollitia cupiditate debitis labore, aliquam enim nobis! Reiciendis doloribus error, perferendis recusandae provident nihil itaque cum commodi quidem dolore pariatur aut!</p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eaque quas eos, placeat animi voluptatum voluptatem est quaerat, tempora dignissimos porro dolores aut at facilis id iste sapiente fuga perferendis. Beatae suscipit, autem assumenda eligendi omnis error amet recusandae, non odio dicta enim consequatur aliquid pariatur consequuntur nulla fugit velit molestiae. A illum impedit, possimus ex et voluptates amet molestias quidem quam magni placeat voluptate fugiat asperiores animi sequi quisquam enim rem sint iusto. Sed voluptatum doloribus porro vel mollitia cupiditate debitis labore, aliquam enim nobis! Reiciendis doloribus error, perferendis recusandae provident nihil itaque cum commodi quidem dolore pariatur aut!</p>
<h3 id="four">Heading Four</h3>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eaque quas eos, placeat animi voluptatum voluptatem est quaerat, tempora dignissimos porro dolores aut at facilis id iste sapiente fuga perferendis. Beatae suscipit, autem assumenda eligendi omnis error amet recusandae, non odio dicta enim consequatur aliquid pariatur consequuntur nulla fugit velit molestiae. A illum impedit, possimus ex et voluptates amet molestias quidem quam magni placeat voluptate fugiat asperiores animi sequi quisquam enim rem sint iusto. Sed voluptatum doloribus porro vel mollitia cupiditate debitis labore, aliquam enim nobis! Reiciendis doloribus error, perferendis recusandae provident nihil itaque cum commodi quidem dolore pariatur aut!</p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eaque quas eos, placeat animi voluptatum voluptatem est quaerat, tempora dignissimos porro dolores aut at facilis id iste sapiente fuga perferendis. Beatae suscipit, autem assumenda eligendi omnis error amet recusandae, non odio dicta enim consequatur aliquid pariatur consequuntur nulla fugit velit molestiae. A illum impedit, possimus ex et voluptates amet molestias quidem quam magni placeat voluptate fugiat asperiores animi sequi quisquam enim rem sint iusto. Sed voluptatum doloribus porro vel mollitia cupiditate debitis labore, aliquam enim nobis! Reiciendis doloribus error, perferendis recusandae provident nihil itaque cum commodi quidem dolore pariatur aut!</p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eaque quas eos, placeat animi voluptatum voluptatem est quaerat, tempora dignissimos porro dolores aut at facilis id iste sapiente fuga perferendis. Beatae suscipit, autem assumenda eligendi omnis error amet recusandae, non odio dicta enim consequatur aliquid pariatur consequuntur nulla fugit velit molestiae. A illum impedit, possimus ex et voluptates amet molestias quidem quam magni placeat voluptate fugiat asperiores animi sequi quisquam enim rem sint iusto. Sed voluptatum doloribus porro vel mollitia cupiditate debitis labore, aliquam enim nobis! Reiciendis doloribus error, perferendis recusandae provident nihil itaque cum commodi quidem dolore pariatur aut!</p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eaque quas eos, placeat animi voluptatum voluptatem est quaerat, tempora dignissimos porro dolores aut at facilis id iste sapiente fuga perferendis. Beatae suscipit, autem assumenda eligendi omnis error amet recusandae, non odio dicta enim consequatur aliquid pariatur consequuntur nulla fugit velit molestiae. A illum impedit, possimus ex et voluptates amet molestias quidem quam magni placeat voluptate fugiat asperiores animi sequi quisquam enim rem sint iusto. Sed voluptatum doloribus porro vel mollitia cupiditate debitis labore, aliquam enim nobis! Reiciendis doloribus error, perferendis recusandae provident nihil itaque cum commodi quidem dolore pariatur aut!</p>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eaque quas eos, placeat animi voluptatum voluptatem est quaerat, tempora dignissimos porro dolores aut at facilis id iste sapiente fuga perferendis. Beatae suscipit, autem assumenda eligendi omnis error amet recusandae, non odio dicta enim consequatur aliquid pariatur consequuntur nulla fugit velit molestiae. A illum impedit, possimus ex et voluptates amet molestias quidem quam magni placeat voluptate fugiat asperiores animi sequi quisquam enim rem sint iusto. Sed voluptatum doloribus porro vel mollitia cupiditate debitis labore, aliquam enim nobis! Reiciendis doloribus error, perferendis recusandae provident nihil itaque cum commodi quidem dolore pariatur aut!</p>
</article>
</section>
<section class="link__content" id="link3">
<div class="close">
<p><a href="#"><i class="fa fa-times" aria-hidden="true"></i></a></p>
</div>
<article class="page__content">
<h1>Contact</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eaque quas eos, placeat animi voluptatum voluptatem est quaerat, tempora dignissimos porro dolores aut at facilis id iste sapiente fuga perferendis. Beatae suscipit, autem assumenda eligendi omnis error amet recusandae, non odio dicta enim consequatur aliquid pariatur consequuntur nulla fugit velit molestiae. A illum impedit, possimus ex et voluptates amet molestias quidem quam magni placeat voluptate fugiat asperiores animi sequi quisquam enim rem sint iusto. Sed voluptatum doloribus porro vel mollitia cupiditate debitis labore, aliquam enim nobis! Reiciendis doloribus error, perferendis recusandae provident nihil itaque cum commodi quidem dolore pariatur aut!</p>
</article>
</section>
</section>
</main>
<aside class="todays-specials">
<div class="close">
<p><a href="#"><i class="fa fa-times" aria-hidden="true"></i></a></p>
</div><small>1/1/2017</small>
<h2>Today's Specials</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis ratione, aspernatur distinctio qui similique eaque modi perspiciatis magnam, officiis error consectetur perferendis reiciendis placeat earum sequi aperiam cumque sed ab nesciunt at, non molestias dolorem recusandae! Vero distinctio perferendis accusantium nisi iste pariatur explicabo voluptatem minus at. Obcaecati assumenda voluptates, voluptas itaque similique modi esse. Cupiditate aliquam esse sed tempore voluptates, dignissimos at non perspiciatis, repellat blanditiis ipsam! Laudantium ex temporibus nostrum a vel beatae nesciunt alias, est, aliquam esse quas possimus minima reiciendis, suscipit quis illo magnam nobis eos fuga odit ad assumenda rerum ab voluptatum? Atque, vel, et!</p>
</aside>
html {
height: inherit;
}
body {
margin: 0;
position: relative;
overflow: hidden;
font-family: "Yrsa", serif;
font-size: 18px;
line-height: 1.4;
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(http://highwaywebconsulting.com/wp-content/uploads/2016/12/city-restaurant-table-pavement.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 100vh;
}
h1,
h2,
h3,
h4 {
font-family: "Source Sans Pro", sans-serif;
text-transform: uppercase;
}
button {
background: transparent;
border: 1px solid white;
padding: 1rem 2rem;
border-radius: 50px;
color: white;
text-transform: uppercase;
cursor: pointer;
letter-spacing: 0.5px;
}
button:hover {
background: white;
color: #444;
}
.todays-specials {
display: none;
background-color: white;
font-size: 0.9rem;
width: 80%;
margin: auto;
position: fixed;
top: 2rem;
left: 50%;
transform: translateX(-50%);
padding: 1rem;
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.3);
z-index: 200;
}
.todays-specials h2 {
margin-top: 0;
}
.todays-specials .close {
position: relative;
margin: -1rem 0;
}
.todays-specials .close p {
padding: 0;
margin: 0;
}
.todays-specials .close a {
color: #444;
}
.todays-specials .close a:hover {
color: rgba(68, 68, 68, 0.8);
}
.close {
text-align: right;
position: absolute;
top: 1.1rem;
right: 0;
}
.close a {
color: white;
font-size: 1.2rem;
}
.close a:hover {
color: rgba(255, 255, 255, 0.8);
}
header {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0;
padding: 0 5px;
background: #fff;
position: relative;
z-index: 10;
}
header img {
border-radius: 50%;
width: 60px;
}
.menu ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
}
.menu ul li {
margin: 0 1.5rem;
font-size: 1.5rem;
}
.menu ul li a {
color: rgba(170, 170, 170, 0.7);
}
.menu ul li a:hover {
color: #aaa;
}
main .sidebar {
display: none;
position: absolute;
left: 0;
flex: 1 0 5rem;
background: #eee;
box-shadow: 1px 10px 10px -8px rgba(0, 0, 0, 0.2);
width: 100%;
z-index: 50;
font-family: "Source Sans Pro", sans-serif;
}
main .sidebar ul {
list-style: none;
padding: 1rem;
font-size: 1rem;
}
main .sidebar ul li {
padding: 0.5rem 0;
}
main .sidebar ul a {
color: #444;
}
.main-content {
padding: 1rem;
color: white;
}
.link__content {
position: absolute;
top: 3rem;
left: 100%;
width: 100%;
padding: 1rem 0;
height: 91vh;
overflow: auto;
}
.link__content h1,
.link__content h3 {
padding: 0 1.85rem;
}
.link__content p {
padding: 0 2rem;
}
.slide-left {
transform: translateX(-100%);
animation: slideIn 500ms;
}
.slide-right {
transform: translateX(100%);
animation: slideOut 500ms;
}
@keyframes slideIn {
0%, 100% {
transform: translateX(0);
opacity: 0;
}
100% {
transform: translateX(-100%);
opacity: 1;
}
}
@keyframes slideOut {
0%, 100% {
transform: translateX(-100%);
opacity: 1;
}
100% {
transform: translateX(0);
opacity: 0;
}
}
#link1 {
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(http://highwaywebconsulting.com/wp-content/uploads/2016/12/Four_Seasons_Restaurant-_The_Brilliant_Pool_Room.jpg);
background-size: cover;
background-position: center;
color: white;
}
#link2 {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(http://highwaywebconsulting.com/wp-content/uploads/2016/12/Caneel_Bay_Equator_Restaurant_by_Sugar_Mill_Ruins_at_night.jpg);
background-size: cover;
background-position: center;
color: white;
}
#link3 {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(http://highwaywebconsulting.com/wp-content/uploads/2016/12/food-restaurant-hand-dinner.jpg);
background-size: cover;
background-position: center;
color: white;
}
.section__menu {
font-family: "Source Sans Pro", sans-serif;
}
.section__menu nav {
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.section__menu nav ul {
list-style: none;
padding: 5px 0 0;
margin-left: 1.8rem;
display: flex;
}
.section__menu nav ul li {
margin-right: 1rem;
}
.section__menu nav ul li a {
color: white;
text-decoration: none;
text-transform: uppercase;
}
.section__menu nav ul li a:hover {
color: rgba(255, 255, 255, 0.8);
}
.page__content {
padding-top: 1rem;
}
.page__content h3 {
padding-top: 2rem;
}
$('.link__content').hide();
$('.logo').on('click', function() {
$('.sidebar').slideToggle( 200 );
});
$('.menu__link').on('click', function(e) {
var linkID = $(this).attr('data-link');
$('.sidebar').hide();
$('.link__content').hide().removeClass('slide-left');
$('#' + linkID).show().addClass('slide-left');
$('.link__content .close').on('click', function() {
$('.link__content').hide().removeClass('slide-left');
});
});
$('.specials').on('click', function() {
$('.todays-specials').fadeIn( 300 );
});
$('.todays-specials .close').on('click', function() {
$('.todays-specials').fadeOut( 300 );
});
