Address text issue

HTML-CSS
1 
hi. doing the design a cafe menu. not liking my address class selector. what am i doing wrong. why is it not passing. so pasting the error, my html code and my css and the link to the step. can any one help. did retype the code and also reset the lesson. using visual studio code. so did copy and paste to the online editor. so, then just tried typing it in the editor. not liking it. blind and using a screen reader.
marvin.
ps: pasting the error, and my code and the link to the step below.

Sorry, your code does not pass. Hang in there.

Your .address element should have the text 123 Free Code Camp Drive.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="Styles.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cafe Menu</title>
</head>    
<body>
<div class="menu">
<main>
<h1>CAMPER CAFE</h1><p class="established"><i>Est. 2020</i></p>
<hr>
<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>
<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>
<address>
<p class="address"><a href="https://www.freecodecamp.org" target="_blank">Visit our website</a></p>    
<p class="address">123 Free Code Camp Drive</p>
</address>    
</footer>
</div>
</body>
</html>


    

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

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

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

                h2 {
font-size: 30px;
                }

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

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

                .established {
                    font-style: italic;
                }

    body {
        font-family: sans-serif;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        padding: 20px;
        background-image: url("https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg");
    }               
                                        
    .menu {
        width: 80%;
        max-width: 500px;
                    margin-left: auto;
                    margin-right: auto;
                    padding: 20px;
                            }

    .flavor, .dessert {
        text-align: left;
                    width: 75%;
    } 
    
            .price {
        text-align: right;
        width: 25%;
        font-size: 18px;
    }

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

    /* footer */
    footer {
        font-size: 14px;
    }

    address {
        font-style: noarmal;
    }

    .address {
            margin-bottom: 5px;
    }
    }

    a {
        color: black;
    }

    a:visited  {
                    color: black;
    }

    a:hover {
        color: brown;
    }

    a:active {
    color: brown;
    }https://www.freecodecamp.org/learn/full-stack-developer/workshop-cafe-menu/step-61
2

Okay, my friend, I’ll explain to you exactly what the error was and how to correct it, as if I’m explaining it to you step by step.

Look, my friend, your problem is very simple, and this happens a lot when you’re just starting to learn. freeCodeCamp is very precise in what it asks for, and that’s exactly what happened here.

What was the mistake you made?

The mistake was in your HTML code, specifically in the <footer> section (the bottom part of your page). You had written it like this:

<footer>
  <address>
    <p class="address"><a href="https://www.freecodecamp.org" target="_blank">Visit our website</a></p>    
    <p class="address">123 Free Code Camp Drive</p>  
  </address>  
</footer>

The problem here, my friend, is that you gave the class="address" to two paragraph (<p>) tags inside the <address>. The freeCodeCamp challenge specifically wanted the text “123 Free Code Camp Drive” to be present in a certain way, and when you give the same class to two paragraphs, the test might get confused or not find exactly what it’s looking for. It wants that address class to be for the element that actually contains the address, directly, or if it’s a paragraph, it should be only the address paragraph.

What’s the correction and how do we do it?

The correction is very simple. We’re going to remove class="address" from both of those paragraphs. Why? Because the <address> element itself is what indicates that it’s an address. And often, freeCodeCamp in these steps wants you to put the required text inside a regular <p> or even directly inside the <address> tag.

Here’s the corrected code you should use:

<footer>
  <address>
    <p><a href="https://www.freecodecamp.org" target="_blank">Visit our website</a></p>  
    <p>123 Free Code Camp Drive</p>
  </address>
</footer>

Explanation of what we did:

  1. You had: <p class="address"><a ...></a></p>
    Now you have: <p><a ...></a></p>
    Reason: freeCodeCamp doesn’t want the address class on this specific paragraph. It just wants the link.

  2. You had: <p class="address">123 Free Code Camp Drive</p>
    Now you have: <p>123 Free Code Camp Drive</p>
    Reason: Again, it’s the same idea. The test wanted the text “123 Free Code Camp Drive” to be present, and it wasn’t necessarily looking for it inside a paragraph with the address class, because it might be expecting that class on the <address> element itself or it wants the text to be inside <address> without a paragraph, or a regular paragraph.

In summary:
The requirement in this step is for the address text “123 Free Code Camp Drive” to be available within the scope of the <address> element. By removing the class="address" from both paragraphs, we precisely meet the test’s requirements, while keeping the code clean and logical, as <address> is the semantic element for an address.

Try this code in your freeCodeCamp editor again, and hopefully, the test will pass successfully!

3

hi. took out the class from the address. but now getting this error. how to fix?
sorry, trying my best.
marvin.
ps: pasting the error below. and do have the class established.
marvin.
Sorry, your code does not pass. Keep trying.

You should set the class of the p element to established.

4

hi, says the address is not there and not passing. so how to get this to pass. will paste the error message.
marvin.
Sorry, your code does not pass. Keep trying.

You should set the class of the p element to established.which i have in the html.

5

that is not an issue with the address

what step are you actually on?

are you sure you pasted the right message?

that was the error for step 61

6

hi. did do control e.maybe jaws and google chrome are having a issue. sorry.Preformatted texthi. okay heres the error message and also will paste the step i am up to. also my html and css code.
marvin.
ps: pasting below.

Sorry, your code does not pass. Keep trying.

You should set the class of the p element to established.

Cafe Menu

CAMPER CAFE

Est. 2020

Coffee

French Vanilla

3.00

Caramel Macchiato

3.75

Pumpkin Spice

3.50

Hazelnut

4.00

Mocha

4.50

Desserts

Donut

1.50

Cherry Pie

2.75

Cheesecake

3.00

Cinnamon Roll

2.50

Visit our website

123 Free Code Camp Drive

h1,h2, p { text-align: center; } 
            h1, h2 {
                            font-family: Impact, serif;
            }

            h1 {

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

            h2 {

font-size: 30px;
}

            hr {

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

            .bottom-line {

margin-top: 25px;
}

            .established {
                font-style: italic;
            }

body {
    font-family: sans-serif;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    background-image: url("https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg");
}               
                                    
.menu {
    width: 80%;
    max-width: 500px;
                margin-left: auto;
                margin-right: auto;
                padding: 20px;
                        }

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

        .price {
    text-align: right;
    width: 25%;
    font-size: 18px;
}

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

/* footer */
footer {
    font-size: 14px;
}

address {
    font-style: noarmal;
}

.address {
        margin-bottom: 5px;
}
}

a {
    color: black;
}

a:visited  {
                color: black;
}

a:hover {
    color: brown;
}

a:active {
color: brown;
}
7

hi, look at the previous code which i posted in a post to some one else who explained that to me. or maybe have to edit the code. or the post. did do control e first before posting. sorry. maybe jaws and google chrome is having a fit or an issue.
sorry. trying my best to go with the guidelines.
sorry..

8

if you are working with the address the the error " You should set the class of the p element to established ." can’t be the right one

can you clearly state on what step you are on?

you opened this step for the address, if you are still on step 61 you have the other topic for that