Skip to content

Commit

Permalink
Mobile Menu Design Done
Browse files Browse the repository at this point in the history
  • Loading branch information
@zaman20
zaman20 committed Sep 24, 2023
1 parent d3abfd3 commit 1e715e8
Show file tree
Hide file tree
Showing 4 changed files with 209 additions and 7 deletions.
26 changes: 21 additions & 5 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,10 @@
<div class="header-area">
<div class="header-content">
<div class="header-logo">
<i class="fa-solid fa-bars mobile-bar"></i>
<a href="">
<img src="img/Health_and_Fitness__2_-removebg-preview.png" alt="logo img">
</a>
</div>
<div class="header-menu">
<nav>
Expand Down Expand Up @@ -47,29 +50,32 @@
</div>

</div>

</section>

<section id="main-content">
<div class="main-website">
<div class="container">
<div class="row">
<div class="col-lg-6">
<a href="single.html">
<div class="entry-post" style="background: url('img/auto-2179220.webp') no-repeat;">
<h2>The Titel</h2>
<p>Date:30 June 2023</p>
</div>
</a>
</div>
<div class="col-lg-6">
<div class="entry-two">
<div class="entry-box">
<img src="img/house-3963987.webp" alt="">
<a href=""><h2>
<a href="single.html"><h2>
Don’t Get Caught Unprotected: Learn About Property Insurance
</h2></a>
</div>
<div class="entry-box">
<img src="img/key-2323278.webp" alt="">
<a href=""><h2>
<a href="single.html"><h2>
Protect Your Assets: Get the Right Property Insurance
</h2></a>
</div>
Expand All @@ -86,7 +92,7 @@ <h3 class="title">Read More</h3>
<img src="img/auto-2179220.webp" alt="">
</div>
<div class="box-content">
<a href="">
<a href="single.html">
<h2>Having car insurance is a necessity in many states and can be a …</h2>
</a>
<p>Having car insurance is a necessity in many states and can be a …</p>
Expand Down Expand Up @@ -175,7 +181,17 @@ <h2>About Us</h2>
</div>
</div>
</section>

<div class="mobile-menu">
<div class="header-part">
<img src="img/Health_and_Fitness__2_-removebg-preview.png" alt="logo img">
<i class="fa-regular fa-circle-xmark menu-close"></i>
</div>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Home</a></li>
<li><a href="">Home</a></li>
</ul>
</div>

<script src="js/jquery-3.6.4.min.js"></script>
<script src="js/myscript.js"></script>
Expand Down
7 changes: 7 additions & 0 deletions js/myscript.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,11 @@ $(document).ready(function(){
$('.search-box').removeClass('search-show');
$('.header-search i').toggle();
});

$('.mobile-bar').on('click',function(){
$('.mobile-menu').addClass('mobile-menu-show');
});
$('.menu-close').on('click',function(){
$('.mobile-menu').removeClass('mobile-menu-show');
});
});
126 changes: 126 additions & 0 deletions page.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog website</title>
<!-- font icon -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"/>
<!-- bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- main -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<section id="header">
<div class="container-fluid header-bg gx-0">
<div class="row">
<div class="col-lg-12">
<div class="header-area">
<div class="header-content">
<div class="header-logo">
<img src="img/Health_and_Fitness__2_-removebg-preview.png" alt="logo img">
</div>
<div class="header-menu">
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Blogs</a></li>
<li><a href="">Privacy Policy</a></li>
<li><a href="">Terms & Conditions</a></li>
</ul>
</nav>
</div>
<div class="header-search">
<i class="fa-solid fa-magnifying-glass search-icon"></i>
<i class="fa-solid fa-xmark close-icon"></i>
</div>
</div>
</div>
<div class="search-box">
<form action="" class="search-content">
<input type="text" class="search-text" placeholder="Search Here">
<input type="submit" value="Search" class="search-btn">
</form>
</div>
</div>
</div>

</div>
</section>

<section id="main-content">
<div class="main-website">
<div class="container">
<!-- list post area -->
<div class="row my-5">
<div class="col-lg-8 post-box">
<h3 class="title">Page Title</h3>

</div>
<div class="col-lg-3">
<div class="sidebar">
<div class="sidebar-box">
<h3>About Me</h3>
</div>
<div class="sidebar-box">
<h3>Featured Post</h3>
</div>
<div class="sidebar-box">
<h3>Search this blog</h3>
</div>

<div class="sidebar-box">
<h3>Archived</h3>
</div>
</div>
</div>
</div>

</div>
</div>
</section>

<!-- footer -->
<section id="footer-section">
<div class="main-website">
<div class="container">
<div class="row">
<div class="col-lg-12 footer-content">
<div class="footer-logo">
<img src="img/Health_and_Fitness__2_-removebg-preview.png" alt="">
</div>
<div class="footer-text px-3">
<h2>About Us</h2>
<p>Enjoy our blogs</p>
</div>
<div class="footer-menu">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Contact Us</a></li>
</ul>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-lg-9">
<div class="copyright">
<p>&copy;copyright 2023 | All Rights Reserved</p>
</div>
</div>
<div class="col-lg-3">
<div class="dev-text">
<p>Developed By-<a href="">ZA SOFT</a></p>
</div>
</div>
</div>
</div>
</div>
</section>


<script src="js/jquery-3.6.4.min.js"></script>
<script src="js/myscript.js"></script>
</body>
</html>
57 changes: 55 additions & 2 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,18 @@ img{
box-shadow: 0px 3px 3px 2px #f1f1f1;
}
.header-logo{
width: 20%;
width: 25%;
float: left;
}
.header-logo img{
width: 200px;
margin-top: -24px;
}
.fa-solid.fa-bars.mobile-bar {
margin-top: 12px;
font-size: 29px;
margin-right: 10px;
cursor: pointer;
}
.header-menu{
width: 70%;
Expand Down Expand Up @@ -64,6 +71,7 @@ img{
font-size: 20px;
margin-top: 14px;
color: #cac6c6;
cursor: pointer;
}
#main-content{
margin-top: 26px;
Expand Down Expand Up @@ -303,4 +311,49 @@ p.post-meta {
}
.share-box ul li a i{
margin-right: 10px;
}
}
.mobile-menu {
width: 294px;
height: 100vh;
background: #f2efef;
position: fixed;
top: 0;
left: -50px;
z-index: 99;
visibility:hidden;
opacity: 0;
transition: 0.4s;
}
.mobile-menu-show{
visibility: visible;
opacity: 1;
left: 0px;
}
.header-part{
display: flex;
margin-bottom: 20px;
border-bottom: 2px dotted gray;
padding: 10px 15px;
}
.header-part img{
width: 200px;
}
.menu-close{
font-size: 42px;
margin-left: 29px;
cursor: pointer;
}
.mobile-menu ul li{
display: block;
padding: 5px 5px;
margin-left: -32px;
}
.mobile-menu ul li a{
font-size: 20px;
color: #333;
transition: 0.4s;
margin-left: 24px;
}
.mobile-menu ul li:hover{
background-color: #417eed;
}

0 comments on commit 1e715e8

Please sign in to comment.