To complete the styling, add the applicable class names flavor and price to all the remaining p elements.
I have added class=“flavour” to flavour p and class=“price” to price p again why it showing to write .class??
<!-- 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">
<main>
<h1>CAMPER CAFE</h1>
<p>Est. 2020</p>
<section>
<h2>Coffee</h2>
<article class="item">
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
</article>
<!-- User Editable Region -->
<article class="item">
<p class="falvour">Caramel Macchiato</p><p class="price">3.75</p>
</article>
<article class="item">
<p class="falvour">Pumpkin Spice</p><p class="price">3.50</p>
</article>
<article class="item">
<p class="falvour">Hazelnut</p><p class="price">4.00</p>
</article>
<article class="item">
<p class="falvour">Mocha</p><p class="price">4.50</p>
</article>
<!-- User Editable Region -->
</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 {
text-align: left;
width: 50%;
}
.price {
text-align: right;
width: 50%;
}
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36
Learn Basic CSS by Building a Cafe Menu - Step 44
ILM
October 18, 2024, 11:01am
2
SoumenDash7:
class=“flavour”
no, flavor. Spelling must match what is required in the instructions
ILM
October 18, 2024, 11:02am
3
SoumenDash7:
class="falvour"
other than the extra u, you have an additional typo, you have switched a and l
ok but still not happening.
ILM
October 18, 2024, 11:10am
5
share your latest code please
When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.Note: Backticks (`) are not single quotes (').
<article class="item">
<p class="falvor">Caramel Macchiato</p><p class="price">3.75</p>
</article>
<article class="item">
<p class="falvor">Pumpkin Spice</p><p class="price">3.50</p>
</article>
<article class="item">
<p class="falvor">Hazelnut</p><p class="price">4.00</p>
</article>
<article class="item">
<p class="falvor">Mocha</p><p class="price">4.50</p>
</article>type or paste code here
The above one is my code with i am facing issue i hope i have posted it in right way let me know if it needs further improvement.
ILM
October 18, 2024, 12:21pm
8
you missed this post it looks like
1 Like
oops really thanks a lot. One more doubt here were given class name flavor to diferent coffe with that the price goes to extreme right but how does the program know that those words are different coffee flavor?
AlexK
October 18, 2024, 12:31pm
10
they are in different articles with different prices
Different article or different class?? But each article has a flavor class and a price class is not it?
Or as new have alloted them a new class it gets separated from the price right?
Hello @SoumenDash7 !
The program registers the class for each of the flavor and the price.
The text, which is what we see between the opening and closing tags, provides us with the name of the flavor and the price of the coffee in that category.
Wishing you good progress on your coding journey.
yes so as they are two different class so they are separated right?
1 Like
yes, it is. But both class can be used together, to styles it’s element content. You will learn in next curriculum challenges about it.
yes ,thanks i have learned that in a CSS tutorial.
