<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 ---------->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" media="screen">
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<body>
<!-- Navigation -->
<div id="wrapper">
<nav class="navbar fixed-top navbar-expand-lg navbar-dark fixed-top">
<div class="container">
<a href="#menu-toggle" class="navbar-toggler " id="menu-toggle"><i class="myfa fa fa-ellipsis-h"></i></a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">All</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Images</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Videos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Maps</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">MSN</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Office Online</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Outlook.com</a>
</li>
</ul>
<ul class="navbar-nav ml-auto ">
<li class="nav-item avatar-profile">
<a class="nav-link" href="#">Sign in <img src="https://image.flaticon.com/icons/png/512/149/149071.png" class="img-responsive"></a>
</li>
<li class="nav-item dropdown d-none d-sm-block">
<a class="nav-link " href="#" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-bars"></i>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
<a class="dropdown-item" href="#"><i class="fa fa-cog"></i> Setting</a>
<a class="dropdown-item" href="#"><i class="fa fa-history"></i> Search history</a>
<a class="dropdown-item" href="#"><i class="fa fa-star"></i> My interest</a>
<a class="dropdown-item" href="#"><i class="fa fa-check"></i> My saves</a>
<a class="dropdown-item" href="#"><i class="fa fa-gamepad"></i> Fun & Games</a>
<a class="dropdown-item" href="#"><i class="fa fa-comment"></i> Feedback</a>
<a class="dropdown-item" href="#"><i class="fa fa-lock"></i> SafeSearch</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<!-- Masthead -->
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li>
<div class="col-lg-2 mb-4 ">
<h4 class="card-header myh4">Flowers</h4>
<a href="#"><img class="card-img-top" src="https://images.pexels.com/photos/992734/pexels-photo-992734.jpeg?auto=compress&cs=tinysrgb&h=350" alt=""></a>
</div>
</li>
<li>
<div class="col-lg-2 mb-4">
<h4 class="card-header myh4">Business </h4>
<a href="#"><img class="card-img-top" src="https://images.pexels.com/photos/179912/pexels-photo-179912.jpeg?auto=compress&cs=tinysrgb&h=350" alt=""></a>
</div>
</li>
<li>
<div class="col-lg-2 mb-4 ">
<h4 class="card-header myh4">Culture</h4>
<a href="#"><img class="card-img-top" src="https://images.pexels.com/photos/1008241/pexels-photo-1008241.jpeg?auto=compress&cs=tinysrgb&h=350" alt=""></a>
</div>
</li>
<li>
<div class="col-lg-2 mb-4 ">
<h4 class="card-header myh4">Pets</h4>
<a href="#"><img class="card-img-top" src="https://images.pexels.com/photos/1038914/pexels-photo-1038914.jpeg?auto=compress&cs=tinysrgb&h=350" alt=""></a>
</div>
</li>
<li>
<div class="col-lg-2 mb-4 ">
<h4 class="card-header myh4">Adventure</h4>
<a href="#">
<img class="card-img-top" src="https://images.pexels.com/photos/708392/pexels-photo-708392.jpeg?auto=compress&cs=tinysrgb&h=350">
</a>
</div>
</li>
<li>
<div class="col-lg-2 mb-4 ">
<h4 class="card-header myh4">Nature</h4>
<a href="#"><img class="card-img-top" src="https://images.pexels.com/photos/623080/pexels-photo-623080.jpeg?auto=compress&cs=tinysrgb&h=350" alt=""></a>
</div>
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<header class="masthead text-white text-center">
<!--div class="overlay"></div-->
<div class="container">
<div class="row">
<div class="col-md-10 col-lg-12 col-xl-7 ">
<div class="mylogo"></div>
<form>
<div class="form-row">
<div class="col-12 col-md-12 mb-2 mb-md-0">
<input type="text" class="form-control form-control-lg myform" placeholder="" >
<button class="btn btn-default"><i class="fa fa-search fa-2x"></i></button>
</div>
</div>
</form>
</div>
</div>
</div>
</header>
<!-- Icons Grid -->
<section class="features-icons d-none d-sm-block">
<div class="container">
<div class="row ">
<div id="demo" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-lg-2 col-2 col-sm-2 mb-4 card-gal-item ">
<h4 class="card-header myh4">Flowers</h4>
<div class="item box">
<a href="#"><img class="card-img-top" src="https://images.pexels.com/photos/992734/pexels-photo-992734.jpeg?auto=compress&cs=tinysrgb&h=350" alt=""></a>
</div>
</div>
<div class="col-lg-2 col-2 col-sm-2 mb-4 card-gal-item">
<h4 class="card-header myh4">Business </h4>
<div class="item box">
<a href="#"><img class="card-img-top" src="https://images.pexels.com/photos/179912/pexels-photo-179912.jpeg?auto=compress&cs=tinysrgb&h=350" alt=""></a>
</div>
</div>
<div class="col-lg-2 col-2 col-sm-2 mb-4 card-gal-item">
<h4 class="card-header myh4">Culture</h4>
<div class="item box">
<a href="#"><img src="https://images.pexels.com/photos/1008241/pexels-photo-1008241.jpeg?auto=compress&cs=tinysrgb&h=350" alt=""></a>
</div>
</div>
<div class="col-lg-2 col-2 col-sm-2 mb-4 card-gal-item">
<h4 class="card-header myh4">Pets</h4>
<div class="item box">
<a href="#"><img class="card-img-top" src="https://images.pexels.com/photos/1038914/pexels-photo-1038914.jpeg?auto=compress&cs=tinysrgb&h=350" alt=""></a>
</div>
</div>
<div class="col-lg-2 col-2 col-sm-2 mb-4 card-gal-item">
<h4 class="card-header myh4">Adventure</h4>
<div class="item box">
<a href="#">
<img src="https://images.pexels.com/photos/708392/pexels-photo-708392.jpeg?auto=compress&cs=tinysrgb&h=350">
</a>
</div>
</div>
<div class="col-lg-2 col-2 col-sm-2 mb-4 card-gal-item">
<h4 class="card-header myh4">Nature</h4>
<div class="item box">
<a href="#"><img class="card-img-top" src="https://images.pexels.com/photos/623080/pexels-photo-623080.jpeg?auto=compress&cs=tinysrgb&h=350" alt=""></a>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-lg-2 col-2 col-sm-2 mb-4 card-gal-item ">
<h4 class="card-header myh4">Flowers</h4>
<div class="item box">
<a href="#"><img class="card-img-top" src="https://images.pexels.com/photos/992734/pexels-photo-992734.jpeg?auto=compress&cs=tinysrgb&h=350" alt=""></a>
</div>
</div>
<div class="col-lg-2 col-2 col-sm-2 mb-4 card-gal-item">
<h4 class="card-header myh4">Business </h4>
<div class="item box">
<a href="#"><img class="card-img-top" src="https://images.pexels.com/photos/179912/pexels-photo-179912.jpeg?auto=compress&cs=tinysrgb&h=350" alt=""></a>
</div>
</div>
<div class="col-lg-2 col-2 col-sm-2 mb-4 card-gal-item">
<h4 class="card-header myh4">Culture</h4>
<div class="item box">
<a href="#"><img src="https://images.pexels.com/photos/1008241/pexels-photo-1008241.jpeg?auto=compress&cs=tinysrgb&h=350" alt=""></a>
</div>
</div>
<div class="col-lg-2 col-2 col-sm-2 mb-4 card-gal-item">
<h4 class="card-header myh4">Pets</h4>
<div class="item box">
<a href="#"><img class="card-img-top" src="https://images.pexels.com/photos/1038914/pexels-photo-1038914.jpeg?auto=compress&cs=tinysrgb&h=350" alt=""></a>
</div>
</div>
<div class="col-lg-2 col-2 col-sm-2 mb-4 card-gal-item">
<h4 class="card-header myh4">Adventure</h4>
<div class="item box">
<a href="#">
<img src="https://images.pexels.com/photos/708392/pexels-photo-708392.jpeg?auto=compress&cs=tinysrgb&h=350">
</a>
</div>
</div>
<div class="col-lg-2 col-2 col-sm-2 mb-4 card-gal-item">
<h4 class="card-header myh4">Nature</h4>
<div class="item box">
<a href="#"><img class="card-img-top" src="https://images.pexels.com/photos/623080/pexels-photo-623080.jpeg?auto=compress&cs=tinysrgb&h=350" alt=""></a>
</div>
</div>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</div>
</section>
<section class="showcase bg-light">
<div class="container">
<div class="row">
<h3 class="heading-title">Image of the day</h3>
</div>
<div class="row">
<div class="col-lg-6 text-white">
<div class="gal-item">
<div class="item box">
<a href="https://www.bing.com/az/hprichbg/rb/ChottelDjerid_EN-IN9315193811_800x480.jpg" class="fancybox" rel="ligthbox">
<img src="https://www.bing.com/az/hprichbg/rb/ChottelDjerid_EN-IN9315193811_800x480.jpg">
</a>
<p> <span class="post-title"><b>May 5, 2018</b></span></p>
</div>
</div>
</div>
<div class="col-lg-6 ">
<h2 class="myhead">Lorem ipsum dolor sit amet</h2>
<p class="lead mb-0 mylead">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit... <a href="#">Learn more</a></p>
<p class="color-icon">
<a href="#" class="btn btn-xs btn-default"> <i class="fa fa-share"></i></a>
<a href="#" class="btn btn-xs btn-default"><i class="fa fa-download"></i></a>
</p>
</div>
</div>
</div>
</section>
<section class="gallery bg-light">
<div class="container ">
<div class="row">
<h3 class="heading-title">Recent Homepage Images</h3>
</div>
<div class="row">
<div class="col-md-8 col-sm-12 co-xs-12 gal-item">
<div class="item box">
<a href="https://www.bing.com/az/hprichbg/rb/Number2_EN-IN12009255937_800x480.jpg" class="fancybox" rel="ligthbox">
<img src="https://www.bing.com/az/hprichbg/rb/Number2_EN-IN12009255937_800x480.jpg">
</a>
<p> <span class="post-title"><b>May 5, 2018</b></span></p>
</div>
</div>
<div class="col-md-4 col-sm-6 co-xs-12 gal-item">
<div class="item box">
<a href="https://www.bing.com/az/hprichbg/rb/Unisphere_EN-IN7027287379_400x240.jpg" class="fancybox" rel="ligthbox">
<img src="https://www.bing.com/az/hprichbg/rb/Unisphere_EN-IN7027287379_400x240.jpg">
</a>
<p> <span class="post-title"><b>May 5, 2018</b></span></p>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 gal-item">
<div class="item box">
<a href="https://www.bing.com/az/hprichbg/rb/RakhisHanging_EN-IN10377441031_400x240.jpg" class="fancybox" rel="ligthbox">
<img src="https://www.bing.com/az/hprichbg/rb/RakhisHanging_EN-IN10377441031_400x240.jpg">
</a>
<p> <span class="post-title"><b>May 5, 2018</b></span></p>
</div>
</div>
<div class="col-md-4 col-sm-6 co-xs-12 gal-item">
<div class="item box">
<a href="https://www.bing.com/az/hprichbg/rb/JMT_EN-IN11100456550_400x240.jpg" class="fancybox" rel="ligthbox">
<img src="https://www.bing.com/az/hprichbg/rb/JMT_EN-IN11100456550_400x240.jpg">
</a>
<p> <span class="post-title"><b>May 5, 2018</b></span></p>
</div>
</div>
<div class="col-md-4 col-sm-6 co-xs-12 gal-item">
<div class="item box">
<a href="https://www.bing.com/az/hprichbg/rb/JeanLafitte_EN-IN11428973003_400x240.jpg" class="fancybox" rel="ligthbox">
<img src="https://www.bing.com/az/hprichbg/rb/JeanLafitte_EN-IN11428973003_400x240.jpg">
</a>
<p> <span class="post-title"><b>May 5, 2018</b></span></p>
</div>
</div>
</div>
</div>
</section>
<section class="call-to-action ">
<div class="container">
<div class="row mb-4">
<div class="col-md-3"></div>
<div class="col-md-3 mb-5">
<a class="btn btn-lg btn-secondary mybtn-secondary " href="#">Make Bing your homepage</a>
</div>
<div class="col-md-5">
<h6>Experience beauty every day</h6>
<p class="text-muted myp-text">Never miss a moment and keep search at your fingertips. Just set Bing as your browser's homepage with a few easy steps!</p>
</div>
<div class="col-md-1"></div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="myfooter footer bg-light">
<div class="container">
<div class="row">
<div class="col-lg-6 h-100 text-center text-lg-left my-auto">
<ul class="list-inline small mb-2">
<li class="list-inline-item">
<a href="#">Privacy and Cookies </a>
</li>
<li class="list-inline-item">⋅</li>
<li class="list-inline-item">
<a href="#">Legal</a>
</li>
<li class="list-inline-item">⋅</li>
<li class="list-inline-item">
<a href="#">Advertise</a>
</li>
<li class="list-inline-item">⋅</li>
<li class="list-inline-item">
<a href="#">Help</a>
</li>
<li class="list-inline-item">⋅</li>
<li class="list-inline-item">
<a href="#">Feedback</a>
</li>
</ul>
</div>
<div class="col-lg-6 h-100 text-center text-lg-right my-auto">
<ul class="list-inline mb-0">
<li class="list-inline-item mr-3">
<a href="#">
<i class="fa fa-facebook social-icons fa-fw"></i>
</a>
</li>
<li class="list-inline-item mr-3">
<a href="#">
<i class="fa fa-twitter social-icons fa-fw"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#">
<i class="fa fa-instagram social-icons fa-fw"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
</div>
</body>
body{overflow-x:hidden;
position:relative;
background-color:#343a40;
background:url('https://www.bing.com/az/hprichbg/rb/ChottelDjerid_EN-IN9315193811_1920x1080.jpg') no-repeat center center fixed;
-webkit-background-size:cover;
-moz-background-size:cover;-o-background-size:cover;
background-size:cover;;
padding-top:10rem;
}
header.masthead.text-white.text-center {
padding-top: 3rem;
}
section.features-icons{
padding-top: 15rem;
}
.carousel-control-next, .carousel-control-prev {
position: absolute;
top: 3px;
bottom: 28px;
width:3rem !important;
background:#000;
}
.myoverlay{
position: fixed;
background: rgba(42, 35, 29, 0.7803921568627451);
height:100%;
width:100%;
z-index: 1273;
}
.mylogo{
float:left;
background-image: url('https://www.bing.com/s/a/hpc23.png');
background-position: 0 0;
margin: -7px 21px 0 0;
width: 132px;
height: 52px;
}
/*--carousel--*/
.card-section{
background: transparent;
position: absolute;
left: 0;
right: 0;
top: 74%;
}
.mycard-body {
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 1.25rem;
}
.card-body{
padding:0px !important;
}
.card-header{
background: rgba(42, 35, 29, 0.7803921568627451) !important;
border-radius: 0px !important;
padding: 8px !important;
text-indent:8px;
}
.card-gal-item {
overflow: hidden;
padding: 4px;
}
.card-gal-item .box {
height: 117px;
overflow: hidden;
}
.card {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: transparent;
background-clip: border-box;
border: 1px solid rgba(0,0,0,.125);
border-radius: none;
}
.card-img-top {
width: 100%;
border-top-left-radius:0;
border-top-right-radius: 0;
}
.myform{
border-radius: 0px !important;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
}
.mybg-dark{
background: rgba(42, 35, 29, 0.7803921568627451) !important;
}
.mybtn{
background: #20c997 !important;
border-color: #20c997 !important;
}
/*--button css--*/
.mybtn-secondary{
color: #000;
background: transparent !important;
border-color: #000;
font-size:14px;
}
.mybtn-secondary:hover{
color:#fff;
border-color: #6c757d;
background-color: #6c757d !important;
font-size:14px;
}
button.btn.btn-default {
position: absolute;
top: 0px;
height: 48px;
width: 50px;
border-radius: 0;
right: 5px;
background: transparent;
outline: none;
}
.fa-2x{
font-size:22px;
color: #238fb6;
}
h4.card-title.myh4 a {
color: #fff;
text-decoration: none;
}
.myh4{
font-size:15px;
margin-bottom:0px !important;
font-weight: normal;
color:#fff;
}
.myp-text{
font-size: 14px;
}
.mylead{
font-size: 19px;
}
.h-145{
height: 145px !important;
width: 100%;
}
.call-to-action{
position:relative;
background-color:#DDDDDD;
padding-top:35px;
padding-bottom:5px;
}
/*--footer--*/
.myfooter{
padding-top: 5px;
padding-bottom: 3px;
}
ul.list-inline.small.mb-2 a {
color: #6c757d!important;
}
p.color-icon a i{
color: #6c757d !important;
}
.social-icons{
color: #6c757d!important;
font-size:17px;
}
.heading-title{
font-size: 22px;
font-weight: normal;
text-transform:uppercase;
line-height: 2;
margin-top: 10px;
text-indent: 4px;
}
/*my gallery*/
.gallery{
padding-top: 1rem;
padding-bottom: 4rem;
}
.gal-item {
overflow: hidden;
padding: 1px;
}
.gal-item .box {
height: 250px;
overflow: hidden;
}
.box img {
height: 100%;
width: 100%;
object-fit: cover;
-o-object-fit: cover;
}
/*--Gallery Zoom--*/
.item {
position: relative;
}
.item img {
max-width: 100%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.item:hover img {
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.item:hover .post-title b
{
background-color: rgba(51, 51, 51, 0.58);
position: absolute;
top: 205px;
right: 0;
color: #FFF;
padding: 10px 15px;
}
.dropdown-menu {
min-width: 16rem;
padding: 1.5rem 0px;
border: none;
border-radius: 0;
}
.dropdown-item {
display: block;
width: 100%;
padding: 10px 1.5rem;
clear: both;
font-weight: 400;
color: #212529;
text-align: inherit;
white-space: nowrap;
background-color: transparent;
border: 0;
}
.avatar-profile img {
width: 35px;
height: 34px;
border-radius: 100%;
overflow: hidden;
margin-right: 11px;
margin-left: 11px;
}
/*--Sidebar--*/
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
top: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
/* Sidebar Styles */
.myfa{
display: inline-block;
font-size: 25px;
vertical-align: middle;
}
.sidebar-nav {
position: absolute;
top: 80px;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
text-decoration: none;
color: #999999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255, 255, 255, 0.2);
}
.sidebar-nav li a:active, .sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav>.sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav>.sidebar-brand a {
color: #999999;
}
.sidebar-nav>.sidebar-brand a:hover {
color: #fff;
background: none;
}
@media(min-width:768px) {
#wrapper {
padding-left: 0;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
width: 0;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
#menu-toggle{
display:none;
}
/*----Responsive---*/
@media (max-width: 480px){
header.masthead {
padding-top: 12rem;
padding-bottom: 12rem;
}
#menu-toggle{
display:block;
}
.myhead{
font-size:20px;
}
.mylead{
font-size:16px;
}
}
@media (max-width: 600px) and (min-width: 481px){
#menu-toggle{
display:block;
}
}
$(window).on("scroll", function(){
if( $(this).scrollTop() > 10 ){
$("nav.navbar").addClass("mybg-dark");
$(".navbar-dark .navbar-nav .nav-link").css({"color" : "#fff"});
}else{
$("nav.navbar").removeClass("mybg-dark");
$(".navbar-dark .navbar-nav .nav-link").css({"color" : "rgba(255,255,255,.5)"});
}
});
$(document).ready(function(){
$(".fancybox").fancybox({
openEffect: "none",
closeEffect: "none"
});
});
$(function(){
$(".myform").on("click", function(e){
$("body").toggleClass("myoverlay");
});
$(document).on("click",function(e){
if( $(e.target).is("body, .myform") == false ){
$("body").removeClass("myoverlay");
}
});
});
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
