Skip to content

Files

Latest commit

sajai20sajai20
Update README.md
Aug 31, 2022
332a073 · Aug 31, 2022

History

History
146 lines (111 loc) · 3.03 KB

README.md

File metadata and controls

146 lines (111 loc) · 3.03 KB

Frontend Mentor - QR code component solution

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

Table of contents

Overview

In this project i have given the solution for QR code components from Frontend Mentor

Screenshot

Links

My process

Built with

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

What I learned

In this project i have learnt how box model works and how to display flex property

<body>
  <div class="container">
    <div class="row">
      <div class="card">
        <div class="card_img_container">
          <img src="./images/image-qr-code.png" alt="qr_code_image">
        </div>
        <div class="card_content_container">
          <h1 class="card_title">Improve your front-end skills by building projects</h1>
          <p class="card_description">Scan the QR code to visit Frontend Mentor and take your coding skills to the next
            level</p>
        </div>
      </div>
    </div>
  </div>
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --clr-White: #ffffff;
    --clr-Light-gray: #d6e2f0;
    --clr-Grayish-blue: #7b879d;
    --clr-Dark-blue: #1f3251;
}

/* only for paragraph */
html {
    font-size: 15px;
}

body {
    font-family: 'Outfit', sans-serif;
    background-color: var(--clr-Light-gray);
}

.container {
    width: 100%;
    /* margin: auto; */

}

.row {
    display: flex;
    flex-wrap: wrap;
    height: 750px;
    justify-content: center;
    align-items: center;
}

img {
    width: 100%;
    height: auto;
}

.card {
    background-color: var(--clr-White);
    padding: 1.25rem;
    width: 323px;
    /* margin: auto; */
    border-radius: 10px;
}

.card_img_container {
    margin-bottom: 1.5rem;
}

/* if we want to give the border radius for the image we need to add radius by mentioning the ing tag using parent class */
.card_img_container img {
    border-radius: 10px;
}

.card_content_container {
    text-align: center;
    margin-left: 1.25rem;
    margin-right: 1.25rem;
}

.card_title {
    font-size: 20px;
    font-weight: 700;
    color: var(--clr-Dark-blue);
    margin-bottom: 1.5rem;
}

.card_description {
    font-weight: 400;
    color: var(--clr-Grayish-blue);
    margin-bottom: 2rem;
}

Author