Tribute Page Complete - Advice and/or tips would be greatly appreciated

Code Feedback
1

I did not want to go to bed until this was complete, but here it is. Hit me with all the tips you got lol.

2

Hi
this code is more readable in an external css (in codepen the css tab):

HTML:

<style>
  body{
    background-color: orange;
  }
  
   .coral-background {
    background-color: coral;
     box-shadow: 10px 0 10px rgba(0, 0, 0, .8),
             -10px 0 10px rgba(0, 0, 0, .8);
     
  }
  

  .white-background {
    background-color: white;
     box-shadow: 10px 0 10px rgba(0, 0, 0, .8),
             -10px 0 10px rgba(0, 0, 0, .8);
  }
  
  .corners {
    border-radius: 25px;
    width: 1140px;
    height: auto;
  }
  
  .corner2 {
    border-radius: 10px;
    width: 100%;
    height: auto; 
  }
  
    .corner3 {
    border-radius: 10px;
    width: 100%;
    height: auto;
  }
  
    .corner4 {
    border-radius: 10px;
    width: 100%;
    height: auto; 
  }

  .p1 {
    margin-top: px;
  }

  
</style>

This code is not correct:

<h1>The Man behind the number 35</h1>
<h5>"Hard Work Beats Talent when Talent Fails to Work Hard"</h5>

Do not use lower levels to decrease heading font size: use the CSS font-size property instead.
Avoid skipping heading levels: always start from <h1>, next use <h2> and so on.

Cheers and happy coding

3 Likes
3

Thanks for this advice man. I will go ahead and edit this and idk why I did half html and the other half css lol. Knowing that css is the better option.

1 Like
4

I could be wrong, but it seems odd that you created a class for each paragraph but made those classes the exact same thing. That seems like something you would instead use unique IDs for. From an aesthetic POV, you also might want to make use of padding.

1 Like
5

I wanted to break and space the paragraph, if there’s another way to do that please let me know.

6

That’s what the <p> is for – if you change it so that instead of corner2, 3, 4, you just have corner, and then each <p> has the class of “corner” you get the same effect.