Skip to content
OverviewSolutions
1
Comments
7
P
Mario Jesús Arias Hernández
@Mario-jesus

All comments

  • Mario Jesús Arias Hernández•80
    @Mario-jesusPosted 2 months ago

    Para posicionar correctamente el "bg-pattern-quotation.svg" puedes usar background-position-x: calc(100% - 80px);

    0
  • Jun Wei•200
    @junwei-wongSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    Using flex and grid together to match the design along with responsiveness. This was one of the toughest challenge I've done so far but looking back at my code, it's not that hard to implement.

    What challenges did you encounter, and how did you overcome them?

    Figuring out how to segment the html elements to then apply flex and grid. Mostly just brainstorming, and trial and error. I went through flexbox frogger and grid garden before attempting this challenge.

    What specific areas of your project would you like help with?

    I felt like I overused display:flex and align-items:center A LOT in this challenge.

    Responsive with SASS, flexbox and grid

    1
    Mario Jesús Arias Hernández•80
    @Mario-jesusPosted 2 months ago

    Se ve muy bien, solo le falta un poco de altura a las tarjetas.

    1
  • Mario Jesús Arias Hernández•80
    @Mario-jesusPosted 2 months ago

    Muy bien, solo falto centrar la tarjeta

    0
  • Mario Jesús Arias Hernández•80
    @Mario-jesusPosted 3 months ago

    Aplica un display: block a la imagen o reducele el margin-bottom, y agrega un margin-bottom: 128px a la tarjeta.

    0
  • Jasper•50
    @jaspervo91Submitted 3 months ago
    What challenges did you encounter, and how did you overcome them?

    The min() CSS function lets me specify a fixed maximum value for the inline-size property, and a relative unit to allow the value to shrink to suit smaller viewports.

    Social links profile with fluid padding and transitions

    1
    Mario Jesús Arias Hernández•80
    @Mario-jesusPosted 3 months ago

    Muy bien, solo te faltaron cosas como ajustar el padding en una pantalla de escritorio y centrar el elemento verticalmente

    0
  • Ismael•30
    @ismehSubmitted 3 months ago
    What challenges did you encounter, and how did you overcome them?
    • The hover effect over the text it's not perfect
      • I just added a little shadow but this was not the objective.
        • Also tried to use webkit stroke but didn't work because font letter were overlapping.
    What specific areas of your project would you like help with?
    • Any tips for the text hover effect?

    Blog card preview

    1
    Mario Jesús Arias Hernández•80
    @Mario-jesusPosted 3 months ago

    Cuando el cursor pase sobre la tarjeta le estableces el nuevo color al titulo

    .card:hover .card__title {
  color: var(--yellow);
}

.card__title {
  ...
  transition: color 600ms;
}
    0
  • Rodri•160
    @rcsilva211Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    After a year working as a Salesforce developer, it was so refreshing to make something out of pure HTML and CSS without having to worry about limitations.

    What challenges did you encounter, and how did you overcome them?

    Reviewing pure CSS attributes. In Salesforce and many other frameworks image implementation is automatically made in the majority of the time, so something as simple as making the image fit the container was a struggle, but after playing around for a bit, I've managed to make it work.

    What specific areas of your project would you like help with?

    Best practices and code optimization

    HTML and CSS QR Code Solution

    3
    Mario Jesús Arias Hernández•80
    @Mario-jesusPosted 3 months ago

    Buen trabajo, solo te falto establecer un min-height de 499px a la tarjeta

    1