Tribute Page - FMJ - Feedback Floodgates!

Tribute Page - FMJ - Feedback Floodgates!
0

#1

Hey There fellow Devs!

I have just completed my first project on FCC and am now opening the feedback floodgates on it!

I’m happy to receive any feedback you may want to share. (as long as it’s constructive lol)

Thanks for your time people!

https://codepen.io/Daniel-May/pen/rZqJbe <<<< Project Here

Dan M


#2

You asked for it! A few design elements I would change:

  • Pure black backgrounds remind me of early 2000’s sites. I’d change it to some off-black color, like #303040 for example, to make it look more professional.
  • Pure white text, also, looks ‘uncooked’ if you know what I mean. I’d make it slightly grey.
  • When the header turns black it looks like it disappears briefly, which, in my opinion, a header shouldn’t do, even as part of animation.
  • I’d give the image a bigger margin-bottom to distance the caption more.
  • Perhaps resize the image caption so that it fits neatly under the image and doesn’t stick out. Maybe also give it darker grey color so that it doesn’t grab attention so much.
  • The way Floyd’s image sits in the middle humbly, surrounded by lots of white space, is also very late 90’s / early 2000’s look. Nowadays the trend is to create “hero images” that stretch the whole width of the viewport, and are followed by clearly separated main content.
  • Blue links don’t look good on black backgrounds.

Hope that helps.


#3

Hi there,

When I opened your project the first time I had a good feeling about it :slight_smile:

I like the font you have chosen for the h1 and h2 > good job.
I also think the colors for the h1 keyframes are good. Fitting well with
the black background color > but indeed early 2000’s has been mentioned :wink:

The link at the bottom has a blue color. This I would change.

The container with the gloves looks very 90’s… sorry for that :slight_smile:

What I would do to get modern website design inspiration is to check websites like:

https://www.awwwards.com/

If we try to make things similar to those sites than I think we are hitting the
right design way.

Hope this helps,

Pascal-Bilal


#4

I’d loop your color animation on h1, so it doesn’t reset.
Also, “some of the buttons” don’t work. is it intended?


#5

Thanks for the feedback!

I completely get what you are saying regarding the look and feel, it does look a bit dated in terms of colour combos and the img elements current positioning.

Thanks again for the tips you shared they are great!

Dan M


#6

Thanks for your feedback!

I also liked the header fonts as it holds its style well even if you adjust the letter spacing.
Credit to Google fonts for that one > Julius Sans One.

Ah those gloves, even when I added them I had the same feelings. I think my design brain is stuck in the 90s at the moment lol

I checked out the link you shared and that does seem to be great resource for inspiration, thank you so much for your time and tips!

Dan M


#7

Thanks for the feedback !

Do you know which animation property would achieve that? I currently have the animation set on an infinite loop but I too did think it would look better without the animation resetting and making the header disappear.

Thanks for pointing out the buttons to me, that was my error as I forgot to add the Javascript to the Codepen JS console. Now fixed!

Sidenote - Sorry for the individual responses, I now realise that you can reply to all via one post.

Always Learning!

Dan M


#8

I’m not sure about special property, but animation usually loops with last frame=first frame. So it depends on how do you want to loop it. If it should go back to black after the blue part, then just add another step with black, so it will go from black to blue and back to black. If you don’t want it to go back to start, i’d make two animations, first one from black to red and the second one from red to blue and again to red.


#9

You’re welcom Daniel :slight_smile:

If you want and have the time can you also take a look at my tribute page
and give a feedback?

Thanks in advance :grinning: