home page work ongoing

css/index.css

@@ -0,0 +1,354 @@
+@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");
+* {
+  list-style: none;
+  text-decoration: none;
+}
+
+a {
+  opacity: 1;
+}
+
+body {
+  background: rgb(255, 255, 255);
+  color: rgb(0, 0, 0);
+  font-family: "Tiro Bangla", serif;
+}
+
+main {
+  height: 200vh;
+  padding-top: 4rem;
+}
+
+section {
+  padding: 4rem 0;
+  margin: unset;
+}
+
+h1, h2, h3, h4, h5, h6, p {
+  color: inherit;
+  font-family: inherit;
+  margin: unset;
+}
+
+.section-title {
+  font-weight: 600;
+  color: rgb(0, 0, 0);
+  text-align: center;
+  margin-bottom: 1.2rem;
+}
+
+.section-sub-title {
+  color: rgba(0, 0, 0, 0.6);
+  text-align: center;
+  font-size: 1.1rem;
+  margin-bottom: 2rem;
+}
+
+.img-container {
+  overflow: hidden;
+}
+.img-container img {
+  height: 100%;
+  width: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  -o-object-position: center;
+     object-position: center;
+}
+
+.link-btn {
+  margin: 0 !important;
+  padding: 0.25rem 1rem !important;
+  background: rgb(0, 38, 136);
+  border-color: rgb(0, 38, 136);
+  border-width: 2px;
+  font-size: 0.9rem;
+  font-weight: 600;
+  box-shadow: none;
+  opacity: unset;
+  display: block;
+  height: unset;
+}
+.link-btn:hover {
+  background: rgb(255, 255, 255);
+  color: rgb(0, 38, 136);
+}
+
+.link-btn-outline {
+  margin: 0 !important;
+  padding: 0.25rem 1rem !important;
+  color: rgb(0, 38, 136);
+  border-color: rgb(0, 38, 136);
+  background: rgb(255, 255, 255);
+  border-width: 2px;
+  font-size: 0.9rem;
+  font-weight: 600;
+  box-shadow: none;
+  opacity: unset;
+  height: unset;
+}
+.link-btn-outline:hover {
+  background: rgb(0, 38, 136);
+  color: rgb(255, 255, 255);
+}
+
+#navbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  padding: 0.75rem 0;
+  font-family: "Poppins", sans-serif;
+  background: rgb(255, 255, 255);
+}
+#navbar .container-fluid {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+@media screen and (max-width: 768px) {
+  #navbar .container-fluid {
+    flex-direction: column;
+  }
+}
+#navbar .nav-icons {
+  display: flex;
+  align-items: center;
+}
+@media screen and (max-width: 768px) {
+  #navbar .nav-icons {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    justify-content: space-between;
+    width: 100%;
+    padding: 0 1rem;
+    background: rgb(255, 255, 255);
+    height: 4rem;
+  }
+}
+#navbar .navbar-brand {
+  height: 3.5rem;
+}
+#navbar .navbar-brand img {
+  height: 100%;
+}
+#navbar .res-btn {
+  font-size: 1.2rem;
+  padding: 0.25rem;
+  background: unset;
+  color: rgb(0, 0, 0);
+  border: none;
+  margin: 0;
+  width: unset;
+  height: -moz-fit-content;
+  height: fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  display: none;
+}
+#navbar .res-btn:focus {
+  box-shadow: none;
+}
+@media screen and (max-width: 768px) {
+  #navbar .res-btn {
+    display: block;
+  }
+}
+#navbar .nav-links {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+}
+@media screen and (max-width: 768px) {
+  #navbar .nav-links {
+    background: rgb(255, 255, 255);
+    display: block;
+    position: fixed;
+    top: 4rem;
+    left: 0;
+    right: 0;
+    min-height: calc(100vh - 4rem);
+    padding: 1rem;
+    overflow-y: auto;
+    transform: translateX(-200vw);
+    transition: 0.75s;
+  }
+  #navbar .nav-links li {
+    display: block;
+    color: #fff;
+    margin-top: 1rem !important;
+  }
+}
+#navbar .nav-links li {
+  margin: unset;
+  padding: unset;
+}
+#navbar .link-item {
+  padding: 0.25rem 0.5rem;
+  margin: unset;
+  color: rgba(0, 0, 0, 0.8);
+  font-size: 0.9rem;
+  font-weight: 600;
+  background: transparent;
+}
+#navbar .link-item:hover {
+  color: rgb(0, 38, 136);
+}
+#navbar .link-item.active {
+  color: rgb(0, 38, 136);
+}
+
+@media screen and (max-width: 768px) {
+  body.show-mobile-menu #navbar .nav-links {
+    transform: translateX(0px);
+  }
+  body.show-mobile-menu main {
+    overflow-y: none;
+  }
+}
+
+#hero-banner {
+  font-family: "Tiro Bangla", serif !important;
+  color: rgb(0, 0, 0);
+  background: url(../images/hero-background.svg) no-repeat;
+}
+#hero-banner .hero-content {
+  align-items: center;
+  min-height: 70vh;
+}
+#hero-banner .hero-content .hero-title {
+  font-weight: 500;
+  font-size: 2.5rem;
+  font-family: "Tiro Bangla", serif;
+  line-height: 1.2;
+  margin-bottom: 1.5rem;
+}
+@media screen and (max-width: 768px) {
+  #hero-banner .hero-content .hero-title {
+    font-size: 1.5rem;
+    margin-bottom: 0.75rem;
+  }
+}
+#hero-banner .hero-content .hero-paragraph {
+  line-height: 1.7;
+  font-size: 1.3rem;
+  margin-bottom: 2rem;
+}
+@media screen and (max-width: 768px) {
+  #hero-banner .hero-content .hero-paragraph {
+    font-size: 0.9rem;
+  }
+}
+#hero-banner .hero-content .hero-desc {
+  order: 0;
+}
+@media screen and (max-width: 992px) {
+  #hero-banner .hero-content .hero-desc {
+    order: 1;
+  }
+}
+@media screen and (max-width: 768px) {
+  #hero-banner .hero-content .hero-image {
+    height: 240px;
+    text-align: center;
+  }
+  #hero-banner .hero-content .hero-image img {
+    height: 100%;
+  }
+}
+#hero-banner .statistics {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+#hero-banner .single-statistics {
+  color: rgba(0, 0, 0, 0.6);
+  text-align: center;
+  padding-right: 1rem;
+  border-right: 5px solid rgb(203, 236, 71);
+}
+#hero-banner .single-statistics:last-child {
+  border-right: none;
+}
+#hero-banner .single-statistics .count {
+  margin-bottom: 0.2rem;
+  font-size: 1.3rem;
+}
+@media screen and (max-width: 768px) {
+  #hero-banner .single-statistics .count {
+    font-size: 0.9rem;
+  }
+}
+#hero-banner .single-statistics p {
+  margin-bottom: 0;
+}
+@media screen and (max-width: 768px) {
+  #hero-banner .single-statistics p {
+    font-size: 0.75rem;
+  }
+}
+#hero-banner .hero-links {
+  margin-top: 2rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+#feature {
+  font-family: "Tiro Bangla", serif !important;
+  color: rgb(0, 0, 0);
+  background: url(../images/2-features.svg) no-repeat;
+}
+
+#course-catagory {
+  font-family: "Tiro Bangla", 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 .course-container {
+  margin-top: 2rem;
+}
+#course-catagory .single-course {
+  box-shadow: 1px 2px 5px rgba(0, 46, 116, 0.25);
+  height: 100%;
+}
+#course-catagory .single-course .img-container {
+  position: relative;
+  height: 180px;
+}
+#course-catagory .details {
+  height: calc(100% - 180px);
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  font-family: "Poppins", sans-serif;
+  line-height: 1.2;
+}
+#course-catagory .details .level {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: rgb(0, 38, 136);
+}
+#course-catagory .details .title {
+  font-size: 0.9rem;
+  font-weight: 600;
+}
+#course-catagory .details .stats {
+  font-size: 0.7rem;
+  color: rgba(0, 0, 0, 0.6);
+}
+#course-catagory .details .price {
+  color: rgb(0, 38, 136);
+  font-weight: 600;
+  font-size: 1rem;
+  text-align: right;
+}/*# sourceMappingURL=index.css.map */

