ongoing

css/index.css

@@ -13,7 +13,7 @@ a {
 body {
   background: rgb(255, 255, 255);
   color: rgb(0, 0, 0);
-  font-family: "Noto Serif Bengali", serif;
+  font-family: "Inter", sans-serif;
 }
 
 main {
@@ -22,7 +22,7 @@ main {
 }
 
 section {
-  padding: 4rem 0;
+  padding: 5rem 0;
   margin: unset;
 }
 
@@ -33,6 +33,10 @@ h1, h2, h3, h4, h5, h6, p {
   text-shadow: unset;
 }
 
+.row {
+  margin-top: unset;
+}
+
 @media screen and (min-width: 1400px) {
   .container {
     max-width: 1360px;
@@ -43,13 +47,14 @@ h1, h2, h3, h4, h5, h6, p {
   font-weight: 600;
   color: rgb(0, 0, 0);
   text-align: center;
-  margin-bottom: 1.2rem;
+  margin-bottom: 1rem;
+  font-size: 2.2rem;
 }
 
 .section-sub-title {
   color: rgba(0, 0, 0, 0.6);
   text-align: center;
-  font-size: 1.1rem;
+  font-size: 1.4rem;
   margin-bottom: 2rem;
 }
 
@@ -103,6 +108,62 @@ h1, h2, h3, h4, h5, h6, p {
   color: rgb(255, 255, 255);
 }
 
+.single-course {
+  box-shadow: 1px 2px 5px rgba(0, 46, 116, 0.25);
+  font-family: "Inter", sans-serif;
+}
+.single-course .top-part {
+  height: 200px;
+  position: relative;
+  overflow: hidden;
+}
+.single-course .top-part .img-container {
+  height: 100%;
+  width: 100%;
+}
+.single-course .top-part .tag {
+  position: absolute;
+  left: 4%;
+  bottom: 4%;
+  padding: 0.1rem 1rem;
+  background: rgb(203, 236, 71);
+  font-size: 0.75rem;
+  font-weight: 700;
+  border-radius: 15px;
+}
+.single-course .details {
+  height: calc(100% - 180px);
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  font-family: "Inter", sans-serif;
+  line-height: 1.2;
+  background: rgb(255, 255, 255);
+}
+.single-course .details .level {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: rgb(0, 38, 136);
+}
+.single-course .details .title {
+  font-size: 0.9rem;
+  font-weight: 600;
+  text-decoration: none;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+}
+.single-course .details .stats {
+  font-size: 0.7rem;
+  color: rgba(0, 0, 0, 0.6);
+}
+.single-course .details .price {
+  color: rgb(0, 38, 136);
+  font-weight: 600;
+  font-size: 1rem;
+  text-align: right;
+}
+
 #navbar {
   position: fixed;
   top: 0;
@@ -111,6 +172,7 @@ h1, h2, h3, h4, h5, h6, p {
   padding: 0.75rem 0;
   font-family: "Poppins", sans-serif;
   background: rgb(255, 255, 255);
+  z-index: 999;
 }
 #navbar .container-fluid {
   display: flex;
@@ -227,7 +289,7 @@ h1, h2, h3, h4, h5, h6, p {
 #hero-banner {
   font-family: "Noto Serif Bengali", serif !important;
   color: rgb(0, 0, 0);
-  background: url(../images/hero-background.svg) no-repeat;
+  background: url(../images/hero-background.svg) no-repeat center center/cover;
 }
 #hero-banner .hero-content {
   align-items: center;
@@ -314,13 +376,13 @@ h1, h2, h3, h4, h5, h6, p {
 #feature {
   font-family: "Noto Serif Bengali", serif !important;
   color: rgb(0, 0, 0);
-  background: url(../images/2-features.svg) no-repeat;
+  background: url(../images/2-features.svg) no-repeat center center/cover;
 }
 
 #course-catagory {
   font-family: "Noto Serif Bengali", serif !important;
   color: rgb(0, 0, 0);
-  background: url(../images/3-jobcourse_catagory.svg) no-repeat;
+  background: url(../images/3-jobcourse_catagory.svg) no-repeat center center/cover;
 }
 #course-catagory .section-title, #course-catagory .section-sub-title {
   text-align: start;
@@ -339,6 +401,12 @@ h1, h2, h3, h4, h5, h6, p {
   flex-direction: column;
   height: 100%;
 }
+@media screen and (max-width: 767px) {
+  #course-catagory .courses-short-desc .single-course-short-desc {
+    align-items: center;
+    justify-content: center;
+  }
+}
 #course-catagory .courses-short-desc .single-course-short-desc h6 {
   font-size: 1rem;
 }
@@ -367,63 +435,110 @@ h1, h2, h3, h4, h5, h6, p {
   margin-top: 2rem;
   margin-bottom: 2rem;
 }
-#course-catagory .single-course {
-  box-shadow: 1px 2px 5px rgba(0, 46, 116, 0.25);
-  height: 100%;
-  font-family: "Inter", sans-serif;
+#course-catagory .link-btn {
+  margin-top: 1rem;
+  margin-left: auto;
+  margin-right: auto;
 }
