Learn Basic CSS by Building a Cafe Menu - Step 52

HTML-CSS
1

**I have a problem in 52nd step in
learn CSS by building cafe menu

  **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>Cafe Menu</title>
  <link href="styles.css" rel="stylesheet"/>
</head>
<body>
  <div class="menu">
    <header>
      <h1>CAMPER CAFE</h1>
      <p>Est. 2020</p>
    </header>
    <main>
      <section>
        <h2>Coffee</h2>
        <article class="item">
          <p class="flavor">French Vanilla</p><p class="price">3.00</p>
        </article>
        <article class="item">
          <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
        </article>
        <article class="item">
          <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
        </article>
        <article class="item">
          <p class="flavor">Hazelnut</p><p class="price">4.00</p>
        </article>
        <article class="item">
          <p class="flavor">Mocha</p><p class="price">4.50</p>
        </article>
      </section>
      <section>
        <h2>Desserts</h2>
        <article class="item">
          <p class="dessert">Donut</p><p class="price">1.50</p>
        </article>
      </section>
    </main>
  </div>
</body>
</html>

/* file: styles.css */
body {
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
}

h1, h2, p {
text-align: center;
}

.menu {
width: 80%;
background-color: burlywood;
margin-left: auto;
margin-right: auto;
}

.item p {
display: inline-block;
}

.flavor.dessert{
text-align: left;
width: 75%;

}

.price {
text-align: right;
width: 25%
}

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

Challenge: Learn Basic CSS by Building a Cafe Menu - Step 52

Link to the challenge:

2

Hey! Instead of writing this:

Try to describe the problem you’re facing because developers spend most of their time reasoning through and solving problems.

This is what the challenge expects you to do:

image

There is a way to reduce the amount of code you have to write when you want to share the same styles for two or more selectors. It can be accomplished by using a , (comma) between the selectors for example if i want to change the background color of all of the buttons and h1’s in my code. i can do this

button, h1{
    background-color: red;
}

Hope this helps! :smile:

9 Likes
3

[Mod edit: solution removed]

4

Hey! Instead of providing solutions to people’s answers on the forums, it would be much more effective for their learning experience if you just guide them to the answers by giving them useful hints and examples!

4 Likes
5

Use this instead=
.1stclass-name, .2ndclass-name
{
text-align: left;
width: 75%;

6

Hi, welcome to the forum!

Please refrain from posting solutions to fCC challenges here.
We like to support others using hints and tips and guide learners to developing their own solutions (rather than teaching them how to copy-paste).

You prev. post has been edited for this reason.
Thanks for your understanding.

7

thanks mate, i waas stuck in that step

1 Like
8

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