Skip to content

samirhembrom/Frontend-Mentor---Loopstudios-landing-page-solution

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

Screenshot

Header Section : Mobile Interacdtive Section : Mobile Creations Section : Mobile Footer Section : Mobile Header Section : Mobile Interacdtive Section : Mobile Creations Section : Mobile Footer Section : Mobile

Links

My process

I try to go for mobile-first workflow. I made the header and navigation first. The overflay for the navigation bar was difficult to create. I was not able to make the navigation bar take the whole width as a result the user could scroll. After searching in stackoverflow I was able to make the navigation bar take whole screen. I used flexbox for creating interactive section and footer section. The creations section was built using css grid.

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • CSS Grid
  • Mobile-first workflow

What I learned

I learned how to make an overlay take whole width of the screen and also brushed up on my CSS grid skills.

document.getElementsByTagName('body')[0]. style .height = "100vh";
document.getElementsByTagName('body')[0]. style. overflow = "hidden";

Continued development

I think I need to focus on using CSS grid more. I need to see examples everytime when I try to incorporate CSS grid.

Useful resources

Author