gijinkakun/card.html

## card.html
<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <style>
      .c-card {
        position: relative;
        width: 100%;
        color: #222222;
        background: #fafafa;
        transition: 0.4s ease-in-out;
      }

      .c-card__header {
        position: relative;
        padding: 16px 16px 16px;
      }

      .c-card__body {
        position: relative;
        padding: 16px 16px 16px;
      }

      .c-card__footer {
        position: relative;
        padding: 16px 16px 16px;
        border-top: 1px solid #e7e7e7;
      }

      .c-card__image {
        margin: 0 0 16px 0;
        background-size: cover;
        background-repeat: no-repeat;
        aspect-ratio: 4 / 3;
      }

      .c-card__heading {
        margin: 0;
        padding: 0;
        font-size: 28px;
        font-family: "Lato";
        line-height: 1.2;
      }

      .c-card__sub-heading {
        font-size: 18px;
        font-family: "Lato";
        line-height: 1.2;
      }

      .c-card__excerpt {
        margin: 0;
        padding: 0;
        font-size: 18px;
        font-family: "Lato";
        line-height: 1.2;
      }

      .c-card__action {
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }

      .c-card--rounded {
        border-radius: 0.375rem;
      }

      .c-card--elevation {
        box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
      }
    </style>
  </head>

  <body>
    <article class="c-card c-card--rounded c-card--elevation">
      <header class="c-card__header">
        <div class="c-card__image" style="background-image: url(https://via.placeholder.com/1024x768);"></div>
        <h2 class="c-card__heading">Card Headline Here</h2>
        <div class="c-card__sub-heading">Card Subtitle Here</div>
      </header>
      <div class="c-card__body">
        <p class="c-card__excerpt">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore...</p>
      </div>
      <footer class="c-card__footer">
        <div class="c-card__action">
          <button class="c-button">Read Full Post</button>
        </div>
      </footer>
    </article>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en-us">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

	<style>
	.c-card {
	position: relative;
	width: 100%;
	color: #222222;
	background: #fafafa;
	transition: 0.4s ease-in-out;
	}

	.c-card__header {
	position: relative;
	padding: 16px 16px 16px;
	}

	.c-card__body {
	position: relative;
	padding: 16px 16px 16px;
	}

	.c-card__footer {
	position: relative;
	padding: 16px 16px 16px;
	border-top: 1px solid #e7e7e7;
	}

	.c-card__image {
	margin: 0 0 16px 0;
	background-size: cover;
	background-repeat: no-repeat;
	aspect-ratio: 4 / 3;
	}

	.c-card__heading {
	margin: 0;
	padding: 0;
	font-size: 28px;
	font-family: "Lato";
	line-height: 1.2;
	}

	.c-card__sub-heading {
	font-size: 18px;
	font-family: "Lato";
	line-height: 1.2;
	}

	.c-card__excerpt {
	margin: 0;
	padding: 0;
	font-size: 18px;
	font-family: "Lato";
	line-height: 1.2;
	}

	.c-card__action {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	}

	.c-card--rounded {
	border-radius: 0.375rem;
	}

	.c-card--elevation {
	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
	}
	</style>
	</head>

	<body>
	<article class="c-card c-card--rounded c-card--elevation">
	<header class="c-card__header">
	<div class="c-card__image" style="background-image: url(https://via.placeholder.com/1024x768);"></div>
	<h2 class="c-card__heading">Card Headline Here</h2>
	<div class="c-card__sub-heading">Card Subtitle Here</div>
	</header>
	<div class="c-card__body">
	<p class="c-card__excerpt">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore...</p>
	</div>
	<footer class="c-card__footer">
	<div class="c-card__action">
	<button class="c-button">Read Full Post</button>
	</div>
	</footer>
	</article>
	</body>
	</html>