Product landing page - Blue Oranges

Code Feedback
1

Hey guys!

I’ve just finished the product landing page task. I’d love to get your feedback on it :slight_smile:

Link: https://codepen.io/itsellej/full/ZjPQBw/

Thanks,
Elle

1 Like
2

Looks great, good job.

  1. Your hero image is pretty big 1.75MB, if i half the size/resolution and save at 65% compression rate, the size is only 92KB.

  2. Your form/input looks fine, maybe just a little bland. I know styling forms can be a bit of a pain, but it’s good practice. See if you can give it more visual appeal. No matter how good them blue oranges are, the look of the form might just make potential customers more likely to sign up.

  3. I might make the footer icons a bit bigger and space them apart a little more (i know it’s your personal stuff so maybe you just didn’t want them to “interfere” too much).

  4. This is totally just design opinions. Giving your sticky nav just a hair of opacity (0.90) makes it looks less “in the way” when it is on top of elements on the page. I would also just give it border-radius left-top and left-bottom so it sits flush against the left edge.

border-top-right-radius: 2rem;
border-bottom-right-radius: 2rem;

I think it might be fun to try and incorporate the orange color as a secondary, somehow.

Just to show what i mean:

<h1>Blue <span class="orange">Oranges</span></h1>

.orange {
  color: #daa900;
}

Maybe as a hover color for your links?

.nav-link:hover {
    color: orange;
}
1 Like