-#course-catagory .top-part {
-  height: 200px;
-  position: relative;
-  overflow: hidden;
+
+#why-studypress {
+  background: rgb(173, 188, 255);
+  padding: 0;
 }
-#course-catagory .top-part .img-container {
-  height: 100%;
+#why-studypress .section-title {
+  text-align: left;
+  font-weight: 500;
+  font-size: 2rem;
+}
+#why-studypress .details {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+#why-studypress ul {
+  list-style-image: url("../images/round-ok-icon.svg") !important;
+  list-style-position: inside;
+}
+#why-studypress ul li {
+  font-size: 1.3rem;
+  margin-bottom: 1rem;
+}
+#why-studypress .slider {
+  display: flex;
+  align-items: center;
+}
+#why-studypress .why-slider-1 .swiper-wrapper, #why-studypress .why-slider-2 .swiper-wrapper {
+  max-height: 600px;
+}
+#why-studypress .why-slider-1 .swiper-slide, #why-studypress .why-slider-2 .swiper-slide {
+  height: 60%;
+}
+@media screen and (max-width: 768px) {
+  #why-studypress .why-slider-1 .swiper-slide, #why-studypress .why-slider-2 .swiper-slide {
+    display: none;
+  }
+}
+
+#new-course {
+  font-family: "Noto Serif Bengali", serif;
+  color: rgb(0, 0, 0);
+  background: url(../images/5-courses.svg) no-repeat center center/cover;
+}
+#new-course .section-title, #new-course .section-sub-title {
+  text-align: left;
+}
+#new-course .new-course-slider {
+  padding: 1rem 0;
+}
+
+#app-download {
+  font-family: "Noto Serif Bengali", serif;
+  color: rgb(0, 0, 0);
+  background: url(../images/6-download.svg) no-repeat center center/cover;
+}
+#app-download .feature-img {
+  order: 0;
+}
+#app-download .feature-img img {
   width: 100%;
 }
-#course-catagory .top-part .tag {
-  position: absolute;
-  left: 4%;
-  bottom: 4%;
-  padding: 0.1rem 1rem;
-  background: rgb(203, 236, 71);
-  font-size: 0.75rem;
-  font-weight: 700;
-  border-radius: 15px;
+@media screen and (max-width: 767px) {
+  #app-download .feature-img {
+    order: 1;
+  }
 }
-#course-catagory .details {
-  height: calc(100% - 180px);
-  padding: 1rem;
+#app-download .details {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
-  font-family: "Inter", sans-serif;
-  line-height: 1.2;
+  justify-content: center;
 }
-#course-catagory .details .level {
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: rgb(0, 38, 136);
+#app-download .details .section-title, #app-download .details .section-sub-title {
+  text-align: left;
 }
-#course-catagory .details .title {
-  font-size: 0.9rem;
-  font-weight: 600;
+#app-download .download-btns {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+#app-download .download-btns a {
   text-decoration: none;
