franc014 / frem-loopstudios-landing

Front End Mentor challenge-Loopstudios landing page

Frontend Mentor - Loopstudios landing page solution

This is a solution to the Loopstudios landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Links
• My process
  • Built with
  • What I learned
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout for the site depending on their device's screen size
• See hover states for all interactive elements on the page

Links

• Solution URL: GitHub
• Live Site URL: https://loop-studios-landing-page-franc014.vercel.app/

My process

Built with

• HTML5 markup
• CSS custom properties and Open Props integration using JIT package
• Flexbox
• CSS Grid
• Mobile-first workflow
• Astro
• Svelte for Mobile Main Menu
• CUBE methodology for CSS implementation

What I learned

There are interesting use cases to apply different HTML/CSS techniques in this challenge. One of those is the use of the element with ones, in order to specify different images for mobile and desktop versions for the gallery section. Responsive, art-directed images implementation is much easier with those elements.

Author

• Website - Francisco Andrade
• Frontend Mentor - @franc014
• Github - franc014