Nesfjellet website

1. Brief

Task: make a new site

Team: 2

Difficulty: 5/5

An ongoing project that grows into something bigger. After the design was made I put it into code and the customer wanted to hurry up. This means that some bugs become features 🙂 After I started with the basic SEO I noticed in SEMrush how much more potential this theme has and that I can achieve great results in Google.

2. Challenge

The site had some styling challenges, especially since it was pushed to be done ASAP. Another thing was to make the English version of the site and I had to use WPML plugin for the translation since we have a license for it. Not a big fan of it though, so I will try to push my boss to switch to something better one day lol.

3. Process

There were a lot of pages to put in code and many of them didn’t have repeating elements. Which meant I had to style and code from the scratch. The site is using premium fonts and has 2 separate CSS for the winter and summer seasons. This feature was added on the go, but in the future, I’d like to make a simple CSS solution that would allow switching between summer/winter with simple commenting/uncommenting of the code.

The plugin used for the subscription to the mailing list is one of the worst I had to work with since all the styling is not out of the box. I mean they do have styling, but just basic color change and some borders. To make it look the way I need it to look, I had to put my own CSS into action. And because I had 2 different seasons to style for, the code has become rather long:

[css]* Footer nyhetsbrev form */
#mlb2-588874.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody {
padding: 0 !important; /* No extra paddings made by the form */
}
.footerismo .mailerlite-form .mailerlite-form-field label { /* No email label */
display: none;
}
.footerismo #mlb2-588874.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent h4 { /* Heading */
font-family: var(–font-h3) !important;
font-size: 30px;
margin: 0 0 3px 0;
color: #e0eaf4;
}
.footerismo #mlb2-588874.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow input::placeholder { /* Email placeholder text */
color: #e0eaf4;
opacity: 1;
font-style: normal;
font-family: "Neutrif studio regular";
font-weight: 400;
}
.footerismo #mlb2-588874.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow input { /* Email text field and placeholder */
font-style: normal;
font-family: "Neutrif studio regular";
font-weight: 400;
font-size: 18px;
padding-left: 25px;
color: #e0eaf4;
}
.footerismo #mlb2-588874.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent {
margin: 0; /* spacing between the heading and text field */
}
.footerismo #mlb2-588874.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow {
height: auto; /* Centers vertically the text field an the button */
width: 100%;
float: left;
display: flex;
align-items: center;
}
.footerismo .ml-form-formContent.horozintalForm .ml-form-horizontalRow .ml-button-horizontal {
width: 42px; /* Button */
position: absolute;
right: 17px;
}
.footerismo #mlb2-588874.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow button {
border-color: #e0eaf4;
border-width: 1px;
color: #e0eaf4;
height: 42px;
}
.footerismo button[type="submit"]:before {
content: "\f105";
font-family: "fontawesome";
font-weight: 300;
font-size: 34px;
padding-left: 1px;
color: #e0eaf4;
}
.footerismo button[type="submit"]:hover:before {
color: #000;
}
.footerismo .ml-form-formContent.horozintalForm .ml-form-horizontalRow .ml-input-horizontal {
width: 100%; /* Text field */
float: left;
}
/* Mobile Summer Nyhetsbrev */
@media only screen and (max-width: 400px) {
.ml-mobileButton-horizontal {
margin-bottom: 0;
margin-top: 4px;
width: 36px !important;
height: 36px;
border: #e0eaf4 solid 1px;
position: absolute;
right: 5px;
}
.footerismo button[type="submit"]:before {
margin-top: 8px;
}
.ml-mobileButton-horizontal button[type="submit"]:not(.w-btn) {
background: none !important;
}
#mlb2-588874 .ml-mobileButton-horizontal button {
background-color: none !important;
}
}

/* Winter nyhetsbrev */
:is(.page-id-831, .page-id-988, .category-vinteraktiviteter)
.footerismo #mlb2-588874.ml-form-embedContainer .ml-form-embedWrapper {
background-color: #0d2237;
}
:is(.page-id-831, .page-id-988, .category-vinteraktiviteter)
.footerismo #mlb2-588874.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow input {
background-color: #2e77ae;
}
:is(.page-id-831, .page-id-988, .category-vinteraktiviteter)
.footerismo #mlb2-588874.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow button {
background-color: #2e77ae !important;
}
:is(.page-id-831, .page-id-988, .category-vinteraktiviteter)
.footerismo #mlb2-588874.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow button:hover {
background-color: #e0eaf4 !important;
}
:is(.page-id-831, .page-id-988, .category-vinteraktiviteter)
.footerismo input:not([type="submit"]):focus {
box-shadow: 0px 0px 0px 0px #04f9ff;
}[/css]

4. Results

The site is available at https://nesfjellet.no. I am looking forward to working more on this project in the future and adding extra functionality. Hopefully, I will get to do some real SEO here, so I can shine like a diamond in my amazing SEO skills.