Skip to content
Submitted about 2 years ago

QR code

Deyan Iliev•10
@DeyanIliev
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I have found difficult with making the font as per the requested. I am unsure of the dimensions of the card. I will be more than happy if someone explains to me how to arrange the dimensions as well as id fonts.

Community feedback

  • Michael Mushrush•250
    @FloratobyDevPosted almost 2 years ago
    1. Learn about flexbox and any other display values. It will make aligning so much easier for you. Here's an example:

    HTML:

    
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link rel="stylesheet" href="css/style.css">
  
  <title>Frontend Mentor | QR code component</title>
</head>

<body>
  <div class="white-square">
    <img src="images/image-qr-code.png" alt="qr-code-component-main">
    <h1 id="content">Improve your front-end skills by building projects</h1>
    <p id="grey-text">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>

  </div>
</body>
</html>

    CSS :

    @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');

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

img{
    width: 90%;
    height: auto;
    border-radius: 5%;
    padding-top: 3vh; 
}

.white-square{
   
    width: 40vh;
    background-color: white;
    padding: 1rem 0px 2rem; 
    border-radius: 15px;
    font-size: 30px;
    
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 20px;
}

body{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100%;
    background-color: rgb(148, 148, 192);
    max-width: 1440px   ;
    background-color: hsl(212, 45%, 89%);
}

#content{
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.3rem;
    width: 85%;
    color: hsl(218, 44%, 22%);
}

#grey-text{
    width: 80%;
    color: hsl(220, 15%, 55%);
    font-family: 'Outfit', sans-serif;
    font-size: .9rem;
    font-weight: 400;
}

    If you're wondering about this :

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

    It'll make your styling life easier if you add this. It basically eliminates all the default margin and padding of each elements so you can get a better control of how you want to pad and margin your elements. The box-sizing: border-box is use to keep the dimensions of an element from expanding any further than you have define them to be. For example, if you set width: 200px, then that is all it's going to be even if you change the padding or margin. It will not affect the width of the element at all. It is a very popular practice due to that.

    Marked as helpful
    0
  • Michael Mushrush•250
    @FloratobyDevPosted almost 2 years ago
    1. How absolute and relative position works in terms of its effect on the width and height of a container. A relative position can still affect the width and height of a container like div. An absolute position does not affect the width and height of a container and can go wherever in the screen unless its parent has the relative position property. If so, then it can only move around that parent's container.

    Here's an example of setting an element inside a container to absolute :

    | element one | element two |

    Think this two elements are stored in a container. The width of that container is affected by the widht of both elements. If you set element two to position absolute, then the width of that element will not affect the container's width anymore like so:

    | element one |

    Instead, it will be on top of element one. I can't draw that here but just imagine it being on top of element one. Any element inside a container with an absolute position, will always be initially positioned as the first element of that container.

    Hope that's good enough to describe the difference.

    Marked as helpful
    0
  • Michael Mushrush•250
    @FloratobyDevPosted almost 2 years ago
    1. HTML structure is essential when it comes to styling your website. It can easily make your life miserable if you don't properly think of how your structure is going to affect your styling later on. Your current HTML structure is pretty difficult to work on because you separated them into containers. A container is an element like div, main, section, etc. where you can put a bunch of elements together and use that to align them or execute a group styling on them. You should always group elements together if you're trying to align them together properly. Also, if you just want to store a text in an element, it's better to just use a <p> element or other elements that is meant to store a text content. Trust me, it'll make structuring much easier.

    Here's how I restructured your code:

    <body>
    <div class="white-square">
      <img src="images/image-qr-code.png" alt="qr-code-component-main">
      <h1 id="content">Improve your front-end skills by building projects</h1>
      <p id="grey-text">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
    </div>
 </body>

    Here's also another structure where it's good enough :

      <div class="white-square">
    <div class="blue-square">
      <img src="images/image-qr-code.png" alt="qr-code-component-main">
    </div>
    <div id="content"> Improve your front-end skills by building projects</div>
    <div id="grey-text">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</div>
  </div>

    I simply took out the <br> element. Leave it to the styling to do the spacing for you. And the element I also took out. Since there's nothing in the div element but the text, this works just fine. This is all fine for starters but in the long run, make sure to learn more about different elements and how they're being use.

    Marked as helpful
    0
    Deyan Iliev•10
    @DeyanIlievPosted almost 2 years ago

    @FloratobyDev Thank you so much for the feedback! I appreciate it and I will look more carefully next time. Thank you for pointing out about the structure of the HTML and how it works!

    0
  • Michael Mushrush•250
    @FloratobyDevPosted almost 2 years ago
    1. Please don't use import and inside a body element. If you want to import your fonts, either copy-paste the link URL from Google Fonts and paste them in the <head></head> element or take your import URL and put them on top of your .css file. Note that the files you import inside a .css file only work for that specific file. However, the other method is going to work globally which means you can use it wherever you have multiple .css files.

    Here's an example:

    @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');

img{
    position: relative;
    width: 100%;
    height: auto;
    border-radius: 15px;
    /* margin: auto; */
    /*padding-left: 5vh;
    padding-top: 3vh;*/
    /* display: block; */
    /* transform: translateY(5%); */
    
}

    or

    <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link rel="stylesheet" href="css/style.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap" rel="stylesheet">
  
  <title>Frontend Mentor | QR code component</title>
</head>
    Marked as helpful
    0
    Deyan Iliev•10
    @DeyanIlievPosted almost 2 years ago

    @FloratobyDev Thank you! In my other solution I have fixed it as well as other issues.

    0

Please log in to post a comment

Log in with GitHub

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