Submitted almost 3 years ago

Loop Studios built with HTML, SASS/SCSS, JS

sass/scss

Nyrell Leonor•400

@nyrellcl

A solution to the Loopstudios landing page challenge

Preview Code

Solution retrospective

FYI: For some reason github only partially rendered my live-site page, so I had to host it on netlify.

Anyways! I enjoyed completing this project, I wanted more completed projects to showcase on my website portfolio and more practice! I appreciate any feedback and suggestions.

Thanks for viewing my project!

Code

Please log in to post a comment

Community feedback

Account deletedPosted almost 3 years ago
Hey @nyrellcl

This is NOT how to create a responsive landing page.

You need to use the correct properties and elements to make your content respond to different screen sizes.

For example, this challenges requires the use of two images for different breakpoints. The Picture Element will facilitate this.

Syntax:
```
  <picture>
    <source media="(min-width: )" srcset="">
    <img src="" alt="">
  </picture>
```
Source:

https://www.w3schools.com/html/html_images_picture.asp

https://web.dev/learn/design/picture-element/

You need research and learn how to properly create responsive content.

Here are few links to get you started:

Google Developers

https://web.dev/learn/design/

Mozilla

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design
Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord