diff --git a/ecommerce/fashion_website/pages/page.css b/ecommerce/fashion_website/pages/page.css
new file mode 100644
index 0000000..028e035
--- /dev/null
+++ b/ecommerce/fashion_website/pages/page.css
@@ -0,0 +1,580 @@
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@100;200;300;400;500;600&family=Nunito:wght@200;300;400;500;600;700;800;900&family=Poppins:ital,wght@0,300;0,400;0,500;0,700;1,600&display=swap');
+*{
+    margin: 0;
+    padding: 0;
+    font-family: 'Nunito', sans-serif;
+}
+*,::before,::after{
+    box-sizing: border-box;
+}
+:root{
+    --main-color:#b9936c;
+    --based-color:#c4b7a6;
+    --light-color:#bab7ac;
+    --white-color:white;
+    --dark-color:black;
+
+    --transition-color: color 0.3s;
+    --transition-background: background-color 0.3s;
+    --trabsition-border: border 0.3s;
+    --trabsition-transform: transform 0.3s;
+
+    --shadow: 0px 10px 20px 0px rgb(0 0 0 /20%);
+    --fade: fade-bottom 0.3s cubic-bezier(0.3, 0.5, 0.5, 1) both;
+}
+html{
+    scroll-behavior: smooth;
+    overflow-x: hidden;
+}
+body{
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 1.8;
+    color: var(--dark-color);
+    background-color: var(--white-color);
+}
+a{
+    text-decoration: none;
+    color: inherit;
+    -webkit-tap-highlight-color: transparent;
+}
+img{
+    max-width: 100%;
+    vertical-align: middle;
+}
+ul{
+    list-style: none;
+}
+p{
+    margin: 0 0 15px;
+}
+input, textarea, select{
+    font: inherit;
+    width: 100%;
+}
+input[type=checkbox], input[type=radio]{
+    width: auto;
+}
+input::placeholder, textarea::placeholder{
+    color: inherit;
+}
+button{
+    font: inherit;
+}
+strong{
+    font-weight: 500;
+}
+h1, h2, h3, h4{
+    font-weight: 400;
+    line-height: normal;
+}
+h1{
+    font-size: 2.7rem;
+}
+h2{
+    font-size: 2.5rem;
+}
+h3{
+    font-size: 2rem;
+}
+h4{
+    font-size: 1rem;
+}
+.container{
+    max-width: var(--mx-width, 1200px);
+    padding: 0 var(--gutter, 15px);
+    margin: 0 auto;
+}
+.item-floating{
+    position: absolute;
+    font-size: 12px;
+    font-weight: 600;
+    top: -8px;
+    right: 0;
+    background-color: var(--based-color);
+    color: var(--white-color);
+    width: 16px;
+    height: 16px;
+    border-radius: 4px;
+}
+.item-floating, .header-center .branding{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.list-block a{
+    position: relative;
+    font-size: 16px;
+    color: var(--dark-color);
+    padding: 5px 0;
+    display: inline-block;
+    transition: var(--transition-color);
+}
+.list-block a:hover{
+    color: var(--based-color);
+}
+nav.menu .sub-menu li{
+    padding: 5px 30px;
+}
+.inner-header{
+    line-height: 90px;
+}
+.inner-header :where(.wrap, .menu > ul), .list-inline > ul{
+    display: flex;
+    align-items: center;
+}
+.header-left, .header-right{
+    flex-grow: 1;
+}
+.header-center nav{
+    display: none;
+    grid-template-columns: 1fr 1fr;
+    gap: 180px;
+    max-width: 720px;
+}
+.header-center .branding{
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    pointer-events: none;
+}
+.header-center .branding a{
+    font-size: 30px;
+    line-height: inherit;
+    pointer-events: auto;
+}
+.header-center .menu > ul > li > a{
+    font-size: 16px;
+    font-weight: 600;
+    padding: 0 15px;
+}
+.header-right ul{
+    justify-content: flex-end;
+}
+.list-inline a, .menu-trigger, .close-trigger{
+    position: relative;
+    font-size: 18px;
+    padding: 0 10px;
+    line-height: 1;
+    display: flex;
+    transition: var(--transition-color);
+}
+.list-inline a:hover{
+    color: var(--based-color);
+}
+.header-left .list-inline{
+    display: none;
+}
+:where(.header-left, .header-right) li{
+    display: flex;
+    align-items: center;
+    height: 90px;
+}
+@keyframes fade-bottom{
+    0%{
+        transform: translateY(10px);
+        opacity: 0;
+    }
+    100%{
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+/*---------- header ----------*/
+.dotgrid .wrapper{
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 30px;
+}
+.dotgrid .dot-image{
+    position: relative;
+    margin-bottom: 30px;
+    overflow: hidden;
+}
+.dotgrid .dot-image > a, .dotgrid .thumbnail.hover, .dotgrid .actions, .dotgrid .dot-image .label{
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+.dotgrid .dot-image > a{
+    z-index: 1;
+}
+.dotgrid .thumbnail.hover{
+    opacity: 0;
+    transition: opacity 0.7s ease, transform 1.1s cubic-bezier(0.15, 0.75, 0.5, 1) 0s;
+    backface-visibility: hidden;
+    transform: translateZ(0);
+}
+.dotgrid .dot-image:hover .thumbnail.hover{
+    opacity: 1;
+    transform: scale3d(1.1, 1.1, 1.1) translateZ(0);
+}
+.dotgrid .actions{
+    z-index: 2;
+    top: auto;
+    bottom: 20px;
+    transform: translate3d(0, 0.1, 0);
+    opacity: 0;
+    transition: all 0.3s cubic-bezier(0, 0, 0.2, 1);
+}
+.dot-image:hover .actions{
+    opacity: 1;
+    transform: translateZ(0);
+}
+.dotgrid .actions ul{
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+}
+.dotgrid .actions ul li a{
+    font-size: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    background-color: var(--white-color);
+    border-radius: 50%;
+    transition: var(--transition-background), var(--transition-color);
+}
+.dotgrid .actions ul li a:hover{
+    background-color: var(--main-color);
+    color: var(--white-color);
+}
+.dotgrid .dot-image .label{
+    top: auto;
+    bottom: 20px;
+}
+.dotgrid .dot-image .label span{
+    font-size: 10px;
+    font-weight: 600;
+    background: var(--main-color);
+    color: var(--white-color);
+    justify-content: center;
+    align-items: center;
+    padding: 2px 5px;
+    line-height: 20px;
+    border-radius: 4px;
+}
+.list-block ul li a{
+    color: var(--main-color);
+}
+.list-block ul li a:hover{
+    color: var(--dark-color);
+}
+.dot-title{
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 30px;
+}
+.dot-title a{
+    transition: var(--transition-color);
+}
+.dot-title a:hover{
+    color: var(--based-color);
+}
+.dotgrid .product-price .before{
+    color: var(--light-color);
+    text-decoration: line-through;
+    margin-right: 10px;
+}
+/*---------- search ----------*/
+.inner-header .search-float{
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: auto;
+    position: fixed;
+    height: 80px;
+    background-color: var(--white-color);
+    z-index: 1000;
+    display: none;
+}
+form.search{
+    position: relative;
+}
+form.search :where(i){
+    position: absolute;
+    left: 0;
+    top: 0;
+}
+form.search .input{
+    outline: 0;
+    padding: 15px 50px;
+}
+form.search i{
+    display: flex;
+    font-size: 20px;
+    align-items: center;
+    justify-content: center;
+    width: 50px;
+    height: 100%;
+    cursor: pointer;
+}
+form.search :where(i:last-child){
+    left: auto;
+    right: 0;
+}
+.inner-header .search .input{
+    display: flex;
+    height: 80px;
+    font-size: 16px;
+    border: 0;
+}
+.search-float.active{
+    display: block;
+}
+.overlay, .mobile-menu{
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+.overlay{
+    background-color: var(--dark-color);
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    z-index: 999;
+    transition: opacity 0.3s, visibility 0.3s;
+}
+.overlay.active{
+    opacity: 0.5;
+    visibility: visible;
+    pointer-events: all;
+}
+/*---------- mobile navbar ----------*/
+.mobile-menu{
+    pointer-events: none;
+    z-index: 1001;
+    visibility: hidden;
+    opacity: 0;
+}
+.mobile-menu.active{
+    visibility: visible;
+    opacity: 1;
+}
+.mobile-menu .wrap{
+    position: relative;
+    max-width: calc(100% - 40px);
+    width: 360px;
+    height: 100%;
+    background-color: var(--white-color);
+    pointer-events: auto;
+    transition: var(--trabsition-transform);
+}
+.mobile-menu.active .wrap{
+    transform: translateX(0);
+}
+.mobile-menu .close-trigger, .mobile-menu .child-trigger{
+    display: flex;
+    position: absolute;
+    top: 0;
+    right: -40px;
+    width: 40px;
+    height: 40px;
+    color: var(--dark-color);
+    align-items: center;
+    justify-content: center;
+    font-size: 30px;
+}
+.mobile-menu .main-menu{
+    display: flex;
+    height: 100%;
+    padding: 0 20px;
+    flex-direction: column;
+}
+.mobile-menu nav>ul{
+    padding: 20px 0;
+}
+.mobile-menu nav>ul>li>a{
+    position: relative;
+    padding: 12px 0;
+    font-weight: 600;
+    transition: var(--transition-color);
+}
+.mobile-menu nav li :where(li, a){
+    display: block;
+}
+.mobile-menu nav>ul>li>a:hover{
+    color: var(--main-color);
+}
+.mobile-menu .child-trigger{
+    color: var(--dark-color);
+    font-size: 20px;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+}
+.mobile-menu .child-trigger:hover{
+    color: var(--based-color);
+}
+.mobile-menu .close-trigger:hover{
+    color: var(--main-color);
+}
+.mobile-menu nav .sub-menu{
+    padding-left: 15px;
+    max-height: 0;
+    overflow: hidden;
+    visibility: hidden;
+    transition: 0.3s ease-in-out;
+}
+.mobile-menu nav li.active .sub-menu{
+    max-height: 1000px;
+    visibility: visible;
+}
+.mobile-menu .main-menu .sub-menu li a{
+    color: var(--based-color);
+}
+.mobile-menu .main-menu .sub-menu li a:hover{
+    color: var(--dark-color);
+}
+.button > [class*=-btn]{
+    font-size: 14px;
+    font-weight: 600;
+    padding: 0 32px;
+    display: inline-block;
+    line-height: 40px;
+    border-width: 1px;
+    border-radius: 50px;
+    border-style: solid;
+    transition: background-color 0.3s, color 0.3s;
+}
+.secondary-btn, .primary-btn{
+    border-color: var(--main-color);
+}
+.primary-btn:hover{
+    background: var(--main-color);
+    color: var(--white-color);
+}
+.secondary-btn{
+    background: var(--main-color);
+    color: var(--white-color);
+}
+.secondary-btn:hover{
+    background: transparent;
+    color: var(--dark-color);
+}
+.mobile-menu .button{
+    margin-top: auto;
+    padding: 20px 0 40px;
+    text-align: center;
+}
+.mobile-menu .button a{
+    display: block;
+    margin-top: 10px;
+}
+/*--------- product (page-single) ----------*/
+.breadcrumb{
+    width: 100%;
+    line-height: initial;
+    padding: 30px 0 50px;
+}
+.breadcrumb ul{
+    justify-content: center;
+}
+.breadcrumb ul li{
+    position: relative;
+    margin-right: 10px;
+}
+.breadcrumb ul li:not(:first-child){
+    padding-left: 25px;
+}
+.breadcrumb ul li:not(:first-child)::before{
+    content: '>';
+    position: absolute;
+    left: 0;
+}
+.breadcrumb ul :where(li, li a){
+    font-size: 15px;
+    padding: 0;
+}
+.breadcrumb ul li:last-child{
+    color: gray;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@media(min-width: 992px){
+    .menu-trigger{
+        display: none;
+    }
+    .header-center nav{
+        display: grid;
+    }
+    .header-left .list-inline{
+        display: block;
+    }
+    .mega-content{
+        display: grid;
+        grid-template-columns: 2fr 1fr;
+        gap: 60px;
+    }
+    .mega-content .links{
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
+        gap: 15px;
+    }
+    nav.menu .sub-mega{
+        left: 0;
+        right: 0;
+        padding: 50px 0;
+    }
+    nav.menu :where(.sub-menu, .sub-mega){
+        position: absolute;
+        top: auto;
+        line-height: initial;
+        background-color: var(--white-color);
+        box-shadow: var(--shadow);
+        z-index: 1000;
+        display: none;
+        animation: var(--fade);
+    }
+    nav.menu li:hover :where(.sub-menu, .sub-mega){
+        display: block;
+    }
+    nav.menu .sub-menu{
+        padding: 10px 0;
+    }
+    nav.menu .sub-menu li{
+        padding: 5px 30px;
+    }
+}
+
+@media(min-width: 1200px){
+    .container.wide{
+        --mx-width:1720px;
+        --gutter: 40px
+    }
+}
+@media (min-width: 1400px){
+    .mega-content{
+        grid-template-columns: 1fr 1fr ;
+    }
+}
+
diff --git a/ecommerce/fashion_website/pages/page.html b/ecommerce/fashion_website/pages/page.html
new file mode 100644
index 0000000..0089c7b
--- /dev/null
+++ b/ecommerce/fashion_website/pages/page.html
@@ -0,0 +1,264 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>A.Z Shop products</title>
+    <link rel="stylesheet" href="page.css">
+    <link rel="shortcut icon" href="images/icon.png">
+    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
+</head>
+<body>
+    <div id="page" class="page-single">
+        <header>
+            <div class="inner-header">
+                <div class="container wide">
+                    <div class="wrap">
+                        <div class="header-left">
+                            <div class="menu-bar">
+                                <a href="#0" class="menu-trigger" trigger-button data-target="mobile-menu"><i class='bx bx-menu'></i></a>
+                            </div>
+                            <div class="list-inline">
+                                <ul>
+                                    <li><a href=""><i class='bx bx-user' ></i></a></li>
+                                    <li><a href=""><span class="item-floating">4</span><i class='bx bx-heart'></i></a></li>
+                                </ul>
+                            </div>
+                        </div>
+                        <div class="header-center">
+                            <nav class="menu">
+                                <ul>
+                                    <li><a href=""><span>Home</span></a></li>
+                                    <li><a href=""><span>Products</span><i class='bx bx-chevron-down'></i></a>
+                                        <ul class="sub-mega">
+                                            <li>
+                                                <div class="container">
+                                                    <div class="wrapper">
+                                                        <div class="mega-content">
+                                                            <div class="dotgrid">
+                                                                <div class="wrapper">
+                                                                    <div class="item">
+                                                                        <div class="dot-image">
+                                                                            <a href="" class="product-link"></a>
+                                                                            <div class="thumbnail">
+                                                                                <img src="images/top1.jpg" alt="">
+                                                                            </div>
+                                                                            <div class="thumbnail hover">
+                                                                                <img src="images/top1-1.jpg" alt="">
+                                                                            </div>
+                                                                            <div class="actions">
+                                                                                <ul>
+                                                                                    <li><a href=""><i class='bx bx-heart'></i></a></li>
+                                                                                    <li><a href=""><i class='bx bx-share-alt' ></i></a></li>
+                                                                                    <li><a href=""><i class='bx bx-store-alt' ></i></a></li>
+                                                                                </ul>
+                                                                            </div>
+                                                                            <div class="label"><span>20% OFF</span></div>
+                                                                        </div>
+                                                                        <div class="dot-info">
+                                                                            <h2 class="dot-title"><a href="">Castleton Green Halterneck Top</a></h2>
+                                                                            <div class="product-price">
+                                                                                <span class="before">$279.00</span>
+                                                                                <span class="current">$223.00</span>
+
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                    <div class="item">
+                                                                        <div class="dot-image">
+                                                                            <a href="" class="product-link"></a>
+                                                                            <div class="thumbnail">
+                                                                                <img src="images/top3.jpg" alt="">
+                                                                            </div>
+                                                                            <div class="thumbnail hover">
+                                                                                <img src="images/top3-1.jpg" alt="">
+                                                                            </div>
+                                                                            <div class="actions">
+                                                                                <ul>
+                                                                                    <li><a href=""><i class='bx bx-heart'></i></a></li>
+                                                                                    <li><a href=""><i class='bx bx-share-alt' ></i></a></li>
+                                                                                    <li><a href=""><i class='bx bx-store-alt' ></i></a></li>
+                                                                                </ul>
+                                                                            </div>
+                                                                            <div class="label"><span>25% OFF</span></div>
+                                                                        </div>
+                                                                        <div class="dot-info">
+                                                                            <h2 class="dot-title"><a href="">Scoop-neck T-shirt</a></h2>
+                                                                            <div class="product-price">
+                                                                                <span class="before">$99.00</span>
+                                                                                <span class="current">$74.00</span>
+
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                    <div class="item">
+                                                                        <div class="dot-image">
+                                                                            <a href="" class="product-link"></a>
+                                                                            <div class="thumbnail">
+                                                                                <img src="images/top2.jpg" alt="">
+                                                                            </div>
+                                                                            <div class="thumbnail hover">
+                                                                                <img src="images/top2-1.jpg" alt="">
+                                                                            </div>
+                                                                            <div class="actions">
+                                                                                <ul>
+                                                                                    <li><a href=""><i class='bx bx-heart'></i></a></li>
+                                                                                    <li><a href=""><i class='bx bx-share-alt' ></i></a></li>
+                                                                                    <li><a href=""><i class='bx bx-store-alt' ></i></a></li>
+                                                                                </ul>
+                                                                            </div>
+                                                                            <div class="label"><span>25% OFF</span></div>
+                                                                        </div>
+                                                                        <div class="dot-info">
+                                                                            <h2 class="dot-title"><a href="">Crayola Lemon Thong Bodysuit</a></h2>
+                                                                            <div class="product-price">
+                                                                                <span class="before">$125.00</span>
+                                                                                <span class="current">$93.00</span>
+
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                            <div class="links">
+                                                                <div class="list-block">
+                                                                    <h3 class="dot-title">CLOTHING</h3>
+                                                                    <ul>
+                                                                        <li><a href="">Tops</a></li>
+                                                                        <li><a href="">Bottoms</a></li>
+                                                                        <li><a href="">Dresses</a></li>
+                                                                        <li><a href="">Beachwear</a></li>
+                                                                        <li><a href="">Sportswear</a></li>
+                                                                    </ul>
+                                                                </div>
+                                                                <div class="list-block">
+                                                                    <h3 class="dot-title">SHOES</h3>
+                                                                    <ul>
+                                                                        <li><a href="">Boots</a></li>
+                                                                        <li><a href="">Flats</a></li>
+                                                                        <li><a href="">Heigh Heels</a></li>
+                                                                        <li><a href="">Flip Flops</a></li>
+                                                                    </ul>
+                                                                </div>
+                                                                <div class="list-block">
+                                                                    <h3 class="dot-title">ACCESSORIES</h3>
+                                                                    <ul>
+                                                                        <li><a href="">Bags</a></li>
+                                                                        <li><a href="">Belts</a></li>
+                                                                        <li><a href="">Sunglasses</a></li>
+                                                                        <li><a href="">Jewelries</a></li>
+                                                                    </ul>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </li>
+                                        </ul>
+                                    </li>
+                                </ul>
+                                <ul>
+                                    <li><a href=""><span>Shop</span></a></li>
+                                    <li><a href=""><span>Blog</span><i class='bx bx-chevron-down'></i></a>
+                                        <ul class="sub-menu list-block">
+                                            <li><a href="">Latest</a></li>
+                                            <li><a href="">Jumper</a></li>
+                                            <li><a href="">A Must Read</a></li>
+                                            <li><a href="">Go Viral</a></li>
+                                        </ul>
+                                    </li>
+                                </ul>
+                            </nav>
+                            <div class="branding"><a href="">A.Z Shop</a></div>
+                        </div>
+                        <div class="header-right">
+                            <div class="list-inline">
+                                <ul>
+                                    <li><a href="#0" trigger-button data-target="search-float"><i class='bx bx-search' ></i></a></li>
+                                    <li><a href=""><span class="item-floating">0</span><i class='bx bx-shopping-bag' ></i></a></li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="container">
+                    <div class="wrap">
+                        <div class="breadcrumb list-inline">
+                            <ul>
+                                <li><a href="">Home</a></li>
+                                <li><a href="">Products</a></li>
+                                <li><a href="">Tops</a></li>
+                                <li><span>Castleton Green Halterneck Top</span></li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+                <div id="search-float" class="search-float">
+                    <div class="container wide">
+                        <form action="" class="search">
+                            <i class='bx bx-search'></i>
+                            <input type="search" class="input" placeholder="Search products">
+                            <i class='bx bx-x' close-button></i>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </header>
+        <main>
+            
+        </main>
+        <footer></footer>
+    </div>
+
+    <div class="overlay" data-overlay></div>
+
+    <div id="mobile-menu" class="mobile-menu">
+        <div class="wrap">
+            <a href="" class="close-trigger" close-button>
+                <i class='bx bx-x-circle' ></i>
+            </a>
+            <div class="main-menu">
+                <nav>
+                    <ul>
+                        <li><a href=""><span>Home</span></a></li>
+                        <li class="has-child"><a href=""><span>Clothing</span><span class="child-trigger"><i class='bx bx-chevron-down'></i></span></a>
+                            <ul class="sub-menu list-block">
+                                <li><a href="#">Tops</a></li>
+                                <li><a href="#">Bottoms</a></li>
+                                <li><a href="#">Dresses</a></li>
+                                <li><a href="#">Beachwear</a></li>
+                                <li><a href="#">Sportswear</a></li>
+                            </ul>
+                        </li>
+                        <li class="has-child"><a href=""><span>Shoes</span><span class="child-trigger"><i class='bx bx-chevron-down'></i></span></a>
+                            <ul class="sub-menu list-block">
+                                <li><a href="#">Boots</a></li>
+                                <li><a href="#">Flats</a></li>
+                                <li><a href="#">High Heels</a></li>
+                                <li><a href="#">Flip Flops</a></li>
+                            </ul>
+                        </li>
+                        <li class="has-child"><a href=""><span>Accessories</span><span class="child-trigger"><i class='bx bx-chevron-down'></i></span></a>
+                            <ul class="sub-menu list-block">
+                                <li><a href="#">Bags</a></li>
+                                <li><a href="#">Belts</a></li>
+                                <li><a href="#">Sunglasses</a></li>
+                                <li><a href="#">Jewelries</a></li>
+                            </ul>
+                        </li>
+                        <li><a href=""><span>Blog</span></a></li>
+                        <li><a href=""><span>Offers</span></a></li>
+                    </ul>
+                </nav>
+                <div class="button">
+                    <a href="" class="secondary-btn">Login</a>
+                    <a href="" class="primary-btn">Sign Up</a>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="page.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/ecommerce/fashion_website/pages/page.js b/ecommerce/fashion_website/pages/page.js
new file mode 100644
index 0000000..dc8e371
--- /dev/null
+++ b/ecommerce/fashion_website/pages/page.js
@@ -0,0 +1,30 @@
+const openBtn = document.querySelectorAll('[trigger-button]');
+const closeBtn = document.querySelectorAll('[close-button]');
+const overlay = document.querySelector('[data-overlay]');
+
+for (let x = 0; x < openBtn.length; x++){
+    let currentID = openBtn[x].dataset.target,
+    targetEl =document.querySelector(`#${currentID}`)
+
+    const openData =function(){
+        targetEl.classList.remove('active');
+        overlay.classList.remove('active');
+    };
+    openBtn[x].addEventListener('click', function(){
+        targetEl.classList.add('active');
+        overlay.classList.add('active');
+    });
+    targetEl.querySelector('[close-button]').addEventListener('click',openData);
+    overlay.addEventListener('click', openData);
+}
+
+
+const subMenu = document.querySelectorAll('.child-trigger');
+    subMenu.forEach((menu) => menu.addEventListener('click', function(e){
+        e.preventDefault();
+        subMenu.forEach((item) => item != this ? item.closest('.has-child').classList.remove('active') : null);
+
+        if(this.closest('.has-child').classList != 'active'){
+            this.closest('.has-child').classList.toggle('active');
+        }
+    }))
\ No newline at end of file