New and (hopefully) Improved Tribute Page!

Hey everybody! Hope you are all good! :smiley:

While I have been doing other projects, I thought I do another tribute page project on the side, but this time, with an attempt to advance my skills on design and functionality.

For this project, I did a tribute on John Steinbeck. Hope you all like it, but your feedback is greatly appreciated especially on the responsive design.

Enjoy!

See the Pen John Steinbeck Tribute Page by Madalene Aza (@Madalena-Design) on CodePen.

55 Likes

https://codepen.io/Madalena-Design/pen/mYNJjW/ this tribute page is better than the old one . i loved it .

4 Likes

First, the color choices are good, then the responsiveness is fascinating too. I also like the smooth scrolling. It’s beautiful…:+1:

2 Likes

Thank you! I totally agree with you, it is much better than my first tribute page :grin:

2 Likes

Hey! Thank you very much! I am really happy to hear that you like the colour choices because they were one of my concerns! So, that makes me relieved! :relieved:

2 Likes

Wow, that is really good. I have only just reached responsive web design principles but seeing your tribute page gave me a lot of inspiration. Can’t wait to learn the stuff you have used with scrolling and hover animations.

The color as well as the layout is very pleasing to the eye and easy to follow through. :slight_smile:
Thanks for sharing. Cheers!

2 Likes

Awww thanks I am really glad to hear that! It is much appreciated :blush: Responsive design can be challenging but with the amount of research, tutorials and extra courses, it can be done! :smile:

2 Likes

Great job! Not a single bad word on it :smile:

2 Likes

Thank you! It is much appreciated! :blush:

1 Like

Very nice! Just one thing on improving for mobile:
Go to pen settings -> html -> insert the most common viewport meta tag -> Save & Close.

2 Likes

Hey! Thank you for the advice! I did the process as followed and now have added the viewport meta tag. Will be doing this from now on :blush:

2 Likes

I’m no professional by any means but OMG! Girl, your page looks awesome. I love it, especially the responsiveness!

2 Likes

Aww thank you! I am happy to hear to that! If anything, I am definitely no professional myself, especially with the responsiveness, to achieve what I have designed is hours of tutorials and research but I am happy to make it in the end!

2 Likes

Your tribute page looks amazing! Great work!

2 Likes

It’s always satisfying to see the final render of these hours coding !:slightly_smiling_face:
Oh! by the way can you take a look at this project : https://codepen.io/Dyerlin/pen/zQVoVv, and tell me what you think about it. Please, be brutally honest!

2 Likes

aye it is so good! keep up your work!

3 Likes

@Madalena.design It looks professional.
In mobile view the novel icons could be a bigger size. View the page on a small screened smartphone.

4 Likes

Simulation of iPhone 5 with the novel icons:

Learn how to simulate devices on this post:

4 Likes

This site is fantastic, I really like the way the background image shifts on the scrolldown - I personally have never seen that before. Very visually pleasing and well-presented.

The only thing I can see is that downward browser scalability width breaks at 308 pixels. Whether that matters or not would depend on your target audience.

I admire what you have done here, and this gives me an idea of why javascript is worth learning just up the road.

3 Likes

That’s very easy to do. You just have to set the image background with background-image in CSS, and then set background-attachment: fixed. Very easy. It is a nice effect, indeed.

4 Likes