css/index.sass

@@ -0,0 +1,138 @@
+// importing theme style
+@import ./themeStyle
+
+
+
+// hero-banner
+#hero-banner
+    font-family: $fontTrioBangla !important
+    color: $blackColor
+    background: url(../images/hero-background.svg) no-repeat
+
+    .hero-content
+        align-items: center
+        min-height: 70vh
+
+        .hero-title
+            font-weight: 500
+            font-size: 2.5rem
+            font-family: $fontTrioBangla
+            line-height: 1.2
+            margin-bottom: 1.5rem
+            @media screen and ( max-width: 768px )
+                font-size: 1.5rem
+                margin-bottom: .75rem
+
+        .hero-paragraph
+            line-height: 1.7
+            font-size: 1.3rem
+            margin-bottom: 2rem
+            @media screen and ( max-width: 768px )
+                font-size: .9rem
+
+        .hero-desc
+            order: 0
+            @media screen and ( max-width: 992px )
+                order: 1
+
+        .hero-image
+            @media screen and ( max-width: 768px )
+                height: 240px
+                text-align: center
+
+                img
+                    height: 100%
+
+    .statistics
+        display: flex
+        align-items: center
+        gap: 1rem
+
+    .single-statistics
+        color: $greyColor
+        text-align: center
+        padding-right: 1rem
+        border-right: 5px solid $seconderyColor
+        &:last-child
+            border-right: none
+
+        .count
+            margin-bottom: .2rem
+            font-size: 1.3rem
+            @media screen and ( max-width: 768px )
+                font-size: .9rem
+
+        p
+            margin-bottom: 0
+            @media screen and ( max-width: 768px )
+                font-size: .75rem
+
+    .hero-links
+        margin-top: 2rem
+        display: flex
+        flex-wrap: wrap
+        gap: .75rem
+
+
+// feature
+#feature
+    font-family: $fontTrioBangla !important
+    color: $blackColor
+    background: url(../images/2-features.svg) no-repeat
+
+
+// course-catagory
+#course-catagory
+    font-family: $fontTrioBangla !important
+    color: $blackColor
+    background: url(../images/3-jobcourse_catagory.svg) no-repeat
+
+    .section-title, .section-sub-title
+        text-align: start
+
+    .course-container
+        margin-top: 2rem
+
+    .single-course
+        box-shadow: $shadow-1
+        height: 100%
+
+        .img-container
+            position: relative
+            height: 180px
+
+    .details
+        height: calc( 100% - 180px )
+        padding: 1rem
+        display: flex
+        flex-direction: column
+        gap: .75rem
+        font-family: $fontPopins
+        line-height: 1.2
+
+        .level
+            font-size: .75rem
+            font-weight: 500
+            color: $primaryColor
+
+        .title
+            font-size: .9rem
+            font-weight: 600
+
+        .stats
+            font-size: .7rem
+            color: $greyColor
+
+        .price
+            color: $primaryColor
+            font-weight: 600
+            font-size: 1rem
+            text-align: right
+
+
+
+
+
+
+
+

css/themeStyle.css

@@ -1,5 +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+Serif+Bengali: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");
 * {
   list-style: none;
   text-decoration: none;
@@ -10,25 +11,89 @@ a {
 }
 
 body {
+  background: rgb(255, 255, 255);
+  color: rgb(0, 0, 0);
+  font-family: "Tiro Bangla", serif;
+}
+
+main {
   height: 200vh;
+  padding-top: 4rem;
+}
+
+section {
+  padding: 4rem 0;
+  margin: unset;
+}
+
+h1, h2, h3, h4, h5, h6, p {
+  color: inherit;
+  font-family: inherit;
+  margin: unset;
+}
+
+.section-title {
+  font-weight: 600;
+  color: rgb(0, 0, 0);
+  text-align: center;
+  margin-bottom: 1.2rem;
+}
+
+.section-sub-title {
+  color: rgba(0, 0, 0, 0.6);
+  text-align: center;
+  font-size: 1.1rem;
+  margin-bottom: 2rem;
+}
+
+.img-container {
+  overflow: hidden;
+}
+.img-container img {
+  height: 100%;
+  width: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  -o-object-position: center;
+     object-position: center;
 }
 
 .link-btn {
   margin: 0 !important;
-  padding: 0.35rem 1rem !important;
+  padding: 0.25rem 1rem !important;
   background: rgb(0, 38, 136);
   border-color: rgb(0, 38, 136);
   border-width: 2px;
   font-size: 0.9rem;
   font-weight: 600;
   box-shadow: none;
+  opacity: unset;
+  display: block;
+  height: unset;
 }
 .link-btn:hover {
-  opacity: 1;
   background: rgb(255, 255, 255);
   color: rgb(0, 38, 136);
 }
 
+.link-btn-outline {
+  margin: 0 !important;
+  padding: 0.25rem 1rem !important;
+  color: rgb(0, 38, 136);
+  border-color: rgb(0, 38, 136);
+  background: rgb(255, 255, 255);
+  border-width: 2px;
+  font-size: 0.9rem;
+  font-weight: 600;
+  box-shadow: none;
+  opacity: unset;
+  height: unset;
+}
+.link-btn-outline:hover {
+  background: rgb(0, 38, 136);
+  color: rgb(255, 255, 255);
+}
+
 #navbar {
   position: fixed;
   top: 0;
@@ -36,6 +101,7 @@ body {
   width: 100%;
   padding: 0.75rem 0;
   font-family: "Poppins", sans-serif;
+  background: rgb(255, 255, 255);
 }
 #navbar .container-fluid {
   display: flex;
@@ -53,8 +119,15 @@ body {
 }
 @media screen and (max-width: 768px) {
   #navbar .nav-icons {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
     justify-content: space-between;
     width: 100%;
+    padding: 0 1rem;
+    background: rgb(255, 255, 255);
+    height: 4rem;
   }
 }
 #navbar .navbar-brand {