+  height: 3.2rem;
+}
+#app-download .download-btns a img {
+  height: 100%;
+}
+
+#our-blog {
+  font-family: "Noto Serif Bengali", serif;
   color: rgb(0, 0, 0);
-  cursor: pointer;
+  background: url(../images/7-blog.svg) no-repeat center center/cover;
 }
-#course-catagory .details .stats {
-  font-size: 0.7rem;
-  color: rgba(0, 0, 0, 0.6);
+#our-blog .link-btn {
+  margin: 2rem auto 0;
 }
-#course-catagory .details .price {
-  color: rgb(0, 38, 136);
-  font-weight: 600;
-  font-size: 1rem;
-  text-align: right;
+#our-blog .blog-container {
+  margin: 2rem 0 2.5rem;
 }
-#course-catagory .link-btn {
-  margin-top: 1rem;
-  margin-left: auto;
-  margin-right: auto;
+#our-blog .blog-container div {
+  margin: 0;
 }/*# sourceMappingURL=index.css.map */

css/index.sass

@@ -7,7 +7,7 @@
 #hero-banner
     font-family: $fontNotoBangla !important
     color: $blackColor
-    background: url(../images/hero-background.svg) no-repeat
+    background: url(../images/hero-background.svg) no-repeat center center/cover
 
     .hero-content
         align-items: center
@@ -78,14 +78,14 @@
 #feature
     font-family: $fontNotoBangla !important
     color: $blackColor
-    background: url(../images/2-features.svg) no-repeat
+    background: url(../images/2-features.svg) no-repeat center center/cover
 
 
 // course-catagory
 #course-catagory
     font-family: $fontNotoBangla !important
     color: $blackColor
-    background: url(../images/3-jobcourse_catagory.svg) no-repeat
+    background: url(../images/3-jobcourse_catagory.svg) no-repeat center center/cover
 
     .section-title, .section-sub-title
         text-align: start
@@ -104,6 +104,10 @@
             display: flex
             flex-direction: column
             height: 100%
+            @media screen and ( max-width: 767px )
+                align-items: center
+                justify-content: center
+                
 
             h6
                 font-size: 1rem
@@ -132,68 +136,115 @@
         margin-top: 2rem
         margin-bottom: 2rem
 
-    .single-course
-        box-shadow: $shadow-1
-        height: 100%
-        font-family: $fontInter
+    .link-btn
+        margin-top: 1rem
+        margin-left: auto
+        margin-right: auto
 
-    .top-part
-        height: 200px
-        position: relative
-        overflow: hidden
 
-        .img-container
-            height: 100%
+// why-studypress
+#why-studypress
+    background: $thirdColor
+    padding: 0
+    // margin-bottom: 500px
+
+    .section-title
+        text-align: left
+        font-weight: 500
+        font-size: 2rem
+
+    .details
+        display: flex
+        flex-direction: column
+        justify-content: center
+    
+    ul
+        list-style-image:  url("../images/round-ok-icon.svg") !important
+        list-style-position: inside
+
+        li
+            font-size: 1.3rem
+            margin-bottom: 1rem
+
+    .slider
+        display: flex
+        align-items: center
+
+    .why-slider-1, .why-slider-2
+        .swiper-wrapper
+            max-height: 600px
+
+        .swiper-slide
+            height: 60%
+            @media screen and ( max-width: 768px )
+                display: none
+
+
+// new course
+#new-course
+    font-family: $fontNotoBangla 
+    color: $blackColor
+    background: url(../images/5-courses.svg) no-repeat center center/cover
+
+    .section-title, .section-sub-title
+        text-align: left
+
+    .new-course-slider
+        padding: 1rem 0
+
+
+// app-download
+#app-download
+    font-family: $fontNotoBangla 
+    color: $blackColor
+    background: url(../images/6-download.svg) no-repeat center center/cover
+
+    .feature-img
+        order: 0
+
+        img
             width: 100%
 
-        .tag
-            position: absolute
-            left: 4%
-            bottom: 4%
-            padding: .1rem 1rem
-            background: $seconderyColor
-            font-size: .75rem
-            font-weight: 700
-            border-radius: 15px
+        @media screen and ( max-width: 767px )
+            order: 1
 
     .details
-        height: calc( 100% - 180px )
-        padding: 1rem
         display: flex
         flex-direction: column
-        gap: .75rem
-        font-family: $fontInter
-        line-height: 1.2
+        justify-content: center
 
-        .level
-            font-size: .75rem
-            font-weight: 500
-            color: $primaryColor
+        .section-title, .section-sub-title
+            text-align: left
+
+    .download-btns
+        display: flex
+        align-items: center
+        gap: .75rem
 
-        .title
-            font-size: .9rem
-            font-weight: 600
+        a
             text-decoration: none
-            color: $blackColor
-            cursor: pointer
+            height: 3.2rem
+
+            img
+                height: 100%
 
-        .stats
-            font-size: .7rem
-            color: $greyColor
 
-        .price
-            color: $primaryColor
-            font-weight: 600
-            font-size: 1rem
-            text-align: right
 
-    .link-btn
-        margin-top: 1rem
-        margin-left: auto
-        margin-right: auto
 
+// our-blog
+#our-blog
+    font-family: $fontNotoBangla 
+    color: $blackColor
+    background: url(../images/7-blog.svg) no-repeat center center/cover
+
+    .link-btn
+        margin: 2rem auto 0
 
+    .blog-container
+        margin: 2rem 0 2.5rem
 
+        div
+            margin: 0
 
 
 

css/themeStyle.css

@@ -13,7 +13,7 @@ a {
 body {
   background: rgb(255, 255, 255);
   color: rgb(0, 0, 0);
-  font-family: "Noto Serif Bengali", serif;
+  font-family: "Inter", sans-serif;
 }
 
 main {
@@ -22,7 +22,7 @@ main {
 }
 
 section {
-  padding: 4rem 0;
+  padding: 5rem 0;
   margin: unset;
 }
 
@@ -33,6 +33,10 @@ h1, h2, h3, h4, h5, h6, p {
   text-shadow: unset;
 }
 
+.row {
+  margin-top: unset;
+}
+
 @media screen and (min-width: 1400px) {
   .container {
     max-width: 1360px;
@@ -43,13 +47,14 @@ h1, h2, h3, h4, h5, h6, p {
   font-weight: 600;
   color: rgb(0, 0, 0);
   text-align: center;
-  margin-bottom: 1.2rem;
+  margin-bottom: 1rem;
+  font-size: 2.2rem;
 }
 
 .section-sub-title {
   color: rgba(0, 0, 0, 0.6);
   text-align: center;
-  font-size: 1.1rem;
+  font-size: 1.4rem;
   margin-bottom: 2rem;
 }
 
@@ -103,6 +108,62 @@ h1, h2, h3, h4, h5, h6, p {
   color: rgb(255, 255, 255);
 }
 
+.single-course {
+  box-shadow: 1px 2px 5px rgba(0, 46, 116, 0.25);
+  font-family: "Inter", sans-serif;
+}
+.single-course .top-part {
+  height: 200px;
+  position: relative;
+  overflow: hidden;
+}
+.single-course .top-part .img-container {
+  height: 100%;
+  width: 100%;
+}
+.single-course .top-part .tag {
+  position: absolute;
+  left: 4%;
+  bottom: 4%;
+  padding: 0.1rem 1rem;
+  background: rgb(203, 236, 71);
+  font-size: 0.75rem;
+  font-weight: 700;
+  border-radius: 15px;
+}
+.single-course .details {
+  height: calc(100% - 180px);
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  font-family: "Inter", sans-serif;
+  line-height: 1.2;
+  background: rgb(255, 255, 255);
+}
+.single-course .details .level {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: rgb(0, 38, 136);
+}
+.single-course .details .title {
+  font-size: 0.9rem;
+  font-weight: 600;
+  text-decoration: none;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
+}
+.single-course .details .stats {
+  font-size: 0.7rem;
+  color: rgba(0, 0, 0, 0.6);
+}
+.single-course .details .price {
+  color: rgb(0, 38, 136);
+  font-weight: 600;
+  font-size: 1rem;
+  text-align: right;
+}
+
 #navbar {
   position: fixed;
   top: 0;
@@ -111,6 +172,7 @@ h1, h2, h3, h4, h5, h6, p {
   padding: 0.75rem 0;
   font-family: "Poppins", sans-serif;
   background: rgb(255, 255, 255);
+  z-index: 999;
 }
 #navbar .container-fluid {
   display: flex;

css/themeStyle.sass

@@ -35,27 +35,31 @@ a
 body
     background: $whiteColor
     color: $blackColor
-    font-family: $fontNotoBangla
-
+    font-family: $fontInter
 main
     height: 200vh
     padding-top: 4rem
 
 section
-    padding: 4rem 0
+    padding: 5rem 0
     margin: unset
 
+
 h1,h2,h3,h4,h5,h6,p
     color: inherit
     font-family: inherit
     margin: unset
     text-shadow: unset
 
-// customize container size
+// customize pico
+
+.row
+    margin-top: unset
+
 .container
     @media screen and ( min-width: 1400px )
         max-width: 1360px
-// customize container size end
+// customize pico end
 
 
 // utility
@@ -65,12 +69,13 @@ h1,h2,h3,h4,h5,h6,p
     font-weight: 600
     color: $blackColor
     text-align: center
-    margin-bottom: 1.2rem
+    margin-bottom: 1rem
+    font-size: 2.2rem
 
 .section-sub-title
     color: $greyColor
     text-align: center
-    font-size: 1.1rem
+    font-size: 1.4rem
     margin-bottom: 2rem
 
 .img-container
@@ -115,6 +120,64 @@ h1,h2,h3,h4,h5,h6,p
         background: $primaryColor
         color: $whiteColor
 
+
+
+.single-course
+    box-shadow: $shadow-1
+    font-family: $fontInter
+
+    .top-part
+        height: 200px
+        position: relative
+        overflow: hidden
+
+        .img-container
+            height: 100%
+            width: 100%
+
+        .tag
+            position: absolute
+            left: 4%
+            bottom: 4%
+            padding: .1rem 1rem
+            background: $seconderyColor
+            font-size: .75rem
+            font-weight: 700
+            border-radius: 15px
+
+    .details
+        height: calc( 100% - 180px )
+        padding: 1rem
+        display: flex
+        flex-direction: column
+        gap: .75rem
+        font-family: $fontInter
+        line-height: 1.2
+        background: $whiteColor
+
+        .level
+            font-size: .75rem
+            font-weight: 500
+            color: $primaryColor
+
+        .title
+            font-size: .9rem
+            font-weight: 600
+            text-decoration: none
+            color: $blackColor
+            cursor: pointer
+
+        .stats
+            font-size: .7rem
+            color: $greyColor
+
+        .price
+            color: $primaryColor
+            font-weight: 600
+            font-size: 1rem
+            text-align: right
+
+
 // utility end
 
 // navbar
@@ -126,6 +189,7 @@ h1,h2,h3,h4,h5,h6,p
     padding: .75rem 0
     font-family: $fontPopins
     background: $whiteColor
+    z-index: 999
 
     .container-fluid
         display: flex

index.html

@@ -449,6 +449,435 @@
             </div>
 
         </section>
+
+        <section id="why-studypress">
+
+            <div class="container-fluid">
+
+                <div class="row g-4">
+
+                    <!-- slideer -->
+                    <div class="col-12 col-md-6 col-lg-6 slider">
+
+                        <!-- slide 1 -->
+                        <div class="swiper why-slider-1">
+                            <div class="swiper-wrapper">
+
+                              <div class="swiper-slide">
+                                <img src="./images/quiz-1.svg" alt="">
+                              </div>
+
+                              <div class="swiper-slide">
+                                <img src="./images/quiz-2.svg" alt="">
+                              </div>
+
+                              <div class="swiper-slide">
+                                <img src="./images/quiz-1.svg" alt="">
+                              </div>
+
+                              <div class="swiper-slide">
+                                <img src="./images/quiz-2.svg" alt="">
+                              </div>
+
+                              <div class="swiper-slide">
+                                <img src="./images/quiz-1.svg" alt="">
+                              </div>
+
+                              <div class="swiper-slide">
+                                <img src="./images/quiz-2.svg" alt="">
+                              </div>
+
+                            </div>
+                        </div>
+
+                        <!-- slide 2 -->
+                        <div class="swiper why-slider-2">
+                            <div class="swiper-wrapper">
+
+                                <div class="swiper-slide">
+                                    <img src="./images/quiz-1.svg" alt="">
+                                </div>
+    
+                                <div class="swiper-slide">
+                                    <img src="./images/quiz-2.svg" alt="">
+                                </div>
+    
+                                <div class="swiper-slide">
+                                    <img src="./images/quiz-1.svg" alt="">
+                                </div>
+    
+                                <div class="swiper-slide">
+                                    <img src="./images/quiz-2.svg" alt="">
+                                </div>
+    
+                                <div class="swiper-slide">
+                                    <img src="./images/quiz-1.svg" alt="">
+                                </div>
+    
+                                <div class="swiper-slide">
+                                    <img src="./images/quiz-2.svg" alt="">
+                                </div>
+                                
+                            </div>
+                        </div>
+                        
+                    </div>
+                    
+
+                    <!-- details -->
+                    <div class="col-12 col-md-6 col-lg-6 details">
+
+                        <h2 class="section-title">
+                            কেন Studypress শিক্ষার্থীদের প্রথম পছন্দ ?
+                        </h2>
+
+                        <ul>
+
+                            <li>
+                                Current affairs এর তত্থশমুহ জানুন এবং কুইজ এ অংশগ্রহণ করুন 
+                            </li>
+
+                            <li>
+                                Current affairs এর তত্থশমুহ জানুন এবং কুইজ এ অংশগ্রহণ করুন 
+                            </li>
+
+                            <li>
+                                Current affairs এর তত্থশমুহ জানুন এবং কুইজ এ অংশগ্রহণ করুন 
+                            </li>
+                            
+                            <li>
+                                Current affairs এর তত্থশমুহ জানুন এবং কুইজ এ অংশগ্রহণ করুন 
+                            </li>
+
+                        </ul>
+
+                    </div>
+
+                </div>
+
+            </div>
+
+        </section>
+
+        <section id="new-course">
+            <div class="container">
+                
+                <h2 class="section-title">
+                    চলে এসেছে নতুন ক্র্যাশ কোর্স
+                </h2>
+
+                <p class="section-sub-title">
+                    আপনার স্বপ্নের চাকরীর সেরা প্রস্তুতি নিন Studypress এ
+                </p>
+
+                <!-- new-course-slider slider -->
+                <div class="swiper new-course-slider">
+                    <div class="swiper-wrapper">
+
+                        <div class="swiper-slide single-course">
+
+                            <div class="top-part">
+                                <div class="img-container">
+                                    <img src="./images/course-1.png" alt="">
+                                </div>
+
+                                <div class="tag">
+                                    New
+                                </div>
+
+                            </div>
+
+                            <div class="details">
+
+                                <p class="level">
+                                    <small>Beginner level</small>
+                                </p>
+
+                                <a href="#" class="title">
+                                    Primary School Teacher
+                                </a href="#">
+
+                                <div class="stats">
+                                    <span>40 Days,</span>
+                                    <span>4200 Enrolled</span>
+                                </div>
+
+                                <div class="price">
+                                    <span>
+                                        <i class="fa-solid fa-bangladeshi-taka-sign"></i>
+                                    </span>
+                                    <span>
+                                        500
+                                    </span>
+                                </div>
+
+                            </div>
+
+                        </div>
+
+                        <div class="swiper-slide single-course">
+
+                            <div class="top-part">
+                                <div class="img-container">
+                                    <img src="./images/course-2.png" alt="">
+                                </div>
+
+                                <div class="tag">
+                                    New
+                                </div>
+
+                            </div>
+
+                            <div class="details">
+
+                                <p class="level">
+                                    <small>Beginner level</small>
+                                </p>
+
+                                <a href="#" class="title">
+                                    Primary School Teacher
+                                </a href="#">
+
+                                <div class="stats">
+                                    <span>40 Days,</span>
+                                    <span>4200 Enrolled</span>
+                                </div>
+
+                                <div class="price">
+                                    <span>
+                                        <i class="fa-solid fa-bangladeshi-taka-sign"></i>
+                                    </span>
+                                    <span>
+                                        500
+                                    </span>
+                                </div>
+
+                            </div>
+
+                        </div>
+
+                        <div class="swiper-slide single-course">
+
+                            <div class="top-part">
+                                <div class="img-container">
+                                    <img src="./images/course-3.png" alt="">
+                                </div>
+
+                                <div class="tag">
+                                    New
+                                </div>
+
+                            </div>
+
+                            <div class="details">
+
+                                <p class="level">
+                                    <small>Beginner level</small>
+                                </p>
+
+                                <a href="#" class="title">
+                                    Primary School Teacher
+                                </a href="#">
+
+                                <div class="stats">
+                                    <span>40 Days,</span>
+                                    <span>4200 Enrolled</span>
+                                </div>
+
+                                <div class="price">
+                                    <span>
+                                        <i class="fa-solid fa-bangladeshi-taka-sign"></i>
+                                    </span>
+                                    <span>
+                                        500
+                                    </span>
+                                </div>
+
+                            </div>
+
+                        </div>
+
+                        <div class="swiper-slide single-course">
+
+                            <div class="top-part">
+                                <div class="img-container">
+                                    <img src="./images/course-4.png" alt="">
+                                </div>
+
+                                <div class="tag">
+                                    New
+                                </div>
+
+                            </div>
+
+                            <div class="details">
+
+                                <p class="level">
+                                    <small>Beginner level</small>
+                                </p>
+
+                                <a href="#" class="title">
+                                    Primary School Teacher
+                                </a href="#">
+
+                                <div class="stats">
+                                    <span>40 Days,</span>
+                                    <span>4200 Enrolled</span>
+                                </div>
+
+                                <div class="price">
+                                    <span>
+                                        <i class="fa-solid fa-bangladeshi-taka-sign"></i>
+                                    </span>
+                                    <span>
+                                        500
+                                    </span>
+                                </div>
+
+                            </div>
+
+                        </div>
+
+                        <div class="swiper-slide single-course">
+
+                            <div class="top-part">
+                                <div class="img-container">
+                                    <img src="./images/course-1.png" alt="">
+                                </div>
+
+                                <div class="tag">
+                                    New
+                                </div>
+
+                            </div>
+
+                            <div class="details">
+
+                                <p class="level">
+                                    <small>Beginner level</small>
+                                </p>
+
+                                <a href="#" class="title">
+                                    Primary School Teacher
+                                </a href="#">
+
+                                <div class="stats">
+                                    <span>40 Days,</span>
+                                    <span>4200 Enrolled</span>
+                                </div>
+
+                                <div class="price">
+                                    <span>
+                                        <i class="fa-solid fa-bangladeshi-taka-sign"></i>
+                                    </span>
+                                    <span>
+                                        500
+                                    </span>
+                                </div>
+
+                            </div>
+
+                        </div>
+
+
+                    </div>
+                </div>
+
+            </div>
+        </section>
+
+        <section id="app-download">
+
+            <div class="container">
+
+                <div class="row g-5 ">
+
+                    <div class="col-12 col-md-6 col-lg-4 feature-img">
+                        <img src="./images/phone-app.svg" alt="">
+                    </div>
+
+                    <div class="col-12 col-md-6 col-lg-8 details">
+
+                        <h2 class="section-title">
+                            ডাউনলোড করুণ আমাদের Mobile App
+                        </h2>
+
+                        <p class="section-sub-title">
+                            Start or schedule lessons anytime, anywhere with our Android and iPhone apps.
+                        </p>
+
+                        <div class="download-btns">
+
+                            <a href="#">
+                                <img src="./images/app-store.svg.png" alt="">
+                            </a>
+
+                            <a href="#">
+                                <img src="./images/google-play.svg.svg" alt="">
+                            </a>
+
+                        </div>
+
+                    </div>
+
+                </div>
+
+            </div>
+
+        </section>
+
+        <section id="our-blog">
+
+            <div class="container">
+
+                                
+                <h2 class="section-title">
+                    পড়ুন আমাদের ব্লগ
+                </h2>
+
+                <p class="section-sub-title">
+                    আপনার স্বপ্নের চাকরীর সেরা প্রস্তুতি নিন Studypress এ
+                </p>
+
+                <div class="blog-container">
+
+                    <div class="row g-3">
+
+                        <div class="col-12 col-md-6">
+                            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque, expedita?
+                        </div>
+
+                        <div class="col-12 col-md-6">
+                            
+                            <div class="row g-3">
+
+                                <div class="col-12 col-md-6">
+                                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro, similique.
+                                </div>
+
+                                <div class="col-12 col-md-6">
+                                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro, similique.
+                                </div>
+
+                                <div class="col-12">
+                                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro, similique.
+                                </div>
+
+                            </div>
+
+                        </div>
+
+                    </div>
+
+                </div>
+
+                <a href="#" class="link-btn" role="button">
+                    সকল ব্লগ
+                </a>
+
+            </div>
+
+        </section>
         
     </main>
 

js/custom.js

@@ -9,10 +9,8 @@ resBtn.addEventListener('click',  () => {
 // responsive navbar for mobile menu end
 
 
-// 
-
+// course short description slider
 var swiper = new Swiper(".courses-short-desc", {
-    slidesPerView: "auto",
     spaceBetween: 30,
     loop: true,
     spaceBetween: 10,
@@ -21,20 +19,81 @@ var swiper = new Swiper(".courses-short-desc", {
     slidesPerView: 1,
     breakpoints: {
         640: {
-          slidesPerView: 2,
-          spaceBetween: 10,
+            slidesPerView: 2,
+            spaceBetween: 10,
         },
         768: {
-          slidesPerView: 3,
-          spaceBetween: 20,
+            slidesPerView: 3,
+            spaceBetween: 20,
         },
         1024: {
-          slidesPerView: 4,
-          spaceBetween: 30,
+            slidesPerView: 4,
+            spaceBetween: 30,
         },
       },
+      autoplay: {
+          delay: 2500,
+          disableOnInteraction: false,
+        },
+});
+    
+    
+// course short description slider
+
+
+var swiper = new Swiper(".why-slider-1", {
+    slidesPerView: "auto",
+    centeredSlides: true,
+    direction: "vertical",
+    loop: true,
+    autoplay: {
+        delay: 2000,
+        pauseOnMouseEnter: true,
+        reverseDirection: true
+      },
+    spaceBetween: 20,
+});
+
+var swiper = new Swiper(".why-slider-2", {
+    slidesPerView: "auto",
+    centeredSlides: true,
+    direction: "vertical",
+    loop: true,
+    autoplay: {
+        delay: 2000,
+        reverseDirection: false,
+        pauseOnMouseEnter: true,
+      },
+    spaceBetween: 20,
+});
+// course short description slider
+
+// course short description slider
+var swiper = new Swiper(".new-course-slider", {
+    spaceBetween: 30,
+    loop: true,
+    spaceBetween: 10,
+    autoHeight: true,
+    allowTouchMove: true,
+    slidesPerView: 1,
     autoplay: {
         delay: 2500,
-        disableOnInteraction: false,
+        pauseOnMouseEnter: true,
     },
-});
+    breakpoints: {
+        640: {
+            slidesPerView: 2,
+            spaceBetween: 10,
+        },
+        768: {
+            slidesPerView: 3,
+            spaceBetween: 20,
+        },
+        1024: {
+            slidesPerView: 4,
+            spaceBetween: 30,
+        },
+      },
+      
+});
+