home page done

css/style.css

@@ -7,6 +7,8 @@
    --blue-light: #092FB4;
    --blue-light-extra: #0877BE;
 
+   --blue-sky: #CFE9FA;
+
 
    --dark: #414141;
    --dark-light: #8B8888;
@@ -34,6 +36,7 @@
 
     --gradient-btn: linear-gradient(180deg, #C765E9 0%, #6B2EEF 100%);
     --gradient-blue: linear-gradient(256.87deg, rgba(185, 102, 231, 0.39) 0%, rgba(47, 87, 239, 0.29) 100%), rgba(39, 0, 255, 0.8);
+    --gradient-upcoming: linear-gradient(180deg, #E4A3F5 0%, #F1DEF8 100%);
 }
 
 body {
@@ -173,16 +176,109 @@ p {
     border-color: var(--border-light) !important;
 }
 
+.border-blue-light-extra {
+    border-color: var(--blue-light-extra) !important;
+}
+
+.border-purple {
+    border-color: var(--purple) !important;
+}
+
+.border-blue-light {
+    border-color: var(--blue-light) !important;
+}
+
+.border-green-blue {
+    border-color: var(--green-blue) !important;
+}
+
+
+/* utility */
+
+.padding-reset {
+    padding-right: 0 !important;
+    padding-left: 0 !important;
+}
+
+.section-title {
+    font-size: 4rem;
+    font-weight: bold;
+    font-weight: 600;
+    text-align: center;
+    line-height: 1.2;
+}
+
+.sub-title {
+    font-size: 1.8rem;
+    text-align: center;
+}
+
+
+@media screen and (max-width: 1200px) {
+    .section-title {
+        font-size: 2.5rem;
+    }
+
+    .sub-title {
+        font-size: 1.2rem;
+    }
+}
+
+@media screen and (max-width: 992px) {
+    .section-title {
+        font-size: 2.2rem;
+    }
+
+    .sub-title {
+        font-size: 1.1rem;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .section-title {
+        font-size: 2rem;
+    }
+
+    .sub-title {
+        font-size: 1rem;
+    }
+
+    .container {
+        padding-left: 2rem !important;
+        padding-right: 2rem !important;
+    }
+}
+
+
+/* utility end */
+
+
+/* swiper slider */
+
+.swiper-button-next,
+.swiper-button-prev {
+    background-color: transparent;
+    color: var(--dark) !important;
+    fill:  var(--dark)  !important;
+    stroke:  var(--dark)  !important;
+}
+
+/* swiper slider end */
 
 
 
 /* Navbar */
+#navbar {
+    z-index: 100 !important;
+}
+
 #navbar.navbar {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     padding: 0;
+    z-index: 100;
 }
 
 #navbar.sticky {
@@ -217,6 +313,7 @@ p {
 #navbar .main-link a:hover,
 #navbar .main-link a.active {
     color: var(--primary-color);
+    z-index: 10;
 }
 
 
@@ -229,7 +326,9 @@ p {
             
     #navbar.show {
         position: fixed;
-        height: 100vh;
+        bottom: 0;
+        min-height: 100vh;
+        background: var(--white);
     }
     
     #navbar .logo {
@@ -276,10 +375,81 @@ p {
 
 }
 
+@media screen and (max-width: 768px) {
+
+
+    #navbar .container {
+        padding-left: 1rem !important;
+        padding-right: 1rem !important;
+    }
+}
+
 
 /* navbar end */
 
 
+/* footer */
+
+#footer {
+    background: var(--blue-sky);
+}
+
+#footer .brand-logo {
+    width: 4.5rem;
+}
+
+#footer .company-details {
+    font-size: 1rem;
+    font-weight: 300;
+    font-family: var(--font-helvetica);
+}
+
+#footer .company-details-icon {
+    width: 1.8rem;
+}
+
+#footer .content-title {
+    font-size: 1.8rem;
+}
+
+#footer .link a {
+    font-size: 1.2rem;
+    line-height: 1.5;
+}
+
+#footer .link a:hover,
+#footer .link a.active  {
+    color: var(--primary-color);
+}
+
+#footer .social-link {
+    width: 3.3rem;
+    transition: all .30s ease-in-out;
+}
+
+#footer .social-link:hover {
+    transform: scale(1.1);
+}
+
+#footer .policy-link a {
+    white-space: nowrap;
+    font-size: .9rem;
+}
+
+#footer .policy-link a:hover {
+    color: var(--primary-color);
+}
+
+#footer .app-download-link-container .app-download-link {
+    height: 2.5rem;
+    transition: all .35s ease-in-out;
+}
+
+#footer .app-download-link-container .app-download-link:hover {
+    transform: scale(1.1);
+}
+/* footer end */
+
 
 
 
@@ -291,6 +461,10 @@ p {
     font-family: var(--font-noto);
 }
 
+#hero .upper-part .content {
+    flex: 1;
+}
+
 #hero .lower-part .item {
     transition: all .25s ease-in-out;
 }
@@ -307,10 +481,9 @@ p {
 @media screen and (max-width: 992px) {
             
     #hero .hero-image {
-        width: 50% !important;
+        width: 80% !important;
     }
 
-
 }
 /* hero section end */
 
@@ -333,14 +506,197 @@ p {
 
 #upcoming .job-news {
     font-family: var(--font-noto) !important;
-    background: url(../images/upcoming.svg) no-repeat center center/cover;
+    background: url(../images/upcoming.svg) no-repeat   ;
+    background-size: cover;
+    overflow: hidden;
+    height: 100%;
 }
 
 #upcoming .job-news .news {
-    max-width: 160px;
+    max-width: 300px !important;
 }
 
 #upcoming .job-news .news .circle-icon {
     width: 1.5rem;
 }
+
+#upcoming .job-news .news .view-more .icon {
+    height: .7rem !important;
+}
+
+@media screen and (max-width: 992px) {
+            
+    #upcoming .job-news {
+        background: var(--gradient-upcoming) ;
+    }
+
+}
 /*  upcoming section end */
+
+
+
+/* job preparation section */
+#job-preparation {
+    line-height: 1.4;
+    background: url(../images/Job-preparation-bg.svg) no-repeat center center/cover ;
+}
+
+#job-preparation .job-preparation-content .icon {
+    height: .8rem;
+}
+
+
+/* app download */
+
+#download-app {
+    background: url(../images/App_Download-background.svg) no-repeat center center/cover;
+}
+
+#download-app .download-title {
+    font-size: 3.5rem;
+    line-height: 1.2;
+}
+
+#download-app .download-subtitle {
+    font-size: 1.4rem;
+    line-height: 1.4;
+}
+
+#download-app .icon-btn {
+    height: 3.5rem;
+    transition: all .30s ease-in-out;
+}
+#download-app .icon-btn:hover {
+    transform: scale(1.1);
+}
+
+
+@media screen and (max-width: 1200px) {
+    .download-title {
+        font-size: 3rem !important;
+    }
+    
+    #download-app .download-subtitle {
+        font-size: 1.2rem;
+    }
+
+    #download-app .icon-btn {
+        height: 3rem;
+    }
+
+}
+
+@media screen and (max-width: 992px) {
+    .download-title {
+        font-size: 2.5rem !important;
+    }
+    
+    #download-app .download-subtitle {
+        font-size: 1.2rem;
+    }
+
+    #download-app .icon-btn {
+        height: 2.5rem;
+    }
+
+}
+
+
+@media screen and (max-width: 768px) {
+    .download-title {
+        font-size: 1.5rem;
+        line-height: 1.1;
+    }
+
+    #download-app .download-subtitle {
+        font-size: 1rem;
+    }
+
+    
+    #download-app .icon-btn {
+        height: 2.2rem;
+    }
+}
+
+
+
+/* why-studypress section */
+#why-studypress .top-content {
+    background: url(../images/why-studypress-gradient.svg) no-repeat center center/cover;
+    padding-bottom: 100px;
+}
+
+#why-studypress .content {
+   line-height: 1.2;
+}
+
+#why-studypress .content .text-content {
+   width: 80%;
+}
+
+#why-studypress .icon {
+    height: 3.2rem;
+}
+
+@media screen and (max-width: 1200px) {
+
+    #why-studypress .top-content {
+        padding-bottom: 20px !important;
+    }
+
+}
+
+@media screen and (max-width: 992px) {
+
+    #why-studypress .top-content {
+        padding-bottom: 50px !important;
+    }
+
+}
+
+
+@media screen and (max-width: 768px) {
+
+    #why-studypress .top-content {
+        padding-top: 30px !important;
+        padding-bottom: 30px !important;
+    }
+
+}
+
+
+/* crash course section */
+#crash-course {
+    line-height: 1.4;
+}
+
+#crash-course .crash-course-content .icon {
+    height: .7rem;
+}
+
+
+/* our blog section */
+#our-blog {
+    line-height: 1.2;
+    background: #ECD6F8;
+}
+#our-blog .icon {
+    height: .7rem;
+}
+
+
+/* word of the day section */
+#word-of-day .title {
+    font-size: 2.2rem;
+    line-height: 1.4;
+    color: var(--blue-dark);
+    font-weight: 600;
+}
+
+#word-of-day .year {
+    font-size: 1.8rem;
+}
+
+#word-of-day .content {
+    font-size: 1.2rem;
+}

