Skip to content

Instantly share code, notes, and snippets.

@kemist

kemist/index.html

Created March 29, 2019 02:08
Show Gist options
  • Save kemist/0b383a58faa2501b1cf8f61a1e7cee66 to your computer and use it in GitHub Desktop.
Save kemist/0b383a58faa2501b1cf8f61a1e7cee66 to your computer and use it in GitHub Desktop.
Download ZIP
Material Design Navbars
Raw
index.html
<!--Header-->
<header>
<!--Navbar-->
<nav class="navbar navbar-expand-sm navbar-dark mdb-color
darken-1">
<!-- Navbar brand -->
<div class="container">
<!-- Navbar brand logo box -->
<span class="btn-sm btn-outline-info">
<i id="icon" class="fa fa-flask" style="text-shadow: rgb(179, 18, 117) 0px 0px 0px, rgb(194, 19, 127) .1rem .1rem 0rem, rgb(209, 21, 137) .15rem .15rem 0px, rgb(224, 22, 147) .2rem .2rem 0rem, rgb(240, 24, 157) .2rem .20rem; font-size: 1rem ; color: rgb(255, 255, 255); height: 1.7rem; width: 1.7rem; line-height: 1.5rem; border-radius: 0px; text-align: center; background-color: rgb(255, 25, 167);"></i>
<a class="navbar-brand text-uppercase kem-logo pr-2 nav-item active
" href="#">
<!-- <img class="rounded-lg mr-auto mx-1" src="https://avatars2.githubusercontent.com/u/37133258?s=400&u=de55955bb1d5897247f3c614b596116f3d9f8204&v=4" width="32px" height="32px" class="d-inline-block align-top" alt=""> -->
Kemedia
</a>
</span>
<!-- Collapse button -->
<button class="navbar-toggler toggler-example" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"><span class="dark-blue-text"><i
class="fas fa-bars fa-2x"></i></span></button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="navbarSupportedContent1">
<!-- Links -->
<ul class="navbar-nav mr-auto open-sans">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
<!-- Links -->
</div>
<!-- Collapsible content -->
</nav>
<!--/.Navbar-->
</header>
<!--Header-->
<!--Main layout-->
<main class="pt-1">
<div class="container text-xs-center">
<!--Section: Navbars-->
<section class="section">
<!--Section heading-->
<h1 class="section-heading">Navbars</h1>
<!--Navbar blue-->
<nav class="navbar navbar-dark bg-primary">
<!-- Collapse button-->
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapseEx2"><i class="fa fa-bars"></i></button>
<div class="container">
<!--Collapse content-->
<div class="collapse navbar-toggleable-xs" id="collapseEx2">
<!--Navbar Brand-->
<!--Links-->
<ul class="nav navbar-nav">
<li class="nav-item ">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item btn-group">
<a class="nav-link dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu dropdown-primary" aria-labelledby="dropdownMenu1" data-dropdown-in="fadeIn" data-dropdown-out="fadeOut">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<!--Search form-->
<form class="form-inline">
<input class="form-control" type="text" placeholder="Search">
</form>
</div>
<!--/.Collapse content-->
</div>
</nav>
<!--/.Navbar blue-->
<div style="height: 40px"></div>
<!--Navbar purple-->
<nav class="navbar navbar-dark secondary-color-dark">
<!-- Collapse button-->
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapseEx"><i class="fa fa-bars"></i></button>
<div class="container">
<!--Collapse content-->
<div class="collapse navbar-toggleable-xs" id="collapseEx">
<!--Links-->
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#best-features">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#examples-of-use">Examples</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#testimonials">Testimonials</a>
</li>
</ul>
<!--/Links-->
<!--Navbar icons-->
<ul class="nav navbar-nav nav-flex-icons">
<li class="nav-item">
<a class="nav-link"><i class="fa fa-twitter"></i></a>
</li>
<li class="nav-item">
<a class="nav-link"><i class="fa fa-google-plus"></i></a>
</li>
<li class="nav-item btn-group">
<a class="nav-link dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-user"></i></a>
<div class="dropdown-menu dropdown-primary" aria-labelledby="dropdownMenu1" data-dropdown-in="fadeIn" data-dropdown-out="fadeOut">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<!--/Navbar icons-->
</div>
<!--/.Collapse content-->
</div>
</nav>
<!--/.Navbar purple-->
<div style="height: 40px"></div>
<!--Navbar green-->
<nav class="navbar navbar-dark default-color">
<!-- Collapse button-->
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapseEx22"><i class="fa fa-bars"></i> </button>
<div class="container">
<!--Collapse content-->
<div class="collapse navbar-toggleable-xs" id="collapseEx22">
<!--Navbar Brand-->
<!--Links-->
<ul class="nav navbar-nav pull-right">
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fa fa-envelope"></i> Contact</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-user"></i> Profile</a>
<div class="dropdown-menu dropdown-default" aria-labelledby="dropdownMenu1" data-dropdown-in="fadeIn" data-dropdown-out="fadeOut">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-gear"></i> Settings</a>
</li>
</ul>
<!--Links-->
</div>
<!--/.Collapse content-->
</div>
</nav>
<!--/.Navbar green-->
</section>
<!-- Outro -->
<section id="outro">
<div class="container">
<div class="row text-xs-center p-t-1 p-b-4">
<div class="col-md-12">
<br>
<h3>Built with Material Design for Bootstrap</h3>
<br>
<p>Powerful and free Material Design UI KIT</p>
<p><strong>400+</strong> material UI elements, <strong>600+</strong> material icons, <strong>74</strong> CSS animations, SASS files, templates, tutorials and many more. </p>
<a target="_blank" href="https://mdbootstrap.com/material-design-for-bootstrap/" class="btn btn-primary btn-lg"><i class="fa fa-download left"></i> Free download</a>
</div>
</div>
</div>
</section>
<!-- / Outro -->
</div>
</main>
<!--/Main layout-->
</div><!--Container-->
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.4/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.5/js/mdb.min.js"></script>
Raw
style.css
.icon {
display: inline-block;
width: 1em;
height: 1em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
background-color: #00bcd4;
}
.kem-logo {
font-family: "Roboto";
font-weight: 700;
font-style: italic;
background-color: green;
margin: 0px;
padding: 0 .3rem 0 0.3rem;
letter-spacing: 0.0625em;
}
.navbar-brand-logo-box {
display: box;
width: 4px;
border-color: white;
float: left;
}
.roboto {
font-family: "Roboto";
}
.open-sans {
font-family: "Open Sans";
}
fa-flask {
font-size: 20px;
width: 30px;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.5/css/mdb.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i|Roboto+Condensed:300,300i,400,400i,700,700i" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,500,500i,700,700i,900,900i|Noto+Sans:300,300i,400,400i,500,500i,700,700i,900,900i|Poppins:300,500,700" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment