course category section ready for review

css/index.css

@@ -1,6 +1,6 @@
 @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Bengali:wght@300;400;500;600;700;800;900&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Tiro+Bangla&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+Bengali:wght@300;400;500;600;700;800;900&display=swap");
 * {
   list-style: none;
   text-decoration: none;
@@ -13,7 +13,7 @@ a {
 body {
   background: rgb(255, 255, 255);
   color: rgb(0, 0, 0);
-  font-family: "Tiro Bangla", serif;
+  font-family: "Noto Serif Bengali", serif;
 }
 
 main {
@@ -30,6 +30,13 @@ h1, h2, h3, h4, h5, h6, p {
   color: inherit;
   font-family: inherit;
   margin: unset;
+  text-shadow: unset;
+}
+
+@media screen and (min-width: 1400px) {
+  .container {
+    max-width: 1360px;
+  }
 }
 
 .section-title {
@@ -59,8 +66,8 @@ h1, h2, h3, h4, h5, h6, p {
 }
 
 .link-btn {
-  margin: 0 !important;
-  padding: 0.25rem 1rem !important;
+  margin: 0;
+  padding: 0.45rem 1.2rem !important;
   background: rgb(0, 38, 136);
   border-color: rgb(0, 38, 136);
   border-width: 2px;
@@ -70,6 +77,8 @@ h1, h2, h3, h4, h5, h6, p {
   opacity: unset;
   display: block;
   height: unset;
+  width: -moz-fit-content;
+  width: fit-content;
 }
 .link-btn:hover {
   background: rgb(255, 255, 255);
@@ -77,8 +86,8 @@ h1, h2, h3, h4, h5, h6, p {
 }
 
 .link-btn-outline {
-  margin: 0 !important;
-  padding: 0.25rem 1rem !important;
+  margin: 0;
+  padding: 0.45rem 1.2rem !important;
   color: rgb(0, 38, 136);
   border-color: rgb(0, 38, 136);
   background: rgb(255, 255, 255);
@@ -202,6 +211,9 @@ h1, h2, h3, h4, h5, h6, p {
 #navbar .link-item.active {
   color: rgb(0, 38, 136);
 }
+#navbar .link-btn {
+  padding: 0.25rem 0.75rem !important;
+}
 
 @media screen and (max-width: 768px) {
   body.show-mobile-menu #navbar .nav-links {
@@ -213,7 +225,7 @@ h1, h2, h3, h4, h5, h6, p {
 }
 
 #hero-banner {
-  font-family: "Tiro Bangla", serif !important;
+  font-family: "Noto Serif Bengali", serif !important;
   color: rgb(0, 0, 0);
   background: url(../images/hero-background.svg) no-repeat;
 }
@@ -224,7 +236,7 @@ h1, h2, h3, h4, h5, h6, p {
 #hero-banner .hero-content .hero-title {
   font-weight: 500;
   font-size: 2.5rem;
-  font-family: "Tiro Bangla", serif;
+  font-family: "Noto Serif Bengali", serif;
   line-height: 1.2;
   margin-bottom: 1.5rem;
 }
@@ -300,29 +312,84 @@ h1, h2, h3, h4, h5, h6, p {
 }
 
 #feature {
-  font-family: "Tiro Bangla", serif !important;
+  font-family: "Noto Serif Bengali", serif !important;
   color: rgb(0, 0, 0);
   background: url(../images/2-features.svg) no-repeat;
 }
 
 #course-catagory {
-  font-family: "Tiro Bangla", serif !important;
+  font-family: "Noto Serif Bengali", serif !important;
   color: rgb(0, 0, 0);
   background: url(../images/3-jobcourse_catagory.svg) no-repeat;
 }
 #course-catagory .section-title, #course-catagory .section-sub-title {
   text-align: start;
 }
+#course-catagory .courses-short-desc .swiper-slide {
+  padding: 1rem 0;
+  height: -moz-max-content;
+  height: max-content;
+}
+#course-catagory .courses-short-desc .single-course-short-desc {
+  font-family: "Inter", sans-serif;
+  padding: 0.75rem 1rem;
+  border: 3px solid #ADBCFF;
+  border-radius: unset;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+#course-catagory .courses-short-desc .single-course-short-desc h6 {
+  font-size: 1rem;
+}
+#course-catagory .courses-short-desc .single-course-short-desc .desc {
+  margin-top: 0.2rem;
+  font-size: 0.65rem;
+  color: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-weight: 600;
+}
+#course-catagory .courses-short-desc .single-course-short-desc .desc span {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+#course-catagory .courses-short-desc .single-course-short-desc .desc span::before {
+  content: "";
+  background: #ADBCFF;
+  height: 15px;
+  width: 15px;
+  padding: 0.15rem;
+}
 #course-catagory .course-container {
   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 .single-course .img-container {
+#course-catagory .top-part {
+  height: 200px;
   position: relative;
-  height: 180px;
+  overflow: hidden;
+}
+#course-catagory .top-part .img-container {
+  height: 100%;
+  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;
 }
 #course-catagory .details {
   height: calc(100% - 180px);
