navbar done

css/style.css

@@ -23,7 +23,7 @@
     --shadow-light: 0px 0px 25px rgba(199, 195, 195, 0.25);
     --shadow-blog: 0px 0px 40px rgba(134, 134, 134, 0.25);
 
-    --font-open-sans: 'Open Sans', sans-serif;
+    --font-inter: 'Inter', sans-serif;;
     --font-noto: 'Noto Serif Bengali', serif;
 
     
@@ -32,6 +32,234 @@
     --gradient-blue: linear-gradient(256.87deg, rgba(185, 102, 231, 0.39) 0%, rgba(47, 87, 239, 0.29) 100%), rgba(39, 0, 255, 0.8);
 }
 
+body {
+    line-height: 1.4 !important;
+    font-family: var(--font-noto) ;
+}
+
+a {
+    text-decoration: none;
+    color: inherit;
+}
+a:hover {
+    text-decoration: none;
+    color: inherit;
+}
+
+
+/* text color */
+.text-primary {
+    color: var(--primary-color) !important;
+}
+
+.text-blue-dark {
+    color: var(--blue-dark) !important;
+}
+.text-blue-light {
+    color: var(--blue-light) !important;
+}
+.text-blue-light-extra {
+    color: var(--blue-light-extra) !important;
+}
+
+.text-dark {
+    color: var(--dark) !important;
+}
+.text-dark-light {
+    color: var(--dark-light) !important;
+}
+.text-dark-light-extra {
+    color: var(--dark-light-extra) !important;
+}
+
+.text-white {
+    color: var(--white) !important;
+}
+.text-white-light {
+    color: var(--white-light) !important;
+}
+
+.text-purple {
+    color: var(--purple) !important;
+}
+
+.text-green-blue {
+    color: var(--green-blue) !important;
+}
+
+
+
+/* backgorund color */
+
+.bg-primary {
+    background: var(--primary-color) !important;
+}
+
+.bg-blue-dark {
+    background: var(--blue-dark) !important;
+}
+.bg-blue-light {
+    background: var(--blue-light) !important;
+}
+.bg-blue-light-extra {
+    background: var(--blue-light-extra) !important;
+}
+
+.bg-dark {
+    background: var(--dark) !important;
+}
+.bg-dark-light {
+    background: var(--dark-light) !important;
+}
+.bg-dark-light-extra {
+    background: var(--dark-light-extra) !important;
+}
+
+.bg-white {
+    background: var(--white) !important;
+}
+.bg-white-light {
+    background: var(--white-light) !important;
+}
+
+.bg-purple {
+    background: var(--purple) !important;
+}
+
+.bg-green-blue {
+    background: var(--green-blue) !important;
+}
+
+/* button */
+
+.btn-primary {
+    background: var(--primary-color);
+    color: var(--white);
+}
+.btn-primary:hover {
+    background: var(--primary-color);
+    color: var(--white);
+    opacity: .9;
+}
+
 
 
 
