jmnyarega/dark-cards.html

## dark-cards.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>dark 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 {
        --dark: #000;
        --white: #fff;
        --gradient: linear-gradient(to top left, #703091, #2b7be5);
        --width: 800px;
        --height: fit-content;
        --border-radius: 0.5em;
      }
      * {
        margin: 0;
        padding: 0;
        box-sizing:border-box;
        font-family: 'Roboto', sans-serif;
      }
      .container {
        margin: 10px auto;
        width: var(--width);
        height: var(--height);
        padding: calc(var(--width) / 30);
        background-color: var(--dark);
        color: var(--white);
        border-radius: var(--border-radius);
      }
      h3 {
        text-align: center;
        font-size: 24px;
      }
      h3::after {
        content: "";
        display: block;
        width: 45%;
        height: 2px;
        margin: 10px auto;
        border-radius: var(--border-radius);
        text-align: center;
        background-image: var(--gradient);
      }
      h4 {
        font-size: x-large;
        text-align: center;
        padding: 0 10px;
      }
      p {
        text-align: center;
        line-height: 1.5;
        font-size: 20px;
        padding: 2rem 0;
      }
      .cards {
        margin-top: calc(var(--width) / 11);
        display: flex;
        justify-content: space-between;
      }
      .card {
        border: 3px solid #5E6164;
        background-color: #272B30;
        max-width: calc( (var(--width) / 2) - 50px);
        padding: 40px 5px;
        border-radius: var(--border-radius);
      }
      button {
        border: none;
        padding: 10px 5px;
        background-image: var(--gradient);
        cursor: pointer;
        color: var(--white);
        width: 100%;
        font-size: 20px;
        border-radius: var(--border-radius);
      }
    </style>
  </head>
  <body>
  <div class="container">
    <h3>
      Gartner recognizes Dynatrace as a 2020 Magic Quadrant Leader for APM
    </h3>
    <div class="cards">
      <div class="card">
        <h4>Gartner 2020 Quadrant for APM</h4>
        <p>Dynatrace named a Leader and placed furthest for Completeness of vision</p>
        <button>Download Magic Quadrant</button>
      </div>
      <div class="card">
        <h4>Gartner 2020 Quadrant for APM</h4>
        <p>Dynatrace named a Leader and placed furthest for Completeness of vision</p>
        <button>Download Magic Quadrant</button>
      </div>
    </div>
  </div>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>dark 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 {
	--dark: #000;
	--white: #fff;
	--gradient: linear-gradient(to top left, #703091, #2b7be5);
	--width: 800px;
	--height: fit-content;
	--border-radius: 0.5em;
	}
	* {
	margin: 0;
	padding: 0;
	box-sizing:border-box;
	font-family: 'Roboto', sans-serif;
	}
	.container {
	margin: 10px auto;
	width: var(--width);
	height: var(--height);
	padding: calc(var(--width) / 30);
	background-color: var(--dark);
	color: var(--white);
	border-radius: var(--border-radius);
	}
	h3 {
	text-align: center;
	font-size: 24px;
	}
	h3::after {
	content: "";
	display: block;
	width: 45%;
	height: 2px;
	margin: 10px auto;
	border-radius: var(--border-radius);
	text-align: center;
	background-image: var(--gradient);
	}
	h4 {
	font-size: x-large;
	text-align: center;
	padding: 0 10px;
	}
	p {
	text-align: center;
	line-height: 1.5;
	font-size: 20px;
	padding: 2rem 0;
	}
	.cards {
	margin-top: calc(var(--width) / 11);
	display: flex;
	justify-content: space-between;
	}
	.card {
	border: 3px solid #5E6164;
	background-color: #272B30;
	max-width: calc( (var(--width) / 2) - 50px);
	padding: 40px 5px;
	border-radius: var(--border-radius);
	}
	button {
	border: none;
	padding: 10px 5px;
	background-image: var(--gradient);
	cursor: pointer;
	color: var(--white);
	width: 100%;
	font-size: 20px;
	border-radius: var(--border-radius);
	}
	</style>
	</head>
	<body>
	<div class="container">
	<h3>
	Gartner recognizes Dynatrace as a 2020 Magic Quadrant Leader for APM
	</h3>
	<div class="cards">
	<div class="card">
	<h4>Gartner 2020 Quadrant for APM</h4>
	<p>Dynatrace named a Leader and placed furthest for Completeness of vision</p>
	<button>Download Magic Quadrant</button>
	</div>
	<div class="card">
	<h4>Gartner 2020 Quadrant for APM</h4>
	<p>Dynatrace named a Leader and placed furthest for Completeness of vision</p>
	<button>Download Magic Quadrant</button>
	</div>
	</div>
	</div>
	</body>
	</html>