@@ -330,7 +397,7 @@ h1, h2, h3, h4, h5, h6, p {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
-  font-family: "Poppins", sans-serif;
+  font-family: "Inter", sans-serif;
   line-height: 1.2;
 }
 #course-catagory .details .level {
@@ -341,6 +408,9 @@ h1, h2, h3, h4, h5, h6, p {
 #course-catagory .details .title {
   font-size: 0.9rem;
   font-weight: 600;
+  text-decoration: none;
+  color: rgb(0, 0, 0);
+  cursor: pointer;
 }
 #course-catagory .details .stats {
   font-size: 0.7rem;
@@ -351,4 +421,9 @@ h1, h2, h3, h4, h5, h6, p {
   font-weight: 600;
   font-size: 1rem;
   text-align: right;
+}
+#course-catagory .link-btn {
+  margin-top: 1rem;
+  margin-left: auto;
+  margin-right: auto;
 }/*# sourceMappingURL=index.css.map */

css/index.sass

@@ -5,7 +5,7 @@
 
 // hero-banner
 #hero-banner
-    font-family: $fontTrioBangla !important
+    font-family: $fontNotoBangla !important
     color: $blackColor
     background: url(../images/hero-background.svg) no-repeat
 
@@ -16,7 +16,7 @@
         .hero-title
             font-weight: 500
             font-size: 2.5rem
-            font-family: $fontTrioBangla
+            font-family: $fontNotoBangla
             line-height: 1.2
             margin-bottom: 1.5rem
             @media screen and ( max-width: 768px )
@@ -76,30 +76,85 @@
 
 // feature
 #feature
-    font-family: $fontTrioBangla !important
+    font-family: $fontNotoBangla !important
     color: $blackColor
     background: url(../images/2-features.svg) no-repeat
 
 
 // course-catagory
 #course-catagory
-    font-family: $fontTrioBangla !important
+    font-family: $fontNotoBangla !important
     color: $blackColor
     background: url(../images/3-jobcourse_catagory.svg) no-repeat
 
     .section-title, .section-sub-title
         text-align: start
 
+    .courses-short-desc
+
+        .swiper-slide
+            padding: 1rem 0
+            height: max-content
+
+        .single-course-short-desc
+            font-family: $fontInter
+            padding: .75rem 1rem
+            border: 3px solid $primaryLightColor
+            border-radius: unset
+            display: flex
+            flex-direction: column
+            height: 100%
+
+            h6
+                font-size: 1rem
+
+            .desc
+                margin-top: .2rem
+                font-size: .65rem
+                color: $greyColor
+                display: flex
+                align-items: center
+                gap: .25rem
+                font-weight: 600
+
+                span
+                    display: flex
+                    align-items: center
+                    gap: .25rem
+                    &::before
+                        content: ""
+                        background: $primaryLightColor
+                        height: 15px
+                        width: 15px
+                        padding: .15rem
+
     .course-container
         margin-top: 2rem
