Create a Horizontal Line Using the hr Element

HTML-CSS
1

Tell us what’s happening:

Your code so far


<style>
  h4 {
    text-align: center;
    height: 25px;
  }
  p {
    text-align: justify;
  }
  .links {
    text-align: left;
    color: black;
  }
  .fullCard {
    width: 245px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 10px 5px;
    padding: 4px;
  }
  .cardContent {
    padding: 10px;
  }
  .cardText {
    margin-bottom: 30px;
  }
</style>
<div class="fullCard">
  <div class="cardContent">
    <div class="cardText">
      <h4><del>  Google</del>Alphabet</h4>
  <hr 
      <em><p> Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</p></em>
    </div>
    <div class="cardLinks">
      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
    </div>
  </div>
</div>

Your browser information:

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

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element

1 Like
2

The hr tag should come between the title and the paragraph.
help me

3

You need to close it e.g. <hr>

2 Likes
4

Just Use <hr> between <h4> and <p> tags

1 Like
5

i have same issue and it didnt work! why ?

1 Like
6

I reset the lesson and did

between

and

and it works.

7

I am also having troubles getting past this lesson.

  1. Your code should add an hr tag to the markup. passed this one
  2. The hr tag should come between the title and the paragraph. but failed this one?

I cant find any tips on what I am missing, or if its an error on the site.

Screenshot%20(36)
Screenshot%20(36)522×645 8.9 KB

2 Likes
8

Use

Google was founded…


This worked for me, I guess their test case uses this order.
EDIT: didn’t realize using HTML formats actually works on comments…
but switch the order of the paragraph and emphasis (use em before p)

9 Likes
9

Lol, yes the HTML surprised me as well, when posted original question. That is why you see the screenshot. Thank you for your response, fixed the issue.

10

After you put the < HR> in and its still not working try to swap the < p >< em > to < em >< p > in the paragraph section.

11 Likes
11

After you put the < HR> in and its still not working try to swap the < p >< em > to < em >< p > in the paragraph section.

15 Likes
12

Thanks! This worked for me!

13

Yes , wrapping

tag in worked for me.

14

I don’t understand why let em tag wrap p tag can resolve this quiz.
is It a error/bug of this challenge?

15

yes it is a bug in the challenge

2 Likes
16

Oh. I see. Someone reported this bug.

17

Reset all the code. Then, to swap the < p >< em > to < em >< p > in the paragraph section. then, use hr tag between h4 and p it will work.

4 Likes
18

Thanks a lot for a solution… Work for me to here…

19

hi asheavenist,
it’s my pleasure

20

Thank you for that comment!

1 Like