Mobile first layout using HTML, CSS and JavaScript

Hi Nick, Great solution! With regards to your first point, see the below steps, as follows:

• Remove the overflow: hidden; on <div class="split image-container"> in your CSS.

• Add position: relative; to your .desktop-images class in your CSS.

• Use the top and left properties to position your box image to the desired position. The properties accepts negatives values too.

• Lastly to clip the part of the hero image, add the following;

   .main-image {
    display: block;
    position: absolute;
    transform: translate(-20%, -50%);
    z-index: 2;

    /* ADD THE BELOW CODE */
    clip-path: inset(0 0 0 4.5rem);
  }

The inset value takes values starting with the top - right - bottom - left much like the shorthand for properties like margin. Think of clip-path as taking a cutter and cutting rectangular strips of a specified length.

• For <img class="arrow" src="/images/icon-arrow-down.svg" alt="" /> if the alt="" is left empty, then add the aria-hidden="true" attribute, as this allows screen-readers to skip <img> tags that are purely used for decorative purposes. Also, some of your <img> tags are missing the alt attribute; that's you're getting HTML issues. Also, look into semantic HTML.

With respect to your second point, you can add the following;

 body {
  height: 100vh;
  background-image: linear-gradient(var(--soft-violet), var(--soft-blue));
  font-family: "Kumbh Sans";
  font-weight: 400;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--dark-grayish-blue);
  position: relative;

  /* ADD THE BELOW CODE*/
  display: grid;
  align-content: center;
}

That should get rid of the excess scroll bar.

Hope the above helps!

Best of luck with your coding jouney!

Awesome! Can't wait to implement these changes tomorrow and see how it turns out! Thanks so much for the thorough tips and recommendations!

Good job, Nick!

Your design looks good on different device sizes and it's almost pixel-perfect. The box-shadow might need some slight adjustments. Also, I think it'd be nice to be able to close an accordion by clicking on it again, not having to click and open another accordion. Overall, well done!