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
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources

Overview

Screenshot

Links

• Solution URL: https://www.frontendmentor.io/solutions/i-made-my-solution-using-bootstrap-hkJ4vawxRE
• Live Site URL: https://jhonfxa.github.io/QR-code-my-solution-Frontend-Mentor/

My process

Built with

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

What I learned

In this project i was able to train my HTML and CSS skills by using Bootstrap, that is an open-source web framework for developing interface and front-end components for websites and applications.

 <div class="card">
    <img class="card-img-top" src="./images/image-qr-code.png" alt="QR Code">
    <div class="card-body">
  <h1 class="card-title">Improve your front-end skills by building projects</h1>
  <p class="card-subtitle">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
  </div>
</div>

.card-title {
    display: block;
    font-weight: 700;
    font-size: 17px;
    color: var(--dark-blue);
    text-align: center;
}

.card-subtitle {
    font-weight: 400;
    color: var(--grayish-blue);
    font-size: 15px;
    display: block;
    margin-top: 10px;
    text-align: center;
}

Useful resources

• Bootstrap - This is the official bootstrap library website, it was really useful and i plan to use it again in future projects.