Product Landing Page (Umbrella Corps)

[dooing]

Again, my second time finishing Product Landing Page project.
This time I was inspired by Resident Evil series’ Umbrella Corps.
Hope you guys enjoy it, and please feel free to leave any new ideas.

My Codepen

[codewright]

Hi @dooing,
I like your page, it looks good. Nice and clean.
A couple of suggestions’, I would add a company name to navbar as well as Resident Evil font. But that’s just me.
I attached screenshot of eg.

Thanks,
Hal_Jordan

[lasjorg]

• I would give the form section a little more love.

• My suggestion is to avoid using ids for CSS and stick to classes. Keep your selector specificity as flat as possible. If all selectors are just single classes it is much easier to reason about the specificity.

• Look to make some reusable utility classes when possible.

.product-name, .product-image, .product-detail, .product-price, .buy {
  display: block;
  margin: 0 auto;
  text-align: center;
}

Might be a single class you apply as needed to elements.

.centering {
  display: block;
  margin: 0 auto;
  text-align: center;
}

• The html element does not have any default padding or margin, so you aren’t removing anything here.

html {
  margin: 0;
  padding: 0;
}

Remove the default margin on the body. Or use the * selector and remove all default margin and padding if you plan to change them all.

[dooing]

I can’t believe I completely forgot about the company name.
Added the font and did some tweacking, I think it looks even more authentic! Thanks

[dooing]

It’s my second run through Responsive Web and it’s just now that I’m getting hang of use of ‘class’ and ‘id’. Thanks for clearing things out for me.