Feedback on Tribute Page - Jürgen Klopp. ⚽ 😉

Code Feedback
1

Hi everyone! :wave: I’d like to receive some feedback on the tribute page I made about Liverpool manager Jürgen Klopp. :soccer:

https://codepen.io/arjus/pen/ZEYMppQ

My goal this year is to complete the bootcamp after a few failed attempts. Therefore, I want to take advantage of my love for football as a real push to make this website a work in progress, until it becomes a pleasant experience for any football lover. I made it in Spanish for time reasons, but I will (try to) translate it into English.

While advancing in the bootcamp, the next step is to add animations and short videos about tactics and strategy, to show the evolution and complexity of Klopp’s work. I want to challenge myself and make coming to the website a pleasant experience, even for people not interested in football.

Any feedback :pinching_hand: will be much appreciated and I will answer everyone’s comments :slight_smile:

Thanks for your time guys! :smile:

2

it looks good on labtop but it have some issues on phone i think

3

Looks good. Love the gradient in the accomplishment section.
I see you have added a media query where you adjust the margin according to width. You could try and add more to this, so that the text is proper handled on phone as well.

4

Thank you Amin, I’ll check it out!

1 Like
5

Thanks for your time Kristian, I appreciate your feedback. It is very helpful. :muscle:

6 
body {
   margin: 0;
}

This will get rid of the white space around the main content :slight_smile:

7

Hi @arjusgit, your page looks good. Some things to revisit;

  • On using codepen. codepen only expects the code you’d put within the <body> </body> tags in HTML. (No need to include the body tags). For anything you want to add to <head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • The link to your font would go in the box labeled ‘Stuff for <head>’
  • codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
    • in CSS you cannot declare the property line-height on its own
  • Review the lesson about giving meaningful text to links
8

Is that simple? :open_mouth: I’m embarrassed :smile: thank you Liam!

9

Thank you Roma, these tips are very helpful! I think it looks better now on phones.

10

@arjusgit, once again I’d say to use the validator in the CSS section. You have some errors there that affect how your page displays.

11

@Roma My bad! I did it and I even tested it on mobile. It worked. But I don’t know how I reversed the changes. I have to pay more attention. Thank you again!