Home / Cultural and Aesthetic / Scandinavian
Scandinavian CSS Template, Free with Live Demo
Free Scandinavian design template for cabin rentals. Light birch tones, white space, fjord blues, a CSS cabin scene and a booking card. Live demo. The example is Fjell, cabin rentals in Norway.
What is scandinavian?
Scandinavian design is light, clean and friendly. White and birch backgrounds, soft blues, rounded corners and simple sans serif type, with one warm color like a red cabin to add life.
The hero scene is pure CSS: mountains made with clip-path, a snowy peak, a lake and a red cabin with a lit door. A booking card overlaps the picture, so the most important action is right there.
Good for
- Cabins, hotels and holiday rentals
- Nordic food and design shops
- Outdoor and travel brands
- Calm SaaS and app sites
What you get in this template
- Mountain and lake scene built with CSS shapes
- Booking card that overlaps the hero
- Working form with a confirmation message
- Birch colored feature cards
- Light Poppins type throughout
The key CSS
This is the part that makes the scandinavian look work. Copy it into your own project.
.mtn { clip-path: polygon(0 100%, 18% 30%, 30% 60%, 48% 0, 64% 55%, 80% 25%, 100% 100%); }
.cabin { width: 120px; height: 70px; background: #c8553d; }
.cabin::before {
content: ""; position: absolute; left: -10px; right: -10px; top: -44px; height: 46px;
background: #2b2b2b; clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.book { margin: -70px 30px 0 auto; border-radius: 20px; box-shadow: 0 20px 50px rgba(35,48,46,.12); }How to use it
- Click Download HTML file above.
- Open the file in any code editor, like VS Code.
- Change the text, colors and links to match your project. Colors are at the top of the style tag.
- Upload it to any host, such as GitHub Pages, Netlify or your own server. It is one file with no build step.
Questions people ask
What makes a website look Scandinavian?
Lots of white space, light wood and white backgrounds, muted blues and greens, simple sans serif fonts and friendly rounded shapes.
How do I connect the booking form?
Point the form to your booking system or a form service like Formspree. The template already checks that a date is chosen.
Can I use a photo instead of the CSS scene?
Yes. Replace the .pic background with your cabin photo and remove the shape elements.
More Cultural and Aesthetic designs
081. Japandi
Mado, a ceramics and homeware shop
083. Cottagecore
Bramble and Bee, a farm jam shop
084. Dark Academia
Ravenhall, a reading society
085. Vaporwave
Palm Mall FM, a synth music label
086. Solarpunk
Sunroot, a community solar co-op
087. Bauhaus
Weimar Workshop, a design exhibition
088. Art Deco
The Gilded Lily, a cocktail bar
089. Islamic Geometric
Riad Zellige, a guesthouse in Marrakech