@@ -89,12 +162,26 @@ body {
   display: flex;
   justify-content: center;
   align-items: center;
-  gap: 0.75rem;
+  gap: 1rem;
 }
 @media screen and (max-width: 768px) {
   #navbar .nav-links {
-    flex-direction: column;
-    justify-content: flex-start;
+    background: rgb(255, 255, 255);
+    display: block;
+    position: fixed;
+    top: 4rem;
+    left: 0;
+    right: 0;
+    min-height: calc(100vh - 4rem);
+    padding: 1rem;
+    overflow-y: auto;
+    transform: translateX(-200vw);
+    transition: 0.75s;
+  }
+  #navbar .nav-links li {
+    display: block;
+    color: #fff;
+    margin-top: 1rem !important;
   }
 }
 #navbar .nav-links li {
@@ -106,9 +193,21 @@ body {
   margin: unset;
   color: rgba(0, 0, 0, 0.8);
   font-size: 0.9rem;
-  font-weight: 500;
+  font-weight: 600;
   background: transparent;
 }
 #navbar .link-item:hover {
   color: rgb(0, 38, 136);
+}
+#navbar .link-item.active {
+  color: rgb(0, 38, 136);
+}
+
+@media screen and (max-width: 768px) {
+  body.show-mobile-menu #navbar .nav-links {
+    transform: translateX(0px);
+  }
+  body.show-mobile-menu main {
+    overflow-y: none;
+  }
 }/*# sourceMappingURL=themeStyle.css.map */

css/themeStyle.css.map

