jmnyarega/Picture-Cards.html

## Picture-Cards.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Picture Cards</title>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,400;0,700;0,900;1,300&display=swap" rel="stylesheet">
  <style>
    :root {
      --white: #fff;
      --height: 350px;
      --width: 300px;
      --footer-color: #4c4c4c;
      --space: 17px;
    }

    body {
      font-family: "Roboto", sans-serif;
      display: flex;
      justify-content: center;
      flex-wrap: wrap-reverse;
    }

    .card {
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      min-height: var(--height);
      width: var(--width);
      box-shadow: 0 0 5px 1px;
      margin: var(--space);
      border-bottom-right-radius: 0.5em;
      border-bottom-left-radius: 0.5em;
    }

    h3 {
      line-height: calc(var(--space) * 1.5);
      padding: var(--space);
      text-align: center;
      line-height: 1.5;
      font-size: 1.2rem;
    }

    .footer {
      display: flex;
      justify-content: space-between;
      color: var(--footer-color);
      padding: var(--space)
    }

    .image {
      background: url('https://i.picsum.photos/id/862/200/300.jpg') no-repeat;
      background-color: #2f2f2f;
      background-blend-mode: multiply;
      width: var(--width);
      height: calc(var(--height) * 0.5);
      background-size: cover;
      background-position: bottom left;
    }
  </style>
</head>

<body>
  <div class="card">
    <div class="image"></div>
    <h3>Manage dashboards more efficiently with more control with the JSON editor</h3>
    <div class="footer">
      <span>May 12, 2020</span>
      <span>Roman Windischhofer</span>
    </div>
  </div>
  <div class="card">
    <div class="image"></div>
    <h3>Government: Why it's important, now more than ever to optimize digital user experience</h3>
    <div class="footer">
      <span>May 11, 2020</span>
      <span>Martyn Beal</span>
    </div>
  </div>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<title>Picture Cards</title>
	<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,400;0,700;0,900;1,300&display=swap" rel="stylesheet">
	<style>
	:root {
	--white: #fff;
	--height: 350px;
	--width: 300px;
	--footer-color: #4c4c4c;
	--space: 17px;
	}

	body {
	font-family: "Roboto", sans-serif;
	display: flex;
	justify-content: center;
	flex-wrap: wrap-reverse;
	}

	.card {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	min-height: var(--height);
	width: var(--width);
	box-shadow: 0 0 5px 1px;
	margin: var(--space);
	border-bottom-right-radius: 0.5em;
	border-bottom-left-radius: 0.5em;
	}

	h3 {
	line-height: calc(var(--space) * 1.5);
	padding: var(--space);
	text-align: center;
	line-height: 1.5;
	font-size: 1.2rem;
	}

	.footer {
	display: flex;
	justify-content: space-between;
	color: var(--footer-color);
	padding: var(--space)
	}

	.image {
	background: url('https://i.picsum.photos/id/862/200/300.jpg') no-repeat;
	background-color: #2f2f2f;
	background-blend-mode: multiply;
	width: var(--width);
	height: calc(var(--height) * 0.5);
	background-size: cover;
	background-position: bottom left;
	}
	</style>
	</head>

	<body>
	<div class="card">
	<div class="image"></div>
	<h3>Manage dashboards more efficiently with more control with the JSON editor</h3>
	<div class="footer">
	<span>May 12, 2020</span>
	<span>Roman Windischhofer</span>
	</div>
	</div>
	<div class="card">
	<div class="image"></div>
	<h3>Government: Why it's important, now more than ever to optimize digital user experience</h3>
	<div class="footer">
	<span>May 11, 2020</span>
	<span>Martyn Beal</span>
	</div>
	</div>
	</body>

	</html>