Submitted over 1 year ago

QR-code-component-solution

Bruno Fiori• 20

@BrunoSFiori

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Community feedback

Ecem Gokdogan• 9,380

@ecemgo

Posted over 1 year ago

Some recommendations regarding your code that could be of interest to you.

In order to make the card responsive and avoid repetition in your code, you can follow the steps below:

HTML

You need to update the html structure in this way:

<body>
  <main>
    <div class="qr"><img src="images/image-qr-code.png" width="260" height="260"></div>
    <div class="text1"><br>Improve your front-end<br> skills by building projects</div>
    <div class="text2"><br>Scan the QR code to visit Frontend<br>Mentor and take your coding skills to<br>the next level</div>
  </main>

  <footer>
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. <br>
    Coded by <a href="https://github.com/BrunoSFiori">Bruno Fiori</a>.
  </footer>
</body>

CSS

If you want to make the card centered both horizontally and vertically, you'd better add flexbox and min-height: 100vh to the body
You can define font-family here to avoid repetition

body {
  font-family: "Outfit", sans-serif;
  background-color: hsl(212, 45%, 89%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

When you use flexbox in the body, you don't need to use margin in the main to center the card
If you use max-width, the card will be responsive
You'd better give padding to give a gap between the content and the border of the card
You can define text-align here to avoid repetition

main {
  background: hsl(0, 0%, 100%);
  /* width: 300px; */
  max-width: 300px;
  /* height: 500px; */
  border-radius: 10px;
  /* margin-left: auto; */
  /* margin-right: auto; */
  /* vertical-align: middle; */
  /* margin-top: 200px; */
  /* position: relative; */
  padding: 20px;
  text-align: center;
}

In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add width: 100% to the img

img {
  border-radius: 10px;
  width: 100%;
}

You've already defined the class name for text so you don't need to define them as div.text1. You'd better define them by the name
You can update texts and footer in this way:

.text1 {
  /* font-family: "Outfit", sans-serif; */
  color: black;
  font-size: 25px;
  /* text-align: center; */
  /* position: relative; */
}

.text2 {
  /* font-family: "Outfit", sans-serif; */
  color: gray;
  font-size: 15px;
  /* text-align: center; */
  /* position: relative; */
}

footer {
  /* font-family: "Outfit", sans-serif; */
  /* position: absolute; */
  position: fixed;
  bottom: 0;
  /* color: black; */
  /* height: 50px; */
  text-align: center;
  /* width: 99%; */
}

Hope I am helpful. :)

Abdul Khaliq 🚀• 72,660

@0xabdulkhaliq

Posted over 1 year ago

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have other recommendations regarding your code that I believe will be of great interest to you.

CSS 🎨:

Looks like the component has not been centered properly. So let me explain, How you can easily center the component without using margin or padding.

We don't need to use margin and padding to center the component both horizontally & vertically. Because using margin or padding will not dynamical centers our component at all states

To properly center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📚.

For this demonstration we use css Grid to center the component.

body {
    min-height: 100vh;
    display: grid;
    place-items: center;
}

Now remove these styles, after removing you can able to see the changes

div.quad {
   margin-top: 200px;
   position: relative
}

Now your component has been properly centered

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

Panji• 2,110

@pperdana

Posted over 1 year ago

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have some additional recommendations for your code that I think you'll find interesting and valuable.

📌 Add <main> tag as semantic HTML in code

The <main> tag is a semantic HTML element that is used to define the main content of a web page.
The <main> tag should be used to wrap the primary content of a web page, such as the main article, section, or body of text.

for example code:

<main>
  <div class='container'>
    <h1>Article Title</h1>
    <p>Article content goes here...</p>
    .......................
  </div>
</main>

In the example above, the <main> tag is used to wrap the <div> tag, which contains the primary content of the web page. This tells both human readers and search engines that the content inside the <main> tag is the most important and relevant content on the page.

I hope you found this helpful!

Happy coding🤖

Angela Moore• 160

@Cyber-Chic

Posted over 1 year ago

Your solution looks awesome! Great job completing this! 😊

I have a few small recommendations that may improve your site:

Add a <h1> element to your page. All sites should include a minimum of one <h1> element to indicate the the most important (or highest-level) heading on a page.
Add alt text to your QR code image. Alt text is used to describe images on a website. My recommended description for this is alt="QR code to frontendmentor.io"

I hope this is helpful! Happy Coding!

-Angie

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord