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

Curriculum Help
1

Tell us what’s happening:

Why is it saying ‘You should have a .pricing-container selector.’?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Pricing Plans Layout Page</title>
  </head>
  <body>
    <h1>Pricing Plans</h1>
    <div class="pricing-container">
      <div class="pricing-card basic-plan">
        <h2>Basic</h2>
        <p>$9/month</p>
      </div>
      <div class="pricing-card pro-plan">
        <h2>Pro</h2>
        <p>$19/month</p>
      </div>
      <div class="pricing-card premium-plan">
        <h2>Premium</h2>
        <p>$29/month</p>
      </div>
    </div>
  </body>
</html>

/* file: styles.css */
.pricing-container {
  display: flex;
  flex-wrap: wrap;
}

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

.basic-plan {
  order: 1;
}

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

.premium-plan {
  order: 3;
}

Your browser information:

User Agent is: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/151.0.0.0 Mobile Safari/537.36

Challenge Information:

Design a Pricing Plans Layout Page

2

is your CSS being applied at all? how do you apply your CSS?

3

The editors for both HTML and CSS are displayed side by side in the screen. Therefore CSS style is automatically applied we type. This is what I already know how freeCodeCamp’s Lab project operates.

4

no, the CSS is not applied automatically

you always need to link it explicitly

if you have doubts you could review the start of the cafe menu workshop