Submitted 12 months ago

FAQ codebar

Esmat Najafi•10

@Esmatnajafi

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

Feed back

Community feedback

aka_shiguero•150

@eremitaitoPosted 12 months ago

i saw your html code, so i'll try to help you organize the code

well, let's begin...

(based on my opinion) you should've created a div class that would include the container (qrcode and text), it's easier to centralize and set the size

<body>
   <div class="container">
   </div
</body>

then, create a class named "card", this is where the QRcode and text will stay

<body>
   <div class="container">
      <div class="card">
      </div>
   </div
</body>

set the image inside the div "card"

<body>
   <div class="container">
      <div class="card">
         <img>
      </div>
   </div
</body>

still inside the "card" class, create another class, this class will be for the text, so you can work separately

<body>
   <div class="container">
      <div class="card">
         <img>
         <div class="text>
         </div>
      </div>
   </div
</body>

add the text and add a class for the h2, so you can work separately

<body>
  <div class="container">
    <div class="card">
      <img>
      <div class="text">
        <h2 class="Title">Improve your front-end skills by building projects</h2>
        <p>Scan the QR code to visit Front Mentor and take your coding skills to the next level</p>
      </div>
    </div> 
  </div>
</body>

Separating some codes within containers can help you work better with specific things

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