"Bootstrap Landing Page"
Bootstrap 4.0.0 Snippet by CreativeTim

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.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 ---------->
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css" integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons">
<link rel="stylesgeet" href="https://rawgit.com/creativetimofficial/material-kit/master/assets/css/material-kit.css">
</head>
<body class="landing-page ">
<nav class="navbar navbar-color-on-scroll navbar-transparent fixed-top navbar-expand-lg " color-on-scroll="100" id="sectionsNav">
<div class="container">
<div class="navbar-translate">
<a class="navbar-brand" href="../index.html">Material Kit </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
<span class="navbar-toggler-icon"></span>
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="dropdown nav-item">
<a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">
<i class="material-icons">apps</i> Components
</a>
<div class="dropdown-menu dropdown-with-icons">
<a href="../index.html" class="dropdown-item">
<i class="material-icons">layers</i> All Components
</a>
<a href="http://demos.creative-tim.com/material-kit/docs/2.0/getting-started/introduction.html" class="dropdown-item">
<i class="material-icons">content_paste</i> Documentation
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 * {
-webkit-font-smoothing: antialiased;
}
.container h1 {
font-size: 3.3125rem;
line-height: 1.15em;
}
.container h4 {
font-size: 1.125rem;
line-height: 1.5em;
margin-top: 10px;
margin-bottom: 10px;
font-family: Roboto,Helvetica,Arial,sans-serif;
font-weight: 300;
}
.container h5 {
font-family: Roboto,Helvetica,Arial,sans-serif;
font-weight: 300;
font-size: 1.0625rem;
line-height: 1.55em;
margin-bottom: 15px;
}
.title, .title {
margin-top: 30px;
margin-bottom: 25px;
min-height: 32px;
color: #3C4858;
text-decoration: none;
font-weight: 700;
font-family: "Roboto Slab","Times New Roman",serif;
}
.container a {
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
var big_image;
$(document).ready(function() {
BrowserDetect.init();
// Init Material scripts for buttons ripples, inputs animations etc, more info on the next link https://github.com/FezVrasta/bootstrap-material-design#materialjs
$('body').bootstrapMaterialDesign();
window_width = $(window).width();
$navbar = $('.navbar[color-on-scroll]');
scroll_distance = $navbar.attr('color-on-scroll') || 500;
$navbar_collapse = $('.navbar').find('.navbar-collapse');
// Activate the Tooltips
$('[data-toggle="tooltip"], [rel="tooltip"]').tooltip();
// Activate Popovers
$('[data-toggle="popover"]').popover();
if ($('.navbar-color-on-scroll').length != 0) {
$(window).on('scroll', materialKit.checkScrollForTransparentNavbar);
}
materialKit.checkScrollForTransparentNavbar();
if (window_width >= 768) {
big_image = $('.page-header[data-parallax="true"]');
if (big_image.length != 0) {
$(window).on('scroll', materialKit.checkScrollForParallax);
}
}
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: