/qrcode-component

This is solution for QR Code Component from Front End Mentor challange

Primary LanguageCSS

Frontend Mentor - QR code component solution

This is a solution to the QR code component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

Overview

Screenshot

QR Code fullscreen result

Links

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • Mobile-first workflow

What I learned

I use CSS var to simplify define the colors inside variable like this

:root {
    --white: hsl(0, 0%, 100%);
    --light-gray: hsl(212, 45%, 89%);
    --gray-blue: hsl(220, 15%, 55%);
    --dark-blue: hsl(218, 44%, 22%);
}

And using them like this

a {
    color: var(--light-gray);
    text-decoration: none;
}

a:hover {
    color: var(--white);
}

I don't use fancy technology like react and framworkes to maintain simplify and increase understanding of styling.

Author