Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
10
Comments
10
Kevin Copo
@snowbot22

All comments

  • Jose Perez•20
    @ItsJPerez
    Submitted almost 2 years ago

    Responsive Product Page

    2
    Kevin Copo•150
    @snowbot22
    Posted almost 2 years ago

    Hi, you can use Flexbox to center elements too:

    parent-element{ display: flex; justify-content: center; align-items: center; } Where justify-content is for align items vertically and align-items is for algin items horizontally.

  • Xaxnxdxrxexax•450
    @Xaxnxdxrxexax
    Submitted almost 2 years ago

    Product preview card component

    #next#tailwind-css
    1
    Kevin Copo•150
    @snowbot22
    Posted almost 2 years ago

    Hi you can switch between images with the HTML label <picture>. This label help you a lot when you want to swicht images in differents widths, to see how to use it read this MDN article. https://developer.mozilla.org/es/docs/Web/HTML/Element/picture

  • Glow•140
    @TheAwesomeTechGirl
    Submitted almost 3 years ago

    product-preview-card

    1
    Kevin Copo•150
    @snowbot22
    Posted almost 3 years ago

    Hi you can switch between images with the HTML label <picture>. This label help you a lot when you want to swicht images in differents widths, to see how to use it read this MDN article. https://developer.mozilla.org/es/docs/Web/HTML/Element/picture

    Marked as helpful
  • Alephy [ BR ]•80
    @alephy9
    Submitted almost 3 years ago

    Responsive with Flexbox CSS

    #accessibility#semantic-ui
    4
    Kevin Copo•150
    @snowbot22
    Posted almost 3 years ago

    Use the picture label in your html file, with this label you can switch imgs in differents breakpoints. See more in: https://developer.mozilla.org/es/docs/Web/HTML/Element/picture

  • Joel•590
    @JoelLH
    Submitted about 3 years ago

    Nft-card-flex and margins

    1
    Kevin Copo•150
    @snowbot22
    Posted about 3 years ago

    Hi :hover is fine, :active is more used on inputs.

  • DarkFenix013•390
    @steveflores-013
    Submitted about 3 years ago

    card-NFT

    3
    Kevin Copo•150
    @snowbot22
    Posted about 3 years ago

    Debes usar un flexbox en los dos contenedores y usar la propiedad gap como dijo @simonhernandez. Pero tambien veo que necesitas alinear de forma vertical los elementos, consigues eso agregando la propiedad "align-items: center". Con esta se alinearan de forma vertical

  • Ruan Silva de Oliveira•20
    @ruansilvaolv
    Submitted about 3 years ago

    Responsive NFT Card using Flexbox

    #accessibility
    1
    Kevin Copo•150
    @snowbot22
    Posted about 3 years ago

    Always use the attribute "alt" when you use <img> in HTML. For the hover effect use the positions properties in CSS.

  • Bence Zámbó•510
    @zambobence
    Submitted about 3 years ago

    NFT Preview Card Component Main /w Flexbox and Grid

    1
    Kevin Copo•150
    @snowbot22
    Posted about 3 years ago

    Flexbox is fine,but if you use the property "gap" your design will be more exact to the original one

  • Anthony Becarne•160
    @Abecarne
    Submitted about 3 years ago

    NFT Card Component

    4
    Kevin Copo•150
    @snowbot22
    Posted about 3 years ago

    If you want to center the card use CCS grid. Using the property place-items:center once your container is a grid, the card will center in your container.

  • Kevin Copo•150
    @snowbot22
    Submitted about 3 years ago

    NFT Preview Card Component using SASS

    #sass/scss
    2
    Kevin Copo•150
    @snowbot22
    Posted about 3 years ago

    Thank you so much fot the feedback !

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

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