Design a Pricing Plans Layout Page - Design a Pricing Plans Layout Page

HTML-CSS
1

Tell us what’s happening:

I cannot get text 26. to pass, “Your .premium-plan element should have a p element with the text $29/month .”
Please help.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pricing Plans Layout</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>

  <h1>Pricing Plans</h1>
  <div class="pricing-container">
    <!-- First Plan -->
    <div class="pricing-card basic-plan">
      <h2>Basic</h2>
      <p>$9/month</p>
      <ul>
        <li class="check">Access to live coaching calls</li>
        <li class="check">Weekly success stories</li>
        <li class="denied">Winner's Circle</li>
        <li  class="denied">One on one access</li>
      </ul>
      <label for="choose-plan">
        <input id="choose-plan" type="submit" value="Choose Plan">
      </label>
    </div>

    <!-- Second Plan -->
    <div class="pricing-card pro-plan">
      <h2>Pro</h2>
      <p>$19/month</p>
      <ul>
        <li class="check">Access to live coaching calls</li>
        <li class="check">Weekly success stories</li>
        <li class="check">Winner's Circle</li>
        <li  class="denied">One on one access</li>
      </ul>
      <label for="choose-plan">
        <input id="choose-plan" type="submit" value="Choose Plan">
      </label>
    </div>

    <!-- Third Plan -->
    <div class="pricing-card premium-plan">
      <h2>Premium<h2>
      <p>$29/month</p>
      <ul>
        <li class="check">Access to live coaching calls</li>
        <li class="check">Weekly success stories</li>
        <li class="check">Winner's Circle</li>
        <li class="check">One on one access</li>
      </ul>
      <label for="choose-plan">
        <input id="choose-plan" type="submit" value="Choose Plan">
      </label>
    </div>

  </div>

</body>
</html>


/* file: styles.css */
* {
  color: rgb(212, 210, 210);
  padding: 5px;
  margin: 5px;
  font-family: Times New Roman;
  font-size: 1.2rem;
  box-sizing: border-box;
}

body {
  background-color: rgba(41, 32, 32, .8);
  width: 100vw;
  height: 100vh;
}

h1 {
  margin-bottom: 10px;
  border-bottom: 3px solid black;
  text-align: center;
  font-size: 1.8rem
}

h2 {
  font-weight: 900
}

p {
  font-weight: 500
}

h2, p {
  text-align: center;
}

ul {
  list-style: square inside;
}

li{
  font-size: 0.8rem;
}

.check {
  content: "✓"
}

.pricing-container {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid black;
  margin: 5px;
  width: 90%;
}

.pricing-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 0 0 200px;
  border: 2px solid black;
  margin: 20px;
}

.pricing-card:hover {
  transform: scale(1.1)
}

.basic-plan {
  order: 0;
}

.pro-plan {
  order: 1;
  flex-grow: 2;
}

.premium-plan {
  order: 2;
}

input {
  background-color: hsla(114, 80%, 58%, .6);
  color: black;
  border-radius: 3px;
}

input:active {
  background-color: hsla(114, 80%, 58%, .9);
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.3.1 Safari/605.1.15

Challenge Information:

Design a Pricing Plans Layout Page - Design a Pricing Plans Layout Page

2

Welcome to the forum @ripperketh !

Is that the correct syntax for a closing tag?

Happy coding!

3

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.