Build a Bookstore Page - Step 18

HTML-CSS
1

Tell us what’s happening:

gys i need help i did evey thing as he asked and already post hep before on that issue with no solve for that issue even i continued to the next step but that step nothing work with, i need to solve it or to speak with one from support team if that available

Your code so far


<!-- User Editable Region -->

<h1>XYZ Bookstore</h1>
<p>Browse our collection of amazing books!</p>
<div class="card-container">
  <div class="card" id="sally-adventure-book">
    <h2>Sally's SciFi Adventure</h2>
    <p>This is an epic story of Sally and her dog Rex as they navigate through other worlds.</p>
    <button class="btn">Buy Now</button>
  </div>
  <div class="card" id="dave-cooking-book">
    <h2>Dave's Cooking Adventure</h2>
    <p>This is the story of Dave as he learns to cook everything from pancakes to pasta, one recipe at a time.</p>
    <button class="btn">Buy Now</button>
  <div class="card-container"></div>
    <p>Review your selections and continue to checkout.</p>
  <div class="btn-container"></div>
  </div>


<!-- User Editable Region -->

Your browser information:

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

Challenge Information:

Build a Bookstore Page - Step 18

2

you don’t need the support team

please reset the step to restore the starting code

now, find the div element with class="card-container". Do not create a new one, find it.

Now find its closing </div> tag. Once you found that, add the new elements after the closing tag

1 Like
3

said that i should put the p element below the calss of card-cordinator, i had already removed the closing tag for div with the card-cordinator

<div class="card" id="sally-adventure-book">

  <h2>Sally's SciFi Adventure</h2>

  <p>This is an epic story of Sally and her dog Rex as they navigate through other worlds.</p>

  <button class="btn">Buy Now</button>

<div class="card" id="dave-cooking-book">

  <h2>Dave's Cooking Adventure</h2>

  <p>This is the story of Dave as he learns to cook everything from pancakes to pasta, one recipe at a time.</p>

  <button class="btn">Buy Now</button>

</div>

<p>Review your selections and continue to checkout.</p>
4

please reset the step, you should not remove any closing tag from the starting code

5

i did the reset and followed instructions but yet useless

XYZ Bookstore

Browse our collection of amazing books!

<div class="card" id="sally-adventure-book">

  <h2>Sally's SciFi Adventure</h2>

  <p>This is an epic story of Sally and her dog Rex as they navigate through other worlds.</p>

  <button class="btn">Buy Now</button>

</div>

<div class="card" id="dave-cooking-book">

  <h2>Dave's Cooking Adventure</h2>

  <p>This is the story of Dave as he learns to cook everything from pancakes to pasta, one recipe at a time.</p>

  <button class="btn">Buy Now</button>

</div>

  <p>Review your selections and continue to checkout.</p>

<div class="btn-container"></div>

step requires

Below the element with the class card-container, add a new p element with this text:

Example Code 
Review your selections and continue to checkout.

Below the p element, create a div element with the class attribute set to btn-container. This container will group your navigation button elements.

instructions

The newly added p element should be below the element with a class of card-container

6

can you please format your code? I can’t see what you have written

When you enter a code block into a forum post, please precede it with three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add the backticks.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

7

it looks like it’s still inside the card-container element, not after it, that closing tag is for the element with id="dave-cooking-book", you should have a closing tag after that that is the closing tag for card-container

8

did as you said but brought me that msg

Sorry, your code does not pass. Keep trying.

The newly added p element should be below the element with a class of card-container.

9

please post your updated code

10 
<body>

  <h1>XYZ Bookstore</h1>

  <p>Browse our collection of amazing books!</p>

  <div class="card-container">

    <div class="card" id="sally-adventure-book">

      <h2>Sally's SciFi Adventure</h2>

      <p>This is an epic story of Sally and her dog Rex as they navigate through other worlds.</p>

      <button class="btn">Buy Now</button>

    </div>

    <div class="card" id="dave-cooking-book">

      <h2>Dave's Cooking Adventure</h2>

      <p>This is the story of Dave as he learns to cook everything from pancakes to pasta, one recipe at a time.</p>

      <button class="btn">Buy Now</button>

    </div>

  </div>

<p>Review your selections and continue to checkout.</p>

  <div class="btn-container">

  </div>

why the p element for

Review your selections and continue to checkout.

not considered as a successful step, why instructions say that my phrase has a typo while i wrote it as required, please need someone to write the code fully to see where the wrong is cuz already that the third time to ask about it and already i tried all available solutions

11

please post a link to the challenge

12

how to post a link for the challenge

13

you copy it from the browser url bar, and paste it in a post here
alternatively, use the help buttom

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Help button located on the challenge. This button only appears if you have tried to submit an answer at least three times.

image
image622×306 7.96 KB

The Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

14

I merged your two topics together

15 
<h1>XYZ Bookstore</h1>

  <p>Browse our collection of amazing books!</p>

  <div class="card-container">

    <div class="card" id="sally-adventure-book">

      <h2>Sally's SciFi Adventure</h2>

      <p>This is an epic story of Sally and her dog Rex as they navigate through other worlds.</p>

      <button class="btn">Buy Now</button>

    </div>

    <div class="card" id="dave-cooking-book">

      <h2>Dave's Cooking Adventure</h2>

      <p>This is the story of Dave as he learns to cook everything from pancakes to pasta, one recipe at a time.</p>

      <button class="btn">Buy Now</button>

      <p>Review your selections and continue to checkout.</p>

    </div>

    <div class="btn-container"></div>

  </div>
16

I’ve edited your post to improve the readability of the code. When you enter a code block into a forum post, please precede it with three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add the backticks.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

17

this is not after the element with <div class="card-container">, you put it inside the book card, at least before it was after it, even if still inside the card-container element

18

the model it self put that phrase at the end while every thing else is before it

19

“Review your selections and continue to checkout.” needs to go at the end, yes, but you need to add it yourself, step 18 starts without this sentence

20

what step you talk about, that`s what step 18 ask for

Step 18

Below the element with the class card-container, add a new p element with this text:

Example Code 
Review your selections and continue to checkout.

Below the p element, create a div element with the class attribute set to btn-container. This container will group your navigation button elements.