Skip to content
Submitted over 1 year ago

Art gallery website solution (with bonus and love)

Marcos Valenzuela•710
@Dantalian5
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Art gallery website
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

With this I have completed all the challenges of only html and css!!

Easy:

  • the layout of main and footer, the effects and the general assembly of the page

Difficult:

  • Optimize the design of the css and html, implement accessibility, lazy loading, optimization, etc. (I've taken my time, as if it were a very serious project)
  • the hero section, the color changes and the correct use of mix-blend-mode, you can see how it is not exactly like in the original design, but I liked it better that way, also it did not seem right to use brute force to achieve the h1 text double color effect
  • mount the map using leafleet and javascript (I haven't gotten to the js part yet)

Impossible:

  • ...as always... NAME things!!!!

Thanks in advance for your advice and feedback.

Community feedback

  • BrunoMoleta•700
    @brunomoletaPosted over 1 year ago

    Ciao Marcos,

    on a wide screen, with more than 1600px, as the footer has a max-width the overall layout end up a bit off. To correct that, you could use

    footer {
max-width: none 
display: flex
justify-content: center
}
.footer-wrapper {
max-width: 90rem
}

    The same goes for your ::before element on the header as it also leaves a blank on the left side. I don't know how to fix it while keeping the HTML structure to make the black rectangle fill the space. For one, I used a grid with 1fr auto 1fr as this stretches the black rectangle, but I used a canvas tag. I suggest you look at this section of my solution.

    Overall, it's a tightly knit layout and code. Congrats, Marcos

    Best regards from Brazil :)

    Marked as helpful
    0
    Marcos Valenzuela•710
    @Dantalian5Posted over 1 year ago

    @brunomoleta Thanks for taking the time to help me. I really had not noticed this error, thanks for pointing it out to me and even more for the advice on how to fix it. :)

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord