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?