+/* Navbar */
+#navbar.navbar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    padding: 0;
+}
+
+#navbar.sticky {
+    position: sticky;
+    top: 0;
+    left: 0;
+    right: 0;
+    box-shadow: var(--shadow-black);
+}
+
+#navbar .logo {
+    height: 5.2rem;
+    transform: translateY(-5px);
+}
+
+#navbar .mobile-toggle-btn {
+    height: 3.1rem;
+}
+
+#navbar .main-link {
+    font-size: 1.2rem;
+    font-weight: 500;
+    font-family: var(--font-inter);
+}
+
+#navbar .main-link a {
+    display: block;
+}
+
+#navbar .main-link a:hover,
+#navbar .main-link a.active {
+    color: var(--primary-color);
+}
+
+
+#navbar .login-register a:hover {
+    color: var(--white-light);
+}
+
+
+@media screen and (max-width: 992px) {
+            
+    #navbar.navbar {
+        background: var(--white);
+        box-shadow: var(--shadow-black) !important;
+    }
+            
+    #navbar.show {
+        position: fixed;
+        height: 100vh;
+    }
+    
+    #navbar .logo {
+        height: 4rem;
+    }
+        
+    #navbar .logo-mobile-btn {
+        width: 100% !important;
+    }
+        
+    #navbar .mobile-toggle-btn .open {
+        display: block !important;
+    }
+        
+    #navbar .mobile-toggle-btn .close {
+        display: none !important;
+    }
+        
+    #navbar.show .mobile-toggle-btn .open {
+        display: none !important;
+    }
+        
+    #navbar.show .mobile-toggle-btn .close {
+        display: block !important;
+    }
+
+
+    #navbar .main-link {
+        font-size: 1.5rem !important;
+        display: none;
+    }
+
+    #navbar .login-register {
+        width: fit-content;
+        margin: 0 auto;
+        display: none;
+    }
+
+    #navbar.show .main-link,
+    #navbar.show .login-register {
+        display: block;
+    }
+
+
+}
+
+
+/* navbar end */
+
+
+
+
+
+
+/* hero section start */
+#hero {
+    background: url(../images/hero-background.png) no-repeat center center/cover ;
+    height: 100vh;
+    font-family: var(--font-noto);
+}
+/* hero section end */

images/bars-solid.svg

@@ -0,0 +1,6 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M42 20H6" stroke="#6B2EEF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M42 12H6" stroke="#6B2EEF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M42 28H6" stroke="#6B2EEF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M42 36H6" stroke="#6B2EEF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

images/times-solid.svg

@@ -0,0 +1,4 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M36 12L12 36" stroke="#6B2EEF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 12L36 36" stroke="#6B2EEF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

index.html

@@ -5,12 +5,18 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <!-- google fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&family=Noto+Serif+Bengali:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
+
 
     <!-- swiper carosuel -->
     <link rel="stylesheet" href="./css/swiper-bundle.min.css">
 
     <!-- bootstrap css -->
     <link rel="stylesheet" href="./css/bootstrap.min.css">
+
     <!-- custom css -->
     <link rel="stylesheet" href="./css/style.css">
 
@@ -18,10 +24,62 @@
 </head>
 <body>
 
+    <!-- Navbar -->
+    <section id="navbar" class="navbar py-1">
+      <div class="container d-block d-lg-flex flex-lg-row justify-content-between align-items-center h-100">
+
+        <!-- logo & mobile open close btn -->
+        <div class="logo-mobile-btn d-flex justify-content-between align-items-center">
+          <a class="logo">
+            <img class="h-100" src="./images/Logo-main.svg" alt="">
+          </a>
+
+          <!-- mobile menu toggle btn -->
+          <button class="mobile-toggle-btn btn d-block d-lg-none">
+            <img class="open h-100" src="./images/bars-solid.svg" alt="">
+            <img class="close h-100" src="./images/times-solid.svg" alt="">
+          </button>
+
+        </div>
+
+        <!-- main nav link -->
+        <div class="main-link mt-5 py-3 py-lg-0 mt-lg-0 d-lg-flex flex-column flex-lg-row justify-content-between align-items-center text-center">
+          <div class="mt-4 mt-lg-0 w-100">
+            <a class=" py-2 my-md-0 mx-0 mx-lg-1 px-md-1 px-lg-2 active" href="">Home</a>
+          </div>
+          <div class="mt-4 mt-lg-0">
+            <a class="py-2 my-md-0 mx-0 mx-lg-1 px-md-1 px-lg-2 " href="">About</a>
+          </div>
+          <div class="mt-4 mt-lg-0">
+            <a class="py-2 my-md-0 mx-0 mx-lg-1 px-md-1 px-lg-2 " href="">Blog</a>
+          </div>
+          <div class="mt-4 mt-lg-0">
+            <a class="py-2 my-md-0 mx-0 mx-lg-1 px-md-1 px-lg-2 " href="">News</a>
+          </div>
+          <div class="mt-4 mt-lg-0">
+            <a class="py-2 my-md-0 mx-0 mx-lg-1 px-md-1 px-lg-2 " href="">Contact</a>
+          </div>
+        </div>
+
+        <!-- login register -->
+        <div class="login-register d-lg-flex flex-row justify-content-center align-items-center bg-primary text-white rounded-1 mt-4 mt-lg-0 px-3 py-2 fs-5 text-center">
+          <span>
+            <a href="#">লগইন</a>
+          </span>
+          <span class="mx-1">/</span>
+          <span>
+            <a href="#">রেজিস্টার</a>
+          </span>
+        </div>
+
+      </div>
+    </section>
+    <!-- navbar end -->
 
 
 
 
+    <section class="vh-100 ">a</section>
 
 
     <!-- bootstrap js -->

