Hey everybody! Hope you are all good!
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.
See the Pen
John Steinbeck Tribute Page by Madalene Aza ( @Madalena-Design)
https://codepen.io/Madalena-Design/pen/mYNJjW/ this tribute page is better than the old one . i loved it .
First, the color choices are good, then the responsiveness is fascinating too. I also like the smooth scrolling. It’s beautiful…
Thank you! I totally agree with you, it is much better than my first tribute page
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!
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.
Thanks for sharing. Cheers!
Awww thanks I am really glad to hear that! It is much appreciated
Responsive design can be challenging but with the amount of research, tutorials and extra courses, it can be done!
Great job! Not a single bad word on it
Thank you! It is much appreciated!
Very nice! Just one thing on improving for mobile:
Go to pen settings -> html -> insert the most common viewport meta tag -> Save & Close.
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
I’m no professional by any means but OMG! Girl, your page looks awesome. I love it, especially the responsiveness!
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!
Your tribute page looks amazing! Great work!
It’s always satisfying to see the final render of these hours coding !
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!
aye it is so good! keep up your work!
@Madalena.design It looks professional.
In mobile view the novel icons could be a bigger size. View the page on a small screened smartphone.
Simulation of iPhone 5 with the novel icons:
Learn how to simulate devices on this post:
Here’s a short vid I made on testing a pen on mobile (no real phone required, this only simulates it):
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.
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.