First project - David Attenborough tribute page. Feedback and suggestions welcome!

Hi all, I’ve just done my first foray into FCC and completed my tribute page!

I wanted to break away from the standard static image page and add some animation and structure to it, with a dash of modern-ish looking design.

I kind of broke away from FCC’s actual requirements, but please me know what you think!

7 Likes

David, I like it.

I just can’t see his whole face in the image. I noticed you gave it a max-height of 50%. Maybe view this on different screens. On my lap tap I only see from the bottom of his nose to his forehead. Maybe increase the max-height.

I hope that works.

Good work.

1 Like

Appreciate it, what resolution are you using?

1 Like

1366 X 768 is that the problem?

1 Like

I think it should be a bit better now, but really I should try add some media queries maybe

1 Like

Now I see to the bottom of his lip.

1 Like

Ugh, I’m using the Developer view and it shows fine when I change the resolution, the only issues are the mobile ones. I’ll try and get stuff done with media queries to fix it!

1 Like

When I decrease the screen size it looks great.

1 Like

Well done! I like how you put everything together. It is simple and well executed by having a flow and spacing everything accordingly

1 Like

Hello,

This is very nice and pleasing modern design.

1 Like

You fixed it.

I don’t have internet or hot spot right, but I really want to look at your code.

1 Like

Wow! That looks amazing, I like your sense of layout and color.

1 Like

All I did was change the .hero-image height to 70% instead of 50%! Thanks for the suggestion!

1 Like

Thanks! I still need to work on media queries but I think it’s time to move on before I spend too much time on this first project

2 Likes

I have noticed that sometimes, the image brightness on the timeline images doesn’t darken on hover, (on Chrome) but once I go into incognito it works fine.

Anyone aware of this, is this a Chrome bug?

1 Like

Thanks! I didn’t want to use white, because my headers already have so much white, but I also wanted something a little more subtle for the background, so thought a nice cream-ish colour would do!

Is the darkening timeline images on hover working well for you?

1 Like

I think this is one of the best looking tribute pages I have seen recently. But what I like the most is how well documented your code is. Figure out the image issues when viewing mobile and you have a winner.

1 Like

Try it now, I’ve added some media queries!

1 Like

Very nice,

Not being picky, but The hover effect on the timeline should also be refined in the media queries. When I click on one of the elements the hover effect pops up and back down too fast to really read what it says. I think if you changed the transition time of that effect to something like one second for mobile that would resolve the issue.

You have great work and I figure it is no benefit to tell you that it is awesome. Rather it would be more help to dig deep and find things that could be better. (although you do make that a difficult task :+1:)

2 Likes

That’s the kind of advice I need, so lay it on me, I appreciate it! I changed the hover timing for mobile, but when I click on it, the text stays in place until I click off of the image, so I don’t see the timing issue you mean exactly, could you elaborate?

2 Likes