Tribute Page Complete! Feedback Welcome!

Code Feedback
1

Hey all, just finished my first project on the site. I kept it simple as I didn’t want to get quagmired in more difficult items. Any feedback welcome! Thanks!

  • Darwin
2

So you’re going to have problems with that one. all your visual elements need to be in the body tag. The head is where link tags, or page titles, or the like are placed.

In the case of codepen, they already create your head and body tags, so you can simply start coding the visual elements.

A structure you might want to try:

<header>
  The stuff you want to be at the top of the page, the header stuff? Page title, image, main quote... all that can go here.
</header>
<main>
  Use this as you would a div, you can give it a class or an id or whatever. Place your main content here.
</main>
<footer>
  all your footer stuff here, just as you have.
</footer>

Also, I might suggest you give that main section (or in your case, your #tribute-info) a background color of white, maybe with an opacity. See that page background, but faintly.

1 Like
3

Wow, didn’t expect such a rapid response! Thanks! I’ll definitely take your advice and move my visuals to the body tag as well as including a background color for the tribute info. Much appreciated!

4

Hello!
I would like to give my personal suggestion. The main content need to be easy to read, so I’ve added a clear background color, and to stand out a little bit more I’ve added a box-shadow, a border-radius and some padding.

#tribute-info {
  padding: 2em;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  border-radius: 25px;
  background-color:#eee;
}

I applied the same strategy for the footer

h6 {
  display: block;
  background-color: #111;
  color: #eee;
}
1 Like
5

Wonderful advice, thank you! I am going to re-post this with the some of the changes you and another member offered.

6

Re-posting my Tribute Page with changes after receiving great feedback. I struggled with centering my footer after making the changes. I eventually got it centered with margin settings but I am unsure whether the code will hold if I make any changes to the footer text.

Again, thanks to the people who commented!