<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/4.5.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg bg-rose">
<div class="container">
<div class="navbar-translate">
<a class="navbar-brand">Brand</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">
<li class="nav-item active">
<a href="#pablo" class="nav-link">link<div class="ripple-container"></div></a>
</li>
<li class="nav-item">
<a href="#pablo" class="nav-link">link</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<form class="form-inline ml-auto">
<div class="form-group has-white bmd-form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-white btn-raised btn-fab btn-round">
<i class="material-icons">search</i>
</button>
</form>
</ul>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-lg bg-info">
<div class="container">
<div class="navbar-translate">
<a class="navbar-brand">Info Color</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="active nav-item">
<a href="#pablo" class="nav-link">
Discover
</a>
</li>
<li class="nav-item">
<a href="#pablo" class="nav-link">
Profile
</a>
</li>
<li class="nav-item">
<a href="#pablo" class="nav-link">
Settings
</a>
</li>
</ul>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-lg bg-primary">
<div class="container">
<div class="navbar-translate">
<a class="navbar-brand">Primary Color</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="active nav-item">
<a href="#pablo" class="nav-link">
<i class="material-icons">explore</i> Discover
</a>
</li>
<li class="nav-item">
<a href="#pablo" class="nav-link">
<i class="material-icons">account_circle</i> Profile
<div class="ripple-container"></div></a>
</li>
<li class="nav-item">
<a href="#pablo" class="nav-link">
<i class="material-icons">settings</i> Settings
</a>
</li>
</ul>
</div>
</div>
</nav>
<nav class="navbar navbar-inverse navbar-expand-lg bg-dark" role="navigation-demo">
<div class="container">
<div class="navbar-translate">
<a class="navbar-brand">Navbar with notification</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="nav-item">
<a href="#pablo" class="nav-link">
Discover
</a>
</li>
<li class="nav-item">
<a href="#pablo" class="nav-link">
Wishlist
</a>
</li>
<li class="nav-item">
<a href="#pablo" class="btn btn-rose btn-raised btn-fab btn-round" data-toggle="dropdown">
<i class="material-icons">email</i>
<div class="ripple-container"></div></a>
</li>
<li class="nav-item">
<a href="#pablo" class="profile-photo nav-link">
<div class="profile-photo-small">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT75LwIaPGKtOYPH16Ny7TzCDQPgMmUQOuMZMSIGrLmuFd9_Xho" alt="Circle Image" class="rounded-circle img-fluid">
</div>
<div class="ripple-container"></div></a>
</li>
</ul>
</div>
</div>
</nav>
<nav class="navbar navbar-default navbar-expand-lg">
<div class="container">
<div class="navbar-translate">
<a class="navbar-brand" href="/presentation.html">Navbar with profile</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="nav-item">
<a href="#pablo" class="nav-link">
Discover
</a>
</li>
<li class="nav-item">
<a href="#pablo" class="nav-link">
Wishlist
</a>
</li>
<li class="nav-item">
<a href="#pablo" class="btn btn-rose btn-raised btn-round " data-toggle="dropdown">
Register
</a>
</li>
</ul>
</div>
</div>
</nav>
<nav class="navbar navbar-transparent navbar-expand-lg">
<div class="container">
<div class="navbar-header">
<button type="button" class="ml-auto navbar-toggler" data-toggle="collapse" data-target="#example-navbar-transparent">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#pablo">Transparent</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-transparent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a href="#pablo" class="nav-link">
<i class="fa fa-facebook-square"></i> Facebook
</a>
</li>
<li class="nav-item">
<a href="#pablo" class="nav-link">
<i class="fa fa-twitter"></i> Twitter
</a>
</li>
<li class="nav-item">
<a href="#pablo" class="nav-link">
<i class="fa fa-instagram"></i> Instagram
</a>
</li>
</ul>
</div>
</div>
</nav>
<footer class="footer text-center ">
<p>Made with <a href="https://demos.creative-tim.com/material-kit/index.html" target="_blank">Material Kit</a> by Creative Tim</p>
</footer>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://unpkg.com/popper.js@1.12.6/dist/umd/popper.js" integrity="sha384-fA23ZRQ3G/J53mElWqVJEGJzU0sTs+SvzG8fXVWP+kJQ1lwFAOkcUOysnlKJC33U" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-material-design@4.1.1/dist/js/bootstrap-material-design.js" integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9" crossorigin="anonymous"></script>
</body>
html *{
-webkit-font-smoothing: antialiased;
}
body{
background: url("http://deerwaves.com/wp-content/uploads/2017/07/mountain-names.jpg");
background-size: cover;
}
.navbar{
background: #fff;
color: #555;
padding: 10px 0 !important;
margin-bottom: 20px;
box-shadow: 0 4px 18px 0 rgba(0,0,0,0.12), 0 7px 10px -5px rgba(0,0,0,0.15) !important;
}
.navbar.bg-rose{
color: #fff;
background-color: #e91e63 !important;
box-shadow: 0 4px 20px 0 rgba(0,0,0,0.14), 0 7px 12px -5px rgba(233,30,99,0.46);
}
.navbar.bg-dark{
color: #fff;
background: #212121!important;
box-shadow: 0 4px 20px 0 rgba(0,0,0,0.14), 0 7px 12px -5px rgba(33,33,33,0.46);
}
.navbar.bg-info{
color: #fff;
background: #00bcd4!important;
box-shadow: 0 4px 20px 0 rgba(0,0,0,0.14), 0 7px 12px -5px rgba(0,188,212,0.46);
}
.navbar.bg-primary{
color: #fff;
background: #9c27b0!important;
box-shadow: 0 4px 20px 0 rgba(0,0,0,0.14), 0 7px 12px -5px rgba(156,39,176,0.46);
}
.navbar.navbar-transparent{
color: #fff;
background: transparent;
box-shadow: none !important;
}
.navbar.navbar-transparent .navbar-brand{
color: #fff;
}
.navbar .navbar-nav .nav-item .nav-link{
color: white;
position: relative;
color: inherit;
padding: 15px;
font-weight: 400;
font-size: 12px;
text-transform: uppercase;
border-radius: 3px;
line-height: 20px;
}
.navbar .navbar-nav .nav-item .nav-link i{
font-size: 20px;
margin-top: -7px;
top: 5px;
position: relative;
margin-right: 3px;
}
.navbar .navbar-nav .nav-item .nav-link i.fa{
margin-top: -4px;
top: 2px;
}
.navbar .navbar-nav .nav-item.active .nav-link{
background-color: hsla(0,0%,100%,.1);
border-radius: 4px;
}
.navbar .navbar-brand{
color: #555;
font-weight: 300;
font-size: 18px;
}
.btn{
position: relative;
padding: 12px 30px !important;
margin: .3125rem 1px;
font-size: 12px !important;
font-weight: 400 !important;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0;
cursor: pointer;
background-color: transparent;
border: 0;
outline: 0;
}
.btn i{
margin-top: 0;
position: absolute;
width: 100%;
-webkit-transform: none;
transform: none;
left: 0;
top: 0;
height: 100%;
line-height: 41px;
font-size: 20px;
}
.btn.btn-fab{
font-size: 24px;
height: 41px;
min-width: 41px;
width: 41px;
padding: 0 !important;
overflow: hidden;
position: relative;
line-height: 41px;
}
.btn.btn-round{
border-radius:30px;
}
.btn.btn-rose{
color: #fff;
background-color: #e91e63;
border-color: #e91e63;
-webkit-box-shadow: 0 2px 2px 0 rgba(233,30,99,0.14), 0 3px 1px -2px rgba(233,30,99,0.2), 0 1px 5px 0 rgba(233,30,99,0.12);
box-shadow: 0 2px 2px 0 rgba(233,30,99,0.14), 0 3px 1px -2px rgba(233,30,99,0.2), 0 1px 5px 0 rgba(233,30,99,0.12) !important;
}
.btn.btn-rose:hover{
color: #fff;
background-color: #ea2c6d;
border-color: #b8124a;
box-shadow: 0 14px 26px -12px rgba(233,30,99,0.42), 0 4px 23px 0 rgba(0,0,0,0.12), 0 8px 10px -5px rgba(233,30,99,0.2) !important;
}
.btn.btn-rose:focus{
color: #fff;
background-color: #ea2c6d;
border-color: #b8124a;
}
.btn.btn-white{
background-color: #fff;
color: #999;
}
.btn.btn-white:hover{
background-color: #fff;
color: #999;
}
.btn.btn-white:focus{
background-color: #fff;
color: #999;
}
.nav-link.profile-photo{
padding: 0 !important;
margin: 5px 3px 0;
border-radius: 50% !important;
}
.profile-photo-small{
height: 40px;
width: 40px;
border-radius: 50%;
}
.rounded-circle{
border-radius: 50%;
}
.form-control{
color: white !important;
}
.form-control:focus{
box-shadow: none;
}
.form-control::placeholder{
color: white !important;
font-weight: 400;
font-size: 14px !important;
}
.has-white .form-control{
color: white;
background-image: linear-gradient(to top,#fff 2px,rgba(255,255,255,0) 2px),linear-gradient(to top,#fff 1px,rgba(255,255,255,0) 1px) !important;
}
footer{
margin-top:200px;
color: #555;
background: #fff;
padding: 25px;
font-weight: 300;
}
.footer p{
margin-bottom: 0;
}
footer p a{
color: #555;
font-weight: 400;
}
footer p a:hover{
color: #9f26aa;
text-decoration: none;
}
$(document).ready(function() {
$('body').bootstrapMaterialDesign();
});
