Finished my product landing page! Feedback appreciated

Code Feedback
1

Hi,

So I’ve finally finished the landing page assignment. There are still a couple of things that I’d like to add. I’ve made the page mobile friendly but still need to learn a little more Javascript to add function to my drop-down menu.

For now, I feel like it looks alright, but feedback is always welcome.

Codepen Link: https://codepen.io/lenny-van-riel/pen/rqZQPX?editors=1100

Thank you

2

Nice Job ! I like the design and everything flows well.

When clicking nav item ‘Features’ it goes past the Features heading. Adding a little padding to the top of Features id should fix this. Also I would enlarge the facebook/twitter and linkedin icons with fa-lg or fa-2x. Other than that good job, keep it up !

3

Hey mate,

You made very good use of css-grid, the site is pretty responsive and it has a nice feel overall! =) The colourscheme is working well overall and with the logo. Any advice for coming up with a well-working colour scheme?

Couple of suggestions for further tweaking:

  1. As Danyl pointed out, i’d enlarge the fb/twitter/linked in icons.
  2. I like the clean and simple hover effects on the navbar and donate elements. Adding another hover effect to the download, Learn more and especially the submit button could be nice as well :]
  3. In the top section you have:
<h2>A different way to make games</h2>
<p>Godot provides a huge set of common tools, so you can just focus on making your game without reinventing the wheel.
<br>
<br>
Godot is completely free and open-source under the very permissive MIT license. No strings attached, no royalties, nothing. Your game is yours, down to the last line of engine code.</p>

I think the background-color (oceanblue) #028090 and the black font don’t combine to a great and well-readable contrast yet. It’s a small detail and easy to miss, but fortunately there are some good tools for checking contrasts (as I’ve just found out as well! :slight_smile: )
See: https://snook.ca/technical/colour_contrast/colour.html#fg=000000,bg=028090
or https://webaim.org/resources/contrastchecker/?fcolor=000000&bcolor=028090

White color font works much better with the background-color:
https://snook.ca/technical/colour_contrast/colour.html#fg=FFFFFF,bg=028090

It’s a minor detail but it helps to make this part look even nicer than it already is. =)

Good job and keep it up! :slight_smile:

4

Thank you for the help. I’ve made the changes you suggested and it’s a lot better :slight_smile:

5

Thanks, your response was very helpful. The link for contrast checker is super handy. I’ve made the changes you pointed out and I’ll certainly use this tool in future products. As for the color schemes - There are tons of sites that have some pre-organised color schemes. I like this one (link). It’s super easy to use, you just click until you find something you like :slight_smile:

1 Like
6

Hi nice project, I especially like how well organized the code looks. A couple things I would like to point out:

  1. I noticed you implemented a parallax effect using background-attachment fixed. I did the same with my last project and found out that mobile browsers usually disable background-attachment fixed because it is very processor intensive I believe was the reason. To fix this I came up with the following work around:

  • add a ::before pseudo element to the element you want to add the parallax effect on. Make it the same size as the parent container.

  • apply the background image to this ::before element.

  • apply position: fixed to the ::before element. You may have to play around with the z-index to prevent the it from overlapping other elements.

  1. I also noticed a note you left for yourself to make the hamburger responsive with js. I learned a way to save states using hidden checkboxes. I used this to make a number of elements on my previous project responsive without using js. This link describes the technique.

This is a link to my tribute page project I referenced earlier. I hope you don’t mind, I also forked your project and implemented the above solution so you could take a look. This link is to the forked project, I will only keep it up for few days. I marked the changes in the code I made by sorounding them with “EDIT”. Hope I was helpful.

1 Like