@@ -1 +1 @@
-{"version":3,"sources":["themeStyle.sass","themeStyle.css"],"names":[],"mappings":"AAAQ,6GAAA;AACA,wHAAA;AAcR;EACI,gBAAA;EACA,qBAAA;ACZJ;;ADcA;EACI,UAAA;ACXJ;;ADaA;EACI,aAAA;ACVJ;;ADcA;EACI,oBAAA;EACA,gCAAA;EACA,2BAnBW;EAoBX,6BApBW;EAqBX,iBAAA;EACA,iBAAA;EACA,gBAAA;EACA,gBAAA;ACXJ;ADYI;EACI,UAAA;EACA,8BA5BK;EA6BL,sBA5BO;ACkBf;;ADeA;EACI,eAAA;EACA,MAAA;EACA,OAAA;EACA,WAAA;EACA,kBAAA;EACA,kCA9CS;ACkCb;ADcI;EACI,aAAA;EACA,8BAAA;EACA,mBAAA;ACZR;ADaQ;EAJJ;IAKQ,sBAAA;ECVV;AACF;ADYI;EACI,aAAA;EACA,mBAAA;ACVR;ADWQ;EAHJ;IAIQ,8BAAA;IACA,WAAA;ECRV;AACF;ADSI;EACI,cAAA;ACPR;ADSQ;EACI,YAAA;ACPZ;ADSI;EACI,iBAAA;EACA,gBAAA;EACA,iBAAA;EACA,mBAtEK;EAuEL,YAAA;EACA,SAAA;EACA,YAAA;EACA,wBAAA;EAAA,mBAAA;EACA,uBAAA;EAAA,kBAAA;EACA,aAAA;ACPR;ADQQ;EACI,gBAAA;ACNZ;ADOQ;EAbJ;IAcQ,cAAA;ECJV;AACF;ADKI;EACI,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,YAAA;ACHR;ADIQ;EALJ;IAMQ,sBAAA;IACA,2BAAA;ECDV;AACF;ADEQ;EACI,aAAA;EACA,cAAA;ACAZ;ADEI;EACI,uBAAA;EACA,aAAA;EACA,yBAjGK;EAkGL,iBAAA;EACA,gBAAA;EACA,uBAAA;ACAR;ADCQ;EACI,sBAnGG;ACoGf","file":"themeStyle.css"}
+{"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"}

css/themeStyle.sass

@@ -1,10 +1,17 @@
+// poppins font
 @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+Serif+Bengali:wght@300;400;500;600;700;800;900&display=swap')
 
-$fontBangla: 'Noto Serif Bengali', serif
-$fontPopins: 'Poppins', sans-serif
+// noto bangla
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+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
 
+// colors
 $blackColor: rgba(0, 0, 0, 1)
 $blackLight: rgba(0, 0, 0, 0.8)
 $greyColor: rgba( 0, 0, 0, .6)
@@ -13,6 +20,9 @@ $primaryColor: rgba(0, 38, 136, 1)
 $seconderyColor: rgba(203, 236, 71, 1)
 $thirdColor: rgba(173, 188, 255, 1)
 
+// shadows
+$shadow-1: 1px 2px 5px rgba(0, 46, 116, 0.25)
+
 *
     list-style: none
     text-decoration: none
@@ -21,24 +31,79 @@ a
     opacity: 1
 
 body
+    background: $whiteColor
+    color: $blackColor
+    font-family: $fontTrioBangla
+
+main
     height: 200vh
+    padding-top: 4rem
+
+section
+    padding: 4rem 0
+    margin: unset
+
+h1,h2,h3,h4,h5,h6,p
+    color: inherit
+    font-family: inherit
+    margin: unset
 
 
 // utility
+
+.section-title
+    font-weight: 600
+    color: $blackColor
+    text-align: center
+    margin-bottom: 1.2rem
+
+.section-sub-title
+    color: $greyColor
+    text-align: center
+    font-size: 1.1rem
+    margin-bottom: 2rem
+
+.img-container
+    overflow: hidden
+
+    img
+        height: 100%
+        width: 100%
+        object-fit: cover
+        object-position: center
+
 .link-btn
     margin: 0 !important
-    padding: .35rem 1rem !important
+    padding: .25rem 1rem !important
     background: $primaryColor
     border-color: $primaryColor
     border-width: 2px
     font-size: .9rem
     font-weight: 600
     box-shadow: none
