Frontend Mentor - Clipboard Landing Page Solution

This is a solution to the Clipboard Landing Page Challenge on Frontend Mentor.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• 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

Screenshot

Links

• Live Site URL: https://kens-visuals.github.io/clipboard-landing-page/
• Solution URL: https://www.frontendmentor.io/solutions/clipboard-landing-page-with-scss-bem-and-vanilla-js-5i5L0KYqw

My process

Built with

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

What I learned

I liked the layout of this project, it was pretty simple and had a lot of white space, which is one of my favorite aspects in web design. I didn't necessarily learn much, I should say that I practiced more. I practice more on scroll-in animations with JS. Again, nothing crazy, I just thought this is another great opportunity to practice some new skills and build a good fundamental knowledge about them with these simple projects.

Useful resources

• The Auto Slider Animation - Check ot my CodePen to see how I did the logos' slider animation.

Author

• Frontend Mentor - @kens-visuals
• Codewars - @kens_visuals
• CodePen - @kens-visuals