+        margin-bottom: 2rem
 
     .single-course
         box-shadow: $shadow-1
         height: 100%
+        font-family: $fontInter
+
+    .top-part
+        height: 200px
+        position: relative
+        overflow: hidden
 
         .img-container
-            position: relative
-            height: 180px
+            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 )
@@ -107,7 +162,7 @@
         display: flex
         flex-direction: column
         gap: .75rem
-        font-family: $fontPopins
+        font-family: $fontInter
         line-height: 1.2
 
         .level
@@ -118,6 +173,9 @@
         .title
             font-size: .9rem
             font-weight: 600
+            text-decoration: none
+            color: $blackColor
+            cursor: pointer
 
         .stats
             font-size: .7rem
@@ -129,6 +187,10 @@
             font-size: 1rem
             text-align: right
 
+    .link-btn
+        margin-top: 1rem
+        margin-left: auto
+        margin-right: auto
 
 
 

css/themeStyle.css

@@ -1,6 +1,6 @@
 @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Bengali:wght@300;400;500;600;700;800;900&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Tiro+Bangla&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+Bengali:wght@300;400;500;600;700;800;900&display=swap");
 * {
   list-style: none;
   text-decoration: none;
@@ -13,7 +13,7 @@ a {
 body {
   background: rgb(255, 255, 255);
   color: rgb(0, 0, 0);
-  font-family: "Tiro Bangla", serif;
+  font-family: "Noto Serif Bengali", serif;
 }
 
 main {
@@ -30,6 +30,13 @@ h1, h2, h3, h4, h5, h6, p {
   color: inherit;
   font-family: inherit;
   margin: unset;
+  text-shadow: unset;
+}
+
+@media screen and (min-width: 1400px) {
+  .container {
+    max-width: 1360px;
+  }
 }
 
 .section-title {
@@ -59,8 +66,8 @@ h1, h2, h3, h4, h5, h6, p {
 }
 
 .link-btn {
-  margin: 0 !important;
-  padding: 0.25rem 1rem !important;
+  margin: 0;
+  padding: 0.45rem 1.2rem !important;
   background: rgb(0, 38, 136);
   border-color: rgb(0, 38, 136);
   border-width: 2px;
@@ -70,6 +77,8 @@ h1, h2, h3, h4, h5, h6, p {
   opacity: unset;
   display: block;
   height: unset;
+  width: -moz-fit-content;
+  width: fit-content;
 }
 .link-btn:hover {
   background: rgb(255, 255, 255);
@@ -77,8 +86,8 @@ h1, h2, h3, h4, h5, h6, p {
 }
 
 .link-btn-outline {
-  margin: 0 !important;
-  padding: 0.25rem 1rem !important;
+  margin: 0;
+  padding: 0.45rem 1.2rem !important;
   color: rgb(0, 38, 136);
   border-color: rgb(0, 38, 136);
   background: rgb(255, 255, 255);
@@ -202,6 +211,9 @@ h1, h2, h3, h4, h5, h6, p {
 #navbar .link-item.active {
   color: rgb(0, 38, 136);
 }
+#navbar .link-btn {
+  padding: 0.25rem 0.75rem !important;
+}
 
 @media screen and (max-width: 768px) {
   body.show-mobile-menu #navbar .nav-links {

css/themeStyle.css.map

@@ -1 +1 @@
-{"version":3,"sources":["themeStyle.sass","themeStyle.css"],"names":[],"mappings":"AACQ,6GAAA;AAGA,uHAAA;AAGA,gFAAA;AAkBR;EACI,gBAAA;EACA,qBAAA;ACrBJ;;ADuBA;EACI,UAAA;ACpBJ;;ADsBA;EACI,8BAhBS;EAiBT,mBApBS;EAqBT,iCAxBa;ACKjB;;ADqBA;EACI,aAAA;EACA,iBAAA;AClBJ;;ADoBA;EACI,eAAA;EACA,aAAA;ACjBJ;;ADmBA;EACI,cAAA;EACA,oBAAA;EACA,aAAA;AChBJ;;ADqBA;EACI,gBAAA;EACA,mBAzCS;EA0CT,kBAAA;EACA,qBAAA;AClBJ;;ADoBA;EACI,yBA5CQ;EA6CR,kBAAA;EACA,iBAAA;EACA,mBAAA;ACjBJ;;ADmBA;EACI,gBAAA;AChBJ;ADkBI;EACI,YAAA;EACA,WAAA;EACA,oBAAA;KAAA,iBAAA;EACA,0BAAA;KAAA,uBAAA;AChBR;;ADkBA;EACI,oBAAA;EACA,gCAAA;EACA,2BA3DW;EA4DX,6BA5DW;EA6DX,iBAAA;EACA,iBAAA;EACA,gBAAA;EACA,gBAAA;EACA,cAAA;EACA,cAAA;EACA,aAAA;ACfJ;ADgBI;EACI,8BAtEK;EAuEL,sBAtEO;ACwDf;;ADgBA;EACI,oBAAA;EACA,gCAAA;EACA,sBA3EW;EA4EX,6BA5EW;EA6EX,8BA9ES;EA+ET,iBAAA;EACA,iBAAA;EACA,gBAAA;EACA,gBAAA;EACA,cAAA;EACA,aAAA;ACbJ;ADcI;EACI,2BArFO;EAsFP,yBAvFK;AC2Eb;;ADiBA;EACI,eAAA;EACA,MAAA;EACA,OAAA;EACA,WAAA;EACA,kBAAA;EACA,kCA1GS;EA2GT,8BAnGS;ACqFb;ADgBI;EACI,aAAA;EACA,8BAAA;EACA,mBAAA;ACdR;ADeQ;EAJJ;IAKQ,sBAAA;ECZV;AACF;ADcI;EACI,aAAA;EACA,mBAAA;ACZR;ADaQ;EAHJ;IAIQ,eAAA;IACA,MAAA;IACA,OAAA;IACA,QAAA;IACA,8BAAA;IACA,WAAA;IACA,eAAA;IACA,8BAxHC;IAyHD,YAAA;ECVV;AACF;ADWI;EACI,cAAA;ACTR;ADWQ;EACI,YAAA;ACTZ;ADWI;EACI,iBAAA;EACA,gBAAA;EACA,iBAAA;EACA,mBAxIK;EAyIL,YAAA;EACA,SAAA;EACA,YAAA;EACA,wBAAA;EAAA,mBAAA;EACA,uBAAA;EAAA,kBAAA;EACA,aAAA;ACTR;ADUQ;EACI,gBAAA;ACRZ;ADSQ;EAbJ;IAcQ,cAAA;ECNV;AACF;ADOI;EACI,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,SAAA;ACLR;ADMQ;EALJ;IAMQ,8BAvJC;IAwJD,cAAA;IACA,eAAA;IACA,SAAA;IACA,OAAA;IACA,QAAA;IACA,8BAAA;IACA,aAAA;IACA,gBAAA;IACA,6BAAA;IACA,iBAAA;ECHV;EDMU;IACI,cAAA;IACA,WAAA;IACA,2BAAA;ECJd;AACF;ADKQ;EACI,aAAA;EACA,cAAA;ACHZ;ADKI;EACI,uBAAA;EACA,aAAA;EACA,yBAlLK;EAmLL,iBAAA;EACA,gBAAA;EACA,uBAAA;ACHR;ADIQ;EACI,sBApLG;ACkLf;ADII;EACI,sBAvLO;ACqLf;;ADMI;EACI;IACI,0BAAA;ECHV;EDKM;IACI,gBAAA;ECHV;AACF","file":"themeStyle.css"}
+{"version":3,"sources":["themeStyle.sass","themeStyle.css"],"names":[],"mappings":"AACQ,6GAAA;AAGA,uGAAA;AAGA,wHAAA;AAoBR;EACI,gBAAA;EACA,qBAAA;ACvBJ;;ADyBA;EACI,UAAA;ACtBJ;;ADwBA;EACI,8BAjBS;EAkBT,mBArBS;EAsBT,wCAzBa;ACIjB;;ADuBA;EACI,aAAA;EACA,iBAAA;ACpBJ;;ADsBA;EACI,eAAA;EACA,aAAA;ACnBJ;;ADqBA;EACI,cAAA;EACA,oBAAA;EACA,aAAA;EACA,kBAAA;AClBJ;;ADsBI;EADJ;IAEQ,iBAAA;EClBN;AACF;;ADwBA;EACI,gBAAA;EACA,mBAlDS;EAmDT,kBAAA;EACA,qBAAA;ACrBJ;;ADuBA;EACI,yBArDQ;EAsDR,kBAAA;EACA,iBAAA;EACA,mBAAA;ACpBJ;;ADsBA;EACI,gBAAA;ACnBJ;ADqBI;EACI,YAAA;EACA,WAAA;EACA,oBAAA;KAAA,iBAAA;EACA,0BAAA;KAAA,uBAAA;ACnBR;;ADqBA;EACI,SAAA;EACA,kCAAA;EACA,2BApEW;EAqEX,6BArEW;EAsEX,iBAAA;EACA,iBAAA;EACA,gBAAA;EACA,gBAAA;EACA,cAAA;EACA,cAAA;EACA,aAAA;EACA,uBAAA;EAAA,kBAAA;AClBJ;ADmBI;EACI,8BAhFK;EAiFL,sBAhFO;AC+Df;;ADmBA;EACI,SAAA;EACA,kCAAA;EACA,sBArFW;EAsFX,6BAtFW;EAuFX,8BAxFS;EAyFT,iBAAA;EACA,iBAAA;EACA,gBAAA;EACA,gBAAA;EACA,cAAA;EACA,aAAA;AChBJ;ADiBI;EACI,2BA/FO;EAgGP,yBAjGK;ACkFb;;ADoBA;EACI,eAAA;EACA,MAAA;EACA,OAAA;EACA,WAAA;EACA,kBAAA;EACA,kCApHS;EAqHT,8BA7GS;AC4Fb;ADmBI;EACI,aAAA;EACA,8BAAA;EACA,mBAAA;ACjBR;ADkBQ;EAJJ;IAKQ,sBAAA;ECfV;AACF;ADiBI;EACI,aAAA;EACA,mBAAA;ACfR;ADgBQ;EAHJ;IAIQ,eAAA;IACA,MAAA;IACA,OAAA;IACA,QAAA;IACA,8BAAA;IACA,WAAA;IACA,eAAA;IACA,8BAlIC;IAmID,YAAA;ECbV;AACF;ADcI;EACI,cAAA;ACZR;ADcQ;EACI,YAAA;ACZZ;ADcI;EACI,iBAAA;EACA,gBAAA;EACA,iBAAA;EACA,mBAlJK;EAmJL,YAAA;EACA,SAAA;EACA,YAAA;EACA,wBAAA;EAAA,mBAAA;EACA,uBAAA;EAAA,kBAAA;EACA,aAAA;ACZR;ADaQ;EACI,gBAAA;ACXZ;ADYQ;EAbJ;IAcQ,cAAA;ECTV;AACF;ADUI;EACI,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,SAAA;ACRR;ADSQ;EALJ;IAMQ,8BAjKC;IAkKD,cAAA;IACA,eAAA;IACA,SAAA;IACA,OAAA;IACA,QAAA;IACA,8BAAA;IACA,aAAA;IACA,gBAAA;IACA,6BAAA;IACA,iBAAA;ECNV;EDSU;IACI,cAAA;IACA,WAAA;IACA,2BAAA;ECPd;AACF;ADQQ;EACI,aAAA;EACA,cAAA;ACNZ;ADQI;EACI,uBAAA;EACA,aAAA;EACA,yBA5LK;EA6LL,iBAAA;EACA,gBAAA;EACA,uBAAA;ACNR;ADOQ;EACI,sBA9LG;ACyLf;ADOI;EACI,sBAjMO;AC4Lf;ADOI;EACI,mCAAA;ACLR;;ADSI;EACI;IACI,0BAAA;ECNV;EDQM;IACI,gBAAA;ECNV;AACF","file":"themeStyle.css"}

css/themeStyle.sass

@@ -1,15 +1,16 @@
 // poppins font
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap')
 
-// noto bangla
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Bengali:wght@300;400;500;600;700;800;900&display=swap')
+//inter font
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap')
+
+// noto sherif bangla
+@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Bengali:wght@300;400;500;600;700;800;900&display=swap')
 
-// trio bangla
-@import url('https://fonts.googleapis.com/css2?family=Tiro+Bangla&display=swap')
 
 $fontPopins: 'Poppins', sans-serif
-$fontBangla: 'Noto Sans Bengali', sans-serif
-$fontTrioBangla: 'Tiro Bangla', serif
+$fontInter: 'Inter', sans-serif
+$fontNotoBangla: 'Noto Serif Bengali', serif
 
 // colors
 $blackColor: rgba(0, 0, 0, 1)
@@ -17,6 +18,7 @@ $blackLight: rgba(0, 0, 0, 0.8)
 $greyColor: rgba( 0, 0, 0, .6)
 $whiteColor: rgba(255, 255, 255, 1)
 $primaryColor: rgba(0, 38, 136, 1)
+$primaryLightColor: #ADBCFF
 $seconderyColor: rgba(203, 236, 71, 1)
 $thirdColor: rgba(173, 188, 255, 1)
 
@@ -33,7 +35,7 @@ a
 body
     background: $whiteColor
     color: $blackColor
-    font-family: $fontTrioBangla
+    font-family: $fontNotoBangla
 
 main
     height: 200vh
@@ -47,9 +49,17 @@ h1,h2,h3,h4,h5,h6,p
     color: inherit
     font-family: inherit
     margin: unset
+    text-shadow: unset
+
+// customize container size
+.container
+    @media screen and ( min-width: 1400px )
+        max-width: 1360px
+// customize container size end
 
 
 // utility
+    
 
 .section-title
     font-weight: 600
@@ -73,8 +83,8 @@ h1,h2,h3,h4,h5,h6,p
         object-position: center
 
 .link-btn
-    margin: 0 !important
-    padding: .25rem 1rem !important
+    margin: 0 
+    padding: .45rem 1.2rem !important
     background: $primaryColor
     border-color: $primaryColor
     border-width: 2px
@@ -84,13 +94,14 @@ h1,h2,h3,h4,h5,h6,p
     opacity: unset
     display: block
     height: unset
+    width: fit-content
     &:hover
         background: $whiteColor
         color: $primaryColor
 
 .link-btn-outline
-    margin: 0 !important
-    padding: .25rem 1rem !important
+    margin: 0 
+    padding: .45rem 1.2rem !important
     color: $primaryColor
     border-color: $primaryColor
     background: $whiteColor
@@ -200,6 +211,9 @@ h1,h2,h3,h4,h5,h6,p
 
     .link-item.active
         color: $primaryColor
+
+    .link-btn
+        padding: .25rem .75rem !important
         
 
 body.show-mobile-menu

index.html

@@ -20,7 +20,7 @@
     />
 
 
-    <!-- theme style css -->
+    <!-- style css -->
     <link rel="stylesheet" href="./css/index.css">
 
 
@@ -75,6 +75,7 @@
 
     <main>
 
+
         <section id="hero-banner">
 
             <div class="container">
@@ -162,40 +163,119 @@
                     আপনার স্বপ্নের চাকরীর সেরা প্রস্তুতি নিন Studypress এ
                 </p>
 
-                
+                <!-- course short desc slider -->
                 <div class="swiper courses-short-desc">
                     <div class="swiper-wrapper">
-                        <div class="swiper-slide">
-                            <div class="single-course-short-desc">
-                                <h6>
-                                    BCS Preliminary
-                                </h6>
-                                <div class="desc">
-                                    <span>12 Courses</span>
-                                    <span>800 Enrolled</span>
-                                </div>
-                            </div>
+
+                        <div class="swiper-slide single-course-short-desc">
+                            <h6>
+                                BCS Preliminary
+                            </h6>
+                            <p class="desc">
+                                <span>12 Courses</span>
+                                <span>800 Enrolled</span>
+                            </p>
+                        </div>
+
+                        <div class="swiper-slide single-course-short-desc">
+                            <h6>
+                                Primary School Teacher
+                            </h6>
+                            <p class="desc">
+                                <span>12 Courses</span>
+                                <span>800 Enrolled</span>
+                            </p>
+                        </div>
+
+                        <div class="swiper-slide single-course-short-desc">
+                            <h6>
+                                Bangladesh Bank AD
+                            </h6>
+                            <p class="desc">
+                                <span>12 Courses</span>
+                                <span>800 Enrolled</span>
+                            </p>
+                        </div>
+
+                        <div class="swiper-slide single-course-short-desc">
+                            <h6>
+                                BCS Preliminary
+                            </h6>
+                            <p class="desc">
+                                <span>12 Courses</span>
+                                <span>800 Enrolled</span>
+                            </p>
+                        </div>
+
+                        <div class="swiper-slide single-course-short-desc">
+                            <h6>
+                                Primary School Teacher
+                            </h6>
+                            <p class="desc">
+                                <span>12 Courses</span>
+                                <span>800 Enrolled</span>
+                            </p>
+                        </div>
+
+                        <div class="swiper-slide single-course-short-desc">
+                            <h6>
+                                Bangladesh Bank AD
+                            </h6>
+                            <p class="desc">
+                                <span>12 Courses</span>
+                                <span>800 Enrolled</span>
+                            </p>
+                        </div>
+
+                        <div class="swiper-slide single-course-short-desc">
+                            <h6>
+                                BCS Preliminary
+                            </h6>
+                            <p class="desc">
+                                <span>12 Courses</span>
+                                <span>800 Enrolled</span>
+                            </p>
+                        </div>
+
+                        <div class="swiper-slide single-course-short-desc">
+                            <h6>
+                                Primary School Teacher
+                            </h6>
+                            <p class="desc">
+                                <span>12 Courses</span>
+                                <span>800 Enrolled</span>
+                            </p>
+                        </div>
+
+                        <div class="swiper-slide single-course-short-desc">
+                            <h6>
+                                Bangladesh Bank AD
+                            </h6>
+                            <p class="desc">
+                                <span>12 Courses</span>
+                                <span>800 Enrolled</span>
+                            </p>
                         </div>
-                        <div class="swiper-slide">Slide 2</div>
-                        <div class="swiper-slide">Slide 3</div>
-                        <div class="swiper-slide">Slide 4</div>
-                        <div class="swiper-slide">Slide 5</div>
-                        <div class="swiper-slide">Slide 6</div>
-                        <div class="swiper-slide">Slide 7</div>
-                        <div class="swiper-slide">Slide 8</div>
-                        <div class="swiper-slide">Slide 9</div>
+
                     </div>
-                    <div class="swiper-button-next"></div>
-                    <div class="swiper-button-prev"></div>
                 </div>
 
-                <div class="course-container row g-5 g-md-3">
+                <!-- course container -->
+                <div class="course-container row g-4">
 
+                    <!-- single course -->
                     <div class="col-xl-3 col-lg-4 col-md-6 col-12">
                         <div class="single-course">
 
-                            <div class="img-container">
-                                <img src="./images/course-1.png" alt="">
+                            <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">
@@ -204,9 +284,9 @@
                                     <small>Beginner level</small>
                                 </p>
 
-                                <h6 class="title">
+                                <a href="#" class="title">
                                     Primary School Teacher
-                                </h6>
+                                </a href="#">
 
                                 <div class="stats">
                                     <span>40 Days,</span>
@@ -227,11 +307,19 @@
                         </div>
                     </div>
 
+                    <!-- single course -->
                     <div class="col-xl-3 col-lg-4 col-md-6 col-12">
                         <div class="single-course">
 
-                            <div class="img-container">
-                                <img src="./images/course-2.png" alt="">
+                            <div class="top-part">
+                                <div class="img-container">
+                                    <img src="./images/course-2.png" alt="">
+                                </div>
+
+                                <div class="tag">
+                                    Popular
+                                </div>
+
                             </div>
 
                             <div class="details">
@@ -240,9 +328,9 @@
                                     <small>Beginner level</small>
                                 </p>
 
-                                <h6 class="title">
+                                <a href="#" class="title">
                                     Primary School Teacher
-                                </h6>
+                                </a href="#">
 
                                 <div class="stats">
                                     <span>40 Days,</span>
@@ -263,11 +351,19 @@
                         </div>
                     </div>
 
+                    <!-- single course -->
                     <div class="col-xl-3 col-lg-4 col-md-6 col-12">
                         <div class="single-course">
 
-                            <div class="img-container">
-                                <img src="./images/course-3.png" alt="">
+                            <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">
@@ -276,9 +372,9 @@
                                     <small>Beginner level</small>
                                 </p>
 
-                                <h6 class="title">
+                                <a href="#" class="title">
                                     Primary School Teacher
-                                </h6>
+                                </a href="#">
 
                                 <div class="stats">
                                     <span>40 Days,</span>
@@ -299,11 +395,19 @@
                         </div>
                     </div>
 
+                    <!-- single course -->
                     <div class="col-xl-3 col-lg-4 col-md-6 col-12">
                         <div class="single-course">
 
-                            <div class="img-container">
-                                <img src="./images/course-4.png" alt="">
+                            <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">
@@ -312,9 +416,9 @@
                                     <small>Beginner level</small>
                                 </p>
 
-                                <h6 class="title">
+                                <a href="#" class="title">
                                     Primary School Teacher
-                                </h6>
+                                </a href="#">
 
                                 <div class="stats">
                                     <span>40 Days,</span>
@@ -335,8 +439,13 @@
                         </div>
                     </div>
 
+
                 </div>
 
+                <a href="" class="link-btn"  role="button">
+                    সব কোর্স 
+                </a>
+
             </div>
 
         </section>

js/custom.js

@@ -14,8 +14,27 @@ resBtn.addEventListener('click',  () => {
 var swiper = new Swiper(".courses-short-desc", {
     slidesPerView: "auto",
     spaceBetween: 30,
-    navigation: {
-        nextEl: ".swiper-button-next",
-        prevEl: ".swiper-button-prev",
+    loop: true,
+    spaceBetween: 10,
+    autoHeight: true,
+    allowTouchMove: true,
+    slidesPerView: 1,
+    breakpoints: {
+        640: {
+          slidesPerView: 2,
+          spaceBetween: 10,
+        },
+        768: {
+          slidesPerView: 3,
+          spaceBetween: 20,
+        },
+        1024: {
+          slidesPerView: 4,
+          spaceBetween: 30,
+        },
+      },
+    autoplay: {
+        delay: 2500,
+        disableOnInteraction: false,
     },
 });