jmnyarega/pricing.html

## pricing.html
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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>Pricing</title>
    <style>
      :root {
        --theme: HSL(221, 16%, 27%);
        --heading-color: HSL(0, 100%, 100%);
      }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Roboto", sans-serif;
    }

    h2 {
      text-align: center;
    }


    .content-area {
      margin: 5% 10%;
    }

    .cards {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
    }

    .cards>div {
      margin-top: 20px;
      width: 250px;

      margin-left: 10px;
      box-shadow: 0 0 2px 0;
    }

    .heading {
      background-color: var(--theme);
      padding: 10px 0;
      text-align: center;
      color: var(--heading-color);
      font-weight: bolder;
      font-variant: small-caps;
      position: relative;
    }
    .heading::after {
      content: "";
      border-left-style: solid;
      border-right-style: solid;
      border-left-width: 1.0em;
      border-right-width: 1.0em;
      border-top: 1.0em solid var(--theme);
      bottom: -1.5em;
      left: calc(50% - 20px);
      height: 0.5em;
      width: 0;
      position: absolute;
    }

    .cycle {
      padding: 1rem 2rem;
      color: var(--theme);
    }

    .features {
      padding: 0 2rem 0 2rem;
    }

    .features p {
      text-align: left;
      margin: 1.0rem 0;
    }

    button {
      border: none;
      border-radius: 0.5em;
      padding: 5px 15px;
      background-color: var(--theme);
      font-variant: small-caps;
      color: white;
      margin: 1.7rem 0;
      cursor: pointer;
    }

    .best-value {
      --theme: HSL(38, 100%, 48%);
    }
    </style>
  </head>

  <body>
    <div class="content-area">
      <h2>Pricing</h2>
      <div class="cards">
        <div class="basic">
          <div class="heading"> Basic </div>
          <p class="cycle"> <b>$29</b> <small> <sub>/month</sub> </small></p>
          <div class="features">
            <p> <b> Free </b> sales point one </p>
            <p> <b> Unlimited </b> sales point two </p>
            <p> <b> Really good </b> sales point three </p>
            <p> <b> Unlimited </b> sales point four </p>
            <button> Buy Now </button>
          </div>
        </div>
        <div class="best-value">
          <div class="heading"> Best Value </div>
          <p class="cycle"> <b>$49</b> <small> <sub>/month</sub> </small></p>
          <div class="features">
            <p> <b> Free </b> sales point one </p>
            <p> <b> Unlimited </b> sales point two </p>
            <p> <b> Really good </b> sales point three </p>
            <p> <b> Unlimited </b> sales point four </p>
            <button> Buy Now </button>
          </div>
        </div>
        <div class="super">
          <div class="heading"> Super </div>
          <p class="cycle"> <b>$109</b> <small> <sub>/month</sub> </small></p>
          <div class="features">
            <p> <b> Free </b> sales point one </p>
            <p> <b> Unlimited </b> sales point two </p>
            <p> <b> Really good </b> sales point three </p>
            <p> <b> Unlimited </b> sales point four </p>
            <button> Buy Now </button>
          </div>
        </div>
      </div>
    </div>
  </body>

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

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<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>Pricing</title>
	<style>
	:root {
	--theme: HSL(221, 16%, 27%);
	--heading-color: HSL(0, 100%, 100%);
	}

	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Roboto", sans-serif;
	}

	h2 {
	text-align: center;
	}


	.content-area {
	margin: 5% 10%;
	}

	.cards {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	}

	.cards>div {
	margin-top: 20px;
	width: 250px;

	margin-left: 10px;
	box-shadow: 0 0 2px 0;
	}

	.heading {
	background-color: var(--theme);
	padding: 10px 0;
	text-align: center;
	color: var(--heading-color);
	font-weight: bolder;
	font-variant: small-caps;
	position: relative;
	}
	.heading::after {
	content: "";
	border-left-style: solid;
	border-right-style: solid;
	border-left-width: 1.0em;
	border-right-width: 1.0em;
	border-top: 1.0em solid var(--theme);
	bottom: -1.5em;
	left: calc(50% - 20px);
	height: 0.5em;
	width: 0;
	position: absolute;
	}

	.cycle {
	padding: 1rem 2rem;
	color: var(--theme);
	}

	.features {
	padding: 0 2rem 0 2rem;
	}

	.features p {
	text-align: left;
	margin: 1.0rem 0;
	}

	button {
	border: none;
	border-radius: 0.5em;
	padding: 5px 15px;
	background-color: var(--theme);
	font-variant: small-caps;
	color: white;
	margin: 1.7rem 0;
	cursor: pointer;
	}

	.best-value {
	--theme: HSL(38, 100%, 48%);
	}
	</style>
	</head>

	<body>
	<div class="content-area">
	<h2>Pricing</h2>
	<div class="cards">
	<div class="basic">
	<div class="heading"> Basic </div>
	<p class="cycle"> <b>$29</b> <small> <sub>/month</sub> </small></p>
	<div class="features">
	<p> <b> Free </b> sales point one </p>
	<p> <b> Unlimited </b> sales point two </p>
	<p> <b> Really good </b> sales point three </p>
	<p> <b> Unlimited </b> sales point four </p>
	<button> Buy Now </button>
	</div>
	</div>
	<div class="best-value">
	<div class="heading"> Best Value </div>
	<p class="cycle"> <b>$49</b> <small> <sub>/month</sub> </small></p>
	<div class="features">
	<p> <b> Free </b> sales point one </p>
	<p> <b> Unlimited </b> sales point two </p>
	<p> <b> Really good </b> sales point three </p>
	<p> <b> Unlimited </b> sales point four </p>
	<button> Buy Now </button>
	</div>
	</div>
	<div class="super">
	<div class="heading"> Super </div>
	<p class="cycle"> <b>$109</b> <small> <sub>/month</sub> </small></p>
	<div class="features">
	<p> <b> Free </b> sales point one </p>
	<p> <b> Unlimited </b> sales point two </p>
	<p> <b> Really good </b> sales point three </p>
	<p> <b> Unlimited </b> sales point four </p>
	<button> Buy Now </button>
	</div>
	</div>
	</div>
	</div>
	</body>

	</html>