visit this link

Program Code:- app.py: from flask import Flask, render_template app= Flask(__name__) @app.route("/") def home(): return render_template("home.html") @app.route("/products") def products(): return render_template("products.html") @app.route("/product1") def product1(): return render_template("product1.html") @app.route("/product2") def product2(): return render_template("product2.html") @app.route("/product3") def product3(): return render_template("product3.html") @app.route("/product4") def product4(): return render_template("product4.html") @app.route("/product5") def product5(): return render_template("product5.html") @app.route("/product6") def product6(): return render_template("product6.html") @app.route("/product7") def product7(): return render_template("product7.html") @app.route("/product8") def product8(): return render_template("product8.html") @app.route("/product9") def product9(): return render_template("product9.html") @app.route("/product10") def product10(): return render_template("product10.html") @app.route("/payment") def payment(): return render_template("payment.html") if __name__ =='__main__': app.run(debug=True) Home.html

  Ecommerce Website

BOOKSHOP

Bookshop Slider

Gallery

Product 1
THE 80/20 PRINCIPAL

$10.00

Product 2
CONTINUOUS DISCOVERY HABITS

$15.00

Product 3
SPRINT

$20.00

View More

About us

Reading a books is a powerful habit that benefits both your mind and soul. It nurtures lifelong learning, fosters empathy, and offers an effective way to unwind. Whether you need for personal growth, entertainment, or relaxation, making books a part of your routine is an investment in yourself.

Order Now

Share some details here.This is flexible section where you can share anything you want.

Free Shipping

Share some details here.This is flexible section where you can share anything you want.

More Freshness

Share some details here. This is flexible section where you can share anything you want.

Safe Payment

Share some details here. This is flexible section where you can share anything you want.

Customer Reviews

Alice

"Quick delivery, and the quality exceeded expectations!"

★★★★☆

David

"Reliable and professional service. Will return!"

★★★★★

Sophia

"Affordable pricing and great support."

★★★★☆

© 2024 Bookshop. All Rights Reversed.

Product 1:- HOOKED

HOOKED

Hooked

$35.00

Hooked: Hooked is a practical guide for entrepreneurs, product designers, and marketers looking to understand how to build products that capture users' attention and foster long-term engagement. Nir Eyal introduces the Hook Model, a four-step process that companies use to create habit-forming product. The book provides real-world examples from companies like Facebook, Instagram, and Pinterest, explaining how these products leverage psychology to become an integral part of users lives. Eyal also discusses the ethical responsibilities of creating habit-forming products and how they can be used for good.

Buy Now

Free Delivery

 

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <meta name="viewpoint" content="width=device-width, initial-scale=1, shrink-to-fit">
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <title>HOOKED</title>
</head>
<style>
  body {
  background-color: #95B9C7;
  }
  #carouselExampleControls {
  width: 600px;
  height: 400px;
  margin: auto;
  }
  .carousel-item {
  width: 100%;
  height: 100%;
  }
  .carousel-inner img {
  object-fit: cover;
  height: 100%;
  width: 100%;
  }
  @media (max-width:1068px) {
  #carouselExampleControls {
  height: 300px;
  }
  }
  h2 {
  font-family: courier New;
  }
  h5 {
  font-family: Georgia;
  }
p {
  font-family: sans-serif;
  }
</style>
<body>
<div class="container my-5">
  <h2 class="text-center mb-4">HOOKED</h2>
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrrQtoruKxks1VGTLw8DMtcU2ZcF-ImkZA53L-eZY5VewELZgI8O-Y0KqfTnCMAcaZbU9LyFclGpYtTxLOi686OFMVhcuHvr_eKSiejoaCaLJDW-fYfJCzCvxiIIXtIoylZeImffwbZmP4IW8OxXuqCHYNNfsMRPMFRLNtonOUwNXBAtXz0WKg-h6V-8zj/s1920/good-to-great-framework-infographic.jpg" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinWseMC78tCRcce4eBnpLeqYxYDAeiCtRxdW_pV3QcMlsDPC5jECZvpdDflJBucGCGJE6BbS6m1fMGspRyjWy3ZGzrJxJ6mnMQoK8Nqe34i3OUvhQb4nAF3TrKkOAvxGCDk9yf2V7aj0EXvrrjS2qJ84BC_giW4orjPKM7dEbHJB7g9UKzTPyMjr30gCPZ/s1280/hooked-by-nir-eyal-book-summary.jpg" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYP-W6b3r1CVx-xBEOFfNFS-YP44BcxLArn1q7nqZVaXelBFypKlSZItpTKWvoy88_-3_Z_EDCX5nAW4TbVcA3uVuly6cg_EZuM57EGLUannasbFxcpGPhtibAV9gggj4sGyAqbbw2jz6IJYDJ9PmKOwdArg14JHwlUQ_0ctKlmIP5doOP-veWo99Pk3vx/s800/good-to-great-book-summary.jpg" alt="Third slide">
    </div>
  </div>
