Frontend Mentor - Easybank landing page solution

This is a solution to the Easybank 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
• 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

• Solution URL: easybank-landing
• Live Site URL: easybank-landing

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• CSS Grid
• SASS
• PNPM

What I learned

<img
  onclick="Open()"
  class="hamburguer"
  id="hamburguer"
  src="./images/icon-hamburger.svg"
  alt="hamburguer-icon"
/>
<img
  onclick="Close()"
  class="close"
  id="close"
  src="./images/icon-close.svg"
  alt="icon-close"
/>

a {
  color: $Dark-Blue;
  margin: 1rem 0;
  font-size: 2rem;
  &:hover {
    text-decoration: underline $Lime-Green 0.3rem;
    text-underline-offset: 1.2rem;
  }
}

Continued development

I want to practise JavsScript ES6+ and Typescript. Also I will practise with nodejs to become a FullStack developer.

Author

• Website - Nicolas_Bouffanais
• Frontend Mentor - @N-Ignacio-Bouffanais
• Twitter - @N_Bouffanais