ShofiqulShuvo
/
studypress


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- google fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&family=Noto+Serif+Bengali:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">


    <!-- swiper carosuel -->
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">

    <!-- bootstrap css -->
    <link rel="stylesheet" href="./css/bootstrap.min.css">

    <!-- custom css -->
    <link rel="stylesheet" href="./css/style.css">

    <title>Home</title>
</head>
<body>

    <!-- 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">

        <!-- logo & mobile open close btn -->
        <div class="logo-mobile-btn d-flex justify-content-between align-items-center">
          <a class="logo">
            <img class="h-100" src="./images/Logo-main.svg" alt="">
          </a>

          <!-- mobile menu toggle btn -->
          <button class="mobile-toggle-btn btn d-block d-lg-none">
            <img class="open h-100" src="./images/bars-solid.svg" alt="">
            <img class="close h-100" src="./images/times-solid.svg" alt="">
          </button>

        </div>

        <!-- main nav link -->
        <div class="main-link mt-5 py-3 py-lg-0 mt-lg-0 d-lg-flex flex-column flex-lg-row justify-content-between align-items-center text-center">
          <div class="mt-4 mt-lg-0 w-100">
            <a class=" py-2 my-md-0 mx-0 mx-lg-1 px-md-1 px-lg-2 active" href="">Home</a>
          </div>
          <div class="mt-4 mt-lg-0">
            <a class="py-2 my-md-0 mx-0 mx-lg-1 px-md-1 px-lg-2 " href="">About</a>
          </div>
          <div class="mt-4 mt-lg-0">
            <a class="py-2 my-md-0 mx-0 mx-lg-1 px-md-1 px-lg-2 " href="">Blog</a>
          </div>
          <div class="mt-4 mt-lg-0">
            <a class="py-2 my-md-0 mx-0 mx-lg-1 px-md-1 px-lg-2 " href="">News</a>
          </div>
          <div class="mt-4 mt-lg-0">
            <a class="py-2 my-md-0 mx-0 mx-lg-1 px-md-1 px-lg-2 " href="">Contact</a>
          </div>
        </div>

        <!-- login register -->
        <div class="login-register d-lg-flex flex-row justify-content-center align-items-center bg-primary text-white rounded-1 mt-4 mt-lg-0 px-3 py-2 fs-5 text-center">
          <span>
            <a href="#">লগইন</a>
          </span>
          <span class="mx-1">/</span>
          <span>
            <a href="#">রেজিস্টার</a>
          </span>
        </div>

      </div>
    </section>
    <!-- navbar end -->


    <!-- hero section -->
    <section id="hero" class="py-5">
      <div class="container mt-5 py-5 px-1">


        <div class="upper-part row justify-content-between align-items-center h-100 mt-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">

            <!-- title -->
            <div class="display-5 fw-bold text-primary">
              পরিবর্তনশীল চাকরির বাজারের জন্য 
              নিজেকে প্রস্তুত করুন
            </div>

            <!-- subtitle -->
            <div class="text-dark fs-4 mt-3">
              <span class="text-dark fw-bolder">Studypress</span> এর <span class="text-dark fw-bolder">AI</span> ব্যবহার করে সহজতম উপায়ে আপনার প্রস্তুতি নিন।
            </div>

            <!-- link -->
            <a class="btn gradient-btn mt-3 mb-5 py-3 px-5 border-0" href="#">
              আমাদের সম্পর্কে আরও জানুন
            </a>

          </div>

          <div class="col-12 col-lg-6 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="item h-100 rounded-2 p-3">
                <div class="icon">
                  <img class="h-100" src="./images/chart.svg" alt="">
                </div>
                <div class="fs-4 text-white mt-3">
                  পারফর্মেন্স চার্ট 
                </div>
                <p class="fs-5 text-white-light mt-2">
                  আপনার অনুশীলনের পারফরম্যান্স দেখুন যেকোন সময়
                </p>
              </div>
            </div>

            <div class="  col-12 col-md-6 col-lg-3 p-0  border-end  border-light">
              <div class="item h-100 rounded-2 p-3">
                <div class="icon">
                  <img class="h-100" src="./images/Clock.svg" alt="">
                </div>
                <div class="fs-4 text-white mt-3">
                  যখন ইচ্ছে তখনি পড়া  
                </div>
                <p class="fs-5 text-white-light mt-2">
                  নিজের মতো করে যে কোনো সময়ে পড়াযায়
                </p>
              </div>
            </div>

            <div class="  col-12 col-md-6 col-lg-3 p-0  border-end  border-light">
              <div class="item h-100 rounded-2 p-3">
                <div class="icon">
                  <img class="h-100" src="./images/Dictionary.svg" alt="">
                </div>
                <div class="fs-4 text-white mt-3">
                  Vocabulary অ্যাপ 
                </div>
                <p class="fs-5 text-white-light mt-2">
                  Vocabulary অ্যাপ ব্যবহার করে প্রয়োজনীয়  সকল শব্দ শেখাযায়
                </p>
              </div>
            </div>

            <div class="  col-12 col-md-6 col-lg-3 p-0">
              <div class="item h-100 rounded-2 p-3">
                <div class="icon">
                  <img class="h-100" src="./images/mobile-in-hand.svg" alt="">
                </div>
                <div class="fs-4 text-white mt-3">
                  মোবাইলে অ্যাপ্লিকেশান  
                </div>
                <p class="fs-5 text-white-light mt-2">
                  মোবাইলে অ্যাপ্লিকেশানের মাধ্যমে প্রতিনিয়ত যেকোনো জাইগায় পড়া এবং শেখা 
                </p>
              </div>
            </div>

        </div>

      </div>
    </section>
    <!-- hero section end -->


    <!-- section upcoming -->
    <section id="upcoming" >
      <div class="container py-5">

        <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=" my-2 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">

              <div class="fs-3 text-center">
                Bangladesh Bank
              </div>

              <!-- exam date -->
              <div class="mt-3 d-flex justify-content-around align-items-end">

                <!-- 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">
                  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>

          </div>
          

          <!-- job news -->
          <div class="job-news col-12 col-md-6 pt-3 pb-4 px-5">
            
            <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="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 class="mt-2">
                  বাংলাদেশ ব্যাংক 
                </div>
              </div>

              <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="">
                </div>
                <div class="mt-2">
                  বাংলাদেশ ব্যাংক 
                </div>
              </div>

            </div>

            </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>

    <!-- custom js -->
    <script src="./js/app.js"></script>
</body>
</html>