<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ][ animate navbar-pink ]" role="navigation">
<div class="[ container ]">
<div class="[ navbar-header ]">
<button type="button" class="[ navbar-toggle ]" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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 ][ animate ]" href="#home">Bootstrap Growl</a>
</div>
<div class="[ collapse navbar-collapse ]" id="bs-example-navbar-collapse-1">
<ul class="[ nav navbar-nav navbar-right ]">
<li class="[ aniamte animate-2s ]"><a href="#growl-builder" class="[ aniamte animate-2s ]">Growl Builder</a></li>
<li class="[ dropdown ]">
<a href="#growl-documentation" class="[ aniamte animate-2s ]">Documentation</a>
<a href="#growl-documentation-dropdown" class="[ dropdown-toggle ][ aniamte animate-2s ]" data-toggle="dropdown"><span class="caret"></span></a>
<ul class="[ dropdown-menu ]" role="menu">
<li><a href="#growl-documentation-options" class="[ aniamte animate-2s ]" tabindex="-1">Options</a></li>
<li><a href="#growl-documentation-settings" class="[ aniamte animate-2s ]" tabindex="-1">Settings</a></li>
<li><a href="#growl-documentation-methods" class="[ aniamte animate-2s ]" tabindex="-1">Methods</a></li>
</ul>
</li>
<li class="[ aniamte animate-2s ]"><a href="#growl-examples" class="[ aniamte animate-2s ]">Examples</a></li>
</ul>
</div>
</div>
</nav>
<div class="container" style="margin-top:10px;">
<div class="row form-group">
<div class="col-xs-12 col-md-6">
<div class="panel panel-default">
<div class="panel-image hide-panel-body">
<img src="http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_52d09387ae003_1.JPG" class="panel-image-preview" />
</div>
<div class="panel-body">
<h4>Datacenter @ 833 Chestnut</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper et.</p>
</div>
<div class="panel-footer text-center">
<a href="#download"><span class="glyphicon glyphicon-download"></span></a>
<a href="#facebook"><span class="fa fa-facebook"></span></a>
<a href="#twitter"><span class="fa fa-twitter"></span></a>
<a href="#share"><span class="glyphicon glyphicon-share-alt"></span></a>
</div>
</div>
</div>
<div class="col-xs-12 col-md-6">
<div class="panel panel-default">
<div class="panel-image hide-panel-body">
<img src="http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_52cf9489095e8_1.JPG" class="panel-image-preview" />
</div>
<div class="panel-body">
<h4>Title of Image</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lobortis nisl, vitae iaculis sapien. Phasellus ultrices gravida massa luctus ornare. Suspendisse blandit quam elit, eu imperdiet neque semper et.</p>
</div>
<div class="panel-footer text-center">
<a href="#download"><span class="glyphicon glyphicon-download"></span></a>
<a href="#facebook"><span class="fa fa-facebook"></span></a>
<a href="#twitter"><span class="fa fa-twitter"></span></a>
<a href="#share"><span class="glyphicon glyphicon-share-alt"></span></a>
</div>
</div>
</div>
</div>
<div class="[ container ]">
<div class="[ row ]">
<div class="[ col-xs- 12 ]">
<h2>So what is so special about this menu it deserves a snippet?</h2>
<p>You mean besides the pink design? haha.</p>
<p>No really. I like the dropdown I hade. it allows the word documentation to be it's own link will still containing a dropdown. Check it out.</p>
</div>
</div>
</div>
@import url(//fonts.googleapis.com/css?family=Roboto:500,700);
.animate {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.animate-2s {
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
-ms-transition-duration: 0.2s;
transition-duration: 0.2s;
}
.navbar-pink {
background-color: rgb(255, 121, 185);
border-color: rgb(194, 97, 135);
border-radius: 0;
border-top-width: 0;
color: rgb(255, 255, 255);
font-family: Roboto,sans-serif;
font-weight: 500;
margin-bottom: 0;
}
.navbar-pink .navbar-toggle .icon-bar {
background-color: rgb(255, 255, 255);
}
.navbar-pink a.navbar-brand {
color: rgb(255, 255, 255);
font-weight: 700;
}
.navbar-pink .navbar-nav > li > a,
.navbar-pink .navbar-nav > li > .dropdown-menu > li > a {
color: rgb(255, 255, 255);
display: block;
letter-spacing: 2px;
}
.navbar-pink .navbar-nav > li.dropdown {
}
.navbar-pink .navbar-nav > li.dropdown > a:nth-of-type(2) {
position: absolute;
right: 0px;
top: 0px;
}
.navbar-pink .navbar-nav > li.dropdown.open > a:nth-of-type(2),
.navbar-pink .navbar-nav > li.dropdown:focus > a:nth-of-type(2),
.navbar-pink .navbar-nav > li.dropdown:hover > a:nth-of-type(2) {
border-left: 2px solid rgb(255, 121, 185);
}
.navbar-pink .navbar-nav > li.dropdown.open > a,
.navbar-pink .navbar-nav > li.dropdown:focus > a,
.navbar-pink .navbar-nav > li.dropdown:hover > a,
.navbar-pink .navbar-nav > .active > a,
.navbar-pink .navbar-nav > li > a:focus,
.navbar-pink .navbar-nav > li > a:hover {
color: rgb(51, 51, 51);
background-color: rgb(235, 235, 235);
border-bottom: 5px solid rgb(255, 121, 185);
padding-bottom: 10px;
}
.navbar-pink .navbar-nav > li > .dropdown-menu {
background-color: rgb(255, 121, 185);
border-radius: 0px;
min-width: 100%;
padding: 0px;
}
.navbar-pink .navbar-nav > li > .dropdown-menu > li > a {
display: block;
padding: 10px 20px;
}
.navbar-pink .navbar-nav > li > .dropdown-menu > .active > a,
.navbar-pink .navbar-nav > li > .dropdown-menu > li > a:focus,
.navbar-pink .navbar-nav > li > .dropdown-menu > li > a:hover {
color: rgb(51, 51, 51);
background-color: rgb(235, 235, 235);
border-left: 5px solid rgb(255, 121, 185);
padding-left: 15px;
width: 100%;
}
@media (min-width: 768px) {
.navbar-pink .navbar-nav > li.dropdown > a {
display: inline-block;
}
.navbar-pink .navbar-nav > li.dropdown > a:nth-of-type(2) {
margin-left: -1px;
position: relative;
}
.navbar-pink .navbar-nav > li.dropdown.open > a:nth-of-type(2),
.navbar-pink .navbar-nav > li.dropdown:focus > a:nth-of-type(2),
.navbar-pink .navbar-nav > li.dropdown:hover > a:nth-of-type(2) {
border-left-width: 0px;
}
}
