Skip to content

Commit

Permalink
Created modal dialog and refactoring
Browse files Browse the repository at this point in the history
  • Loading branch information
@alimusa17
alimusa17 committed Jan 24, 2024
1 parent 7d2988f commit 6f7e3e0
Show file tree
Hide file tree
Showing 15 changed files with 559 additions and 499 deletions.
37 changes: 19 additions & 18 deletions account.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,12 @@
<div class="container">
<div class="header-wrapper">
<div class="header-mobile">
<i class="bi bi-list"></i>
<i class="bi bi-list" id="btn-menu"></i>
</div>
<div class="header-left">
<a href="#" class="logo">LOGO</a>
<a href="index.html" class="logo">LOGO</a>
</div>
<div class="header-center">
<div class="header-center" id="sidebar">
<nav class="navigation">
<ul class="menu-list">
<li class="menu-list-item">
Expand All @@ -43,31 +43,31 @@
<div class="menu-dropdown-wrapper">
<ul class="menu-dropdown-content">
<li>
<a href="">Home Clean</a>
<a href="#">Home Clean</a>
</li>
<li>
<a href="">Home Collection</a>
<a href="#">Home Collection</a>
</li>
<li>
<a href="">Home Minimal</a>
<a href="#">Home Minimal</a>
</li>
<li>
<a href="">Home Modern</a>
<a href="#">Home Modern</a>
</li>
<li>
<a href="">Home Parallax</a>
<a href="#">Home Parallax</a>
</li>
<li>
<a href="">Home Strong</a>
<a href="#">Home Strong</a>
</li>
<li>
<a href="">Home Style</a>
<a href="#">Home Style</a>
</li>
<li>
<a href="">Home Unique</a>
<a href="#">Home Unique</a>
</li>
<li>
<a href="">Home RTL</a>
<a href="#">Home RTL</a>
</li>
</ul>
</div>
Expand Down Expand Up @@ -181,21 +181,21 @@ <h4 class="megamenu-single-subtitle">Suspendisse faucibus nunc et
</li>
</ul>
</nav>
<i class="bi-x-circle"></i>
<i class="bi-x-circle" id="close-sidebar"></i>
</div>
<div class="header-right">
<div class="header-right-links">
<a href="account.html" class="header-account">
<i class="bi bi-person"></i>
</a>
<button class="toggle-button">
<button class="search-button">
<i class="bi bi-search"></i>
</button>
<a href="#">
<i class="bi bi-heart"></i>
</a>
<div class="header-cart">
<a href="#" class="header-cart-link">
<a href="cart.html" class="header-cart-link">
<i class="bi bi-bag"></i>
<span class="header-cart-count">0</span>
</a>
Expand Down Expand Up @@ -242,7 +242,7 @@ <h4>Analogue Resin Strap</h4>
</a>
</div>
</div>
<i class="bi bi-x-circle"></i>
<i class="bi bi-x-circle" id="close-search"></i>
</div>
</div>
<!--! modal search end -->
Expand Down Expand Up @@ -408,7 +408,7 @@ <h3 class="contact-title">
<div class="footer-widgets">
<div class="brand-info">
<div class="footer-logo">
<a href="#" class="logo">LOGO</a>
<a href="index.html" class="logo">LOGO</a>
</div>
<div class="footer-desc">
<p> Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus
Expand Down Expand Up @@ -534,7 +534,8 @@ <h4>Categories</h4>
</footer>
<!--! footer end -->

</div>
<!-- JavaScript -->
<script src="js/main.js" type="module"></script>
</body>

</html>
56 changes: 44 additions & 12 deletions blog.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,16 +27,16 @@
<div class="container">
<div class="header-wrapper">
<div class="header-mobile">
<i class="bi bi-list"></i>
<i class="bi bi-list" id="btn-menu"></i>
</div>
<div class="header-left">
<a href="#" class="logo">LOGO</a>
<a href="index.html" class="logo">LOGO</a>
</div>
<div class="header-center">
<div class="header-center" id="sidebar">
<nav class="navigation">
<ul class="menu-list">
<li class="menu-list-item">
<a href="index.html" class="menu-link active">
<a href="index.html" class="menu-link">
Home
<i class="bi bi-chevron-down"></i>
</a>
Expand Down Expand Up @@ -172,7 +172,7 @@ <h4 class="megamenu-single-subtitle">Suspendisse faucibus nunc et
</div>
</li>
<li class="menu-list-item">
<a href="blog.html" class="menu-link">
<a href="blog.html" class="menu-link active">
Blog
</a>
</li>
Expand All @@ -181,21 +181,21 @@ <h4 class="megamenu-single-subtitle">Suspendisse faucibus nunc et
</li>
</ul>
</nav>
<i class="bi-x-circle"></i>
<i class="bi-x-circle" id="close-sidebar"></i>
</div>
<div class="header-right">
<div class="header-right-links">
<a href="account.html" class="header-account">
<i class="bi bi-person"></i>
</a>
<button class="toggle-button">
<button class="search-button">
<i class="bi bi-search"></i>
</button>
<a href="#">
<i class="bi bi-heart"></i>
</a>
<div class="header-cart">
<a href="#" class="header-cart-link">
<a href="cart.html" class="header-cart-link">
<i class="bi bi-bag"></i>
<span class="header-cart-count">0</span>
</a>
Expand All @@ -205,7 +205,6 @@ <h4 class="megamenu-single-subtitle">Suspendisse faucibus nunc et
</div>
</div>
</div>
</div>
</header>
<!--! header end -->

