Team: 2

Difficulty: 3/5

Link: www.kvala.no

I got the main wireframe and had to put everything in code plus adapt for mobile and come up with extra functionality. Later on this customer ask for technical SEO services. I optimised the site for page speed, did internal linkbuilding, tiny bit of external linkbuilding, and keywrd research in SEMrush. Later on these keywords were also used for Google Ads.

Even though I am using a page builder (faster, easier for the customer to work with) instead of classic HTML code, most of my work goes into CSS. Out of the box, the builder doesn’t provide with the design that I need to put in the code. Challenges can also be when the builder is actually stopping me from getting the desired result. For instance, “Tjenester” block would be way easier to make code from scratch instead of adapting it from the builder. But since it needs to be user-friendly on the admin side, I had to use some interesting solutions, like the one below:

[css]/* Tjenester block */
.long-button { /* Link */
display: flex;
justify-content: space-between;
max-width: calc(50% – 44px);
}
.long-button:hover {
padding-left: 10px;
}
.long-button.w-btn.icon_atright i {
margin-right: 10px !important;
}
.link-container:hover {
position: relative;
}
.link-container .w-btn-wrapper {
margin: 0;
}
.link-container .w-btn-wrapper:after {
content: "";
position: absolute;
display: block;
right: 0;
top: 0;
max-width: 50%;
}
@media (min-width: 320px) and (max-width: 480px) { /* No image on mobile */
.link-container .w-btn-wrapper:after {
display: none;
}
.long-button { /* Link */
max-width: 100%;
}
}
.link-container .w-btn-wrapper:after {
content: url(/wp-content/uploads/2022/01/forside-arkitektur.jpg); /* Base picture */
z-index: 1;
}
.link-container .w-btn-wrapper:nth-child(2):hover:after {
content: url(/wp-content/uploads/2022/01/forside-arkitektur.jpg); /* Arkitekt tjenester */
z-index: 2;
}
.link-container .w-btn-wrapper:nth-child(3):hover:after {
content: url(/wp-content/uploads/2022/01/byggesak-front.jpg); /* Byggesak */
z-index: 3;
}
.link-container .w-btn-wrapper:nth-child(4):hover:after {
content: url(/wp-content/uploads/2022/01/arealplan-front.jpg); /* Areal planlegging */
z-index: 4;
}
.link-container .w-btn-wrapper:nth-child(5):hover:after {
content: url(/wp-content/uploads/2022/01/uavhengigkontroll-front.jpg); /* Uavhengig kontroll */
z-index: 5;
}
.link-container .w-btn-wrapper:nth-child(6):hover:after {
content: url(/wp-content/uploads/2022/01/verditakst.jpg); /* Verditaksering */
z-index: 6;
}
.link-container .w-btn-wrapper:nth-child(7):hover:after {
content: url(/wp-content/uploads/2022/01/forhåndstakst-front.jpg); /* Forhåndstakst */
z-index: 7;
}
.link-container .w-btn-wrapper:nth-child(8):hover:after {
content: url(/wp-content/uploads/2022/01/bolig-salgs-rapport-front.jpg); /* Boligsalgsrapport */
z-index: 8;
}[/css]