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
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

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

Screenshot

Links

• Solution URL: Add solution URL here
• Live Site URL: Add live site URL here

My process

• Analyzing first HTML structure
• Stylizing the different parts of the project (first the texts then the design itself and finished by the sizes/positions)
• Adding the hovers on the elements that needed it
• And of course testing the code as the user at every steps of the precendents part of the process

Built with

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

What I learned

.proud-of-this-css {
  position: relative;
	margin-left: 163px;
	margin-right: 163px;
	display: grid;
	grid-gap: 27px;
	grid: auto / repeat(4, 1fr);
}

Js:

The js you can see on that project wasn't from me because i didn't learn anything of Js at that point

Continued development

I need to continue using grid in css, and integrate Js that I'll learn in the future

Note: Delete this note and the content within this section and replace with your own plans for continued development.

Useful resources

• Google: forums and every kind of documentation, for example (https://developer.mozilla.org/en-US/)

Author

• Website - Zansuken
• Frontend Mentor - @Zansuken

Acknowledgments

Many thanks to@TheUniqueMathemagician how helped me with the grid properties and more on this project