izzuzantyaf / qr-code

QR code component challenge from Frontend Mentor

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

• Frontend Mentor - QR code component solution
  • Table of contents
  • Overview
    • Screenshot
    • Links
  • My process
    • Built with
    • What I learned
  • Author

Overview

Screenshot

Links

• Solution URL: https://github.com/izzuzantyaf/qr-code
• Live Site URL: https://izzuzantyaf.github.io/qr-code

My process

Built with

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

What I learned

  <main class="container">
    <article class="qr-code-card bg-white">
      <img src="images/image-qr-code.png" alt="qr code image" class="qr-code" width="295px"/>
      <h1 class="title font-bold text-dark-blue">Improve your front-end skills by building projects</h1>
      <p class="description text-grayish-blue font-regular">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
    </article>
  </main>

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

Author

• Website - Izzu Zantya Fawwas
• Frontend Mentor - @izzuzantyaf
• Twitter - @izzuzantyaf