Skip to content
OverviewSolutions
22
Comments
8
Yefry Sanchez
@y25sanchez

All comments

  • Carolyn•10
    @carolyngorskiSubmitted almost 2 years ago

    This project made me review CSS and HTML, and I'm honestly a bit unsure about the text-align property, I understand its function but I feel like I need more experience with working it out.

    Responsive landing page using CSS and HTML

    4
    Yefry Sanchez•330
    @y25sanchezPosted almost 2 years ago

    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
    1
  • Yefry Sanchez•330
    @y25sanchezPosted about 2 years ago

    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;
}
    0
  • Yefry Sanchez•330
    @y25sanchezPosted over 2 years ago

    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
    0
  • Lucas 👾•104,340
    @correlucasSubmitted over 2 years ago

    👾 Hello, Frontend Mentor coding community. This is my solution for the Meet Landing Page.

    Another Challenge update for a challenge I've done a month ago. This challenge was important because was doing it that I've learned how to use better the container to keep the column width consistent and even more important because I've learned to use order to manipulate the elements on hover using the general sibling selector (hover on the meet and then in the iconto see what happen to the speed it turns), the logo was created with two different svgs.

    I did some personal design improvements:

    • 👨‍🔬 Logo animation with rotation and blur.
    • 👨‍💻 Hero Section with hover changing profile images
    • 🎨 Image grid zoom on hover + grayscale

    Custom card colors and quote icon.

    I'm looking forward for feedback!

    Thanks!

    Meet Landing Page (Vanilla CSS - Logo Animation / Easter eggs)

    3
    Yefry Sanchez•330
    @y25sanchezPosted over 2 years ago

    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!

    2
  • Lucas 👾•104,340
    @correlucasSubmitted over 2 years ago

    👾 Hello, Frontend Mentor coding community. This is my solution for the Stats Preview Card

    Last month I learned a lots stuff giving feedback and fixing my old solution. You guys don't have idea how much code I've cleaned just by deleting unnecessary divs, fixing responsivity issues cause by elements with fixed width and many other stuff like that, more I study more I realize how noob I am with CSS/HTML. But was really good to see how bad was the old solution and how I was able to fix it with the knowledge I get by giving feedback and looking the others code.

    I had to update this challenge because my friend @Adriano Escarabote told that my older solution wasn't not good enough and that was not responsive on his Nokia 3310 and also in his Apple Watch. So I paid a lots of attention in order to fix the responsiveness issues and now the solution seems a little little little better. Thank you Adriano!

    🎨 I've added some custom features:

    • 👨‍🎨 Custom Gradients
    • 🎨 Highlighted Text Animation
    • 👾 Gradient Overlay Effect

    😎 I saw multiple solutions with the exact some custom design and animations details I've add, this doesn't bother and I don't want the credits or attribution.

    😲 My advice is that instead of just copy and paste it, improve it, you can use these lines of code and improve your solution by customizing it, opening Figma and playing with your design, you'll learn a lots of stuff and possible even better results than mine, just paste and copying some lines of codes will not teach you nothing unless you try to customize it by yourself. So don't limit yourself by using a poor code and design, improve it.

    ❤️ For those who just copy the code/design and claimed that were an original solution, its fine, this shows that both of us have a good taste for design and like to customize out solutions.

    And please, feel free to leave any feedback and help me to improve my solution!

    Stats Preview Card (Vanilla CSS - Custom Design + Text Animation)

    9
    Yefry Sanchez•330
    @y25sanchezPosted over 2 years ago

    Great job Lucas, your solutions are amazing.

    1
  • Angelica Garcia•50
    @YessBlackSubmitted over 2 years ago

    Thank you for reading, this is a challenge from Frontend Mentor, it has been somewhat difficult to work with css grid, but here is the solution, I know that it can be improved much more and I appreciate your suggestions

    Responsive landing page with CSS grid

    1
    Yefry Sanchez•330
    @y25sanchezPosted over 2 years ago

    Great Job Angelica Garcia!

    Marked as helpful
    0
  • Yefry Sanchez•330
    @y25sanchezPosted over 2 years ago

    Nice job Cristyane!

    I see an issue when the resolution is over 1440px, So far so good with the challenge.

    Have a great day!

    0
  • Fernanda•180
    @ferlagherSubmitted over 2 years ago

    I think I'm becoming faster at buiding components like this. But I don't know how to estimate how much time I'll need. Any advice?

    Responsive component with Sass

    2
    Yefry Sanchez•330
    @y25sanchezPosted over 2 years ago

    Without any errors, nice job!

    1