/CW-03-spense

My submission for the Spense Landing Pagechallenge by Codewell.

Primary LanguageSCSS

Codewell - Spense Landing Page

This is a solution to the Spense Landing Page. Codewell challenges help you Improve your HTML and CSS skills by practicing on real design templates.

Table of contents

Overview

The challenge

Users should be able to:

  • View the optimal layout for the site depending on their device's screen size

Screenshot

Links

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • SCSS

What I learned

Another fantastic challenge from codewell. The implementation of the design in code was quite straight forward, it provided good practice for responsive layouts. I implemented my scss Media queries differently in this project to make them more maintainable:

    /**************************/
    /* BELOW 768px (Tablet) */
    /**************************/

    @include respond-to(sm){
        @include flex-center-column;
        flex-direction: column-reverse;
    }

I will be maintaining this approach for future projects.

Author