"Experience "
Bootstrap 4.1.1 Snippet by divyalahad

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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 {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$('.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 );
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Dashboard

Questions / Comments: