Learn Basic CSS by Building a Cafe Menu - Step 90

HTML-CSS
1

I am failing to complete step 90. Please assist me?

  **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 class="established">Est. 2020</p>
    </header>
    <hr>
    <main>
      <section>
        <h2>Coffee</h2>
        <img src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg" alt="coffee icon"/>
        <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>
        <article class="item">
          <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
        </article>
        <article class="item">
          <p class="dessert">Cheesecake</p><p class="price">3.00</p>
        </article>
        <article class="item">
          <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
        </article>
      </section>
    </main>
    <hr class="bottom-line">
    <footer>
      <p>
        <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
      </p>
      <p class="address">123 Free Code Camp Drive</p>
    </footer>
  </div>
</body>
</html>

/* file: styles.css */
body {
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
font-family: sans-serif;
padding: 20px;
}

h1 {
font-size: 40px;
margin-top: 0;
margin-bottom: 15px;
}

h2 {
font-size: 30px;
}

.established {
font-style: italic;
}

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

.menu {
width: 80%;
background-color: burlywood;
margin-left: auto;
margin-right: auto;
padding: 20px;
max-width: 500px;
}

img {
block: margin-left;
block: margin-right;
}

hr {
height: 2px;
background-color: brown;
border-color: brown;
}

.bottom-line {
margin-top: 25px;
}

h1, h2 {
font-family: Impact, serif;
}

.item p {
display: inline-block;
margin-top: 5px;
margin-bottom: 5px;
font-size: 18px;
}

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

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

/* FOOTER */

footer {
font-size: 14px;
}

.address {
margin-bottom: 5px;
}

a {
color: black;
}

a:visited {
color: black;
}

a:hover {
color: brown;
}

a:active {
color: brown;
}

  **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 90

Link to the challenge:

2

Can you be more specific? What, in your own words, is confusing about the instructions or hints?

3

I can’t be able to " To make the image behave like heading elements (which are block-level), create an img type selector and use the value block for the display property and use the applicable margin-left and margin-right values to center it horizontally." and the hint instruct me to “You should set the display property to block.”

4

The instruction is confusing instead.

5

That still doesn’t help me much beyond saying you don’t understand “all of it”.

It looks like you know what an img selector is - you created one of those.

That leaves these parts:

Do you know which part of the CSS rule is the property and which part is the value? You have it backwards here:

It would be useful to say in your first post something like “I made a img selector, but the values and properties seem to be wrong”. That’s much more useful than just copy-pasting the instructions at me.

Learning to talk about coding issues you’re having in your own words is hard, but it is a critical part of a programming job.

6

I am sorry for the inconvenience, will it be possible to be assisted though in order to complete this step?

7

Did you read this?

It helps if you respond to what I say so that I know where to add more information.

8

No quite, If not mistaken is part of type selector whereby the property is on the left and the value is on right. I hope I have answered your question, if not, I am sorry.

9

Right, the property is on the left and the value goes on the right.

The instructions say

and

block is not a property, so it doesn’t go on the left.

This part can be a bit confusing. Another way to write the same thing would be to say

Use the appropriate values for the margin-left and margin-right properties to make your image centered horizontally.

You centered the .menu class the same way.

10

I have tried what you just instructed me to do and it worked. Thanks in advance!

11

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