Skip to content

Loopstudios Landing page - created using HTML, SASS and Vanilla Javascript (Mobile first design)_Responsive in Smart phones/Desktops_Frontend Mentor Challenge

Notifications You must be signed in to change notification settings

Afshar07/loopstudios-landing-page-main

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

29 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Frontend Mentor - Loopstudios landing page

Design preview for the Loopstudios landing page coding challenge

Project Log

I wanted to try SASS, and here we are! I tried to challenge myself with some best practices too. I used HTML, SASS and Vanilla JS to make this work, and SASS (Especially nesting) was fascinating. I give the hamburger menu some simple animation, and unlike my other challenges, i did not hide the images in mobile/desktop versions, instead i change the source of images using and IFEE and if/else condition in mobile and desktop and tried to not use "display:none;" as much as i could.

  • If you wanna see the correct mobile design using DevTools in your browser, you should reload the page when change to mobile view to reCall the IFEE functions.

My Process

For more readability, i had to put some linear gradient under the texts on banners and that was a lil confusing at first, but i found a way using after pseudo class and make it work. My main goal was to use SASS and get comfy with it, and it was delightful using this tech.

Note to self

I've got a little tired of Online courses (I'm currently learning VueJS) and i wanted to get away from all the theory, so i did this and imma do some harder challenges in few next days. As soon as i feel okay, i will continue my learning process (Which is not stopped, i learned a lot building these front end temps).

About

Loopstudios Landing page - created using HTML, SASS and Vanilla Javascript (Mobile first design)_Responsive in Smart phones/Desktops_Frontend Mentor Challenge

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published