1. Brief

Task: make a new site

Team: 1

Difficulty: 3/5

Link: www.woodsofbergen.no

This project I got from a returning customer, that got a website for his bar and club in Bergen. I also did some IT service for the club and designed new menus and a logo. But this project is about beard products for real Norwegian men.

2. Challenge

I had to design everything myself, put it in code, set it up on the VPS, integrate VIPPS, create email accounts, and of course test everything. Which means I was doing everything I already knew how to do. It did take time since it was extra job next to my full-time employment.

3. Process

I started with basics and put the site on VPS, got SSL for it, and set up WordPress. I didn’t have to make a design in a separate Adobe wireframe since the price I charged for the project wouldn’t allow me to spend extra time on wireframing. So instead of wireframing, I jumped straight into coding. Obviously, I was adjusting the looks as I was working on the site.

I really love glassmorphism in CSS and that’s the reason I chose it for the header on scroll. It might be “a very 2022 design”, but I will keep it as long as I can. Same with gradients. Some of them look extremely good.

My favorite part of the code is the background change on the scroll. It just fits the vibe of the brand and adds up with the wooden background in the text:

[css]/* Background changer */
.bgchanger {
transition: background .5s
}
.bg–natt {
background: #2e2e2e
}
.bg–natt .hvit-tekst { /* Makes all text white */
color: #fff!important;
}
.bg–natt #parallax-heading { /* Heading parallax bg */
background-image: url(‘/wp-content/uploads/2022/08/heading-bg.jpg’);
}
.bg–natt .us-btn-style_2 {
background: #d1d2d4!important;
color: #2e2e2e!important;
}
.bg–natt .us-btn-style_2:hover {
background: #343434!important;
color: #d1d2d4!important;
}

/* Heading with parallax bg image. Use line height for the text! */
#parallax-heading {
background-clip: text;
color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-color: #2e2e2e;
background-attachment: fixed;
}
.parallax-heading, .w-tabs-section.active .w-tabs-section-title {
background-clip: text;
color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: url(‘/wp-content/uploads/2022/08/heading-bg.jpg’);
background-attachment: fixed;
}
.w-tabs-section-header.active {
background: #003b21;
}
.w-tabs-section-header.active:hover {
background: #2e2e2e;
}[/css]

4. Results

The site is available at https://woodsofbergen.no. If you want to get a small discount, write on my personal email and I will share code for 20% off the order as long as the owners use it on the site.