images/Arrow-right-blue-dark.svg

@@ -0,0 +1,3 @@
+<svg width="44" height="23" viewBox="0 0 44 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M43.4122 12.5607C43.998 11.9749 43.998 11.0251 43.4122 10.4393L33.8663 0.893401C33.2805 0.307614 32.3307 0.307614 31.745 0.893401C31.1592 1.47919 31.1592 2.42893 31.745 3.01472L40.2302 11.5L31.745 19.9853C31.1592 20.5711 31.1592 21.5208 31.745 22.1066C32.3307 22.6924 33.2805 22.6924 33.8663 22.1066L43.4122 12.5607ZM0.851562 13L42.3516 13L42.3516 10L0.851563 10L0.851562 13Z" fill="#092FB4"/>
+</svg>

images/Arrow-right-blue-green.svg

@@ -0,0 +1,3 @@
+<svg width="44" height="23" viewBox="0 0 44 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M43.4122 12.5607C43.998 11.9749 43.998 11.0251 43.4122 10.4393L33.8663 0.893401C33.2805 0.307614 32.3307 0.307614 31.745 0.893401C31.1592 1.47919 31.1592 2.42893 31.745 3.01472L40.2302 11.5L31.745 19.9853C31.1592 20.5711 31.1592 21.5208 31.745 22.1066C32.3307 22.6924 33.2805 22.6924 33.8663 22.1066L43.4122 12.5607ZM0.851562 13L42.3516 13L42.3516 10L0.851563 10L0.851562 13Z" fill="#09B4A9"/>
+</svg>

images/Arrow-right-purple.svg

@@ -0,0 +1,3 @@
+<svg width="44" height="23" viewBox="0 0 44 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M43.4115 12.5607C43.9973 11.9749 43.9973 11.0251 43.4115 10.4393L33.8655 0.893401C33.2798 0.307614 32.33 0.307614 31.7442 0.893401C31.1584 1.47919 31.1584 2.42893 31.7442 3.01472L40.2295 11.5L31.7442 19.9853C31.1584 20.5711 31.1584 21.5208 31.7442 22.1066C32.33 22.6924 33.2798 22.6924 33.8655 22.1066L43.4115 12.5607ZM0.85083 13L42.3508 13L42.3508 10L0.85083 10L0.85083 13Z" fill="#7D09B4"/>
+</svg>

images/Linkedin_.svg

@@ -0,0 +1,4 @@
+<svg width="65" height="65" viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32.5 65C50.4493 65 65 50.4493 65 32.5C65 14.5507 50.4493 0 32.5 0C14.5507 0 0 14.5507 0 32.5C0 50.4493 14.5507 65 32.5 65Z" fill="#0A66C2"/>
+<path d="M43.9956 44.002H39.1714V36.4482C39.1714 34.6455 39.1333 32.3286 36.6577 32.3286C34.144 32.3286 33.7568 34.29 33.7568 36.3149V44.002H28.9326V28.4629H33.5664V30.583H33.6299C34.2773 29.3643 35.8516 28.0757 38.2002 28.0757C43.0879 28.0757 43.9893 31.2939 43.9893 35.4771L43.9956 44.002ZM23.4927 26.3364C21.9375 26.3364 20.6934 25.0796 20.6934 23.5371C20.6934 21.9946 21.9438 20.7378 23.4927 20.7378C25.0415 20.7378 26.292 21.9946 26.292 23.5371C26.292 25.0796 25.0352 26.3364 23.4927 26.3364ZM25.9111 44.002H21.0742V28.4629H25.9111V44.002ZM46.4077 16.25H18.6558C17.3291 16.25 16.25 17.2974 16.25 18.5986V46.4648C16.25 47.7598 17.3228 48.8135 18.6558 48.8135H46.4014C47.728 48.8135 48.8135 47.7661 48.8135 46.4648V18.5986C48.8135 17.2974 47.728 16.25 46.4077 16.25Z" fill="white"/>
+</svg>

images/Logo-main-small-version.svg

@@ -0,0 +1,12 @@
+<svg width="493" height="414" viewBox="0 0 493 414" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M377.45 305.657C377.45 305.657 364.225 312.956 347.136 266.755C330.047 220.467 216.091 64.6001 92.5164 26.2131L0.286621 226.736C0.286621 226.736 116.905 287.708 143.955 395.398C143.955 395.398 149.623 405.36 160.358 403.557L377.45 305.743V305.657Z" fill="#6B2EEF"/>
+<path d="M382.259 290.886C382.259 290.886 437.906 153.912 331.078 0.106445L242.197 97.5769C242.197 97.5769 352.117 183.454 381.143 292.947" fill="#6B2EEF"/>
+<path d="M151.342 379.683L91.5721 413.69L99.4729 393.767L79.4634 388.013L141.981 357.183L151.342 379.683Z" fill="#6B2EEF"/>
+<g style="mix-blend-mode:multiply" opacity="0.5">
+<path d="M160.272 403.471L377.192 305.743C375.99 306.258 368.948 308.233 358.815 292.088L141.638 387.841C142.411 390.332 143.098 392.822 143.785 395.312C143.785 395.312 149.452 405.274 160.186 403.471H160.272Z" fill="#6B2EEF"/>
+</g>
+<path d="M385.522 303.853C384.749 303.681 384.235 302.995 384.235 302.222C384.235 301.363 385.093 300.762 385.866 300.848C386.467 300.848 448.212 306.086 485.052 257.222C485.567 256.535 486.512 256.449 487.199 256.879C487.886 257.394 487.971 258.339 487.542 259.026C449.757 309.264 386.295 303.939 385.694 303.853H385.608H385.522Z" fill="#6B2EEF"/>
+<path d="M385.78 293.806C385.179 293.72 384.749 293.29 384.577 292.689C384.406 291.83 384.835 291.058 385.694 290.8C386.209 290.628 436.36 276.974 453.621 224.245C453.879 223.472 454.737 223.043 455.51 223.301C456.283 223.558 456.712 224.417 456.455 225.19C438.679 279.55 386.897 293.634 386.381 293.806C386.124 293.806 385.951 293.806 385.694 293.806H385.78Z" fill="#6B2EEF"/>
+<path d="M492.179 257.137C491.749 259.713 489.259 261.344 486.769 260.915C484.278 260.486 482.561 257.995 482.991 255.505C483.42 253.014 485.91 251.297 488.401 251.726C490.891 252.156 492.608 254.646 492.179 257.137Z" fill="#6B2EEF"/>
+<path d="M459.89 224.159C459.46 226.736 456.97 228.367 454.48 227.938C451.989 227.509 450.272 225.018 450.702 222.528C451.131 220.038 453.621 218.32 456.112 218.749C458.602 219.179 460.319 221.669 459.89 224.159Z" fill="#6B2EEF"/>
+</svg>

images/arrow-circle-left.svg

@@ -0,0 +1,4 @@
+<svg width="60" height="61" viewBox="0 0 60 61" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 30.5C5 44.3071 16.1929 55.5 30 55.5C43.8071 55.5 55 44.3071 55 30.5C55 16.6929 43.8071 5.5 30 5.5C16.1929 5.5 5 16.6929 5 30.5Z" stroke="#141B34" stroke-width="3"/>
+<path d="M40 30.5L20 30.5M20 30.5L26.25 36.75M20 30.5L26.25 24.25" stroke="#141B34" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

images/arrow-circle-right.svg

@@ -0,0 +1,4 @@
+<svg width="60" height="61" viewBox="0 0 60 61" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M55 30.5C55 16.6929 43.8071 5.5 30 5.5C16.1929 5.5 5 16.6929 5 30.5C5 44.3071 16.1929 55.5 30 55.5C43.8071 55.5 55 44.3071 55 30.5Z" stroke="#141B34" stroke-width="3"/>
+<path d="M20 30.5L40 30.5M40 30.5L33.75 24.25M40 30.5L33.75 36.75" stroke="#141B34" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

images/facebook.svg

@@ -0,0 +1,4 @@
+<svg width="65" height="65" viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32.5 65.001C50.4493 65.001 65 50.4502 65 32.501C65 14.5517 50.4493 0.000976562 32.5 0.000976562C14.5507 0.000976562 0 14.5517 0 32.501C0 50.4502 14.5507 65.001 32.5 65.001Z" fill="#3C5A99"/>
+<path d="M35.0264 48.7505V33.9478H40.0156L40.7646 28.1523H35.0264V24.4644C35.0264 22.7886 35.4897 21.6523 37.8892 21.6523H40.9297V16.4854C40.4028 16.4155 38.5874 16.2568 36.4736 16.2568C32.062 16.2568 29.0405 18.9482 29.0405 23.8931V28.1587H24.0703V33.9541H29.0405V48.7505H35.0264Z" fill="white"/>
+</svg>

images/footer _globe_.svg

