"Matterport Skin"
Bootstrap 3.3.0 Snippet by dorofino

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
<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="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<nav class="navbar navbar-fixed-left navbar-minimal animate" role="navigation">
<div class="navbar-toggler animate">
<span class="menu-icon"></span>
</div>
<ul class="navbar-menu animate">
<li>
<a href="#about-us" class="animate">
<span class="desc animate"> Who We Are </span>
<span class="glyphicon glyphicon-user"></span>
</a>
</li>
<li>
<a href="#blog" class="animate">
<span class="desc animate"> What We Say </span>
<span class="glyphicon glyphicon-info-sign"></span>
</a>
</li>
<li>
<a href="#contact-us" class="animate">
<span class="desc animate"> How To Reach Us </span>
<span class="glyphicon glyphicon-comment"></span>
</a>
</li>
</ul>
</nav>
<iframe width="100%" height="100%" src="https://my.matterport.com/show/?play=1&m=BdRTSDPckTF" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
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
/* START OF DEMO CSS - NOT NEEDED */
html, body { height: 100% } /* BODY BACKGROUND IMAGE DOESNT ALWAYS REACH THE BOTTOM OF THE BROWSER*/
body {
background-color: rgb(100, 100, 100);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
color: rgb(255, 255, 255);
}
.white-background {
background-color: rgb(255, 255, 255);
color: rgb(51, 51, 51);
padding-top: 10px;
border-radius: 4px;
}
.title {
font-size: 3em;
font-weight: 700;
text-shadow: 0px 0px 5px rgb(51, 51, 51);
text-shadow: 0px 0px 5px rgba(51, 51, 51, 0.8);
text-align: center;
}
#fullscreen {
position: fixed;
top: 10px;
right: 10px;
}
/* END OF DEMO CSS */
.animate {
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
-ms-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(function () {
/* START OF DEMO JS - NOT NEEDED */
if (window.location == window.parent.location) {
$('#fullscreen').html('<span class="glyphicon glyphicon-resize-small"></span>');
$('#fullscreen').attr('href', 'http://bootsnipp.com/mouse0270/snippets/PbDb5');
$('#fullscreen').attr('title', 'Back To Bootsnipp');
}
$('#fullscreen').on('click', function(event) {
event.preventDefault();
window.parent.location = $('#fullscreen').attr('href');
});
$('#fullscreen').tooltip();
/* END DEMO OF JS */
$('.navbar-toggler').on('click', function(event) {
event.preventDefault();
$(this).closest('.navbar-minimal').toggleClass('open');
})
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Kit PRO Angular

Questions / Comments: