jmnyarega/dark-card-2.html

## dark-card-2.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <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">
    <title>dark cards</title>
    <style>
      :root {
        --dark: #000;
        --white: #fff;
        --gradient: linear-gradient(to top left, #703091, #2b7be5);
        --width: 800px;
        --height: fit-content;
      }
      * {
        font-family: "Roboto", sans-serif;
        padding: 0;
        margin: 0
      }
      .container {
        margin: 10px auto;
        width: var(--width);
        height: var(--height);
        padding: calc(var(--width) / 50);
        background-color: var(--dark);
        color: var(--white);
        box-sizing: border-box;
        border-radius: 0.5em;
      }
      h3 {
        padding: 10px 10px;
        text-align: center;
        font-size: 24px;
      }
      h3::after {
        content: "";
        display: block;
        height: 2px;
        width: 30%;
        margin: 10px auto;
        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;
      }
      .cards {
        display: flex;
        justify-content: space-between;
        text-align: center;
        flex-wrap: wrap
      }
      .card {
        width: calc(var(--width) / 5 - 50px );
        margin: calc(var(--width) / 30) 5px;
        border: 2px solid #5E6164;
        border-radius: .5em;
        background-color: #272B30;
        max-width: calc( (var(--width) / 2) - 50px);
        padding: 40px 5px;
      }
      .button-container {
        display: flex;
        justify-content: center;
      }
      button {
        border: none;
        border-radius: .5em;
        padding: 10px 15px;
        margin-top: 10px;
        background-image: var(--gradient);
        cursor: pointer;
        color: var(--white);
        font-size: 15px;
      }
      .card p {
        font-size: 14px;
        margin: 5px;
        text-align: center;
      }
    </style>
  </head>
  <body>
  <div class="container">
    <h3>
      See what makes us unique
    </h3>
    <div class="cards">
      <div class="card">
        <i class="fa fa-check"> </i>
        <p>Advanced observability</p>
      </div>
      <div class="card">
        <i class="fa fa-check"> </i>
        <p>Continuous automation</p>
      </div>
      <div class="card">
        <i class="fa fa-check"> </i>
        <p>AI-assistance</p>
      </div>
      <div class="card">
        <i class="fa fa-check"> </i>
        <p>User experience & business analytics</p>
      </div>
      <div class="card">
        <i class="fa fa-check"> </i>
        <p>Cross-team collaboration</p>
      </div>
    </div>
    <div class="button-container">
      <button>Explore Our Platform</button>
    </div>
  </div>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<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">
	<title>dark cards</title>
	<style>
	:root {
	--dark: #000;
	--white: #fff;
	--gradient: linear-gradient(to top left, #703091, #2b7be5);
	--width: 800px;
	--height: fit-content;
	}
	* {
	font-family: "Roboto", sans-serif;
	padding: 0;
	margin: 0
	}
	.container {
	margin: 10px auto;
	width: var(--width);
	height: var(--height);
	padding: calc(var(--width) / 50);
	background-color: var(--dark);
	color: var(--white);
	box-sizing: border-box;
	border-radius: 0.5em;
	}
	h3 {
	padding: 10px 10px;
	text-align: center;
	font-size: 24px;
	}
	h3::after {
	content: "";
	display: block;
	height: 2px;
	width: 30%;
	margin: 10px auto;
	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;
	}
	.cards {
	display: flex;
	justify-content: space-between;
	text-align: center;
	flex-wrap: wrap
	}
	.card {
	width: calc(var(--width) / 5 - 50px );
	margin: calc(var(--width) / 30) 5px;
	border: 2px solid #5E6164;
	border-radius: .5em;
	background-color: #272B30;
	max-width: calc( (var(--width) / 2) - 50px);
	padding: 40px 5px;
	}
	.button-container {
	display: flex;
	justify-content: center;
	}
	button {
	border: none;
	border-radius: .5em;
	padding: 10px 15px;
	margin-top: 10px;
	background-image: var(--gradient);
	cursor: pointer;
	color: var(--white);
	font-size: 15px;
	}
	.card p {
	font-size: 14px;
	margin: 5px;
	text-align: center;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<h3>
	See what makes us unique
	</h3>
	<div class="cards">
	<div class="card">
	<i class="fa fa-check"> </i>
	<p>Advanced observability</p>
	</div>
	<div class="card">
	<i class="fa fa-check"> </i>
	<p>Continuous automation</p>
	</div>
	<div class="card">
	<i class="fa fa-check"> </i>
	<p>AI-assistance</p>
	</div>
	<div class="card">
	<i class="fa fa-check"> </i>
	<p>User experience & business analytics</p>
	</div>
	<div class="card">
	<i class="fa fa-check"> </i>
	<p>Cross-team collaboration</p>
	</div>
	</div>
	<div class="button-container">
	<button>Explore Our Platform</button>
	</div>
	</div>
	</body>
	</html>