Build a Bookstore Page - Step 15

HTML-CSS
1

Tell us what’s happening:

I have moved the right code around, I have put the code into the spot it is asking but it will not work. Nothing I do will work, can someone offer some advice?

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>
    <p> Review your selections and continue to checkout. </p>
    <div class="btn-container" </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>



<!-- User Editable Region -->

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.6 Safari/605.1.15

Challenge Information:

Build a Bookstore Page - Step 15

2

Hi there and welcome to the forum!
Your p and div elememts go after the last div in the given code, see the scheme:

<div class="card-container">
...content...
</div>
...your p element goes here...
...your div with the class "btn-container" goes here...

So please reset the lesson and try again

3

Hmm, I just reset it and it still will not work.

4

Show your latest code, please

How to do:

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 (').

5 
<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>
  <p> Review your selections and continue to checkout. </p>
  <div class="btn-container"</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>
6

I see no changes at all, did you share the right code?

7

Wasn’t the p and div element supposed to go after the after the button class element? I thought that was what was supposed to be changed

8

No, you shouldn’t change the given code

9

So im confused, is the placement of the p and div element incorrect? I thought it was supposed to go after the last “/div” in the class container.

10

Nope, it is supposed to go after the closing div of card-container, on the 15th line of code

11

So like this? I moved it to the bottom and it won’t take it.

<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="btn-container"</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>
12

you have the element with btn-container twice, and the syntax is wrong, you must always close a tag

13

Very good, but:

  1. Unclosed opening tag, the 9th line
  1. Missing closing div here, between the lines
  1. Unclosed opening tag again, the 17th line
14 
<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>
    
<p>Review your selections and continue to checkout. </p>
  <div class="btn-container" </div>
15

Option 2 and 3 are still not fixed

16

It was option two, I didn’t know I had to add a second closing. Thank you.

1 Like