Frontend Mentor - Sunnyside agency landing page solution

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

• Solution URL: https://www.frontendmentor.io/solutions/mobile-first-site-using-sass-and-bem-R96zOQHdn
• Live Site URL: https://jsweeney-sunnyside-agency-landing-page.netlify.app/

My process

Built with

• Sass
• BEM
• CSS grid
• CSS flexbox
• Media querries
• Mobile first

What I learned

If you need to change the color of a tags, don't set the color of it's parent element. This will mess things up with the :visited pseudoclass. Just make sure to explicitly set the color property of an a tag.

Happy with this fancy underline mixin!

@mixin fancy-underline($underline-color) {
  & {
    text-decoration: none;
    display: inline-block;
    text-align: center;
    position: relative;

    &::before {
      content: "";
      height: 25%;
      border-radius: 50px;
      background-color: rgba($underline-color, 0.4);
      left: -5%;
      right: 0;
      width: 110%;
      bottom: 12%;
      position: absolute;
      z-index: -1;
      @include easeOut;
    }

    &:hover::before {
      background-color: rgba($underline-color, 1);
    }
  }
}

Useful resources

• CSS animation generator - Used this to create mobile menu animation.

Author

• Website - Add your name here
• Frontend Mentor - @yourusername
• Twitter - @yourusername

Note: Delete this note and add/remove/edit lines above based on what links you'd like to share.