js/app.js

@@ -1,119 +1,21 @@
 // sticky navbar
 window.addEventListener('scroll', function(){
-    var header = document.querySelector('.main-nav');
+    var header = document.querySelector('#navbar');
     header.classList.toggle("sticky", window.scrollY > 100);
   })
 
 
+//   mobile menu
+const navbar = document.querySelector('.navbar');
 
-// preparation section carousel 
-var preparation = $('#preparation-carousel');
-preparation.owlCarousel({
-    loop:true,
-    margin:10,
-    nav:false,
-    dots: false,
-    responsive:{
-        0:{
-            items:1
-        },
-        768:{
-            items:2
-        },
-        1000:{
-            items:3
-        }
-    }
-});
-// Go to the next item
-$('.preparation-next').click(function() {
-    preparation.trigger('next.owl.carousel');
-})
-// Go to the previous item
-$('.preparation-prev').click(function() {
-    preparation.trigger('prev.owl.carousel', [300]);
-})
+const mobileToogleBtn = document.querySelector('.mobile-toggle-btn')
 
+console.log(mobileToogleBtn)
 
+if(navbar && mobileToogleBtn) {
+    mobileToogleBtn.addEventListener('click', () => {
+        navbar.classList.toggle('show')
+    })
+}
 
-
-
-// blog section carousel 
-var blog = $('#blog-carousel');
-blog.owlCarousel({
-    loop:true,
-    margin:10,
-    nav:false,
-    dots: false,
-    responsive:{
-        0:{
-            items:1
-        },
-        600:{
-            items:2
-        },
-        1000:{
-            items:4
-        }
-    }
-});
-// Go to the next item
-$('.owl-next').click(function() {
-    blog.trigger('next.owl.carousel');
-})
-// Go to the previous item
-$('.owl-prev').click(function() {
-    blog.trigger('prev.owl.carousel', [300]);
-})
-
-
-
-// current news section carousel 
-var currentNews = $('#current-news-carousel');
-currentNews.owlCarousel({
-    loop:true,
-    margin:10,
-    nav:false,
-    dots: false,
-    responsive:{
-        0:{
-            items:1
-        },
-        600:{
-            items:2
-        },
-        1000:{
-            items:4
-        }
-    }
-});
-// Go to the next item
-$('.current-next').click(function() {
-    currentNews.trigger('next.owl.carousel');
-})
-// Go to the previous item
-$('.current-prev').click(function() {
-    currentNews.trigger('prev.owl.carousel', [300]);
-})
-
-
-
-
-// word of the day section carousel 
-var wordOfDay = $('#wordOfDay-carousel');
-wordOfDay.owlCarousel({
-    loop:true,
-    items: 1,
-    margin:10,
-    nav:false,
-    dots: false,
-    
-});
-// Go to the next item
-$('.word-next').click(function() {
-    wordOfDay.trigger('next.owl.carousel');
-})
-// Go to the previous item
-$('.word-prev').click(function() {
-    wordOfDay.trigger('prev.owl.carousel', [300]);
-})
+// mobile menu open