Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
22
Comments
3
Victor
@cervantesdeveloper

All comments

  • OscarC•20
    @OscarCasEsc
    Submitted over 2 years ago

    Responsive QR Page using HTM, CSS Flexbox and media queries

    2
    Victor•290
    @cervantesdeveloper
    Posted over 2 years ago

    Maybe you should more semantic tags, I would use a <figure> tag to wrap your card, and a <figcaption> for the text. About the CSS y write it in this order

    /** custom properties / :root { / your custom properties/ }

    /** reset / / model box styles, font size, etc/

    /** components / / buttons styles, cards styles , etc/

    /** utilities */ / custom styles (hidden/visible components, call to action buttons)

    /** misc **/ /*anything that doesn't fit in the other categories

  • Lucas Cascardo•30
    @lcascardo
    Submitted over 2 years ago

    HTML5 - CSS - SASS - Flexbox - BEM

    #sass/scss#bem
    1
    Victor•290
    @cervantesdeveloper
    Posted over 2 years ago

    Espero haber entendido bien tu pregunta. Si con responsive design te refieres a cuestiones de UX / UI design, muchas cuestiones tienen que ver con la ergonomía de la percepción: -Contraste entre el fondo y el texto. (en color.adobe.com tienen una herramienta de accesibilidad) -Tamaño mínimo de la fuente según el dispositivo. -poner un atributo "alt" descriptivo en las imagenes. -hacer uso de etiquetas semanticas como main, aside, footer, nav, et.

    Puedes hacer un curso de responsive web design en https://www.freecodecamp.org/learn

    Ahora, si te refieres a como hacer un sitio responsivo, una buena practica es tratar de prescindir de las media queries en la medida de lo posible. Lo anterior se puede lograr al aplicar algunos valores como width: clamp(minimo, idoneo, maximo) // esta linea la suelo usar con botones.

    si piensas poner muchas cards, puedes con grid definir el ancho de las columnas de la siguiente manera

    .grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

    Espero que te sea de ayuda.

    Marked as helpful
  • Camilo Gaviño•30
    @CamiloGav
    Submitted over 3 years ago

    HTML + CSS

    #accessibility
    3
    Victor•290
    @cervantesdeveloper
    Posted over 3 years ago

    I added a div with (same dimensions that cube image) position relative that it contains the eye image, that div has a cyan background with .45 as value for the alpha channel. The opacity is 0 until the mouse is over the div.

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