Vanilla CSS, Flex, Grid, Mobile-first, BEM, Responsive Landing Page

Community feedback

• 

  Nazar Holubovskyy•190

  @HA3IKPosted 12 months ago

  About the “list”: I think that this is not a semantically correct solution.

  Even if the H2 outline, at the current position, extends to the entire SECTION correct. I don't see the point of making the title, in the markup, a list item. H2 should be just a heading for the UL, not an item of it.

  SECTION > H2 + UL > LI*5
  

  I also saw that you have a duplicate ID linearGradient#a. You can easily fix this by simply declaring a generic SVG[height=0] somewhere separately on the page, it should work:

  <svg height="0">
    <defs>
      <linearGradient id="a"> ... </linearGradient>
    </defs>
  </svg>
  

  0
• 

  Nazar Holubovskyy•190

  @HA3IKPosted 12 months ago

  Hello, About “hero-image”.

  But 1st: it's a very nice effect u got 👍 I'd leave it 😅

  If you want to control this image within its position, you just need to disable its absolut position (make it position:static) THEN or change object-fit to "contain", or add overflow:visible.

  IF you plan to center everything in one column (like on the mob.): .hero__body { margin:0 auto }

  ELSE IF you want to keep .hero__body and picture horizontally, just make the parent element Flexbox .hero__container { display:flex }

  0