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

HTML-CSS
1

Tell us what’s happening:

I have completed the requirements for this lab and am now trying to style it up similar to the example given. Up to now, I have not been able to change the colors of the checks and x’s to green and red. As you can see from my code, I actually added them in the HTML code and have also used the content property in the CSS code. Is there something that I’m doing wrong or is it just the “browser”?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Pricing Plans Layout Page</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Pricing Plans</h1>
    <div class="pricing-container">
      <div class="pricing-card basic-plan">
        <h2>Basic</h2>
        <p>$9/month</p>
        <hr>
        <ul>
          <li class="checked">&#10003; Access to our core features</li>
          <li class="checked">&#10003; Email support</li>
          <li class="denied">&#10006; Advanced analytics</li>
          <li class="denied">&#10006; Custom integrations</li>
          <li class="denied">&#10006; Priority support</li>
        </ul>
      </div>
      <div class="pricing-card pro-plan">
        <h2>Pro</h2>
        <p>$19/month</p>
        <hr>
        <ul>
          <li class="checked">&#10003; Access to our core features</li>
          <li class="checked">&#10003; Email support</li>
          <li class="checked">&#10003; Advanced analytics</li>
          <li class="checked">&#10003; Custom integrations</li>
          <li class="denied">&#10006; Priority support</li>
        </ul>
      </div>
      <div class="pricing-card premium-plan">
        <h2>Premium</h2>
        <p>$29/month</p>
        <hr>
        <ul>
          <li class="checked">&#10003; Access to our core features</li>
          <li class="checked">&#10003; Email support</li>
          <li class="checked">&#10003; Advanced analytics</li>
          <li class="checked">&#10003; Custom integrations</li>
          <li class="checked">&#10003; Priority support</li>
        </ul>

      </div>
      
    </div>

  </body>
</html>

/* file: styles.css */
.pricing-container {
  display: flex;
  flex-wrap: wrap;
  width: 615px;
  margin: 0 auto;
  
}
.pricing-card {
  display: flex;
  justify-content: space-between;
  flex: 0 0 200px;
  border: 2px solid black;
  flex-direction: column;
  align-items: center;



}
.basic-plan {
  order: 0;

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

}
.premium-plan {
  order: 2;
}
h1 {
  text-align: center;
}
hr {
  border: 1px solid black;
  width: 150px;
}

ul {
  list-style-type: none;
}
li.checked::marker {
  content: "✓ "; 
  color: green;
  font-weight: bold;
}
li.denied::marker {
  content: "✗";
  color: red;
  font-weight: bold;
}

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

This is what I see when I try your code as-is:

image
image1985×985 84.9 KB

Which part did you want to color? (I see green checkmarks and black checkmarks too for eg)

3

Yes, I can see that the styling showed up when I sent it to you but it didn’t show up in the display on my tutorial. You can see how I tried it 2 different ways. Thank you so much for your help!