Skip to content
OverviewSolutions
22
Comments
8

Yefry Sanchez

@y25sanchezNew York, NY330 points

Learning code in my free time.

I’m currently learning...

HTML, CSS and Javascript.

Latest solutions

View more solutions

Latest comments

  • Yefry Sanchez•330
    @y25sanchez

    Great job Carolyn!

    I have some recommendations to improve your code...

    The best way to center the QR code component is by applying some styles in the body. This will work only if you remove the positioning properties that you applied in the child and parent elements

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

    The font family ''Outfit'' is the main font you can add it to the body so like that you don't have to repeat code.

    Also you are missing some fundamental things in the structure of your html file.

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Qr codep roject</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <div class="parent">
      <div class="child">
        <img src="image-qr-code.png" />
        <h2>Improve your front-end skills by building projects</h2>
        <p>
          Scan the QR code to visit Frontend Mentor and take your coding skills
          to the next level
        </p>
      </div>
    </div>
  </body>
</html>

    Hope you a nice day! Keep up the good work!

    Marked as helpful
  • Yefry Sanchez•330
    @y25sanchez

    To fix the hover effect on the image you can create a new div with an id of layer inside of the "img-container" and then apply this styles:

    #layer{
    width: 100%;
    height: 100%; 
    opacity: 0;
    transition: background-color 0.5s, opacity 0.5s;
}
#layer:hover{
    opacity: 1;
    background-image: url(/images/icon-view.svg);
    background-repeat: no-repeat;
    background-color: var(--Cyan-eye); 
    background-position: center;
    cursor: pointer;
}
  • Yefry Sanchez•330
    @y25sanchez

    Hello Youcef, You have done a great job. The only issue that I see is the background in the body.

    You can fix this using these properties and values:

    background-image: url(/images/pattern-background-desktop.svg);
background-repeat: no-repeat;
background-color: var(--Pale-blue);
background-position: top;
background-size: 100%;
    Marked as helpful
  • Yefry Sanchez•330
    @y25sanchez

    I learn so much looking at your codes, I love the hover effect that you used in the "gallery-grid".

    Keep up the good work!

  • Yefry Sanchez•330
    @y25sanchez

    Great job Lucas, your solutions are amazing.

  • Yefry Sanchez•330
    @y25sanchez

    Great Job Angelica Garcia!

    Marked as helpful
View more comments