Skip to content
OverviewSolutions
36
Comments
6
Iván De León Lino
@Lino-OTM

All comments

  • Iván De León Lino•600
    @Lino-OTMPosted almost 2 years ago

    Hi @Makha! Excellent job with this one!

    You might want to use for the background-size properties such as contain and cover, it will help you to reach a pixel-perfect style, and remember to use them depending on the screen device so you might want to change them using media-queries. You also can use the property background-position with any of these values top, right, bottom, left, and more than one at the time.

    Marked as helpful
    0
  • Iván De León Lino•600
    @Lino-OTMPosted almost 2 years ago

    Congrats Sté[PH]ane! your project looks amazing. I've checked the mobile version and the desktop one as well and both look perfect!

    One little thing while I was studying your code is that in the CSS you made an unnecessary reset using a lot of tags. you can simply use the universal selector " * " you can check more about it here!

    • If you want to improve your compatibility with other browsers you can use normalize.css.

    • Very well use of CSS variables!

    • You can also try to work with any methodology such as BEM. It will help you a lot too.

    These improvements are for your future projects if at any moment you come back to work with your old code!

    0
  • Iván De León Lino•600
    @Lino-OTMPosted about 2 years ago

    Excellent work! Looks amazing!

    1
  • Travolgi 🍕•31,400
    @denieldenSubmitted about 2 years ago

    Hi there! 😀

    This is my advanced solution for the Qr Code Component. This app generates Qr Code based on the url entered.

    Added features:

    • Light / dark mode theme switcher
    • Dark color customization
    • Font customization
    • Qr Code DenielDen profile link default on loading
    • Dynamically generating the Qr Code as you type the URL
    • Dynamically update the color and background of the Qr Code
    • Dynamically update the customized image of the Qr Code
    • Removes the custom image of the Qr Code
    • You can download the .png of the generated Qr Code

    Any feedback and advice are welcome!

    Happy coding 😁

    React QR Code Generator

    3
    Iván De León Lino•600
    @Lino-OTMPosted about 2 years ago

    Man I'm learning React and watching things like these is admirable and inspires me to try something similar with other challenges, congrats!

    2
  • Coder Jacko•190
    @coderrJackoSubmitted over 2 years ago

    I used @keyframes for ::before and ::after pseudo elements to create a transition on hover effect, but I didn't know how to make the transition smooth when the image gets "unhovered". If you know how to do that, I would appreciate the answer.

    General feedbacks are also welcome.

    NFT preview card component | CSS Flexbox

    2
    Iván De León Lino•600
    @Lino-OTMPosted over 2 years ago

    Hi Jacko! What you are trying to do with the hover effect it can be easily done with transition: all 500ms ease-in-out; and to set the opacity from 0 to 1 when hovering. Don't forget to use the "all" property that's what makes the smooth transition when you are not putting your mouse over the image, I hope this can help you!

    0
  • Iván De León Lino•600
    @Lino-OTMPosted over 2 years ago

    Excellent design! You made it pixel perfect that's very nice! I would suggest you use a smooth transition on the buttons so they look prettier! For eg: .btn:hover { transition: 400ms ease }; Of course, you can try any different type of animation for your buttons too! Also you can try putting images/icons inside a <figure> tag instead of a <div> that helps a lot Your code is very clean and easy to understand, very well use of BEM

    Marked as helpful
    1