index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Happy Women's Day, Mom!</title>
    <style>
      body {
        font-family: 'Arial', sans-serif;
        background-color: #f9f9f9;
        color: #333;
        text-align: center;
        padding: 20px;
      }

      h1 {
        color: #ff4081;
        font-size: 2.5em;
        margin-bottom: 10px;
      }

      p {
        font-size: 1.2em;
        line-height: 1.6;
      }

      img {
        border-radius: 10px;
        margin: 20px 0;
      }

      .btn {
        background-color: #ff4081;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        font-size: 1em;
        cursor: pointer;
        transition: background-color 0.3s ease;
      }

      .btn:hover {
        background-color: #e91e63;
      }

      a {
        display: inline-block;
        margin-top: 20px;
        color: #333;
        text-decoration: none;
        font-size: 1em;
        border: 1px solid #333;
        padding: 10px 15px;
        border-radius: 5px;
        transition: background-color 0.3s ease, color 0.3s ease;
      }

      a:hover {
        background-color: #333;
        color: white;
      }
    </style>
  </head>
  <body>
    <h1>Happy Vietnamese Women's Day, Mom!</h1>
    <hr />
    <p>Thank you for all the love and care you give every day.<br />
      You are the best mom in the world. Enjoy your special day!</p>

    <img src="./assets/images/20-10-card.jpg" alt="Women's Day Card" width="300px">

    <br />
    <button class="btn" onclick="alert('I love you, Mom!')">Send Love</button>
    <hr />
    <a href="./public/about.html">About Me</a>
  </body>
</html>