<div class="container">
  <div class="card">
    <h4 class="heading">Inceptos earum? Ipsum qui aliquam aptent, asperiores.</h4>
    <p class="text">Arcu sit sociosqu nec quisquam,<br> dolorum bibendum ipsa. Eget? Sagittis.</p>
    <button>Read more</button>
  </div>
</div>
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600&display=swap");

// Variable decleration for normal/light mode

:root {
  --color-background: #f0f0f0;
  --color-heading: #2c2c2c;
  --color-text: #2c0000;
  --color-button-text: #eaf5e2;
  --color-button-background: #151d0f;
  --color-container-bg: #fff;
}

// Variable decleration for dark mode media query

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: #00153b;
    --color-heading: #d0d8e6;
    --color-text: #d3d3d3;
    --color-button-text: #e6e6e6;
    --color-button-background: #007476;
    --color-container-bg: #36454f;
  }
}

body {
  background: var(--color-background);
  font-family: "Montserrat", sans-serif;

  .card {
    padding: 20px;
    background: var(--color-container-bg);

    .heading {
      color: var(--color-heading);
      margin-bottom: 20px;
    }

    .text {
      color: var(--color-text);
      font-size: 18px;
      margin-bottom: 40px;
    }

    button {
      background-color: var(--color-button-background);
      color: var(--color-button-text);
      padding: 8px 16px;
      border: 1px solid var(--color-button-background);
      border-radius: 5px;
      font-weight: bolder;
      font-size: 19px;
    }
  }
}
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.