Sharkit

One Time Password Verification

SHARKIT

Dear Juan Perez,

We inform you that, at your request, we have generated a security code to update your default password in our system XXXXXX. This code is necessary to complete the password change process and ensure the protection of your account.

Security Code: 4DM1N

Expiration date: 10/09/24, 10:03 PM

To update your password, please visit our page to complete the process:

Go to website

If you did not request this change, please contact our support team immediately to ensure the protection of your account.

We appreciate your attention and remain at your disposal for any further inquiries or assistance you may need.

Best regards, Sincerely.

Internal Control Offices

Code

HTML

<div>
  <header>
    <h2>SHARKIT</h2>
  </header>

  <main>
    <h3>Dear <strong>Juan Perez</strong>,</h3>
    <p>
      We inform you that, at your request, we have generated a security code to
      update your default password in our system <strong>XXXXXX</strong>. This
      code is necessary to complete the password change process and ensure the
      protection of your account.
    </p>
    <p>
      <strong>Security Code:</strong>
      <span>4DM1N</span>
    </p>
    <p><strong>Expiration date:</strong> 10/09/24, 10:03 PM</p>
    <p>
      To update your password, please visit our page to complete the process:
    </p>
    <a href="#">Go to website</a>
    <p>
      If you <strong>did not request</strong> this change, please contact our
      support team immediately to ensure the protection of your account.
    </p>
    <p>
      We appreciate your attention and remain at your disposal for any further
      inquiries or assistance you may need.
    </p>
    <p>Best regards, Sincerely.</p>
    <figure>
      <img
        src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDE2IDIwNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iNHB4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNvbG9yPSIjZTBjY2ZhIj48cGF0aCBkPSJtMzUuMSAxMTYuOGwxNjkuNy00MC4zYzEgMCAxOTQuNSAxOC45IDE5NC41IDE4LjlsLTcuOCAxNS43LTEzMC4zIDUzLjUtODguOSA5LjIgNjIuNC01MC43Ij48L3BhdGg+PHBhdGggZD0ibTMzMi4zIDEzNS40bDMzLjggOS42LTguMiA2LjctOTYuNiAxMi45LTU2LjUtODguMWMwIDAgNC42LTE0LjUtMTAuOC01OC41IDM3LjMgMTEuNCA4MS41IDY1LjQgODEuNSA2NS40Ij48L3BhdGg+PHBhdGggZD0ibTIwNC44IDc2LjVsLTE4Ni44IDEwMi41IDE3LjEtNjIuMi0xNi42LTUwLjUgNjAuNyA0MCI+PC9wYXRoPjxwYXRoIGQ9Im0xOTIuNCAxNTcuNGwtMTEyLjUtMTIuNCI+PC9wYXRoPjwvc3ZnPg=="
        alt="Sharkit Logo"
      />
      <figcaption>Internal Control Offices</figcaption>
    </figure>

    <footer>
      <hr />
      <p>Your values are only seen through your actions</p>
    </footer>
  </main>
</div>

CSS

div {
  margin: 20px;
  text-align: left;
  background: linear-gradient(45deg, #160024 25%, #001925 75%);
  font-size: 16px;
  max-width: 600px;
  color: white;
}

h2 {
  margin: 0;
  text-align: center;
  background: #883aea;
  border-radius: 8px 8px 0 0;
  letter-spacing: 3px;
  font-style: italic;
  font-size: 25px;
}

main {
  padding: 10px 25px;
  text-align: left;
}

strong {
  color: #e0ccfa;
}

h3 {
  font-size: 22px;
  color: inherit;
}

a {
  display: block;
  width: max-content;
  padding: 5px 12px;
  border-radius: 5px;
  background-color: #883aea;
  font-weight: bold;
  margin: 0 auto;
  color: inherit;
}

span {
  padding: 4px 8px;
  border-radius: 5px;
  background-color: #883aea;
  font-style: italic;
  font-weight: bold;
  letter-spacing: 2px;
}

img {
  display: block;
  width: 250px;
  margin: 0 auto;
  color: #e0ccfa;
  stroke-width: 4px;
}

figcaption {
  display: block;
  margin: 0 auto;
  font-weight: bold;
  width: max-content;
  margin-top: 0.5rem;
}

hr {
  border: none;
  height: 3px;
  background: #883aea;
}

p:last-child {
  font-weight: bold;
  color: #e0ccfa;
  font-style: italic;
  text-align: right;
  font-size: 15px;
}