Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
27
Comments
9
Fernando Pérez
@fermop

All comments

  • benjach•50
    @benjach
    Submitted 3 months ago

    Ejercicio codigo Qr

    1
    Fernando Pérez•480
    @fermop
    Posted 3 months ago

    Hi benjach, how are you?

    I can see that the image is not showing because the value into the src attribute. It can be fixed by adding the following:

        <img src="./images/image-qr-code.png" alt="codigo Qr">
    

    The qr-code-component-main folder is the root of your project and your index.html is looking for an image into a folder of the root directory. Hope it helps! 😄

    Marked as helpful
  • Matteo•10
    @matteoprendi
    Submitted over 2 years ago

    Responsive card component

    1
    Fernando Pérez•480
    @fermop
    Posted over 2 years ago

    Hi Matteo, how are you?

    Answering to your question, you can get rid of that white space by doing the following:

    .product-showcase {
      width: 100%;
      display: block;     <--
    }
    

    The img tag has a display: inline by default, which adds that white space.

    Suggestions

    • You have one accessibility report and it's because your img tag doesn't have an alt attribute. Images must have alt text unless it is a decorative image, for any decorative image each img tag must have empty alt="".
    • I highly recomend you to always use rem, this way your page will always be responsive to any user's settings. There's a VS Code extension that converts px to rem and viceversa by tapping alt + z. The extension is px to rem by Marco N.

    The rest looks great! 🎉

    Hope it helps! any questions feel free to answer this comment. :)

    Marked as helpful
  • Subhashish Dutta•10
    @subhashishdutta
    Submitted over 2 years ago

    QR code component website

    1
    Fernando Pérez•480
    @fermop
    Posted over 2 years ago

    Hi Subhashish, how are you?

    Answering to your question you can center the card by doing the following:

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

    If you are going to add the footer you have to add flex-direction: column;, this way your boxes are aligned from top to bottom.

    Hope it helps! any questions feel free to answer this comment. :)

    Marked as helpful
  • Immanuel•50
    @immachuks7
    Submitted over 2 years ago

    Article preview component

    1
    Fernando Pérez•480
    @fermop
    Posted over 2 years ago

    Hi Machuks, how are you?

    Answering to your question you can make the triangle by doing the following:

    HTML

            <div class="card__socials">
              <p class="card__socials__text">Share</p>
    
              <img>
              <img>
              <img>
    
              <div class="triangle"></div>
            </div>
    

    CSS

      .card__socials {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    @media(min-width: 887px) {
      .triangle {
        width: 1.125rem;
        height: 1.125rem;
        background-color: hsl(217, 19%, 35%);
        transform: rotate(45deg);
        position: absolute;
        bottom: -0.5rem;
      }
    }
    

    In this code, the container of the socials has a position: absolute and css flex with justify-content: center;. If any of its children has a position: absolute it will be positioned according to its parent's properties, in this case, it'll be centered because of css flex and positioned to it because of its parent's position property.

    The triangle is because if you make a rotated square 45 degres with 18px width and height you'll have like a diamond shape, you'll only need to position it with the bottom property to make from its half part to top disappear. It's important to point out that it has to be styled on a media querie on responsive design, this way it will not be visible at mobile design.

    Hope it helps, feel free to see my solution to understand better this part, any question we can get in touch!

    Marked as helpful
  • AKASH VERMA•50
    @akash4102
    Submitted over 2 years ago

    responsive product card using css grid and media queries

    3
    Fernando Pérez•480
    @fermop
    Posted over 2 years ago

    Hi Akash, how are you?

    I really liked the result of your project, but I have one tip that I think you will like:

    I noticed that the discount price doesn't have the line-through just as the design has, to fix this we can do the following:

    .price-2{
        position: absolute;
        color: gray;
        padding-top: 13px;
        𝘁𝗲𝘅𝘁-𝗱𝗲𝗰𝗼𝗿𝗮𝘁𝗶𝗼𝗻: 𝗹𝗶𝗻𝗲-𝘁𝗵𝗿𝗼𝘂𝗴𝗵;
    }
    

    The rest is great!!

    Hope it helps 😄

    Marked as helpful
  • Ari Griggs•270
    @nevercanon
    Submitted over 2 years ago

    Order Summary Card

    4
    Fernando Pérez•480
    @fermop
    Posted over 2 years ago

    Hi Ari, you did a good job! your page looks so good.

    As Hassia said, give the body a background-size of contain. To be honest, I can't understand the differences between contain and cover but remember that fortunately the documentation is in the MDN page. Here's the link if you'd like to chek it out!

    I noticed that the card is not centered at higher resolutions and the background is not positioned, to fix these things we can do the following:

    body {
    /* Positioning the background */
        background-size: 100% 50vmin;
    
    /* Centering the card */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
    }
    .card {
        margin: 0;
    }
    .attribution {
        margin-top: 3rem;
    }
    

    There is an accessibility report due to semantic html elements. Instead of using a div on your footer, try to use the footer element so it'll be easier for a screen reader to see the different parts of the page.

    I see that you are using px instead of rem. I highly recommend you to use rem because if the user has the size of their font smaller or larger your page would be the same. Here are two videos that explain it better:

    1. CSS em and rem
    2. Why You Should Use REM Instead of Pixels

    If you have any questions feel free to send me a message or answer this comment. I hope it helps!

    Marked as helpful
  • Tyler•20
    @tylermunn
    Submitted over 2 years ago

    QR Code Solution

    2
    Fernando Pérez•480
    @fermop
    Posted over 2 years ago

    Hi Tyler, first of all you did a good job! your page looks so good. Answering to your question, you can unlock de pro membership, that way you'll have access to Sketch and Figma files where you can see the exacly size you'll need to build a proyect.

    I see that you have some accessibility reports and I have some suggestions for you:

    • One of them is that you are not using semantic html elements. In this case, it requires the main element (where the main content of your page should be) instead of a div.
    • It says that your page should contain a level-one heading. I see that in your html you are using an h2 instead of an h1, remember that every page should contain at least a level-one heading.
    • Another one is that the QR Code image doesn't have an alternative text and it's best practice to have one just in case the image didn't show on your page. e.g.:
        <img class="qr-img" src="images/image-qr-code.png" 𝗮𝗹𝘁="𝗤𝗥 𝗰𝗼𝗱𝗲">
    
    • I see that you are using px instead of rem. I highly recommend you to use rem because if the user has the size of their font smaller or larger your page would be the same. Here are two videos that explain it better:
    1. CSS em and rem
    2. Why You Should Use REM Instead of Pixels

    If you have any questions feel free to send me a message or answer this comment. I hope it helps!

  • Ian•310
    @ianbuen
    Submitted over 2 years ago

    Simple QR Code Component (CSS Flexbox)

    1
    Fernando Pérez•480
    @fermop
    Posted over 2 years ago

    Hi Ian! You did a really good job! your page looks cool on mobile and desktop devices.

    I have some suggestions for you:

    • You have some accessibility reports because you are using a div instead of semantic html elements such as main (where the main content of your page should be in).
    • It looks like there's another accessibility report due to the browser doesn't know if you have a footer inside the body of your page. Although you have a footer, it doesn't recognize it because you have your footer out of your body:
    <body>
      <div class="card">
        <img class="qr" src="./images/image-qr-code.png" alt="" />
    
        <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>
    </𝗯𝗼𝗱𝘆>   <---
    
    <𝗳𝗼𝗼𝘁𝗲𝗿>   <---
      <div class="attribution">
        <div>Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a></div>
        <div>Coded by <a href="https://www.frontendmentor.io/profile/ianbuen">@ianbuen</a></div>
      </div>
    </footer>
    
    • I highly recommend you to use rem instead of px in the css. Browsers have a default size which is 16px equals to 1rem but what if the user has their personalized font-size to large instead of medium? your page would be the same although the font-size is set as large. Here are two YouTube videos where it is explained better.
    1. CSS em and rem
    2. Why You Should Use REM Instead of Pixels

    If you have any questions feel free to send me a message or answer this comment. I hope it helps!

    Marked as helpful
  • Matias•160
    @uspaz
    Submitted about 3 years ago

    Página de código QR con Scss y CSS Flexbox

    #sass/scss
    1
    Fernando Pérez•480
    @fermop
    Posted about 3 years ago

    Hola Matias! Excelente trabajo, tu página es responsiva para dispositivos móviles y en desktop.

    Veo que al momento de tener un móvil en horizontal en tu página no se puede deslizar hacia abajo para ver todo el contenido. Este problema me pasó a mí cuando realicé este proyecto y lo pude solucionar poniéndole un min-height con pixeles al body, ya que el container que tiene el card es más grande que el height de un celular en horizontal y esto no incrementa de tamaño al body debido a que tiene asignado el 100vh. (no estoy muy seguro de que sea por esto, pero si alguien puede corregirme se lo agradecería muchísimo jaja)

    También veo que en tu párrafo usas pixeles en su font-size. Te recomiendo usar rems, usualmente tienen un tamaño de 16px, usando rems permitirá que el tamaño de tus textos sea más responsivo en cada dispositivo, ya que no todas las personas tienen configurada el mismo tamaño de fuente. Este video explica muy bien los ems y rems: https://www.youtube.com/watch?v=_-aDOAMmDHI

    Por otra parte, veo que en el apartado de reportes te sugiere usar elementos semánticos tales como main y footer, estos no son de gran impacto para el usuario pero sí para leer el código y ubicar más fácil las secciones de nuestra página. Y por último veo que te sugieren utilizar un h1 ya que estás utilizando un h3. Recuerda que las páginas solamente pueden tener un h1 ya que este es el título de toda la página, después los subtítulos (h2), luego subsubtítulos (h3) y así hasta llegar a h6.

    De todas maneras hiciste un excelente trabajo, te ha quedado muy bien el proyecto!! saludos Matias :)

    Marked as helpful
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub