My Ayrton Senna's Tribute Page

Code Feedback
1

Hello!

For my first FCC project, I chose to make a tribute page to Ayrton Senna. The inspiration for the design comes from Senna’s helmet and jumpsuit.

I appreciate any feedback from you! Thanks!

3 Likes
2

Hi @pahbloo !

I think your page looks good.
I would review the lesson on giving links meaningful names

Wikipedia article is not that accessible.

Keep up the good work!

2 Likes
3

Thanks, @jwilkins.oboe! Choosing the link text has always been a difficult task for me… :roll_eyes:

What would be better?

By the way, thank you very much for your time and attention. People like you make our community flourish! :blossom:

2 Likes
4

hey @pahbloo your page’s structure looks great but i have 1 suggestion, your background looks too much attractive than that of your main content, try to use light colors for BG and attractive color for main content, best suggestion is use color style like freecodecamp, white BG with black content that looks really great, keep growing on your journey best wishes:)

1 Like
5

Thanks, @devchaudhary.dc84.dc , you’re right! The background was a little too much. But I was afraid of a very bland background for a F1-themed page. I changed the background, what do you think?

6

now it looks better but try to reduce lightness from red and yellow color it would be better:)

1 Like
7

Let’s start on the things you did great,

  1. good font-family: on the h1 AYTON SENNA /h2
  2. the color theme for the background section of the image is great
  3. rounded corners are great,
  4. the black text box with a caption about the picture is a nice touch.

the things to improve

  1. your top half of the page is well designed, and captures attention, But red is the strongest color, causing our brains to have confusion since we are unable to decide what to focus on. (stop signs and traffic lights are red for this reason)

2)The box shadows are a nice touch, under the yellow card it was properly done, however this means that the light source is from the top.
however when we look at the shadows on the main section, it’s light on the left and dark on the right, meaning now the light source is coming from the bottom. so this adds confusion and this makes the page un natural

  1. imagine if you had a
    container {
    display:flex;
    flex-direction:column;
    } and you had yellow card on the left, and the box with the paragraph on the right,
    textbox {
    font-size: 4em;
    max-width: 60ch;
    } this would make the text bigger, more spaced out, it would add space allowing the user to easily read the content your presenting.

  2. Your second text box, has the tittle in a smaller font then the content, which should be switched around because when I first read it, I wanted to read the bold text over title of the text

  3. as mentioned before, you could make your link more accessible by Find out “a” more about Ayrton Senna “/a” as well as it shouldn’t be in the background and should be brought to the fore ground and in bigger text. bringing attention and importance to the person at hand.

Summary, the luminance of the page throws things off, which if fixed would be 10x better. I’d recommend following the rule of 1 bright color per page. So if you decided on yellow, pick that to bring attention to something important and then surround that with a color that’s easy on the eyes, so people don’t get eye strain.

here is my take on the tribute page https://codepen.io/cogentmedia99 feel free to check it out and give suggestions if you think somethings a miss.

1 Like
8

I like this one :grinning:

1 Like
9

I changed the red to a darker shade. For the yellow in the header, I wouldn’t like to change it, as the colors of Sena’s helmet are really iconic. So I put a gradient on it, similar to the curvature of the helmet. I liked the result, what did you think?

10

Thank you for your suggestions! I fixed the colors and, mainly, the shadow. I think I got it now.

After thinking about it a lot, I decided not to change the layout. First, the metaphor was about Sena’s helmet (yellow) and jumpsuit (red), and a two-column layout would dilute that. Second, and perhaps the most relevant, my tribute page doesn’t have much content, and a single column fits better here.

Finally, the small title in the second text box is as intended. I want people to see the content first and, if they don’t understand what it is about, they can consult the text of the paragraph.

I liked your tribute page, especially the use of white space. Two things to improve, in my opinion:

  1. The image caption. There appears to be a blank space below the image, as it has the same color as the page background. Two possible alternatives:
    a. Change the background color of the legend.
    b. Place the shadow on the image only and leave the caption below the shadow.

  2. Mobile support. Your page looks great on the desktop, but there is a lot of padding and margins for mobile devices. The fonts in the titles are also very large. I like to use Firefox Developer Edition. It has an option to facilitate the work on responsive web designs, just type Ctrl + Shift + M.

Again, thanks for your suggestions! Your point of view made me rethink my design choices, I appreciate this! :yum::+1:

1 Like
11

After looking at the revisions you made, the website looks great!

1 Like
12

keep up the good work
great choice
i am a fan of Senna

1 Like
13

Hey @pahbloo now it looks great, always keep in mind that your content should be more attractive than that of your background and great job done by you on this page​:heart: keep growing :heart:

1 Like
14

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.