Expand Down Expand Up @@ -243,11 +242,42 @@ <h4>Analogue Resin Strap</h4>
</a>
</div>
</div>
<i class="bi bi-x-circle"></i>
<i class="bi bi-x-circle" id="close-search"></i>
</div>
</div>
<!--! modal search end -->

<!--! modal dialog start -->
<div class="modal-dialog">
<div class="modal-content">
<button class="modal-close">
<i class="bi bi-x"></i>
</button>
<div class="modal-image">
<img src="img/modal-dialog.jpg" alt="">
</div>
<div class="popup-wrapper">
<div class="popup-content">
<div class="popup-title">
<h3>NEWSLETTER</h3>
</div>
<p class="popup-text">
Sign up to our newsletter and get exclusive deals you won find any where else straight to your
inbox!
</p>
<form class="popup-form">
<input type="text" placeholder="Enter Email Address Here">
<button class="btn btn-primary">SUBSCRIBE</button>
<label>
<input type="checkbox">
<span>Don't show this popup again</span>
</label>
</form>
</div>
</div>
</div>
</div>
<!--! modal dialog end -->

<!--! blogs start -->
<section class="blogs blog-page">
Expand Down Expand Up @@ -370,7 +400,6 @@ <h2>From Our Blog</h2>
</section>
<!--! blogs end -->


<!--! policy start -->
<section class="policy">
<div class="container">
Expand Down Expand Up @@ -466,7 +495,7 @@ <h3 class="contact-title">
<div class="footer-widgets">
<div class="brand-info">
<div class="footer-logo">
<a href="#" class="logo">LOGO</a>
<a href="index.html" class="logo">LOGO</a>
</div>
<div class="footer-desc">
<p> Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus
Expand Down Expand Up @@ -591,6 +620,9 @@ <h4>Categories</h4>
</div>
</footer>
<!--! footer end -->

<!-- JavaScript -->
<script src="js/main.js" type="module"></script>
</body>

</html>
48 changes: 24 additions & 24 deletions cart.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
<nav class="navigation">
<ul class="menu-list">
<li class="menu-list-item">
<a href="index.html" class="menu-link active">
<a href="index.html" class="menu-link">
Home
<i class="bi bi-chevron-down"></i>
</a>
Expand Down Expand Up @@ -258,29 +258,29 @@ <h4>Analogue Resin Strap</h4>
<div class="progress-bar">
<span class="progress"></span>
</div>
</div>
<div class="shop-table-wrapper">
<table class="shop-table">
<thead>
<th class="product-thumbnail">&nbsp;</th>
<th class="product-thumbnail">&nbsp;</th>
<th class="product-name">Product</th>
<th class="product-price">Price</th>
<th class="product-quantity">Quantity</th>
<th class="product-subtotal">Subtotal</th>
</thead>
<tbody class="cart-wrapper"> </tbody>
</table>
<div class="actions-wrapper">
<div class="coupon">
<input type="text" class="input-text" placeholder="Coupon code">
<button class="btn">Apply Coupon</button>
</div>
<div class="update-cart">
<button class="btn">Update Cart</button>
</div>
</div>
<div class="shop-table-wrapper">
<table class="shop-table">
<thead>
<th class="product-thumbnail">&nbsp;</th>
<th class="product-thumbnail">&nbsp;</th>
<th class="product-name">Product</th>
<th class="product-price">Price</th>
<th class="product-quantity">Quantity</th>
<th class="product-subtotal">Subtotal</th>
</thead>
<tbody class="cart-wrapper"> </tbody>
</table>
<div class="actions-wrapper">
<div class="coupon">
<input type="text" class="input-text" placeholder="Coupon code">
<button class="btn">Apply Coupon</button>
</div>
<div class="update-cart">
<button class="btn">Update Cart</button>
</div>
</div>
</div>
</div>
</form>
<div class="cart-collaterals">
<div class="cart-totals">
Expand Down Expand Up @@ -424,7 +424,7 @@ <h3 class="contact-title">
<div class="footer-widgets">
<div class="brand-info">
<div class="footer-logo">
<a href="#" class="logo">LOGO</a>
<a href="index.html" class="logo">LOGO</a>
</div>
<div class="footer-desc">
<p> Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus
Expand Down
Loading

0 comments on commit 6f7e3e0

Please sign in to comment.