Gfrktyl

For a school project, I've to create a website for a refugee foundation in Haarlem. But designing is one part, coding the actual design is a whole other world. The hamburger menu went pretty well and I'm very proud of that piece of code, but the mosaic tiles just don't feel right. It is designed mobile first, so the desktop version is completely forgotten at this point of the project. This is how it should look:

And well, it does look like it. But the code is a big mess in my opinion:

main {

  display: grid;

  grid-template-areas: 'one one one two two' 'three three four four four';

  grid-template-columns: repeat(5, 1fr);

  grid-gap: 45px;

  height: 70%;

  width: 87.5%;

  margin: 2.5% auto;

}



.one,

.two,

.three,

.four {

  display: grid;

  grid-template-rows: 1fr 1fr 1fr;

  font-family: functionbold;

  font-size: 4em;

  text-transform: uppercase;

  color: white;

  text-align: center;

}



.one {

  grid-area: one;

  background: url("../images/mozaik1.jpg") no-repeat center;

  background-size: 175%;

}



.text {

  grid-row: 2;

  align-self: center;

}



.two {

  grid-area: two;

  background: url("../images/mozaik2.jpg") no-repeat center;

  background-size: 250%;

}



.three {

  grid-area: three;

  background: url("../images/mozaik3.jpg") no-repeat left;

  background-size: 275%;

  background-position: -100px 0;

}



.four {

  grid-area: four;

  background: url("../images/mozaik4.jpg") no-repeat center;

  background-size: 150%;

}

<main>

  <div class="one"><span class="text">Samen Praten</span></div>

  <div class="two"><span class="text">Samen Shoppen</span></div>

  <div class="three"><span class="text">Samen Doen</span></div>

  <div class="four"><span class="text">Samen Eten</span></div>

</main>

Could someone please help me with simplifying and beautifying this piece of code?

This question is difficult to answer because art is subjective but if this was my site, I would limit the gutters between the images to be slightly closer together (perhaps 2 maybe 3 ems) and being sure to keep them extending out to the width of the boxed layout.

If I was a user viewing this site, I would be so confused because there is no indication of actions to use. For example, the website doesn't tell the user anything about what actions to take. I would add some content to the top, maybe some rollover or pop-overs on my images to encourage user interactions.

Last thing, if this site is a non profit, it is pretty common to re-enforce the mission and/or vision statement on the homepage for the user to understand the commitment of the nonprofit. Foundations are typically trying to raise money for a cause and without the user knowing or understanding the cause, they will likely not take action. My college professors all said that the user should be able to find information immediately, if they have to look they are going to leave.

Without seeing the actual site, I am going off of my design knowledge so I hope this helps. If you want to share your HTML to show how you are placing your code and what is actually happening on the site, I will try my best to help you clean up the CSS.