utilice HTML y CSS base.

Community feedback

• 

  Ali Nemat•180

  @AliNematt

  Posted almost 3 years ago

  Hi Benjamin, congratulations for your solution!

  I saw your code and I have some recommends for you!

  1. It is customary to use style.css for main stylesheet , So it's better to use style.css instead of index.css.
  2. It's not necessary to use same codes for responsivity! for responsive design just change the variable property . for example: if your width in desktop is same with mobile just skip it! and remember that always style desktop at the first!
  3. about your HTML , containerQr & containerImg & containerParrafos aren't important. for example : HTML :

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

  and your CSS :

      body {
          background-color:var(--Lightgray);
          height: 100vh;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          font-size: 10px;
          font-weight: 700;
          font-family:'Outfit', sans-serif;
          text-align: center;
          color: var(--Darkblue);
      }
      .mainContainer{
          background-color: var(--White);
          border-radius: 12px;
          display: flex;
          align-items: center;
          flex-direction: column;
          width: 300px;
          height: 480px;
      }
  

  Hope it helps you! Wish you the best.

  00

  Marked as helpful
• 

  Ismail•230

  @itbeginswithi

  Posted almost 3 years ago

  Congrats on your first project on frontend mentor, Benjamin.

  The html seems good to me, the css on the other hand is not.

  @media queries are meant to add changes for different viewports, they don't interfere with the browser's access to the lines above or below it, that's why you don't need to include the whole styling of your website within every media query (:root variables can stay outside, on the top of your css file, unless they are meant to add changes for smaller or larger screens).

  To learn more about stlying responsive websites, I suggest you start with the following youtube video: https://www.youtube.com/watch?v=VQraviuwbzU

  Good luck!

  00

  Marked as helpful
• 

  Orlando Guevara•220

  @coding-tomato

  Posted almost 3 years ago

  I think the HTML is fine! Good work.

  Seems like the font-weight for the description is off. Other than that it looks good!

  If you wished to work further on it, you could add some responsiveness by making the width of the card have a max-width and a min-width, and have the width be 100%, so it stretched a bit depending of the phone's screen width.

  {
      min-width: 200px;
      width: 100%;
      max-width: 300px;
  }
  

  A similar approach would be to instead use clamp, to clamp the width between a set of values:

  {
      width: clamp(200px, 100%, 300px);
  }
  

  To make these changes effective you'd need to make some adjustments on the padding of the card, among other things.

  00

  Marked as helpful