+    opacity: unset
+    display: block
+    height: unset
     &:hover
-        opacity: 1
         background: $whiteColor
         color: $primaryColor
 
+.link-btn-outline
+    margin: 0 !important
+    padding: .25rem 1rem !important
+    color: $primaryColor
+    border-color: $primaryColor
+    background: $whiteColor
+    border-width: 2px
+    font-size: .9rem
+    font-weight: 600
+    box-shadow: none
+    opacity: unset
+    height: unset
+    &:hover
+        background: $primaryColor
+        color: $whiteColor
+
 // utility end
 
 // navbar
@@ -49,6 +114,7 @@ body
     width: 100%
     padding: .75rem 0
     font-family: $fontPopins
+    background: $whiteColor
 
     .container-fluid
         display: flex
@@ -62,8 +128,15 @@ body
         display: flex
         align-items: center
         @media screen and ( max-width: 768px )
+            position: fixed
+            top: 0
+            left: 0
+            right: 0
             justify-content: space-between
             width: 100%
+            padding: 0 1rem
+            background: $whiteColor
+            height: 4rem
 
     .navbar-brand
         height: 3.5rem
@@ -91,10 +164,25 @@ body
         display: flex
         justify-content: center
         align-items: center
-        gap: .75rem
+        gap: 1rem
         @media screen and ( max-width: 768px )
-            flex-direction: column
-            justify-content: flex-start
+            background: $whiteColor
+            display: block
+            position: fixed
+            top: 4rem
+            left: 0
+            right: 0
+            min-height: calc( 100vh - 4rem )
+            padding: 1rem
+            overflow-y: auto
+            transform: translateX(-200vw)
+            transition: .75s
+
+
+            li
+                display: block
+                color: #fff
+                margin-top: 1rem !important
 
         li
             margin: unset
@@ -105,9 +193,21 @@ body
         margin: unset
         color: $blackLight
         font-size: .9rem
-        font-weight: 500
+        font-weight: 600
         background: transparent
         &:hover
             color: $primaryColor
 
+    .link-item.active
+        color: $primaryColor
+        
+
+body.show-mobile-menu
+    @media screen and ( max-width: 768px )
+        #navbar .nav-links
+            transform: translateX(0px)
+
+        main
+            overflow-y: none
+
 // navbar end

index.html

@@ -10,9 +10,18 @@
     <!-- pico css -->
     <link rel="stylesheet" href="./css/pico.min.css">
 
+    <!-- Pico css Bootstrap grid -->
+    <link rel="stylesheet" href="css/pico-bootstrap-grid.min.css" />
+
+    <!-- swiper slider css -->
+    <link
+        rel="stylesheet"
+        href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"
+    />
+
 
     <!-- theme style css -->
-    <link rel="stylesheet" href="./css/themeStyle.css">
+    <link rel="stylesheet" href="./css/index.css">
 
 
     <title>Studypress</title>
@@ -29,14 +38,14 @@
                     <img src="./images/studypress-main-logo.svg" alt="">
                 </a>
 
-                <button class="res-btn">
+                <button id="res-btn" class="res-btn">
                     <i class="fa-solid fa-bars"></i>
                 </button>
             </div>
 
             <ul class="nav-links">
                 <li>
-                    <a href="#" class="link-item">Home</a>
+                    <a href="#" class="link-item active">Home</a>
                 </li>
                 <li>
                     <a href="#" class="link-item">About</a>
@@ -50,18 +59,294 @@
                 <li>
                     <a href="#" class="link-item">Contact</a>
                 </li>
+                <li>
+                    <a class="link-btn" href="#" role="button">
+                        Join for free
+                    </a>
+                </li>
             </ul>
 
 
-            <a class="link-btn" href="#" role="button">
-                Join for free
-            </a>
+            
 
         </div>
 
     </nav>
 
+    <main>
+
+        <section id="hero-banner">
+
+            <div class="container">
+
+                <div class="row g-5 hero-content">
+
+                    <div class="col-12 col-lg-7 hero-desc">
+
+                        <h2 class="hero-title">
+                            পরিবর্তনশীল চাকরির বাজারের জন্য নিজেকে প্রস্তুত করুন
+                        </h2>
+
+                        <p class="hero-paragraph">
+                            Studypress এর AI ব্যবহার করে সহজতম উপায়ে আপনার প্রস্তুতি নিন।আপনার পছন্দের ক্যারিয়ার গড়ে তুলতে আজই ডাউনলোড করুন আমাদের অ্যাপ।
+                        </p>
+
+                        <div class="statistics">
+
+                            <div class="single-statistics">
+                                <h5 class="count">150 Million+ </h5>
+                                <p class="">Learners</p>
+                            </div>
+
+                            <div class="single-statistics">
+                                <h5 class="count">150 Million+ </h5>
+                                <p class="">Learners</p>
+                            </div>
+
+                            <div class="single-statistics">
+                                <h5 class="count">150 Million+ </h5>
+                                <p class="">Learners</p>
+                            </div>
+
+                        </div>
+
+                        <div class="hero-links">
+
+                            <a class="link-btn" href="#" role="button">
+                                Join for free
+                            </a>
+
+                            <a class="link-btn-outline" href="#" role="button">
+                                Learn more
+                            </a>
+
+                        </div>
+
+                    </div>
+
+                    <div class="col-12 col-lg-5 hero-image">
+                        <img src="./images/hero-img.svg" alt="">
+                    </div>
+
+                </div>
+
+            </div>
+        
+        </section>
+
+        <section id="feature">
+
+            <div class="container">
+
+                <h2 class="section-title">
+                    পরিপূর্ণ প্রস্তুতির জন্য সকল Feature এক অ্যাপ এই
+                </h2>
+
+                <p class="section-sub-title">
+                    আপনার স্বপ্নের চাকরীর সেরা প্রস্তুতি নিন Studypress এ
+                </p>
+
+            </div>
+
+        </section>
+
+        <section id="course-catagory">
+
+            <div class="container">
+
+                <h2 class="section-title">
+                    যেকোনো চাকরীর প্রস্তুতিতে আমরা আছি আপনার পাশে
+                </h2>
+
+                <p class="section-sub-title">
+                    আপনার স্বপ্নের চাকরীর সেরা প্রস্তুতি নিন Studypress এ
+                </p>
+
+                
+                <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>
+                        <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">
+
+                    <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>
+
+                            <div class="details">
+
+                                <p class="level">
+                                    <small>Beginner level</small>
+                                </p>
+
+                                <h6 class="title">
+                                    Primary School Teacher
+                                </h6>
+
+                                <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 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>
+
+                            <div class="details">
+
+                                <p class="level">
+                                    <small>Beginner level</small>
+                                </p>
+
+                                <h6 class="title">
+                                    Primary School Teacher
+                                </h6>
+
+                                <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 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>
+
+                            <div class="details">
+
+                                <p class="level">
+                                    <small>Beginner level</small>
+                                </p>
+
+                                <h6 class="title">
+                                    Primary School Teacher
+                                </h6>
+
+                                <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 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>
+
+                            <div class="details">
+
+                                <p class="level">
+                                    <small>Beginner level</small>
+                                </p>
+
+                                <h6 class="title">
+                                    Primary School Teacher
+                                </h6>
+
+                                <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>
+        
+    </main>
+
+
 
+    <!-- swiper slider js -->
+    <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
 
     <!-- custom js -->
     <script src="./js/custom.js"></script>

js/custom.js

@@ -0,0 +1,21 @@
+// responsive navbar for mobile menu
+const resBtn = document.getElementById("res-btn");
+const bodyTag = document.querySelector("body");
+
+
+resBtn.addEventListener('click',  () => {
+    bodyTag.classList.toggle("show-mobile-menu");
+})
+// responsive navbar for mobile menu end
+
+
+// 
+
+var swiper = new Swiper(".courses-short-desc", {
+    slidesPerView: "auto",
+    spaceBetween: 30,
+    navigation: {
+        nextEl: ".swiper-button-next",
+        prevEl: ".swiper-button-prev",
+    },
+});