<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ---------->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div id="wrapper">
<header class="header navbar-fixed-top">
<div class="container">
<ul class="nav navbar-nav navbar-right topnav ">
<li class="followUs">
<a href="#"><i class="fa fa-facebook fa-fw"></i></a>
<a href="#"><i class="fa fa-twitter fa-fw"></i></a>
<a href="#"><i class="fa fa-google-plus fa-fw"></i></a>
<a href="#"><i class="fa fa-youtube fa-fw"></i></a>
</li>
<li class="active"><a href="callto:9999999999"><i class="fa fa-phone fa-fw"></i> +91 9999999999</a></li>
<li class="active"><a href="mailto:info@Aditya.com"><i class="fa fa-envelope fa-fw"></i> info@bloom.com</a></li>
</ul>
</div><!-- end of container -->
<nav class="navbar menubar navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand logo"><h4>My Logo Here</h4></a>
</div>
<!-- Collection of nav links, forms, and other content for toggling -->
<ul class="nav navbar-nav navbar-right rightmenu">
<li><a href="#"><span><i class="fa fa-shopping-cart"></i></span><span class="cart-count" id="cart_count">0</span></a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" type="button" data-toggle="dropdown"><span><i class="fa fa-user"></i></span></a>
<ul class="dropdown-menu">
<li><a href="#">Login</a></li>
<li><a href="#">Register</a></li>
</ul>
</li>
<li><a href="#" onclick="openNav2()"><span><i class="fa fa-search"></i></span></a></li>
</ul>
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Our Story</a></li>
<li class="dropdown mega-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Shop </a>
<ul class="dropdown-menu mega-dropdown-menu">
<li class="col-sm-3 col-xs-6">
<ul>
<li><a href="#">Top</a></li>
<li><a href="#">Dresses</a></li>
<li><a href="#">Jumpsuits</a></li>
<li><a href="#">Rompers</a></li>
</ul>
</li>
<li class="col-sm-3 col-xs-6">
<ul>
<li><a href="#">Sweaters</a></li>
<li><a href="#">Jackets</a></li>
<li><a href="#">Pants</a></li>
<li><a href="#">Skirts</a></li>
</ul>
</li>
<li class="col-sm-3 col-xs-6">
<ul>
<li><a href="#">Boxers</a></li>
<li><a href="#">Pajamas</a></li>
<li><a href="#">Tees</a></li>
<li><a href="#">Sweatshirts</a></li>
</ul>
</li>
<li class="col-sm-3 col-xs-6">
<ul>
<li><a href="#">Camisole</a></li>
<li><a href="#">Bra Top</a></li>
<li><a href="#">Leggings</a></li>
<li><a href="#">Tubes</a></li>
</ul>
</li>
<li class="col-sm-3 col-xs-6">
<ul>
<li><a href="#">Jewelry</a></li>
<li><a href="#">Fashion Tape</a></li>
<li><a href="#">Scarves</a></li>
<li><a href="#">Stationery</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Sale</a></li>
</ul>
</div>
</div><!-- end of container -->
</nav>
<div id="rightside" class="sidenav2">
<div class="sidemenu">
<div class="hdwel light">
SEARCH
<a href="javascript:void(0)" class="closebtn" onclick="closeNav2()">×</a>
</div><!-- end of hdwel -->
<div class="input-group inputserch">
<input type="text" class="form-control" placeholder="Search" >
<span class="input-group-addon">
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
<br/>
<small>Find your product with fast search. Enter some keyword such as dress, shirts, shoes etc. Or can search by product sku.</small>
<div class="clear"></div>
<br/>
<h4>FEATURED PRODUCTS</h4>
<ul class="list-unstyled listitem">
<li><a href="listing.html">
<img src="http://htmlvalley.in/BloomHtml/images/pics3.jpg" alt="" />
<div class="ttbox">
<div class="prodbtm"><p>Analese Striped Shift Dress</p>
<span><i class="fa fa-inr"></i> 1,300</span>
</div>
</div>
</a>
</li>
<li><a href="listing.html">
<img src="http://htmlvalley.in/BloomHtml/images/pics5.jpg" alt="" />
<div class="ttbox">
<div class="prodbtm"><p>Analese Striped Shift Dress</p>
<span><i class="fa fa-inr"></i> 1,300</span>
</div>
</div></a>
</li>
</ul>
</div><!-- end of sidemenu -->
</div><!-- end of sidenav2 -->
</header><!-- end of header -->
<section class="sliderpanel">
<header id="myCarousel" class="carousel slide myslider" data-interval="3000" data-ride="carousel">
<!-- Carousel indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active" style="background-image: url('http://htmlvalley.in/BloomHtml/images/slider.jpg');"></div>
<div class="item" style="background-image: url('http://htmlvalley.in/BloomHtml/images/slider2.jpg');"></div>
<div class="item" style="background-image: url('http://htmlvalley.in/BloomHtml/images/slider3.jpg');"></div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" data-slide="prev" href="#myCarousel">‹</a>
<a class="carousel-control right" data-slide="next" href="#myCarousel">›</a>
</header>
</section><!-- end of sliderpanel -->
</div><!-- end of wrapper -->
html,
body{
height: 100%;
}
html {
min-height: 100%;
}
body {
height: 100%;
}
#wrapper{
width: 100%;
display: block;
margin: 0px;
position: relative;
}
.header{
display: block;
background-color: #f1f1f1;
}
.topnav{
display: block;
}
.topnav li{
margin: 0px 6px;
}
.header .topnav li a{
color: #000;
font-size: 13px;
padding: 3px 3px;
font-weight: 200;
}
.followUs a{
float: left;
}
#wrapper .logo{
max-width: 160px;
padding: 8px 10px;
height: auto;
border-radius: 5px;
}
.logo img{
width: 100%;
}
#wrapper .menubar{
display: block;
margin: 0px;
min-height: inherit;
z-index: 9;
-webkit-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
background-color: transparent;
}
#wrapper .menubar.navbar-fixed-top {
top: 24px;
}
#wrapper .menubar:hover{
background-color: #fff;
box-shadow: 0 1px 5px rgba(0,0,0,.05);
}
#wrapper .meffect{
background-color: #fff;
box-shadow: 0 1px 5px rgba(0,0,0,.05);
}
.header .menubar li a{
color: #000;
font-size: 13px;
line-height: 37px;
padding: 10px 15px;
}
.header .menubar li a:hover{
background-color: transparent;
color: #850072;
}
.header .menubar li a:focus{
background-color: transparent;
}
.header .menubar .mega-dropdown:hover .dropdown-toggle{
background-color: #850072;
color: #fff;
}
#wrapper .rightmenu{
margin-left: 15px;
}
#wrapper .rightmenu li{
margin: 0px 10px;
}
#wrapper .rightmenu li a{
display: table;
position: relative;
padding: 9px 0px;
}
#wrapper .rightmenu li a span{
width: 40px;
height: 40px;
padding: 0px;
/* line-height: 40px;*/
display: table-cell;
vertical-align: middle;
text-align: center;
color: #000;
border: 1px solid #e5e5e5;
border-radius: 50%;
}
#wrapper .rightmenu a span.cart-count {
font-size: 10px;
color: #fff;
background: #862972;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
border: 0px;
position: absolute;
top: 17px;
right: -5px;
}
#wrapper .rightmenu .dropdown-menu{
min-width: auto;
margin: 0px;
padding: 0px;
}
#wrapper .rightmenu .dropdown li {
margin: 0px;
}
#wrapper .rightmenu .dropdown li a{
padding: 9px 10px;
line-height: normal;
width: 100%;
border-bottom: solid 1px #eee;
}
#wrapper .rightmenu .dropdown li a:hover{
background-color: #862972;
color: #fff;
}
.menubar li.dropdown:hover > .dropdown-menu {
display: block;
}
#wrapper .mega-dropdown {
position: static !important;
}
#wrapper .mega-dropdown-menu {
padding: 10px 0px;
background-color: #f7f5fb;
width: 100%;
text-align: center;
border-bottom: none;
box-shadow: 0px 8px 10px -6px #ababab;
-webkit-box-shadow: 0px 8px 15px -10px #ababab;
}
.mega-dropdown-menu > li.col-sm-3{
width: 20%;
}
.mega-dropdown-menu > li > ul {
padding: 0;
margin: 0;
}
.mega-dropdown-menu > li > ul > li {
list-style: none;
border-bottom: dashed 1px #ebebeb;
}
#wrapper .mega-dropdown-menu > li > ul > li > a {
color: #222;
font-size: 12px;
padding: 0px 0px;
line-height: 34px;
letter-spacing: 0.6px;
}
#wrapper .mega-dropdown-menu > li ul > li > a:hover,
#wrapper .mega-dropdown-menu > li ul > li > a:focus {
text-decoration: none;
color: #850072;
}
.mega-dropdown-menu .dropdown-header {
font-size: 15px;
color: #000;
padding: 0px;
line-height: 30px;
}
.carousel-control {
width: 30px;
height: 30px;
top: -35px;
}
.left.carousel-control {
right: 30px;
left: inherit;
}
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
font-size: 12px;
background-color: #fff;
line-height: 30px;
text-shadow: none;
color: #333;
border: 1px solid #ddd;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 999;
top: 0;
right: 0;
background-color: #f6f6f6;
overflow-x: hidden;
transition: 0.5s;
padding-top: 40px;
-webkit-box-shadow: 5px 0px 15px 5px rgba(131,201,194,0.2);
-moz-box-shadow: 5px 0px 15px 5px rgba(131,201,194,0.2);
box-shadow: 5px 0px 15px 5px rgba(131,201,194,0.2);
}
.sidenav a {
padding: 8px 8px 0px 0px;
text-decoration: none;
font-size: 20px;
color: #333;
display: block;
transition: 0.3s
}
.sidenav a:hover, .offcanvas a:focus{
color: #000;
}
.sidenav .closebtn {
position: absolute;
top: -7px;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
.sidemenu{
padding: 10px 17%;
display: block;
position: relative;
overflow-x: auto;
}
.sidemenu .hdwel{
font-size: 24px;
margin-bottom: 30px;
font-weight: 200;
}
.sidenav .navbar-nav{
width: 100%;
border-bottom: dashed 1px #b159a4;
padding-bottom: 15px;
margin-bottom: 15px;
}
.sidenav .navbar-nav li{
width: 100%;
}
.sidenav .navbar-nav li a{
width: 100%;
display: block;
font-size: 14px;
padding: 7px 15px;
text-transform: uppercase;
}
.sidenav .navbar-nav li a:hover{
color: #000;
}
.sidenav .navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
#wrapper .nav2 li a{
text-transform: uppercase;
font-size: 14px;
color: #111;
}
#wrapper .nav2 li .fa{
color: #b159a4;
}
.follnav li .fa{
color: #b159a4;
font-size: 24px;
transition: all 0.5s;
}
.follnav li .fa:hover{
-moz-transform: scale(1.4);
-o-transform: scale(1.4);
-ms-transform: scale(1.4);
-webkit-transform: scale(1.4);
transform: scale(1.4);
}
.sidenav2 {
height: 100%;
width: 0;
position: fixed;
z-index: 999;
top: 0;
right: 0;
background-color: #f6f6f6;
overflow-x: hidden;
transition: 0.5s;
padding-top: 40px;
-webkit-box-shadow: 5px 0px 15px 5px rgba(131,201,194,0.2);
-moz-box-shadow: 5px 0px 15px 5px rgba(131,201,194,0.2);
box-shadow: 5px 0px 15px 5px rgba(131,201,194,0.2);
}
.sidenav2 a {
padding: 1px 8px 0px 0px;
text-decoration: none;
font-size: 25px;
color: #333;
display: block;
transition: 0.3s
}
.sidenav2 a:hover, .offcanvas a:focus{
color: #000;
}
.sidenav2 .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
@media screen and (max-height: 450px) {
.sidenav2 {padding-top: 15px;}
.sidenav2 a {font-size: 18px;}
}
.inputserch{
width: 100%;
margin: 0px;
display: block;
position: relative;
}
.inputserch .form-control{
border:none;
height: 45px;
padding-right: 45px;
border-radius: 0px;
background-color: transparent;
box-shadow: none;
border-bottom: solid 2px #addedc;
}
.inputserch .input-group-addon{
margin: 0px;
padding: 0px;
border:none;
background-color: transparent;
}
.inputserch .input-group-addon .btn{
width: 55px;
height: 45px;
border: none;
background-color: transparent;
position: absolute;
right: 0;
z-index: 99;
top: 0;
}
.listitem{
width: 100%;
margin: 20px 0px 0px;
display: block;
}
.listitem li{
width: 100%;
display: block;
float: left;
margin-bottom: 15px;
}
.listitem img{
width: 55px;
height: auto;
margin: 0px 10px 10px 0px;
float: left;
}
#wrapper .listitem .ttbox p{
font-size: 13.5px;
color: #000;
margin: 0px 0px 3px;
}
#wrapper .listitem .ttbox span{
color: #000;
font-size: 13px;
}
.sliderpanel{
width: 100%;
height: 100%;
display: block;
}
.myslider{
display: block;
height: 100%;
}
.myslider .item {
height: 100vh;
min-height: 300px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: top;
}
.myslider .carousel-control {
position: absolute;
top: 40%;
width: 40px;
height: 40px;
margin-top: -20px;
font-size: 30px;
font-weight: 100;
line-height: 30px;
color: #ffffff;
text-align: center;
background: #222222;
border: 3px solid #ffffff;
-webkit-border-radius: 23px;
-moz-border-radius: 23px;
border-radius: 23px;
opacity: 0.5;
filter: alpha(opacity=50);
}
.myslider .carousel-control.left {
left: 10px
}
.myslider .carousel-control.right {
right: 10px
}
/*===================================
scrollTop menu effects
===================================*/
$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
$(".menubar").addClass('meffect');
} else {
$(".menubar").removeClass('meffect');
}
});
function openNav2() {
document.getElementById("rightside").style.width = "450px";
document.body.style.backgroundColor = "rgba(168,232,226, 0.7)";
}
function closeNav2() {
document.getElementById("rightside").style.width = "0";
document.body.style.backgroundColor = "white";
}
/*===================================
megadropdown menu
===================================*/
$(function(){
$('.dropdown').hover(function() {
$(this).addClass('open');
},
function() {
$(this).removeClass('open');
});
});