</div>
</div>
<div class="grid gap">
  <h2 class="text-center">Hooked</h2>
  <p class="lead text-center">$35.00</p>
  <p>Hooked: Hooked is a practical guide for entrepreneurs, product designers, and marketers looking to understand how to build products that capture users' attention and foster long-term engagement. Nir Eyal introduces the Hook Model, a four-step process that companies use to create habit-forming product. The book provides real-world examples from companies like Facebook, Instagram, and Pinterest, explaining how these products leverage psychology to become an integral part of users lives. Eyal also discusses the ethical responsibilities of creating habit-forming products and how they can be used for good.</p>
  <button class="btn btn-success">Add to cart</button>
  <a href="{{ url_for('payment') }}" class="btn btn-success">Buy Now</a>
  <p>Free Delivery</p>
</div>
<!-- Bootstrap JS and dependencies -->
<script src="https://stackpath.bootstrapcdn.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Product 2:- SPRINT

SPRINT

Sprint

$20.00

SPRINT: Sprint is a step-by-step guide to a unique five-day process designed to help teams solve critical business challenges and rapidly test new ideas. Developed at Google Ventures, the Sprint method combines elements of design thinking, business strategy, and innovation to deliver quick and actionable results. The book is filled with real-world case studies from companies like Slack, Blue Bottle Coffee, and Flatiron Health, showing how sprints can lead to breakthroughs. Sprint is perfect for startups, product managers, designers, and anyone looking to quickly validate ideas, saving time and reducing risk.

Buy Now

Free Delivery

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <meta name="viewpoint" content="width=device-width, initial-scale=1 shrink-to-fit=0">
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <title>SPRINT</title>
</head>
<style>
  body {
  background-color: #95B9C7;
  }
  #carouselExampleControls {
  width: 600px;
  height: 400px;
  margin: auto;
  }
  .carousel-item {
  width: 100%;
  height: 100%;
  }
  .carousel-inner img {
  object-fit: cover;
  height: 100%;
  width: 100%;
  }
  @media (max-width:1068px) {
  #carouselExampleSlideOnly {
  height: 300px;
  }
  }
  h2 {
  font-family:courier new;
  }
  h5 {
  font-family: Georgia;
  }
  p {
  font-family: sans-serif;
  }
</style>
<body>
<div class="container my-5">
  <h2 class="text-center mb-4">SPRINT</h2>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaMwAKouhlRFF3M-EYI8SpBhGWcpDYovlE1Fk8yJRelaeqrtzPryz8dEen22gK2ccR-zco5Qc5epbpvrJFKK997Hf9CApUS5D8NhiYv81kBhJJRdV7u0OXXtHAz5CHRsuObVapObyKWh911vJS1H6rhBt0Xvrwxb9YIYbOxt52AzYNpBS3gpua9msFHL71/s1200/1_RVsMU9rTdfcOIZjHUkeL2w.png" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5qLpRiOiyG0lrpNrEjOXsjrMa0liK4NS3IcOV86IpQaccMSvUNk_2ypk2z2RuGoJeQYJ3w84_uDb98j07VCuflDox5_MeACTmykm3fQOUa3pBhO0EtEbdeZ69uqwxWTLPWICVzZCW33Vzq_Bah5_Tlma4uwcHGUJ1sSRXaS8CwArHMGY33_ALvQQ28mTt/s1280/sprint-by-jake-knapp-book-summary.jpg" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2ttzBTh2FLIIFHrQSe_sWlqQ0WVF2MnpD1tYqAzfXI821gEg-KtyTkJsF1_C_YwyGflt2q7yakBB8OY8LBQ8Ul0bJOGCKHT8_9t2GV-ZUlkGeiAdqgniPQBzVzxrnXsZGQolM-qcM37znrl9j0KJd89woppedO3qfQ2KQYRUz2swMxVbDvkEWPEb1qEct/s642/Sprint_book-overview.webp" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</div>
<div class="grid gap-4">
  <h2 class="text-center">Sprint</h2>
  <p class="lead text-center">$20.00</p>
  <p>SPRINT: Sprint is a step-by-step guide to a unique five-day process designed to help teams solve critical business challenges and rapidly test new ideas. Developed at Google Ventures, the Sprint method combines elements of design thinking, business strategy, and innovation to deliver quick and actionable results. The book is filled with real-world case studies from companies like Slack, Blue Bottle Coffee, and Flatiron Health, showing how sprints can lead to breakthroughs. Sprint is perfect for startups, product managers, designers, and anyone looking to quickly validate ideas, saving time and reducing risk.</p>
   <button class="btn btn-primary">Add to Cart</button>
  <a href="{{ url_for('payment') }}" class="btn btn-primary">Buy Now</a>
  <p>Free Delivery</p>
</div>
<!-- Bootstrap JS and dependencies -->
<script src="https://stackpath.bootstrapcdn.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core/@2.5.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Product 3:- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewpoint" content="width=device-width, initial-scale=1 shrink-to-fit=0">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <title>THE 80/20 PRINCIPLE</title>
</head>
<style>
    body {
    background-color: #95B9C7;
    }
    #carouselExampleControls {
    width: 600px;
    height: 400px;
    margin: auto;
    }
    .carousel-item {
    width: 100%;
    height: 100%;
    }
    .carousel-inner img {
    object-fit: cover;
    height: 100%;
    width: 100%;
    }
    @media (max-width:1068) {
    #carouselExampleControls {
    height: 300px;
    }
    }
    h2 {
    font-family: courier new;
    }
    h5 {
    font-family: Georgia;
    }
    p {
    font-family: sans-serif;
    }
</style>
<body>
<div class="container my-5">
    <h2 class="text-center mb-4">The 80/20 Principal</h2>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoV8gXW5HiloeOKW7nJAJb5HSzHP7-Ug5IcPyqX3sTvcOolR3VSeNmDv4ummXoL6KeGu2c8VmrDSwkx-u64neX5ob4DTjyb0yoc3jYZ2yo9AbT3uIAIWrNrogCYX_fCVlZkFKK-fvmUpB5bQ7LUTFeFAEoMj9NwvO0FwtQqxdTNcdcFcbqtfL6n22nk8Fb/s310/images%20%2816%29.jpeg" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM6axMf4NXp9hJU4lDCWdYyJ1gSRmfSDT8thKtOSDFiMGMJvkQmemf4U6zvPvCfsyA1iybbG3KpVAmMJ6j_sRQ4UI3xy6rT9myA1Eit1tbrygnLV5llw7lhO9lJLfZfw2DbL_7zwZBLy-wFgSOXchDaUuSEhz1UJ39XftzCAw0EUw3cPkje1L0hEBBpNGP/s1280/maxresdefault.jpg" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1QrFAJU0Kv7_QjqBjbO9V-fMF-xkUel3szwlw2cukqBc6mC7q10sm29IMN75fBINlZpx99Qs0rITPvC341YhOl1d97y1f-u6teWrpeUTjs3NlsKko3Khblt4iays0-D-qlZGXftjLRdy1Q_7Ef8R112UXeP3Uw_Zy2vZ6y5DG8Y48om6ekOix9oyITO_3/s1157/The-80-20-Principle_Applying-the-pareto-principle.webp" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</div>
<div class="grid gap-4">
    <h2 class="text-center">The 80/20 Principal</h2>
    <p class="lead text-center">$10.00</p>
    <p>The 80/20 Principle by Ricard koch builds on the concept that 80% of results come from just 20% of efforts and extends it to various areas of life, including making money, improving business efficiency, and achieving personal success. Koch argues that by focusing on the vital 20% individuals and companies can achieve disproportionate success with less effort.</p>
    <button class="btn btn-primary">Add to Cart</button>
    <a href="{{ url_for('payment') }}" class="btn btn-primary">Buy Now</a>
    <p>Free Delivery</p>
</div>
<!-- Bootstrap JS and dependencies -->
<script src="https://stackpath.bootstrapcdn.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core/@2.5.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

THE 80/20 PRINCIPLE

The 80/20 Principal

The 80/20 Principal

$10.00

The 80/20 Principle by Ricard koch builds on the concept that 80% of results come from just 20% of efforts and extends it to various areas of life, including making money, improving business efficiency, and achieving personal success. Koch argues that by focusing on the vital 20% individuals and companies can achieve. disproportionate success with less effort.

Buy Now

Free Delivery

Product 4:- 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewpoint" content="width=device-width, initial-scale=1, shrink-to-fit=0">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <title>DO IT TODAY</title>
</head>
<style>
    body {
    background-color:#95B9C7;
    }
    #CarouselExampleSlidesOnly {
    width: 600px;
    height: 400px;
    margin : auto;
    }
    carousel-item {
    width: 100%;
    height: 100%;
    }
    carousel-inner img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    }
    @media (max-width: 1068px) {
    #CarouselExampleSlidesOnly {
    height: 300px;
    }
    h2 {
    font-family: courier New;
    }
    h5 {
    font-family: Georgia;
    }
    p {
    font-family: sans-serif;
    }
</style>
<body>
<div class="container my-5">
    <h2 class="text-center mb-0">DO IT TODAY BOOK REVIEW</h2>
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOl14Im75HMwWTpzfEcKHkuuMi55cdy-pXt4X5hp6-AGjcTrdEKwohBtIK34mGtWwQ_Weq5YzRnS_ZM5LXG4dlYDfl-vgJygu8FHbVrAwOWbdgEafXHSfd0ueNr0eNBHIuUaURGbQR2y5cVKop-_0tGpZd1wu07SPlKIA685BjZGXuR_LWax5fPbIjFFHQ/s512/xzjev_512.webp" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKCTlb7FXdwiIj2-Zvfglf8L0wEHYsNX2NDXi5fEEvitzR4V4_N4H2kIBzDgNFHk4r-znp1cdTCXcYTvuGHJsnM7Taokw4zneUYjnb_YNr29wtk8y9IMqJ16GGSxTwNX_SooIRBI5z10wBHuc9XAJIq1qc1TANmECzAOLjZuf2fcaN5M0RA3nVYbk1VfdH/s1280/1684598494687.png" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHRe4X7GhVRXWUJr9d8oiE5NYZfhyWTh_UdZC-OwIgcZEC4lRziFdnOYKK_XfQDRBndrTL3-N2QbHiPkcyAvZH3lQb5uLk2vzn1MikkgutFrsk69S0m9ERLVZYMadeoVvN_eLnTXAFydqxrOz2lp-e1zi-akqQ2WNTspgPy52qy3-QedOfvMRinVNIqFh9/s1300/book-review-do-it-today.png" alt="Third slide">
    </div>
  </div>
    </div>
</div>
<div class="grid gap-4">
    <h5 class="text-center">Do It Today</h5>
    <p class="lead text-center">$45.00</p>
    <p>Do It Today: Overcame Procrastination, improve Productivity, and Achieve More Meaningful Things" by Darius Foroux offers pratical advice on breaking the habit of procastination. The book emphasizes the importance of immediate action, explaning how fear, distractions, and perfectionism often hold people back. Foroux shares strategies like effective time management, goal setting, and prioritization to help readers build productive habits. By focusing on small, actionable steps, the book aims to reduce stress and encourage meaningful progress in everyday life.</p>
    <button class="btn btn-primary">Add to Cart</button>
    <a href="{{ url_for('payment') }}" class="btn btn-primary">Buy Now</a>
    <p>Free Delivery</p>
</div>
<!-- Bootstrap JS and dependencies -->
<script src="https://stackpath.bootstrapcdn.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popperjs/core/@3.5.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

DO IT TODAY

DO IT TODAY BOOK REVIEW

Do It Today

$45.00

Do It Today: Overcame Procrastination, improve Productivity, and Achieve More Meaningful Things" by Darius Foroux offers pratical advice on breaking the habit of procastination. The book emphasizes the importance of immediate action, explaning how fear, distractions, and perfectionism often hold people back. Foroux shares strategies like effective time management, goal setting, and prioritization to help readers build productive habits. By focusing on small, actionable steps, the book aims to reduce stress and encourage meaningful progress in everyday life.

Buy Now

Free Delivery

Product6:-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <meta name="viewpoint" content="width=device-width, initial-scale=1, shrink-to-fit=0">
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <title>ATOMIC HABITS</title>
</head>
<style>
  body {
  background-color: #95B9C7;
  }
  #CarouselExampleSlidesOnly {
  height: 400px;
  width: 600px;
  margin: auto;
  }
  .carousel-item {
  width: 100%;
  height: 100%;
  }
  carousel-inner img {
  object-fit: cover;
  height: 100%;
  width: 100%;
  }
  @media (max-width:1068px) {
  #CarouselExampleSlidesOnly {
  height: 300px;
  }
  h2 {
  font-family: Courier New;
  }
  h5 {
  font-family: Georgia;
  }
  p {
  font-family: sans-serif;
  }
</style>
<body>
<div class="container my-5">
  <h2 class="text-center mb-4">ATOMIC HABITS BOOK REVIEW</h2>
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg11I-KAiXLYTnhz_Wc_KU-1D4lySZ0M1D4udWEDaRWe4-mPp9vrHO3ZgMAlhkTfFrOtmcdjJzol8o9sJPhyCZi6Z1hEKlTL72tNuZn2M6U2biw715hffJJGKSsiFkSRe0giEeWoU-y_K87Exv2_FI6tcfBUyC7qSmDEHwUyUWUtKCk1BJ7xmtfk0IErv6A/s850/atomic-habits-original-imah3ucqaqvavnee.webp" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_Lt1z_M-QbgjUICRH_-khIhqJ_FHkxUbxS9RbXWZfL2kfY4MUzF42mLUdR7sVRQzZWX0XbC53IgTi5hRLOeeqedou_KdHBvc_2rC1Bukfp-Wwk1MqAIz9Lg8Zfm0WXqsyeLz3hJmHcBZja7C0dc0CHVjSrV4uGOGrHQSxTeA4HDoCpfytY9hQlIkyU_ZV/s1406/Atomic-Habits-Book-summary.webp" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbBDeQh_kqOxEsoz1DwZOUhaeqoNWTZVlP3Kb5n4Lg0hdKX87VyXT3ZHGl-wkc-30-JG1wK6lwq3kmHLBGxI5eDspZiwg9IMXeYMkbq3YoNrqimhPQ3Id2XZo-Pby776MIlTFfo-niaO5fJHaq3-6GZsu0aGi6Icq98ilrDUF-Q-5Erh3Np4Fai14o9o5b/s940/PX-Blog-Images-86.png" alt="Third slide">
    </div>
  </div>
  </div>
</div>
<div class="grid gap-4">
  <h5 class="text-center">Atomic Habits</h5>
  <p class="lead text-center">$50.00</p>
  <p>"Atomic Habits": An Easy & Proven Way to Build Good Habits & Break Bad Ones" by James Clear is a best-selling self-improvement book that provides a comprehensive framework for forming positive habits, eliminating negative ones, and understanding how small, consistent changes can lead to remarkable long-term results.Clear emphasizes the power of tiny, incremental improvements--or "atomic habits" --and how they compound over time to create significant outcomes.</p>
  <button class="btn btn-primary">Add to cart</button>
  <a href="{{ url_for('payment') }}" class="btn btn-primary">Buy Now</a>
  <p>Free Delivery</p>
</div>
<!-- Bootstrap JS and dependencies -->
<script src="https://stackpath.bootstrapcdn.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popper/npm/popperjs/core/@3.5.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Product 7:-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <meta name="viewpoint" content="width=device-width, initial-scale=1, shrink-to-fit=0">
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <title>ATOMIC HABITS</title>
</head>
<style>
  body {
  background-color: #95B9C7;
  }
  #CarouselExampleSlidesOnly {
  height: 400px;
  width: 600px;
  margin: auto;
  }
  .carousel-item {
  width: 100%;
  height: 100%;
  }
  carousel-inner img {
  object-fit: cover;
  height: 100%;
  width: 100%;
  }
  @media (max-width:1068px) {
  #CarouselExampleSlidesOnly {
  height: 300px;
  }
  h2 {
  font-family: Courier New;
  }
  h5 {
  font-family: Georgia;
  }
  p {
  font-family: sans-serif;
  }
</style>
<body>
<div class="container my-5">
  <h2 class="text-center mb-4">ATOMIC HABITS BOOK REVIEW</h2>
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg11I-KAiXLYTnhz_Wc_KU-1D4lySZ0M1D4udWEDaRWe4-mPp9vrHO3ZgMAlhkTfFrOtmcdjJzol8o9sJPhyCZi6Z1hEKlTL72tNuZn2M6U2biw715hffJJGKSsiFkSRe0giEeWoU-y_K87Exv2_FI6tcfBUyC7qSmDEHwUyUWUtKCk1BJ7xmtfk0IErv6A/s850/atomic-habits-original-imah3ucqaqvavnee.webp" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_Lt1z_M-QbgjUICRH_-khIhqJ_FHkxUbxS9RbXWZfL2kfY4MUzF42mLUdR7sVRQzZWX0XbC53IgTi5hRLOeeqedou_KdHBvc_2rC1Bukfp-Wwk1MqAIz9Lg8Zfm0WXqsyeLz3hJmHcBZja7C0dc0CHVjSrV4uGOGrHQSxTeA4HDoCpfytY9hQlIkyU_ZV/s1406/Atomic-Habits-Book-summary.webp" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbBDeQh_kqOxEsoz1DwZOUhaeqoNWTZVlP3Kb5n4Lg0hdKX87VyXT3ZHGl-wkc-30-JG1wK6lwq3kmHLBGxI5eDspZiwg9IMXeYMkbq3YoNrqimhPQ3Id2XZo-Pby776MIlTFfo-niaO5fJHaq3-6GZsu0aGi6Icq98ilrDUF-Q-5Erh3Np4Fai14o9o5b/s940/PX-Blog-Images-86.png" alt="Third slide">
    </div>
  </div>
  </div>
</div>
<div class="grid gap-4">
  <h5 class="text-center">Atomic Habits</h5>
  <p class="lead text-center">$50.00</p>
  <p>"Atomic Habits": An Easy & Proven Way to Build Good Habits & Break Bad Ones" by James Clear is a best-selling self-improvement book that provides a comprehensive framework for forming positive habits, eliminating negative ones, and understanding how small, consistent changes can lead to remarkable long-term results.Clear emphasizes the power of tiny, incremental improvements--or "atomic habits" --and how they compound over time to create significant outcomes.</p>
  <button class="btn btn-primary">Add to cart</button>
  <a href="{{ url_for('payment') }}" class="btn btn-primary">Buy Now</a>
  <p>Free Delivery</p>
</div>
<!-- Bootstrap JS and dependencies -->
<script src="https://stackpath.bootstrapcdn.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popper/npm/popperjs/core/@3.5.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Product 8:-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewpoint" content="width=device-width, initial-scale=1, shrink-to-fit=0">
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <title>DOPAMINE DETOX</title>
</head>
<style>
  body {
  background-color: #95B9C7;
  }
  #CarouselExampleSlidesOnly {
  width: 600px;
  height: 400px;
  margin: auto
  }
  .carousel-item {
  width: 100%
  height: 100%;
  }
  .carousel-inner img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  }
  @media(max-width:1068px) {
  #CarouselExampleSlidesOnly {
  height: 300px;
  }
  }
  h2 {
  font-family: courier new;
  }
  h5 {
  font-family: Georgia;
  }
  p {
  font-family: sans-serif;
  }
</style>
<body>
<div class="container my-5">
  <h2 class="text-center mb-0">DOPAMINE DETOX</h2>
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcNScsxIOyZqSGQRxKfXF7u_pgQGbPfopSQjMDaVlRnudGmuSa0TzP6pSsQlCBWUp8ZQzWDjYQGhs6ZXptwFHb5qBUVUFeBU6NGn0k41lcmcyMTixgJWMpHFRlwrULo5AgN_TBQwO3chqtUMF6V4dyX2K1Goz-_VKJIlXMBxmzf1b2ON8WlMrtJrvo1eCv/s225/images%20%2814%29.jpeg" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4bzQRrxazaH3jf0LT1nPmG1WmHka_JQb9GlrLCIuc553tjKUbHMuvYPujC3MmKyK3drSXgDGDVtkCs9cKuzX1R4-C4mwIkVcj22D1NAMePYrz_pBq8Zib61g0_hkbFzXOT5c1rgeL3uCqcs8_KBwCmE7oBabeDjMPEJQmC32qorbRGjfyEetZGsw0Vk9N/s1080/Dopamine-Detox-Thibaut-Meurisse-Book-Informative-Buy-Online-Bookbins-02.jpg" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0gDzPaj-ZFsqYBuZ5wQj8DfmUd6c7BaHN0rqFz8i5UQkaRQKaVmCNMHYrGEl7-83ye-g3U9z6aYS8WLVoHAaGD9mwP4a6S4KezYf3Wf62BVMLG5D7oA2ZCicwBcCFCXG11k8_KdxKKh7Ldrw_gJNXWHlCiZg0gimqDTxiwQajeI7mYRXAlH-u3xROHwwi/s1000/61wsElqyduL._AC_UF1000,1000_QL80_.jpg" alt="Third slide">
    </div>
  </div>
</div>
<div class="grid gap-4">
  <h2 class="text-center">Dopamine Detox</h2>
  <p class="lead text-center">$20.00</p>
  <p>"Dopamine Detox: A Short Guide to remove Distractions and Get Your Brain To Do Hard Things" by Thibaut Meurisse (and similarly themed books by other authors) focuses on resetting the brain's reward system to break free from addictive habits, overstimulation, and distractions. The concept of a dopamine detox is about reducing or temporarily abstaining from highly stimulating activities-like social media, binge-watching, gaming, junk food--so that the brain can regain its natural balance and motivation to engage in meaningful, productive activities.</p>
  <button class="btn btn-primary">Add to Cart</button>
  <a href="{{ url_for('payment') }}" class="btn btn-primary">Buy Now</a>
  <p>Free Delivery</p>
</div>
<!-- Bootstrap JS and dependencies -->
<script src="https://stackpath.bootstrapcdn.com/jquery-3.5.1.slim.min.css"></script>
<script src="https://cdn.jsdelivr.net/npm/@popper/npm/@popperjs/core/@4.5.2/dist/umd/popper.min.js"></script>
<script src="stackpath.bootstrapcdn.com/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Product 9:- 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewpoint" content="width=device-width, initial-scale=1, shrink-to-fit=0">
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
  <title>RICH DAD POOR DAD</title>
</head>
<style>
  body {
  background-color: #95B9C7;
  }
  #carouselExampleSlidesOnly {
  width: 600px;
  height: 400px;
  margin: auto;
  }
  .carousel-item {
  width: 100%;
  height: 100%;
  }
  .Carousel-inner img {
  object-fit: cover;
  height: 100%;
  width: 100%;
  }
  @media(max-width:1068px) {
  #CarouselExampleSlidesOnly {
  height: 300px;
  }
  }
  h2 {
  font-family: courier new;
  }
  h5 {
  font-family: Georgia;
  }
  p {
  font-family: sans-serif;
  }
</style>
<body>
<div class="container my-5">
  <h2 class="text-center mb-4">RICH DAD POOR DAD BOOK REVIEW</h2>
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy2_BuaQisChlxabn_ikejI-_34e_4RSb4GbgaC450qE2NOqOndv3jBQtYv1pe1r2PwpWGGPMXkKSw_THm6LR393CSlKWcL-jUdAaiMNvt_zKLiaZdWzP1xcPpmVpbYJd50pd44bgBXfKucWJNre1sRcJS04LcJ88oB2vGjxxuZFMySfAC8YS0mJXy20eA/s1066/1696152490734.jpeg" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0x6SwPjiNiQs0at6gFOx9q_P1aRxXQjDdxXWq-LjrDidB0U0AN0h3tzZ6yCOG9tclXM5g_qZ7GxeEwKohhYtOAAejPsB_OQ5bwJ5kvNAmr2tP4BffeH5kJzRNrgeMpGvdc29Ghsga7iUn9Zm9YnWSqCLp4KBL461jECmsqZaE_tPWqllMqFbGb6Zh8Mhu/s1000/81BE7eeKzAL._AC_UF1000,1000_QL80_.jpg" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0x6SwPjiNiQs0at6gFOx9q_P1aRxXQjDdxXWq-LjrDidB0U0AN0h3tzZ6yCOG9tclXM5g_qZ7GxeEwKohhYtOAAejPsB_OQ5bwJ5kvNAmr2tP4BffeH5kJzRNrgeMpGvdc29Ghsga7iUn9Zm9YnWSqCLp4KBL461jECmsqZaE_tPWqllMqFbGb6Zh8Mhu/s1000/81BE7eeKzAL._AC_UF1000,1000_QL80_.jpg" alt="Third slide">
    </div>
  </div>
  </div>
