index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>My Customer</title>

    <link rel="stylesheet" href="./styles/index.css" />
  </head>
  <body>
    <header>
      <img src="./images/myCustomer.png" alt="" />
      <h3>myCustomer</h3>
      <span>.</span>
    </header>

    <main>
      <div class="from">
        <span class="title">
          From:
        </span>
        <div class="content">
          <span>Wearsmute</span>
          <span class="number">+2349030599375</span>
        </div>
      </div>
      <div class="description">
        This is a payment gateway for myCustomer App, an app used for tracking
        debts and sending payment reminders
      </div>

      <div class="remindBox">
        <div class="reminder">
          <b>PAYMENT REMINDER</b>
          <h1>$6,700</h1>
          <small
            >Hi there, you owe me $6,700 as on 01:04 PM, 14 Jul, 2020</small
          >
        </div>
        <div class="buttonBox">
          <a href="./pay.html" class="pay">Pay Now</a>
          <a class="remind">Remind Me Later</a>
        </div>
      </div>

      <div class="verifiedBox">
        <img src="./images/verified.png" alt="" />
        <span class="verified">Verified by myCustomer</span>
        <div class="playBox">
          <div class="playLogo">
            <img src="./images/googleplay.png" alt="" />
          </div>
          <small class="playText">
            <span>Available app on</span>
            <b>GOOGLE PLAY</b>
          </small>
        </div>
      </div>
    </main>
  </body>
</html>