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

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

#1

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!


#2

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.


#3

Appreciate it, what resolution are you using?


#4

1366 X 768 is that the problem?


#5

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


#6

Now I see to the bottom of his lip.


#7

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!


#8

When I decrease the screen size it looks great.


#9

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


#10

Hello,

This is very nice and pleasing modern design.


#11

You fixed it.

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


#12

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


#13

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


#14

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


#15

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?


#16

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?


#17

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.


#18

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


#19

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:)


#20

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?