@@ -0,0 +1,5 @@
+<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 29.7773C22.732 29.7773 29 23.5093 29 15.7773C29 8.04536 22.732 1.77734 15 1.77734C7.26801 1.77734 1 8.04536 1 15.7773C1 23.5093 7.26801 29.7773 15 29.7773Z" stroke="#414141" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1 15.7773H29" stroke="#414141" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.0004 1.77734C18.5022 5.61104 20.4922 10.5862 20.6004 15.7773C20.4922 20.9685 18.5022 25.9436 15.0004 29.7773C11.4986 25.9436 9.50854 20.9685 9.40039 15.7773C9.50854 10.5862 11.4986 5.61104 15.0004 1.77734Z" stroke="#414141" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

images/footer _mail_.svg

@@ -0,0 +1,4 @@
+<svg width="31" height="25" viewBox="0 0 31 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.3 1.37695H26.7C28.24 1.37695 29.5 2.63695 29.5 4.17695V20.977C29.5 22.517 28.24 23.777 26.7 23.777H4.3C2.76 23.777 1.5 22.517 1.5 20.977V4.17695C1.5 2.63695 2.76 1.37695 4.3 1.37695Z" stroke="#414141" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M29.5 4.17676L15.5 13.9768L1.5 4.17676" stroke="#414141" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

images/footer-location.svg

@@ -0,0 +1,4 @@
+<svg width="30" height="37" viewBox="0 0 30 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M29 15.7773C29 26.6662 15 35.9996 15 35.9996C15 35.9996 1 26.6662 1 15.7773C1 12.0643 2.475 8.50336 5.1005 5.87785C7.72601 3.25234 11.287 1.77734 15 1.77734C18.713 1.77734 22.274 3.25234 24.8995 5.87785C27.525 8.50336 29 12.0643 29 15.7773Z" stroke="#414141" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.0007 20.4437C17.578 20.4437 19.6673 18.3543 19.6673 15.777C19.6673 13.1997 17.578 11.1104 15.0007 11.1104C12.4233 11.1104 10.334 13.1997 10.334 15.777C10.334 18.3543 12.4233 20.4437 15.0007 20.4437Z" stroke="#414141" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

images/footer-phone.svg

@@ -0,0 +1,3 @@
+<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.3432 6.68514C19.6525 6.94059 20.8558 7.58092 21.7991 8.52419C22.7423 9.46745 23.3827 10.6707 23.6381 11.98M18.3432 1.32324C21.0634 1.62543 23.6 2.84358 25.5365 4.77766C27.4731 6.71174 28.6944 9.2468 29 11.9666M27.6595 22.6636V26.685C27.661 27.0584 27.5846 27.4279 27.435 27.7699C27.2854 28.112 27.0661 28.4191 26.791 28.6714C26.5159 28.9238 26.1911 29.116 25.8375 29.2356C25.4838 29.3552 25.1091 29.3996 24.7373 29.366C20.6124 28.9178 16.6502 27.5083 13.169 25.2507C9.93017 23.1926 7.18422 20.4467 5.12614 17.2079C2.86071 13.7108 1.45088 9.72935 1.01088 5.58595C0.977382 5.21527 1.02144 4.84167 1.14024 4.48894C1.25904 4.13621 1.44998 3.81209 1.70091 3.5372C1.95184 3.26231 2.25726 3.04268 2.59772 2.8923C2.93818 2.74191 3.30623 2.66407 3.67843 2.66372H7.69985C8.35039 2.65731 8.98107 2.88768 9.47432 3.31188C9.96757 3.73608 10.2898 4.32516 10.3808 4.96933C10.5505 6.25628 10.8653 7.51989 11.3191 8.73607C11.4995 9.21586 11.5385 9.73729 11.4316 10.2386C11.3247 10.7399 11.0763 11.2 10.7159 11.5645L9.01352 13.2669C10.9218 16.6228 13.7004 19.4015 17.0564 21.3097L18.7588 19.6073C19.1232 19.2469 19.5834 18.9985 20.0847 18.8916C20.586 18.7847 21.1074 18.8238 21.5872 19.0041C22.8033 19.4579 24.067 19.7727 25.3539 19.9424C26.0051 20.0343 26.5997 20.3623 27.0249 20.864C27.45 21.3657 27.6758 22.0062 27.6595 22.6636Z" stroke="#414141" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

images/upcoming.svg

@@ -1,7 +1,7 @@
-<svg width="818" height="443" viewBox="0 0 818 443" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M45.6184 67.6833C38.8428 34.0818 62.5833 0.210815 96.8612 0.210815H768C795.614 0.210815 818 22.5966 818 50.2108L818 393C818 420.614 795.614 443 768 443H48.3266C24.0555 443 2.85021 425.473 1.02608 401.271C-10.1305 253.246 77.0781 223.699 45.6184 67.6833Z" fill="url(#paint0_linear_512_1570)"/>
+<svg width="819" height="443" viewBox="0 0 819 443" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M45.8996 67.6025C39.1241 34.0009 62.8646 0.130005 97.1424 0.130005H818.281L818.281 442.919H48.6079C24.3368 442.919 3.13146 425.393 1.30733 401.19C-9.84926 253.165 77.3594 223.619 45.8996 67.6025Z" fill="url(#paint0_linear_579_3)"/>
 <defs>
-<linearGradient id="paint0_linear_512_1570" x1="409.017" y1="0.210815" x2="409.017" y2="443" gradientUnits="userSpaceOnUse">
+<linearGradient id="paint0_linear_579_3" x1="409.298" y1="0.130005" x2="409.298" y2="442.919" gradientUnits="userSpaceOnUse">
 <stop stop-color="#E4A3F5"/>
 <stop offset="1" stop-color="#F1DEF8"/>
 </linearGradient>

images/why-studypress-gradient.svg

@@ -0,0 +1,9 @@
+<svg width="1920" height="294" viewBox="0 0 1920 294" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.826172 0H1920.83V228.5C1171.02 320.057 750.633 311.118 0.826172 228.5V0Z" fill="url(#paint0_linear_517_596)"/>
+<defs>
+<linearGradient id="paint0_linear_517_596" x1="88.1008" y1="146.929" x2="2200.27" y2="51.9981" gradientUnits="userSpaceOnUse">
+<stop stop-color="#643DF6"/>
+<stop offset="1" stop-color="#C03ED3"/>
+</linearGradient>
+</defs>
+</svg>

images/youtube.svg

@@ -0,0 +1,4 @@
+<svg width="65" height="65" viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32.5 65C50.4493 65 65 50.4493 65 32.5C65 14.5507 50.4493 0 32.5 0C14.5507 0 0 14.5507 0 32.5C0 50.4493 14.5507 65 32.5 65Z" fill="#E43535"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M43.014 43.3333H23.068C20.5094 43.3333 18.416 41.1946 18.416 38.5806V27.5027C18.416 24.8887 20.5094 22.75 23.068 22.75H43.014C45.5726 22.75 47.666 24.8887 47.666 27.5027V38.5806C47.666 41.1946 45.5726 43.3333 43.014 43.3333ZM30.3849 29.061V37.8517L38.3492 33.3132L30.3849 29.061Z" fill="white"/>
+</svg>

index.html

@@ -26,8 +26,8 @@
 
     <!-- Navbar -->
     <section id="navbar" class="navbar">
-      <div class="container d-block d-lg-flex flex-lg-row justify-content-between align-items-center h-100">
-
+      <div class="container  py-1 d-block d-lg-flex flex-lg-row justify-content-between align-items-center h-100">
+        
         <!-- logo & mobile open close btn -->
         <div class="logo-mobile-btn d-flex justify-content-between align-items-center">
           <a class="logo">
@@ -43,26 +43,26 @@
         </div>
 
         <!-- main nav link -->
-        <div class="main-link mt-5 py-3 py-lg-0 mt-lg-0 d-lg-flex flex-column flex-lg-row justify-content-between align-items-center text-center">
-          <div class="mt-4 mt-lg-0 w-100">
+        <div class="main-link py-3 py-lg-0 mt-2 mt-md-4 mt-lg-0 d-lg-flex flex-column flex-lg-row justify-content-between align-items-center text-center">
+          <div class="mt-1 mt-md-4 mt-lg-0">
             <a class=" py-2 my-md-0 mx-0 mx-lg-1 px-md-1 px-lg-2 active" href="">Home</a>
           </div>
-          <div class="mt-4 mt-lg-0">
+          <div class="mt-1 mt-md-4 mt-lg-0">
             <a class="py-2 my-md-0 mx-0 mx-lg-1 px-md-1 px-lg-2 " href="">About</a>
           </div>
-          <div class="mt-4 mt-lg-0">
+          <div class="mt-1 mt-md-4 mt-lg-0">
             <a class="py-2 my-md-0 mx-0 mx-lg-1 px-md-1 px-lg-2 " href="">Blog</a>
           </div>
-          <div class="mt-4 mt-lg-0">
+          <div class="mt-1 mt-md-4 mt-lg-0">
             <a class="py-2 my-md-0 mx-0 mx-lg-1 px-md-1 px-lg-2 " href="">News</a>
           </div>
-          <div class="mt-4 mt-lg-0">
+          <div class="mt-1 mt-md-4 mt-lg-0">
             <a class="py-2 my-md-0 mx-0 mx-lg-1 px-md-1 px-lg-2 " href="">Contact</a>
           </div>
         </div>
 
         <!-- login register -->
-        <div class="login-register d-lg-flex flex-row justify-content-center align-items-center bg-primary text-white rounded-1 mt-4 mt-lg-0 px-3 py-2 fs-5 text-center">
+        <div class="login-register d-lg-flex flex-row justify-content-center align-items-center bg-primary text-white rounded-1 mt-1 mt-md-4 mt-lg-0 px-3 py-2 fs-5 text-center">
           <span>
             <a href="#">লগইন</a>
           </span>
@@ -78,13 +78,13 @@
 
 
     <!-- hero section -->
-    <section id="hero" class="py-5">
-      <div class="container mt-5 py-5 px-1">
+    <section id="hero" class=" py-5">
+      <div class="container py-0 py-md-5">
 
 
-        <div class="upper-part row justify-content-between align-items-center h-100 mt-5 pt-5">
+        <div class="upper-part d-block d-flex flex-column flex-lg-row justify-content-between align-items-center mt-2 mt-md-5 pt-5">
 
-          <div class="col-12 col-lg-6 order-1 order-lg-0 mt-5 mt-lg-0  text-center text-lg-start">
+          <div class="content order-1 order-lg-0 mt-5 mt-lg-0  text-center text-lg-start">
 
             <!-- title -->
             <div class="display-5 fw-bold text-primary">
@@ -104,14 +104,14 @@
 
           </div>
 
-          <div class="col-12 col-lg-6 order-0 order-lg-1 text-center">
+          <div class="content order-0 order-lg-1 text-center">
             <img class="hero-image mx-auto w-100" src="./images/hero.png" alt="">
           </div>
         </div>
 
         <div class="lower-part bg-gradient-blue rounded-2 row">
 
-            <div class=" col-12 col-md-6 col-lg-3 p-0 border-end  border-light">
+            <div class=" col-12 col-md-6 col-lg-3 p-0 border-end border-bottom  border-light">
               <div class="item h-100 rounded-2 p-3">
                 <div class="icon">
                   <img class="h-100" src="./images/chart.svg" alt="">
@@ -125,7 +125,7 @@
               </div>
             </div>
 
-            <div class="  col-12 col-md-6 col-lg-3 p-0  border-end  border-light">
+            <div class="  col-12 col-md-6 col-lg-3 p-0  border-end border-bottom  border-light">
               <div class="item h-100 rounded-2 p-3">
                 <div class="icon">
                   <img class="h-100" src="./images/Clock.svg" alt="">
@@ -139,7 +139,7 @@
               </div>
             </div>
 
-            <div class="  col-12 col-md-6 col-lg-3 p-0  border-end  border-light">
+            <div class="  col-12 col-md-6 col-lg-3 p-0  border-end border-bottom  border-light">
               <div class="item h-100 rounded-2 p-3">
                 <div class="icon">
                   <img class="h-100" src="./images/Dictionary.svg" alt="">
@@ -176,101 +176,1085 @@
 
     <!-- section upcoming -->
     <section id="upcoming" >
-      <div class="container py-5">
+      <div class="container pt-5 pb-5 ">
 
-        <div class="bg-primary rounded-3 row">
+        <div class="bg-primary rounded-3 row ">
 
           <!-- upcoming test -->
-          <div class="upcoming-test col-12 col-md-6 pt-3 pb-4 px-5">
+          <div class="upcoming-test col-12 col-lg-6 pt-3 pb-4 ">
 
-            <div class=" my-2 text-white fs-1 text-center ">
-              Upcoming Test
-            </div>
+              <div class=" mt-2 mb-5 text-white fs-1  text-center  ">
+                Upcoming Test
+              </div>
 
-            <!-- exam d details -->
-            <div class="mt-4  upcoming-content mx-auto bg-white text-blue-dark rounded-3 p-3">
+              <!-- exam d details -->
+              <div class="mt-4  upcoming-content mx-auto bg-white text-blue-dark rounded-3 p-3">
 
-              <div class="fs-3 text-center">
-                Bangladesh Bank
-              </div>
+                <div class="pt-3 fs-3 text-center">
+                  Bangladesh Bank
+                </div>
 
-              <!-- exam date -->
-              <div class="mt-3 d-flex justify-content-around align-items-end">
+                <!-- exam date -->
+                <div class="mt-3 d-flex justify-content-around align-items-end">
 
-                <!-- month -->
-                <div>
-                  <div class="">
-                    April
+                  <!-- month -->
+                  <div>
+                    <div class="">
+                      April
+                    </div>
+                    <div class="fs-1">
+                      12
+                    </div>
+                  </div>
+                  
+                  <!-- day -->
+                  <div>
+                    <span class="fs-1">10</span>
+                    <span>PM</span>
                   </div>
+
+                  <!-- year -->
                   <div class="fs-1">
-                    12
+                    2023
                   </div>
-                </div>
-                
-                <!-- day -->
-                <div>
-                  <span class="fs-1">10</span>
-                  <span>PM</span>
-                </div>
 
-                <!-- year -->
-                <div class="fs-1">
-                  2023
                 </div>
 
               </div>
 
-            </div>
-
-            <!-- booking button -->
-            <div class="booking-btn text-center mt-3 mx-auto">
-              <button class="w-100  btn btn-lg bg-white">Book Now</button>
-            </div>
+              <!-- booking button -->
+              <div class="booking-btn text-center mt-3 mx-auto">
+                <button class="w-100  btn btn-lg bg-white">Book Now</button>
+              </div>
 
           </div>
           
 
           <!-- job news -->
-          <div class="job-news col-12 col-md-6 pt-3 pb-4 px-5">
+          <div class="job-news rounded-3 col-12 col-lg-6 pt-3 pb-2 ">
             
             <div class=" my-2 text-blue-dark fs-1 fw-bold text-center ">
               চাকরির খবর  
             </div>
 
-            <div class="mt-4 rounded-3 p-3 d-flex justify-content-center">
+            <div class="mt-4 rounded-3 p-3 d-flex flex-row justify-content-center">
+
+                <div class="news bg-white rounded-3 p-2 me-3">
+                  <div class="circle-icon">
+                    <img class="w-100" src="./images/round-dark-blue.svg" alt="">
+                  </div>
+                  <div class="mt-2 text-blue-dark fw-bold fs-3">
+                    বাংলাদেশ ব্যাংক 
+                  </div>
+                  <div class="mt-2 fs-5 text-dark">
+                    ম্যানেজার পদে নিউগ 
+                  </div>
+
+                  <div class="mt-3  text-white rounded-3 border border-1 border-blue-light-extra">
+
+                    <!-- details -->
+                    <div class="bg-blue-light-extra rounded-top p-2">
+                      
+                      <div class="fs-4">
+                        আবেদন করার শেষ সময়  
+                      </div>
+                      <div class="mt-3 d-flex justify-content-around align-items-end">
+                        <div>
+                          <div class="small">
+                            এপ্রিল
+                          </div>
+                          <div class="fs-2">
+                            ১২ 
+                          </div>
+                        </div>
+                        <div>
+                          <span class="fs-2">১০</span>
+                          <span class="small">PM</span>
+                        </div>
+                      </div>
+                      
+                    </div>
+
+                    <!-- view more link -->
+                    <div class="p-2">
+                      <a class="view-more d-flex text-black align-items-center" href="#">
+                        <span class="fs-6">বিস্তারিত </span>
+                        <span class="ms-2">
+                          <img class="icon h-100" src="./images/Arrow-right-black.svg" alt="">
+                        </span>
+                      </a>
+                    </div>
 
-              <div class="news bg-white rounded-3 p-2 mx-1">
-                <div class="circle-icon">
-                  <img class="w-100" src="./images/round-dark-blue.svg" alt="">
+                  </div>
                 </div>
-                <div class="mt-2">
-                  বাংলাদেশ ব্যাংক 
+
+                <div class="news bg-white rounded-3 p-2 ms-3">
+                  <div class="circle-icon">
+                    <img class="w-100" src="./images/round-dark-blue.svg" alt="">
+                  </div>
+                  <div class="mt-2 text-blue-dark fw-bold fs-3">
+                    বাংলাদেশ ব্যাংক 
+                  </div>
+                  <div class="mt-2 fs-5 text-dark">
+                    ম্যানেজার পদে নিউগ 
+                  </div>
+
+                  <div class="mt-3  text-white rounded-3 border border-1 border-purple">
+
+                    <!-- details -->
+                    <div class="bg-purple rounded-top p-2">
+                      
+                      <div class="fs-4">
+                        আবেদন করার শেষ সময়  
+                      </div>
+                      <div class="mt-3 d-flex justify-content-around align-items-end">
+                        <div>
+                          <div class="small">
+                            এপ্রিল
+                          </div>
+                          <div class="fs-2">
+                            ১২ 
+                          </div>
+                        </div>
+                        <div>
+                          <span class="fs-2">১০</span>
+                          <span class="small">PM</span>
+                        </div>
+                      </div>
+                      
+                    </div>
+
+                    <!-- view more link -->
+                    <div class="p-2">
+                      <a class="view-more d-flex text-black align-items-center" href="#">
+                        <span class="fs-6">বিস্তারিত </span>
+                        <span class="ms-2">
+                          <img class="icon h-100" src="./images/Arrow-right-black.svg" alt="">
+                        </span>
+                      </a>
+                    </div>
+
+                  </div>
                 </div>
+
+
+            </div>
+
+          </div>
+
+        </div>
+
+      </div>
+    </section>
+
+    <!-- job preparation section -->
+    <section id="job-preparation" class="py-5">
+      <div class="container padding-reset">
+
+        <div class="section-title text-blue-dark">
+          সরকারি চাকরির সর্বোচ্চ প্রস্তুতি
+        </div>
+
+        <div class="sub-title text-dark">
+          বিসিএস কিংবা ব্যাংকে চাকরি - টার্গেট যেটাই হোক, সলিউশন এখানেই!
+        </div>
+
+        <div class="position-relative mt-5 py-2 ">
+          <div class="swiper jobPreparationSlider">
+              <div class="swiper-wrapper py-3">
+
+                  <div class="swiper-slide">
+                    <div class="job-preparation-content rounded-3 border border-1  border-purple">
+                      <!-- details -->
+                      <div class="bg-purple rounded-top text-white text-center px-3 py-4">
+                        <div class="fw-bold fs-1">
+                          বি সি এস 
+                        </div>
+                        <div class="fs-3">
+                          প্রশ্ন সমাধান 
+                        </div>
+                        <div class="mt-3 text-purple d-flex justify-content-around fs-3 gap-4">
+                          <div class="bg-white rounded-2 px-4 py-2 flex-fill">
+                            ১৫৫০টি প্রশ্ন 
+                          </div>
+                          <div class="bg-white rounded-2 p-2 flex-fill">
+                            মডেল টেস্ট 
+                          </div>
+                        </div>
+                      </div>
+                      <!-- link -->
+                      <div class="rounded-3 bg-white px-2 py-3">
+                        <a class=" d-flex align-items-center text-purple" href="#">
+                          <span>
+                            শুরু করুন 
+                          </span>
+                          <span class="ms-2">
+                            <img class="icon" src="./images/Arrow-right-purple.svg" alt="">
+                          </span>
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="swiper-slide">
+                    <div class="job-preparation-content rounded-3 border border-1  border-blue-light">
+                      <!-- details -->
+                      <div class="bg-blue-light rounded-top text-white text-center px-3 py-4">
+                        <div class="fw-bold fs-1">
+                          ব্যাংক জবস 
+                        </div>
+                        <div class="fs-3">
+                          প্রশ্ন সমাধান 
+                        </div>
+                        <div class="mt-3 text-blue-light d-flex justify-content-around fs-3 gap-4">
+                          <div class="bg-white rounded-2 px-4 py-2 flex-fill">
+                            ১৫৫০টি প্রশ্ন 
+                          </div>
+                          <div class="bg-white rounded-2 p-2 flex-fill">
+                            মডেল টেস্ট 
+                          </div>
+                        </div>
+                      </div>
+                      <!-- link -->
+                      <div class="rounded-3 bg-white px-2 py-3">
+                        <a class=" d-flex align-items-center text-blue-light" href="#">
+                          <span>
+                            শুরু করুন 
+                          </span>
+                          <span class="ms-2">
+                            <img class="icon" src="./images/Arrow-right-blue-dark.svg" alt="">
+                          </span>
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="swiper-slide">
+                    <div class="job-preparation-content rounded-3 border border-1  border-green-blue">
+                      <!-- details -->
+                      <div class="bg-green-blue rounded-top text-white text-center px-3 py-4">
+                        <div class="fw-bold fs-1">
+                          মিনিস্ট্রি জবস
+                        </div>
+                        <div class="fs-3">
+                          প্রশ্ন সমাধান 
+                        </div>
+                        <div class="mt-3 text-blue-light d-flex justify-content-around fs-3 gap-4">
+                          <div class="bg-white rounded-2 px-4 py-2 flex-fill">
+                            ১৫৫০টি প্রশ্ন 
+                          </div>
+                          <div class="bg-white rounded-2 p-2 flex-fill">
+                            মডেল টেস্ট 
+                          </div>
+                        </div>
+                      </div>
+                      <!-- link -->
+                      <div class="rounded-3 bg-white px-2 py-3">
+                        <a class=" d-flex align-items-center text-green-blue" href="#">
+                          <span>
+                            শুরু করুন 
+                          </span>
+                          <span class="ms-2">
+                            <img class="icon" src="./images/Arrow-right-blue-green.svg" alt="">
+                          </span>
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="swiper-slide">
+                    <div class="job-preparation-content rounded-3 border border-1  border-purple">
+                      <!-- details -->
+                      <div class="bg-purple rounded-top text-white text-center px-3 py-4">
+                        <div class="fw-bold fs-1">
+                          বি সি এস 
+                        </div>
+                        <div class="fs-3">
+                          প্রশ্ন সমাধান 
+                        </div>
+                        <div class="mt-3 text-purple d-flex justify-content-around fs-3 gap-4">
+                          <div class="bg-white rounded-2 px-4 py-2 flex-fill">
+                            ১৫৫০টি প্রশ্ন 
+                          </div>
+                          <div class="bg-white rounded-2 p-2 flex-fill">
+                            মডেল টেস্ট 
+                          </div>
+                        </div>
+                      </div>
+                      <!-- link -->
+                      <div class="rounded-3 bg-white px-2 py-3">
+                        <a class=" d-flex align-items-center text-purple" href="#">
+                          <span>
+                            শুরু করুন 
+                          </span>
+                          <span class="ms-2">
+                            <img class="icon" src="./images/Arrow-right-purple.svg" alt="">
+                          </span>
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="swiper-slide">
+                    <div class="job-preparation-content rounded-3 border border-1  border-blue-light">
+                      <!-- details -->
+                      <div class="bg-blue-light rounded-top text-white text-center px-3 py-4">
+                        <div class="fw-bold fs-1">
+                          ব্যাংক জবস 
+                        </div>
+                        <div class="fs-3">
+                          প্রশ্ন সমাধান 
+                        </div>
+                        <div class="mt-3 text-blue-light d-flex justify-content-around fs-3 gap-4">
+                          <div class="bg-white rounded-2 px-4 py-2 flex-fill">
+                            ১৫৫০টি প্রশ্ন 
+                          </div>
+                          <div class="bg-white rounded-2 p-2 flex-fill">
+                            মডেল টেস্ট 
+                          </div>
+                        </div>
+                      </div>
+                      <!-- link -->
+                      <div class="rounded-3 bg-white px-2 py-3">
+                        <a class=" d-flex align-items-center text-blue-light" href="#">
+                          <span>
+                            শুরু করুন 
+                          </span>
+                          <span class="ms-2">
+                            <img class="icon" src="./images/Arrow-right-blue-dark.svg" alt="">
+                          </span>
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="swiper-slide">
+                    <div class="job-preparation-content rounded-3 border border-1  border-green-blue">
+                      <!-- details -->
+                      <div class="bg-green-blue rounded-top text-white text-center px-3 py-4">
+                        <div class="fw-bold fs-1">
+                          মিনিস্ট্রি জবস
+                        </div>
+                        <div class="fs-3">
+                          প্রশ্ন সমাধান 
+                        </div>
+                        <div class="mt-3 text-blue-light d-flex justify-content-around fs-3 gap-4">
+                          <div class="bg-white rounded-2 px-4 py-2 flex-fill">
+                            ১৫৫০টি প্রশ্ন 
+                          </div>
+                          <div class="bg-white rounded-2 p-2 flex-fill">
+                            মডেল টেস্ট 
+                          </div>
+                        </div>
+                      </div>
+                      <!-- link -->
+                      <div class="rounded-3 bg-white px-2 py-3">
+                        <a class=" d-flex align-items-center text-green-blue" href="#">
+                          <span>
+                            শুরু করুন 
+                          </span>
+                          <span class="ms-2">
+                            <img class="icon" src="./images/Arrow-right-blue-green.svg" alt="">
+                          </span>
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+
               </div>
+          </div>
+          <div class="swiper-button-next jobPreparationSlider-next"></div>
+          <div class="swiper-button-prev jobPreparationSlider-prev"></div>
+        </div>
+
+      </div>
+    </section>
+
+
+    <!-- downlopad app section -->
+    <section id="download-app" class="py-5">
+      <div class="container ">
+        <div class="section-title text-blue-dark">
+          শেখার মাধ্যমে আপনার লক্ষ্য অর্জন করুন স্টাডিপ্রেসের সাথে
+        </div>
+
+        <div class="mt-5 row align-items-center">
+          
+          <div class="col-12 col-lg-5">
+            <img class="w-100" src="./images/app-download.svg" alt="">
+          </div>
+          
+          <div class="col-12 col-lg-7 px-5">
+            <div class="download-title text-blue-dark fw-bold">
+              Download Mobile App
+            </div>
+            <div class="download-subtitle mt-3 text-dark-light-extra ">
+              Start or schedule lessons anytime, anywhere with our Android and iPhone apps.
+            </div>
+            <div class="mt-4 d-flex justify-content-center align-items-center gap-3">
+              <button class="btn icon-btn p-0">
+                <img class="h-100" src="./images/app-store.svg" alt="">
+              </button>
+              <button class="btn icon-btn p-0">
+                <img class="h-100" src="./images/google-play.svg" alt="">
+              </button>
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </section>
 
-              <div class="news bg-white rounded-3 p-2 mx-1">
-                <div class="circle-icon">
-                  <img class="w-100" src="./images/round-purple.svg" alt="">
+
+    <!-- why studypress -->
+    <section id="why-studypress">
+
+      <div class="top-content pt-5 px-2 text-white">
+        <div class="section-title">
+          কেন <span class="fw-bold">Studypress</span> শিক্ষার্থীদের প্রথম পছন্দ?
+        </div>
+        <div class="sub-title mt-3">
+          বিসিএস কিংবা ব্যাংকে চাকরি - টার্গেট যেটাই হোক, সলিউশন এখানেই!
+        </div>
+      </div>
+
+      <div class="container mt-2 py-5">
+        <div class="row justify-content-between align-items-center">
+
+          <div class="col-12 col-lg-5 order-1 order-lg-0 mt-5 mt-lg-0">
+
+            <div class="d-flex flex-column gap-3">
+
+               <div class="content d-flex align-items-center gap-4 rounded-3 bg-green-blue ps-4 pe-5 py-3">
+                <div class="icon">
+                  <img class="h-100" src="./images/chart.svg" alt="">
                 </div>
-                <div class="mt-2">
-                  বাংলাদেশ ব্যাংক 
+                <div class="fs-4 text-content text-white">
+                  আপনার অনুশীলনের পারফরম্যান্স দেখুন যেকোন সময়
+                </div>
+               </div>
+
+               <div class="content d-flex align-items-center gap-4 rounded-3 bg-blue-light ps-4 pe-5 py-3">
+                <div class="icon">
+                  <img class="h-100" src="./images/Clock.svg" alt="">
+                </div>
+                <div class="fs-4 text-content text-white">
+                  নিজের মতো করে যে কোনো সময়ে পড়াযায় 
+                </div>
+               </div>
+
+               <div class="content d-flex align-items-center gap-4 rounded-3 bg-purple ps-4 pe-5  py-3">
+                <div class="icon">
+                  <img class="h-100" src="./images/Dictionary.svg" alt="">
+                </div>
+                <div class="fs-4 text-content text-white">
+                  আপনার অনুশীলনের পারফরম্যান্স দেখুন যেকোন সময়
+                </div>
+               </div>
+
+            </div>
+
+          </div>
+        
+          <div class="col-12 col-lg-6 order-0 order-lg-1">
+            <img class="w-100" src="./images/why-studypress girl.png" alt="">
+          </div>
+        
+        </div>
+      </div>
+
+    </section>
+
+
+    <!-- crash course -->
+    <section id="crash-course" class="py-5 bg-primary">
+      <div class="container padding-reset">
+
+        <div class="section-title text-white">
+          চলে এসেছে নতুন ক্র্যাশ কোর্স
+        </div>
+
+        <div class="mt-2 sub-title text-white">
+          আমাদের ক্র্যাশ কোর্স এর মাধ্যমে নিজেকে প্রস্তুত করুন আর দ্রুত 
+        </div>
+
+        <div class="mt-5 border border-1 border-white rounded-3 p-3">
+          <div class="bg-white rounded p-3">
+
+            <div class="row">
+
+              <div class="col-12 col-lg-4">
+                <div class="crash-course-content rounded-3 border border-1  border-purple">
+                  <!-- details -->
+                  <div class="bg-purple rounded-top text-white text-center px-3 py-4">
+                    <div class="fw-bold fs-1">
+                      বি সি এস 
+                    </div>
+                    <div class="fs-3">
+                      প্রশ্ন সমাধান 
+                    </div>
+                    <div class="mt-3 text-purple d-flex justify-content-around fs-3 gap-4">
+                      <div class="bg-white rounded-2 px-4 py-2 flex-fill">
+                        ১৫৫০টি প্রশ্ন 
+                      </div>
+                      <div class="bg-white rounded-2 p-2 flex-fill">
+                        মডেল টেস্ট 
+                      </div>
+                    </div>
+                  </div>
+
+                  <!-- link -->
+                  <div class="px-2 py-3  d-flex justify-content-between align-items-center">
+                      <div class="px-2 py-1 bg-purple rounded-2 text-white">
+                        ১,৫০০ টাকা 
+                      </div>
+                      <a class="bg-white d-flex align-items-center text-purple" href="#">
+                        <span>
+                          শুরু করুন 
+                        </span>
+                        <span class="ms-2">
+                          <img class="icon" src="./images/Arrow-right-purple.svg" alt="">
+                        </span>
+                      </a>
+                  </div>
+
+                </div>
+              </div>
+
+              <div class="col-12 col-lg-4 mt-3 mt-lg-0">
+                <div class="crash-course-content rounded-3 border border-1  border-blue-light">
+                  <!-- details -->
+                  <div class="bg-blue-light rounded-top text-white text-center px-3 py-4">
+                    <div class="fw-bold fs-1">
+                      ব্যাংক জবস 
+                    </div>
+                    <div class="fs-3">
+                      প্রশ্ন সমাধান 
+                    </div>
+                    <div class="mt-3 text-blue-light d-flex justify-content-around fs-3 gap-4">
+                      <div class="bg-white rounded-2 px-4 py-2 flex-fill">
+                        ১৫৫০টি প্রশ্ন 
+                      </div>
+                      <div class="bg-white rounded-2 p-2 flex-fill">
+                        মডেল টেস্ট 
+                      </div>
+                    </div>
+                  </div>
+                  <!-- link -->
+                  <div class="px-2 py-3  d-flex justify-content-between align-items-center">
+                    <div class="px-2 py-1 bg-blue-light rounded-2 text-white">
+                      ১,৫০০ টাকা 
+                    </div>
+                    <a class="bg-white d-flex align-items-center text-blue-light" href="#">
+                      <span>
+                        শুরু করুন 
+                      </span>
+                      <span class="ms-2">
+                        <img class="icon" src="./images/Arrow-right-blue-dark.svg" alt="">
+                      </span>
+                    </a>
+                  </div>
+                </div>
+              </div>
+
+              <div class="col-12 col-lg-4 mt-3 mt-lg-0">
+                <div class="crash-course-content rounded-3 border border-1  border-green-blue">
+                  <!-- details -->
+                  <div class="bg-green-blue rounded-top text-white text-center px-3 py-4">
+                    <div class="fw-bold fs-1">
+                      মিনিস্ট্রি জবস
+                    </div>
+                    <div class="fs-3">
+                      প্রশ্ন সমাধান 
+                    </div>
+                    <div class="mt-3 text-blue-light d-flex justify-content-around fs-3 gap-4">
+                      <div class="bg-white rounded-2 px-4 py-2 flex-fill">
+                        ১৫৫০টি প্রশ্ন 
+                      </div>
+                      <div class="bg-white rounded-2 p-2 flex-fill">
+                        মডেল টেস্ট 
+                      </div>
+                    </div>
+                  </div>
+                  <!-- link -->
+                  <div class="px-2 py-3  d-flex justify-content-between align-items-center">
+                    <div class="px-2 py-1 bg-green-blue rounded-2 text-white">
+                      ১,৫০০ টাকা 
+                    </div>
+                    <a class="bg-white d-flex align-items-center text-green-blue" href="#">
+                      <span>
+                        শুরু করুন 
+                      </span>
+                      <span class="ms-2">
+                        <img class="icon" src="./images/Arrow-right-blue-green.svg" alt="">
+                      </span>
+                    </a>
+                  </div>
                 </div>
               </div>
 
             </div>
 
+          </div>
+        </div>
+
+        
+
+      </div>
+    </section>
+
+
+    <!-- our blog section -->
+    <section id="our-blog" class="py-5">
+      <div class="container padding-reset">
+
+        <div class="section-title text-blue-dark">
+          পড়ুন আমাদের ব্লগ 
+        </div>
+
+        <div class="position-relative mt-5 py-2 ">
+          <div class="swiper ourBlogSlider">
+              <div class="swiper-wrapper py-3">
+
+                  <div class="swiper-slide">
+                    <div class="position-relative bg-white rounded-3">
+                      <img class="w-100" src="./images/our-blog.png" alt="">
+
+                      <div class="px-2 py-2">
+                        <div class="mt-2 heading text-dark fs-5">
+                          বাংলাদেশ ব্যাংকের  নতুন নিয়ম ...
+                        </div>
+                        <div class="mt-1 small details text-dark-light">
+                          অনুশীলনের প্রতিটি প্রশ্নের মান এবং আপনার দেওয়া উত্তর বিবেচনা করে আপনার প্রস্তুতির মান নির্ধারণ করে যা ড্যাসবোর্ডে আপনার স্কোর দেখাবে.....।
+                        </div>
+                      </div>
+
+                      <div class="mt-3 d-flex justify-content-end pe-3">
+                        <a class="px-3 py-2" href="">
+                          <span class="fs-5">বিস্তারিত </span>
+                          <span class="ms-2">
+                            <img class="icon" src="./images/Arrow-right-black.svg" alt="">
+                          </span>
+                        </a>
+                      </div>
+
+                    </div>
+                  </div>
+
+                  <div class="swiper-slide">
+                    <div class="position-relative bg-white rounded-3">
+                      <img class="w-100" src="./images/our-blog.png" alt="">
+
+                      <div class="px-2 py-2">
+                        <div class="mt-2 heading text-dark fs-5">
+                          বাংলাদেশ ব্যাংকের  নতুন নিয়ম ...
+                        </div>
+                        <div class="mt-1 small details text-dark-light">
+                          অনুশীলনের প্রতিটি প্রশ্নের মান এবং আপনার দেওয়া উত্তর বিবেচনা করে আপনার প্রস্তুতির মান নির্ধারণ করে যা ড্যাসবোর্ডে আপনার স্কোর দেখাবে.....।
+                        </div>
+                      </div>
+
+                      <div class="mt-3 d-flex justify-content-end pe-3">
+                        <a class="px-3 py-2" href="">
+                          <span class="fs-5">বিস্তারিত </span>
+                          <span class="ms-2">
+                            <img class="icon" src="./images/Arrow-right-black.svg" alt="">
+                          </span>
+                        </a>
+                      </div>
+
+                    </div>
+                  </div>
+
+                  <div class="swiper-slide">
+                    <div class="position-relative bg-white rounded-3">
+                      <img class="w-100" src="./images/our-blog.png" alt="">
+
+                      <div class="px-2 py-2">
+                        <div class="mt-2 heading text-dark fs-5">
+                          বাংলাদেশ ব্যাংকের  নতুন নিয়ম ...
+                        </div>
+                        <div class="mt-1 small details text-dark-light">
+                          অনুশীলনের প্রতিটি প্রশ্নের মান এবং আপনার দেওয়া উত্তর বিবেচনা করে আপনার প্রস্তুতির মান নির্ধারণ করে যা ড্যাসবোর্ডে আপনার স্কোর দেখাবে.....।
+                        </div>
+                      </div>
+
+                      <div class="mt-3 d-flex justify-content-end pe-3">
+                        <a class="px-3 py-2" href="">
+                          <span class="fs-5">বিস্তারিত </span>
+                          <span class="ms-2">
+                            <img class="icon" src="./images/Arrow-right-black.svg" alt="">
+                          </span>
+                        </a>
+                      </div>
+
+                    </div>
+                  </div>
+
+                  <div class="swiper-slide">
+                    <div class="position-relative bg-white rounded-3">
+                      <img class="w-100" src="./images/our-blog.png" alt="">
+
+                      <div class="px-2 py-2">
+                        <div class="mt-2 heading text-dark fs-5">
+                          বাংলাদেশ ব্যাংকের  নতুন নিয়ম ...
+                        </div>
+                        <div class="mt-1 small details text-dark-light">
+                          অনুশীলনের প্রতিটি প্রশ্নের মান এবং আপনার দেওয়া উত্তর বিবেচনা করে আপনার প্রস্তুতির মান নির্ধারণ করে যা ড্যাসবোর্ডে আপনার স্কোর দেখাবে.....।
+                        </div>
+                      </div>
+
+                      <div class="mt-3 d-flex justify-content-end pe-3">
+                        <a class="px-3 py-2" href="">
+                          <span class="fs-5">বিস্তারিত </span>
+                          <span class="ms-2">
+                            <img class="icon" src="./images/Arrow-right-black.svg" alt="">
+                          </span>
+                        </a>
+                      </div>
+
+                    </div>
+                  </div>
+
+                  <div class="swiper-slide">
+                    <div class="position-relative bg-white rounded-3">
+                      <img class="w-100" src="./images/our-blog.png" alt="">
+
+                      <div class="px-2 py-2">
+                        <div class="mt-2 heading text-dark fs-5">
+                          বাংলাদেশ ব্যাংকের  নতুন নিয়ম ...
+                        </div>
+                        <div class="mt-1 small details text-dark-light">
+                          অনুশীলনের প্রতিটি প্রশ্নের মান এবং আপনার দেওয়া উত্তর বিবেচনা করে আপনার প্রস্তুতির মান নির্ধারণ করে যা ড্যাসবোর্ডে আপনার স্কোর দেখাবে.....।
+                        </div>
+                      </div>
+
+                      <div class="mt-3 d-flex justify-content-end pe-3">
+                        <a class="px-3 py-2" href="">
+                          <span class="fs-5">বিস্তারিত </span>
+                          <span class="ms-2">
+                            <img class="icon" src="./images/Arrow-right-black.svg" alt="">
+                          </span>
+                        </a>
+                      </div>
+
+                    </div>
+                  </div>
+
+                  <div class="swiper-slide">
+                    <div class="position-relative bg-white rounded-3">
+                      <img class="w-100" src="./images/our-blog.png" alt="">
+
+                      <div class="px-2 py-2">
+                        <div class="mt-2 heading text-dark fs-5">
+                          বাংলাদেশ ব্যাংকের  নতুন নিয়ম ...
+                        </div>
+                        <div class="mt-1 small details text-dark-light">
+                          অনুশীলনের প্রতিটি প্রশ্নের মান এবং আপনার দেওয়া উত্তর বিবেচনা করে আপনার প্রস্তুতির মান নির্ধারণ করে যা ড্যাসবোর্ডে আপনার স্কোর দেখাবে.....।
+                        </div>
+                      </div>
+
+                      <div class="mt-3 d-flex justify-content-end pe-3">
+                        <a class="px-3 py-2" href="">
+                          <span class="fs-5">বিস্তারিত </span>
+                          <span class="ms-2">
+                            <img class="icon" src="./images/Arrow-right-black.svg" alt="">
+                          </span>
+                        </a>
+                      </div>
+
+                    </div>
+                  </div>
+
+
+              </div>
+          </div>
+          <div class="swiper-button-next ourBlogSlider-next"></div>
+          <div class="swiper-button-prev ourBlogSlider-prev"></div>
+      </div>
+
+      </div>
+    </section>
+
+    <!-- word of the day -->
+    <section id="word-of-day" class="py-5">
+      <div class="container">
+        <div class="row justify-content-between">
+          
+          <!-- word of the day -->
+          <div class="col-12 col-lg-5">
+
+            <div class="title text-center">
+                <span>প্রতিদিন নতুন শব্দ শিখেনিন</span>
+                <br>
+                <span>Word of the Day তে </span>
+            </div>
+
+            <!-- word of day content -->
+            <div class="mt-5">
+              <img class="w-100" src="./images/WOD_web.png" alt="">
+            </div>
+            
+          </div>
+          
+          <!-- on this day -->
+          <div class="col-12 col-lg-5">
+
+            <div class="title text-center">
+              <span>জেনেনিন  আজকের দিনে</span>
+                <br>
+              <span>শরণিয় কি হয়েছিল </span>
+            </div>
+
+            <!-- on this  day content -->
+            <div class="mt-5">
+              <div class="position-relative mt-5 py-2 ">
+                <div class="swiper onThisDay px-5">
+                    <div class="swiper-wrapper py-5">
+      
+                        <div class="swiper-slide">
+                          <div class="text-center">
+                            <div class="year">
+                              <span class="fw-bold text-blue-dark">সন :</span>
+                              <span class="ms-3">২০০৬  </span>
+                            </div>  
+                            <div class="mt-3 content ">
+                              ইরাকের সাবেক প্রেসিডেন্ট সাদ্দাম হোসেনকে আল দুজাইল ট্রায়ালে মৃত্যুদণ্ডে দণ্ডিত করা হয়।
+                            </div>                          
+                          </div>
+                        </div>
+      
+                        <div class="swiper-slide">
+                          <div class="text-center">
+                            <div class="year">
+                              <span class="fw-bold text-blue-dark">সন :</span>
+                              <span class="ms-3">২০০৬  </span>
+                            </div>  
+                            <div class="mt-3 content ">
+                              ইরাকের সাবেক প্রেসিডেন্ট সাদ্দাম হোসেনকে আল দুজাইল ট্রায়ালে মৃত্যুদণ্ডে দণ্ডিত করা হয়।
+                            </div>                          
+                          </div>
+                        </div>
+      
+                        <div class="swiper-slide">
+                          <div class="text-center">
+                            <div class="year">
+                              <span class="fw-bold text-blue-dark">সন :</span>
+                              <span class="ms-3">২০০৬  </span>
+                            </div>  
+                            <div class="mt-3 content ">
+                              ইরাকের সাবেক প্রেসিডেন্ট সাদ্দাম হোসেনকে আল দুজাইল ট্রায়ালে মৃত্যুদণ্ডে দণ্ডিত করা হয়।
+                            </div>                          
+                          </div>
+                        </div>
+      
+                        <div class="swiper-slide">
+                          <div class="text-center">
+                            <div class="year">
+                              <span class="fw-bold text-blue-dark">সন :</span>
+                              <span class="ms-3">২০০৬  </span>
+                            </div>  
+                            <div class="mt-3 content ">
+                              ইরাকের সাবেক প্রেসিডেন্ট সাদ্দাম হোসেনকে আল দুজাইল ট্রায়ালে মৃত্যুদণ্ডে দণ্ডিত করা হয়।
+                            </div>                          
+                          </div>
+                        </div>
+      
+                        <div class="swiper-slide">
+                          <div class="text-center">
+                            <div class="year">
+                              <span class="fw-bold text-blue-dark">সন :</span>
+                              <span class="ms-3">২০০৬  </span>
+                            </div>  
+                            <div class="mt-3 content ">
+                              ইরাকের সাবেক প্রেসিডেন্ট সাদ্দাম হোসেনকে আল দুজাইল ট্রায়ালে মৃত্যুদণ্ডে দণ্ডিত করা হয়।
+                            </div>                          
+                          </div>
+                        </div>
+      
+                        <div class="swiper-slide">
+                          <div class="text-center">
+                            <div class="year">
+                              <span class="fw-bold text-blue-dark">সন :</span>
+                              <span class="ms-3">২০০৬  </span>
+                            </div>  
+                            <div class="mt-3 content ">
+                              ইরাকের সাবেক প্রেসিডেন্ট সাদ্দাম হোসেনকে আল দুজাইল ট্রায়ালে মৃত্যুদণ্ডে দণ্ডিত করা হয়।
+                            </div>                          
+                          </div>
+                        </div>
+      
+                        <div class="swiper-slide">
+                          <div class="text-center">
+                            <div class="year">
+                              <span class="fw-bold text-blue-dark">সন :</span>
+                              <span class="ms-3">২০০৬  </span>
+                            </div>  
+                            <div class="mt-3 content ">
+                              ইরাকের সাবেক প্রেসিডেন্ট সাদ্দাম হোসেনকে আল দুজাইল ট্রায়ালে মৃত্যুদণ্ডে দণ্ডিত করা হয়।
+                            </div>                          
+                          </div>
+                        </div>
+
+      
+                    </div>
+                </div>
+                <div class="swiper-button-next onThisDay-next"></div>
+                <div class="swiper-button-prev onThisDay-prev"></div>
+              </div>
             </div>
 
           </div>
         </div>
+      </div>
+    </section>
+
+
+    <!-- footer -->
+    <section id="footer" class="py-5 text-dark">
+      <div class="container">
+        <div class="row justify-content-evenly">
+
+          <!-- company detail -->
+          <div class="col-12 col-lg-6 col-xl-4">
+            <div class="brand-logo">
+              <img class="w-100" src="./images/Logo-main-small-version.svg" alt="">
+            </div>
+
+            <div class="company-details mt-5">
+
+              <!-- phone -->
+              <div class="mt-3 d-flex align-items-center">
+                <span class="company-details-icon">
+                  <img class="w-100" src="./images/footer-phone.svg" alt="">
+                </span>
+                <span class="ms-3">
+                  00 00 00
+                </span>
+              </div>
+
+              <!-- email -->
+              <div class="mt-3 d-flex align-items-center">
+                <span class="company-details-icon">
+                  <img class="w-100" src="./images/footer _mail_.svg" alt="">
+                </span>
+                <span class="ms-3">
+                  info@studypress.com
+                </span>
+              </div>
+
+              <!-- website -->
+              <div class="mt-3 d-flex align-items-center">
+                <span class="company-details-icon">
+                  <img class="w-100" src="./images/footer _globe_.svg" alt="">
+                </span>
+                <span class="ms-3">
+                  www.studypress.com
+                </span>
+              </div>
+
+              <!-- location -->
+              <div class="mt-3 d-flex align-items-center">
+                <span class="company-details-icon">
+                  <img class="w-100" src="./images/footer-location.svg" alt="">
+                </span>
+                <span class="ms-3">
+                  House: #00, Road:#00, Sector : 00 Uttara- Dhaka-1230 
+                </span>
+              </div>
+
+            </div>
+
+          </div>
+
+          <!-- nav link -->
+          <div class="mt-4 mt-xl-0 col-12 col-lg-6 col-xl-4 pt-5">
+            <div class="content-title">
+              প্রয়োজনীয় লিঙ্ক 
+            </div>
+
+            <div class="link">
+                <div class="mt-2">
+                  <a class="active" href="#">Home </a>
+                </div>
+                <div class="mt-2">
+                  <a href="#">About </a>
+                </div>
+                <div class="mt-2">
+                  <a href="#">Blog </a>
+                </div>
+                <div class="mt-2">
+                  <a href="#">News </a>
+                </div>
+                <div class="mt-2">
+                  <a href="#">Contacct </a>
+                </div>
+            </div>
+          </div>
+
+          <!-- social and terms cnd -->
+          <div class="mt-4 mt-xl-0 col-12 col-lg-6 col-xl-4 pt-5">
+            <div class="content-title text-center">
+              আমাদের সম্পর্কে আর জানতে 
+            </div>
+
+            <!-- social link -->
+            <div class="mt-2 d-flex justify-content-center gap-2 py-1">
+
+              <!-- facebook -->
+                <a class="social-link" href="#">
+                  <img class="w-100" src="./images/facebook.svg" alt="">
+                </a>
+
+              <!-- facebook -->
+                <a class="social-link" href="#">
+                  <img class="w-100" src="./images/Linkedin_.svg" alt="">
+                </a>
 
+              <!-- facebook -->
+                <a class="social-link" href="#">
+                  <img class="w-100" src="./images/instagram.svg" alt="">
+                </a>
+
+              <!-- facebook -->
+                <a class="social-link" href="#">
+                  <img class="w-100" src="./images/youtube.svg" alt="">
+                </a>
+
+            </div>
+
+            <!-- policy link -->
+            <div class="mt-3 policy-link d-flex justify-content-center gap-2">
+              <a href="#">Terms & Conditions  |</a>
+              <a href="#">Refund Policy   |</a>
+              <a href="#">Privacy Policy</a>
+            </div>
+
+            <!-- app download link -->
+            <div class="app-download-link-container mt-3 d-flex justify-content-center gap-3">
+              <!-- app store -->
+              <a class="app-download-link" href="#">
+                <img class="h-100" src="./images/app-store.svg" alt="">
+              </a>
+              <!-- google play -->
+              <a class="app-download-link" href="#">
+                <img class="h-100" src="./images/google-play.svg" alt="">
+              </a>
+            </div>
+
+          </div>
+
+        </div>
       </div>
     </section>
 
 
+
+
+
+
     <!-- bootstrap js -->
     <script src="./js/bootstrap.bundle.min.js"></script>
-
     
     <!-- swiper carosuel -->
     <script src="./js/swiper-bundle.min.js"></script>

js/app.js

@@ -1,7 +1,10 @@
 // sticky navbar
 window.addEventListener('scroll', function(){
     var header = document.querySelector('#navbar');
-    header.classList.toggle("sticky", window.scrollY > 100);
+
+    if(!header.classList.contains('show')) {
+        header.classList.toggle("sticky", window.scrollY > 200);
+    }
   })
 
 
@@ -10,12 +13,76 @@ const navbar = document.querySelector('.navbar');
 
 const mobileToogleBtn = document.querySelector('.mobile-toggle-btn')
 
-console.log(mobileToogleBtn)
-
 if(navbar && mobileToogleBtn) {
     mobileToogleBtn.addEventListener('click', () => {
         navbar.classList.toggle('show')
     })
 }
 
-// mobile menu open
+// mobile menu open
+
+
+
+// carousel
+          // job preparation carousel
+          var jobPreparationSlider = new Swiper('.jobPreparationSlider', {
+            loop: true,
+            slidesPerView: 3,
+            spaceBetween: 24,
+            loopedSlides: 1,
+            breakpoints: { 
+              0: { 
+                slidesPerView: 1,
+    
+              },
+              576: { 
+                slidesPerView: 2,
+              },
+              993: { 
+                slidesPerView: 3,
+    
+              }
+            },
+            navigation: {
+              nextEl: ".jobPreparationSlider-next",
+              prevEl: ".jobPreparationSlider-prev",
+            },
+          });
+
+          // our blog carousel
+          var ourBlogSlider = new Swiper('.ourBlogSlider', {
+            loop: true,
+            slidesPerView: 3,
+            spaceBetween: 24,
+            loopedSlides: 1,
+            breakpoints: { 
+              0: { 
+                slidesPerView: 1,
+    
+              },
+              576: { 
+                slidesPerView: 2,
+              },
+              993: { 
+                slidesPerView: 4,
+    
+              }
+            },
+            navigation: {
+              nextEl: ".ourBlogSlider-next",
+              prevEl: ".ourBlogSlider-prev",
+            },
+          });
+
+          // on this day carousel
+          var onThisDay = new Swiper('.onThisDay', {
+            loop: true,
+            slidesPerView: 1,
+            spaceBetween: 40,
+            loopedSlides: 1,
+            navigation: {
+              nextEl: ".onThisDay-next",
+              prevEl: ".onThisDay-prev",
+            },
+          });
+// carousel end