</div>
<div class="grid gap-4">
  <h2 class="text-center">Rich Dad Poor Dad</h2>
  <p class="lead text-center">$30.00</p>
  <p>Rich Dad Poor Dad: "Rich Dad Poor Dad" is a best-selling personal finance book by Robert T. Kiyosaki, first published in 1997. It offers lessons on wealth-building, financial literacy, and the importance of shifting one's mindset about money. The book contrasts two perspectives on finaces--those of the author's "rich dad"(a friend's father who was a savvy investor) and "poor dad" (his biological father, a highly educated man with traditional beliefs about work and education). These two figures embody different approaches to wealth and career.</p>
  <button class="btn btn-primary">Add to Cart</button>
  <a href="{{ url_for('payment') }}" class="btn btn-primary">Buy Now</a>
  <p>Free Delivery</p>
</div>
<!-- Bootstrap JS and dependencies -->
<script src="https://stackpath.bootstrapcdn.com/jquery-3.5.1.slim.min.css"></script>
<script src="https://cdn.jsdelivr.net/npm/@popper/npm/@popperjs/core/2.5.2/dist/umd/popper.min.css"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Product 10:- 

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewpoint" content="width=device-width, initial-scale=1, shrink-to-fit=0">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <title>THE POWER OF POSITIVE THINKING</title>
</head>
<style>
    body {
    background-color: #95B9C7;
    }
    #CarouselExampleSlidesOnly {
    width: 600px;
    height: 400px;
    margin: auto;
    }
    .carousel-item {
    width: 100%;
    height:100%;
    }
    .carousel-inner img {
    object-fit: cover;
    height: 100%;
    width: 100%;
    }
    @media(max-width:1068px) {
    #CarouselExampleSlidesOnly {
    height: 300px;
    }
    }
    h2 {
    font-family: courier new;
    }
    h5 {
    font-family: Georgia;
    }
    p {
    font-family: sans-serif;
    }
</style>
<body>
<div class="container my-5">
    <h2 class="text-center mb-0">THE POWER OF POSITIVE THINKING BOOK REVIEW</h2>
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdb0U1iUhueTo6gat4skvjE5i0ET589uYK2NiYe2Ncj0DoOrH905H5kZ1rWS413lcGtZhAvtRVo9UjHFb6eltw77Q3uypYw-ve4oCD4R8QBZwUdO2fmM3dWo4M2X8vExXsXQ9Um57nNNtYx3G4XPFOEUvzMFSr9M4Rt4pEzDBdTv-B5XErjMf8FY2mR8T1/s300/images%20%2813%29.jpeg" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwAlTDSUj1eEWazwH_7fEhItdj7TxsWqI9G1RKrddJrfIkbT8ERFdU-OxU4udQzEX0yy6W2VRc0yN6KAX-E2ds4z-4XxI0RTw7FVraaC2Ufyys3JMaUK-UBi_PDGpy6fFeYC-n46ULZZM0pqvMGokmaxT6Fe236V3wQC7AoJ8Yr9R4Yyz1g1j079BObXPR/s1600/Personality-Development-Books-Set-Set-of-2-5.webp" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik7ef2t-S5i_Yw3N-aBjxRNX4d89OFnPkR3N2TBwvv38zxksXIhlQjT3YUtQNLepX8e4LSJgAS5_PPzPl3WNpqG76FRO3bqSqf3SK9NovNnRzw4ikQLVKj2Migc2oZdr7HiHz1K_BN7v1MiTpGjvVhneJknLOBG7dpfF_E6MVOmdEMKBD4Zblb-iYl-ZpO/s800/thumb604-1.jpg" alt="Third slide">
    </div>
  </div>
</div>
<div class="grid gap-4">
    <h2 class="text-center">The Power of Positive Thinking</h2>
    <p class="lead text-center">$45.00</p>
    <p>"The Power of Positive Thinking" is a self-help classic written by Norman Vincent Peale and first published in 1952. The book promotes the idea that a positive mindset can significantly influence one's life, leading to greater success, happiness, and inner peace. Peale combines practical advice with spiritual teachings, suggesting that belief in oneself, along with faith, can help overcome difficulties and achieve personal goals.This book is ideal for individuals seeking motivation, self-confidence, and inner peace. It appeals to those who are open to combining practical self-improvement strategies with spirituality. </p>
    <button class="btn btn-primary">Add to Cart</button>
    <a href="{{ url_for('payment') }}" class="btn btn-primary">Buy Now</a>
    <p>Free Delivery</p>
</div>
<!-- Bootstrap JS and dependencies -->
<script src="https://stackpath.bootstrapcdn.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popper/npm/@popperjs/core/@2.5.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Product 5:-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewpoint" content="width=device-width, initial-scale=1, shrink-to-fit=0">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <title>CONTINUOUS DISCOVERY HABITS</title>
</head>
<style>
    body {
    background-color:#95B9C7;
    }
    #CarouselExampleSlidesOnly {
    width: 600px;
    height: 400px;
    margin: auto;
    }
    .carousel-item {
    width: 100%;
    height: 100%;
    }
    .carousel-inner img {
    object-fit: cover;
    height: 100%;
    width: 100%;
    }
    @media (max-width:1068) {
    #CarouselExampleSlidesOnly {
    height: 300px;
    }
    }
    h2 {
    font-family: courier new;
    }
    h5 {
    font-family: Georgia;
    padding-left: 600px;
    }
    p {
    font-family: sans-serif;
    }
</style>
<body>
<div class="container my-5">
    <h2 class="text-center mb-4">CONTINUOUS DISCOVERY HABITS BOOK REVIEW</h2>
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbA_bDhe1H0sNfdhgTtRiu4sFvEELpQEg1ri-zPhFpRqsSaDPLVX95kmnm_NhogeFAAP2vyQdl3jeL8KYv2EzSdYera0UfEFcuutHPYSCh45LGofEWrlxVFIrzD_JhYE-YX5BSWJFMaWKkLDmn7EWTz1hU9FfWa6ri10OHS_9_OLaTmnC99FY8mbmC7kE_/s333/images%20%2812%29.jpeg" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNMebGeXpLXdXdicUa-izC0nFOw6gxCa8MtbNHJ5m3QSenmRGNthAtC9tV2lHrgNOy4PFkGmT93v4knL8PuL1JR_dUg5eLP5iyzQ6rlBv7EWpU9chzAcWUQyBjCEIvFxRh4zJBZ1_OLY8FZ097xhcvLbs6xCZORgt9I9sOk0KPJTuVBMWxgZfhNd0tkOwi/s268/images.png" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNzjJzJhtdPYMiAR5Mlyc8EuwUK6k7jxFlmcCLdYFhU4GHaOUkvSrq1Skk_I4SQct5y_qyMu9YwmrDVBoV0yWFasvstofQkQkqg2Z4zmMOu6TTJP1xnxytFZL6YWLmIQsMY4bMEOJwQJSzcDTuB4m7uVrU3zswdZa5DN3Se5Voj98untANdQMCC-VcO1LJ/s550/Product-at-Heart.003-1.webp" alt="Third slide">
    </div>
  </div>
    </div>
</div>
<div class="grid gap-4">
    <h5 class="text center">Continuous Discovery Habits</h5>
    <p class="lead text-center">$15.00</p>
    <p>Continuous Discovery Habits: It refers to the practices that product teams, especially product managers, designers, and researchers, adopt to consistently learn about user needs, market changes, and validate ideas throughout the product lifecycle. Instead of limiting research to the early phases of product development, continuous discovery integrates learning as a daily or weekly routine to guide decisions and improve products incrementally. This approach ensures that products evolve in alignment with real customer needs and evolving market conditions.</p>
    <button class="btn btn-primary">Add to Cart</button>
    <a href=" {{ url_for('payment') }}" class="btn btn-primary">Buy Now</a>
    <p>Free Delivery</p>
</div>
<!-- Bootstrap JS and dependencies -->
<script src="https://stackpath.bootstrapcdn.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popper/npm/@popperjs/core/@2.5.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Payment method 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewpoint" content="width=device-width, initial-scale=1 shrink-to-fit=0">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <title>PAYMENT FORM</title>
</head>
<style>
body {
background-color: #95B9C7;
}
h2 {
font-family: Courier new;
}
</style>
<body>
<div class="container mt-5">
  <div class="row justify-content-center">
    <div class="col-md-6">
      <h2 class="mb-4">Payment Information</h2>
      <form>
        <!-- Cardholder Name -->
        <div class="mb-3">
          <label for="cardName" class="form-label">Cardholder Name</label>
          <input type="text" class="form-control" id="cardName" placeholder="Enter name on card" required>
        </div>
        <!-- card number -->
        <div class="mb-3">
          <label for="cardNumber" class="form-label">Card Number</label>
          <input type="text" class="form-control" id="cardNumber" placeholder="1234 5678 9012 3456" maxlength="19" required>
        </div>
        <!-- Expiration Date and CVV -->
        <div class="row">
          <div class="col-md-6 mb-3">
            <label for="expDate" class="form-label">Expiration Date</label>
            <input type="text" class="form-control" id="expDate" placeholder="MM/YY" required>
          </div>
          <div class="col-md-6 mb-3">
            <label for="cvv" class="form-label">CVV</label>
            <input type="password" class="form-control" id="cvv" placeholder="123" maxlength="3" required>
          </div>
        </div>
        <!-- Payment Method Options -->
        <div class="mb-3">
          <label class="form-label">Payment Method</label>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="paymentMethod" id="paypal">
            <label class="form-check-input" for="paypal">
              PayPal
            </label>
          </div>
        </div>
        <!-- submit button -->
        <button type="submit" class="btn btn-primary w-100">Pay Now</button>
      </form>
    </div>
  </div>
</div>
</body>
</html>