Norwegian Municipality Website Clone using HTML and CSS

Faraz

By Faraz -

Learn how to create a Norwegian municipality website clone using HTML and CSS. Follow our detailed guide with top tips and best practices for web development.

Join us on Telegram
norwegian-municipality-website-clone-using-html-and-css.webp
Read Alsoincome-calculator-using-html-css-and-javascript.webpIncome Calculator Using HTML, CSS, and JavaScript (Source Code)

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. Conclusion
  5. Preview

Creating a clone of a Norwegian municipality website can be a rewarding project for web developers. It provides an opportunity to practice key skills in HTML and CSS while producing a functional and visually appealing site. In this guide, we'll walk you through the process of building a municipality website from scratch.

Importance of Using HTML and CSS

HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are foundational technologies for web development. HTML structures the content, while CSS handles the design and layout. Together, they enable developers to create websites that are both functional and attractive. Understanding how to use these technologies is essential for anyone looking to build or clone websites.

Setting Up the Development Environment

Tools and Software Needed

Before you start coding, you'll need to set up your development environment. Essential tools include a code editor like Visual Studio Code, and a web browser for testing. These tools will help you write, test, and debug your code efficiently.

Installation and Configuration

Begin by downloading and installing your chosen code editor. Configure your local server to create a new project directory where you'll store your HTML and CSS files. This setup will provide a smooth workflow and allow you to preview your website in real-time as you develop it.

Source Code

Step 1 (HTML Code):

The first step in building your website is to create a basic HTML structure. Start with a <!DOCTYPE html> declaration, followed by opening and closing <html> tags. Inside the <html> tags, include <head> and <body> sections. The <head> section should contain metadata and links to your CSS files, while the <body> section will house the main content of your site. Below is a detailed explanation of the key elements of the code:

<!DOCTYPE html>
  • This declaration defines the document type and version of HTML being used (HTML5 in this case).
<html lang="en">
  • The <html> tag signifies the beginning of the HTML document. The lang attribute specifies the language of the document (English).
<head>
  • Contains meta-information about the document, including its title, character set, and links to external resources such as stylesheets.
    • <meta charset="UTF-8" />: Specifies the character encoding for the document.
    • <meta http-equiv="X-UA-Compatible" content="IE=edge" />: Ensures compatibility with Internet Explorer.
    • <meta name="viewport" content="width=device-width, initial-scale=1.0" />: Ensures the website is responsive and scales properly on different devices.
    • <title>Norwegian Municipality Website Clone</title>: Sets the title of the webpage, which appears in the browser tab.
    • <link href="https://fonts.googleapis... Material+Icons" rel="stylesheet" />: Imports Google's Material Icons.
    • <link rel="stylesheet" href="styles.css" />: Links to an external CSS file for styling.
<body>

Contains the content of the HTML document.

<header class="header">

  • Represents the introductory section of the webpage.
  • <div class="header-content responsive-wrapper">: A wrapper for header content.
  • <div class="header-logo">: Container for the logo.
  • <a href="/" class="logo">: Link to the homepage with the logo image.
  • <img src="https://assets.codepen.io/285131/logo.png" />: Logo image.
  • <nav class="header-nav">: Navigation menu.
  • <a href="#" class="header-nav-item">: Links to different sections of the website (Services, Politics and Democracy, etc.).
  • <button class="menu-toggle">Menu</button>: Button for toggling the menu, useful for responsive design.
  • <main class="main">
  • Main content area of the webpage.

Banner Section

  • <div class="banner-outer">: Outer wrapper for the banner.
  • <div class="banner responsive-wrapper">: Inner wrapper for banner content.
  • <div class="banner-search-wrapper">: Contains the banner title and search bar.
  • <h1 class="banner-title">Welcome to Askøy municipality</h1>: Main heading.
  • <div class="banner-search">: Search input fields.
  • <input type="text" placeholder="Watcha lookin' for?" class="banner-search-input" />: Search input box.
  • <input type="submit" class="banner-search-submit" value="Search" />: Search submit button.
  • <nav class="banner-nav">: Links to specific information like school term dates, bin collection dates, and housing benefits.
  • <div class="banner-image-wrapper">: Wrapper for the banner image.
  • <figure>: Container for the SVG image.

Services Section

  • <div class="services-outer">: Wrapper for services content.
  • <div class="responsive-wrapper">: Ensures the content is responsive.
  • <h2 class="services-title">What can we help you with?</h2>: Title of the services section.
  • <nav class="services responsive-wrapper">: Navigation for services.
  • <ul class="services-list">: List of services.
  • Each <li class="services-item">: Represents a service.
  • <a href="#" class="services-item-link">: Link to a specific service.
  • <p class="services-item-description">: Description of the service.

News Section

  • <div class="news-outer">: Wrapper for the news content.
  • <div class="news-inner responsive-wrapper">: Ensures the content is responsive.
  • <div class="news-section grid-width-7">: Section for the latest news.
  • <h2 class="news-section-title icon-news">Latest news</h2>: Title of the news section.
  • <ul class="news">: List of news items.
  • Each <li class="news-item">: Represents a news item.
  • <article class="news-item">: Article containing the news headline and excerpt.
  • <a href="#" class="news-headline">: Link to the full news article.
  • <p class="news-excerpt">: Excerpt of the news article.
  • <div class="news-section grid-width-5">: Section for announcements.
  • <h2 class="news-section-title icon-announcement">Announcements</h2>: Title of the announcements section.
  • <ul class="news">: List of announcements.
  • Each <li class="news-item">: Represents an announcement.
  • <article class="news-item">: Article containing the announcement headline and excerpt.
  • <a href="#" class="news-headline">: Link to the full announcement.
  • <p class="news-excerpt">: Excerpt of the announcement.
<footer class="footer">

Footer section of the webpage.

  • <div class="footer-content responsive-wrapper">: Ensures the footer content is responsive.
  • <div class="footer-column">: First column in the footer.
  • <h2 class="footer-heading">Contact</h2>: Heading for contact information.
  • <dl class="footer-datalist">: Definition list for contact details.
  • Each <dt>: Term (e.g., "Phone number").
  • Each <dd>: Definition (e.g., "56 15 80 00").
  • <div class="footer-column">: Second column in the footer.
  • <h2 class="footer-heading">Emergency phones</h2>: Heading for emergency phone numbers.
  • <dl class="footer-datalist">: Definition list for emergency phone numbers.
  • <div class="footer-column">: Third column in the footer.
  • <h2 class="footer-heading">Follow us</h2>: Heading for social media links.
  • <ul class="some-list">: List of social media links.
  • Each <li class="some-list-item">: Represents a social media link.
  • <a href="#" class="some-list-link">: Link to a social media page.
  • <svg ...>: SVG icon for the social media platform (Facebook, Twitter, Vimeo, LinkedIn).
Read Alsocarousel.pngCreate a Carousel Slider Using HTML and Pure CSS

Step 2 (CSS Code):

With the HTML structure in place, it's time to apply some basic styles using CSS. Start by creating a styles.css file and linking it to your HTML document. In your CSS file, you can define styles for the body, headers, navigation menu, and other elements.

Below is an explanation of each section of the code:

Importing Fonts

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Manrope:wght@400;500;600;700;800&display=swap");
  • This line imports two fonts, "DM Sans" and "Manrope," from Google Fonts, with various weights and styles.

Global Styles

*,
*:before,
*:after {
  box-sizing: border-box;
}
  • Sets the box-sizing property to border-box for all elements and their :before and :after pseudo-elements. This means the padding and border are included in the element's total width and height.

Reset Margins

body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}
  • Removes the default margin from these elements to ensure a consistent layout.

HTML and Body Styles

html {
  overflow-x: hidden;
}

body {
  scroll-behavior: smooth;
  line-height: 1.5;
}
  • Prevents horizontal scrolling on the HTML element.
  • Ensures smooth scrolling and sets a consistent line height for the body.

Image Styling

img {
  max-width: 100%;
  display: block;
}
  • Ensures images are responsive and do not exceed their container's width.
  • Sets the display to block to remove the bottom space caused by the default inline display.

Link Styling

a {
  color: inherit;
  font-weight: bold;
}
  • Makes links inherit the color of their parent elements and sets their font weight to bold.

Form Elements Styling

input,
button,
textarea,
select {
  margin: 0;
  border-radius: 0;
  font: inherit;
}

button {
  border: 1px solid;
  background-color: transparent;
}
  • Resets margin and border-radius for form elements.
  • Inherits font styles from their parent elements.
  • Makes buttons have a transparent background and a solid border.

Focus Styling

:focus {
  outline-width: 2px;
  outline-style: dashed;
  outline-color: var(--color-text-primary);
  outline-offset: 2px;
}
.footer :focus {
  outline-color: var(--color-bg-primary);
}
  • Adds a dashed outline to focused elements for accessibility.
  • Changes the outline color for focused elements within the .footer class.

Reduced Motion

@media (prefers-reduced-motion: reduce) {
  * {
    -webkit-animation-duration: 0.01ms !important;
            animation-duration: 0.01ms !important;
    -webkit-animation-iteration-count: 1 !important;
            animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
  • Adjusts animations and transitions to be nearly instantaneous for users who prefer reduced motion.

CSS Variables (Custom Properties)

:root {
  --palette-1: #0a403d;
  --palette-2: #13948d;
  --palette-3: #e8fbfa;
  --palette-4: #eee;
  --palette-5: #fff;
  --palette-6: #92f2ed;
  --color-text-primary: var(--palette-1);
  --color-links-primary: var(--palette-2);
  --color-bg-primary: var(--palette-5);
  --color-bg-secondary: var(--palette-3);
  --color-border-primary: var(--palette-4);
  --color-border-secondary: var(--palette-2);
}
  • Defines a set of custom properties (variables) for colors that can be reused throughout the stylesheet.

Body Font and Color

body {
  font-family: "Manrope", "DM Sans", sans-serif;
  color: var(--color-text-primary);
}
  • Sets the font family for the body using the imported fonts.
  • Sets the text color using the custom property.

Responsive Wrapper

.responsive-wrapper {
  width: 90%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}
  • Creates a wrapper with a maximum width of 1280px and 90% of the viewport width, centered horizontally.

Header Styling

.header {
  display: flex;
  border-bottom: 2px solid var(--color-border-primary);
  height: 92px;
  border-top: 8px solid var(--color-border-secondary);
}

.header-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  position: relative;
}

.logo {
  display: block;
  padding-top: 20px;
  margin-bottom: -20px;
  height: 100px;
}
.logo img {
  max-height: 100%;
}
  • Styles the header with flexbox, borders, and height.
  • Ensures the logo is displayed correctly within the header.

Navigation Styling

.header-nav {
  display: flex;
  align-items: center;
}

.header-nav-item {
  margin-left: 1.5rem;
  font-weight: 400;
  font-size: 1.125rem;
  text-decoration: none;
  align-items: center;
  height: 100%;
  position: relative;
  transition: color 0.15s ease;
  display: none;
}

.header-nav-item:after {
  content: "";
  display: block;
  height: 4px;
  transform: scale(0);
  background-color: var(--color-links-primary);
  border-radius: 4px 4px 0 0;
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  transition: transform 0.25s ease;
  transform-origin: bottom center;
}
.header-nav-item:hover, .header-nav-item:focus {
  color: var(--color-links-primary);
}
.header-nav-item:hover:after, .header-nav-item:focus:after {
  transform: scale(1);
}
@media all and (min-width: 1000px) {
  .header-nav-item {
    display: flex;
  }
}
  • Styles the navigation items in the header.
  • Adds a hover and focus effect to change the color and show a bottom border.
  • Displays navigation items only on screens wider than 1000px.

Menu Toggle Button

.menu-toggle {
  border: 1px solid;
  border-bottom-width: 3px;
  padding: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
}
.menu-toggle:before {
  display: block;
  content: "menu";
  font-family: "Material Icons Outlined";
  font-size: 1.5rem;
  margin-right: 0.25rem;
}
@media all and (min-width: 1000px) {
  .menu-toggle {
    display: none;
  }
}
  • .menu-toggle styles a button with a border, padding, and flexbox alignment.
  • Adds a "menu" icon before the button's content using the "Material Icons Outlined" font.
  • Hides the menu toggle on screens wider than 1000px.

Link Styling

.link {
  color: var(--color-links-primary);
}
  • Sets the color of elements with the .link class to the primary link color defined by the CSS variable.

Banner Section

.banner-outer {
  padding-top: 4rem;
  padding-bottom: 4rem;
  min-height: 375px;
}
  • Adds padding to the top and bottom and sets a minimum height for the banner section.

Banner Grid Layout

.banner {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 2rem;
  align-items: center;
  font-size: 1.125rem;
}
@media all and (min-width: 800px) {
  .banner {
    grid-template-columns: repeat(6, 1fr);
  }
}
@media all and (min-width: 1000px) {
  .banner {
    grid-template-columns: repeat(12, 1fr);
  }
}
  • Defines a grid layout for the banner with a single column on small screens, six columns on medium screens, and twelve columns on large screens.
  • Adds a gap between grid items and centers the items vertically.

Banner Search Wrapper

@media all and (min-width: 800px) {
  .banner-search-wrapper {
    grid-column: span 3;
  }
}
@media all and (min-width: 1000px) {
  .banner-search-wrapper {
    grid-column: span 7;
  }
}
  • Sets the column span for the search wrapper in the grid layout: spanning 3 columns on medium screens and 7 columns on large screens.

Banner Image Wrapper

.banner-image-wrapper {
  text-align: center;
}
@media all and (min-width: 800px) {
  .banner-image-wrapper {
    grid-column: span 3;
  }
}
@media all and (min-width: 1000px) {
  .banner-image-wrapper {
    grid-column: 9/span 4;
  }
}
.banner-image-wrapper svg {
  max-width: 100%;
  max-height: 250px;
}
@media all and (min-width: 1000px) {
  .banner-image-wrapper svg {
    max-height: 100%;
  }
}
  • Centers the content in the banner image wrapper.
  • Sets the column span in the grid layout for medium and large screens.
  • Makes SVG images responsive within the wrapper.

Banner Title

.banner-title {
  font-size: 1.75rem;
  line-height: 1.125;
}
@media all and (min-width: 1000px) {
  .banner-title {
    font-size: 2.5rem;
  }
}
  • Sets the font size and line height for the banner title, with a larger font size on large screens.

Banner Search

.banner-search {
  display: flex;
  width: 100%;
  align-items: center;
  position: relative;
  height: 56px;
  overflow: hidden;
  margin-top: 1rem;
}
@media all and (min-width: 1000px) {
  .banner-search {
    height: 64px;
  }
}
  • Styles the search bar within the banner with flexbox, width, height, and margin.
  • Increases the height on large screens.

Banner Search Input

.banner-search-input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid;
  padding: 0 5rem 0 1rem;
  height: 100%;
  width: 100%;
}
.banner-search-input:focus {
  border-color: var(--color-links-primary);
  background-color: var(--color-bg-secondary);
}
@media all and (min-width: 1000px) {
  .banner-search-input {
    font-size: 1.125rem;
  }
}
  • Styles the search input with padding, border, and appearance properties to remove default styles.
  • Changes the border color and background color on focus.
  • Increases the font size on large screens.

Banner Search Submit Button

.banner-search-submit {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: var(--color-links-primary);
  color: var(--palette-5);
  border: none;
  font-weight: 700;
  padding: 0 1.5rem;
  position: absolute;
  height: calc(100% - 0.75rem);
  top: 0.375rem;
  right: 0.375rem;
}
@media all and (min-width: 1000px) {
  .banner-search-submit {
    font-size: 1.125rem;
    height: calc(100% - 1rem);
    top: 0.5rem;
    right: 0.5rem;
  }
}
.banner-search-submit:hover, .banner-search-submit:focus {
  background-color: var(--color-text-primary);
}
  • Styles the submit button within the banner search with background color, font weight, padding, and absolute positioning.
  • Changes the button's background color on hover and focus.
  • Adjusts the button's size and position on large screens.

Banner Navigation

.banner-nav {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
}
  • Styles the navigation within the banner with margin, flexbox, and wrapping behavior.

Banner Navigation Items

.banner-nav-item {
  margin-right: 1.5rem;
  margin-bottom: 0.75rem;
  font-weight: 400;
}
.banner-nav-item:hover, .banner-nav-item:focus {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-primary);
  text-decoration: none;
}
  • Adds margin and font weight to the banner navigation items.
  • Changes the background color, text color, and removes text decoration on hover and focus.

Services Section

.services-outer {
  padding: 4rem 0 3rem;
  background-color: var(--color-bg-secondary);
  border-top-left-radius: 50% 20px;
  border-top-right-radius: 50% 20px;
}
@media all and (min-width: 1000px) {
  .services-outer {
    border-top-left-radius: 50% 50px;
    border-top-right-radius: 50% 50px;
  }
}
  • Adds padding and background color to the outer container of the services section.
  • Sets a curved top border radius that increases on larger screens.

Services Title

.services-title {
  font-size: 1.75rem;
  line-height: 1.25;
  text-align: center;
}
  • Styles the services title with a larger font size and centered text.

Services List

.services {
  margin-top: 1.5rem;
}
.services-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1rem;
}
@media all and (min-width: 1000px) {
  .services-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}
  • Removes list styling and uses a grid layout for the services list.
  • Adjusts the grid layout to display three columns on larger screens.

Service Items

.services-item {
  background-color: var(--color-bg-primary);
  padding: 1.25rem;
  border: 1px solid var(--color-border-secondary);
  position: relative;
  transition: 0.15s ease;
}
@media all and (min-width: 1000px) {
  .services-item {
    padding: 1.75rem;
  }
}
.services-item:hover, .services-item:focus-within {
  transform: translateY(-0.5rem);
  box-shadow: 0 3px 0 var(--color-links-primary);
}
  • Styles individual service items with background color, padding, border, and transition effects.
  • Increases padding on larger screens.
  • Adds hover and focus effects with transform and box shadow.

Service Item Links

.services-item-link {
  font-size: 1.25rem;
  text-decoration: none;
}
.services-item-link:after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
  • Styles links within service items with font size and removes text decoration.
  • Adds an empty pseudo-element for potential additional styling or interactive effects.

Service Item Descriptions

.services-item-description {
  margin-top: 0.75rem;
}
  • Adds a margin to the top of service item descriptions for spacing.

Service Actions

.services-actions {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}
  • Centers the service actions within the container and adds a top margin.

Link Button

.link-btn {
  background-color: var(--color-links-primary);
  color: var(--palette-5);
  display: inline-flex;
  padding: 0.5em 1em;
  text-decoration: none;
  align-items: center;
  font-size: 1.125rem;
  font-weight: 400;
}
.link-btn:after {
  display: block;
  content: "arrow_forward";
  font-family: "Material Icons Outlined";
  margin-left: 0.5rem;
}
.link-btn:hover, .link-btn:focus {
  background-color: var(--color-text-primary);
}
  • Styles a link button with background color, text color, padding, and text decoration.
  • Adds an icon using "Material Icons Outlined" after the button's text.
  • Changes the background color on hover and focus.

News Section

.news-outer {
  padding: 5rem 0;
}
.news-inner {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 4rem;
}
@media all and (min-width: 1000px) {
  .news-inner {
    grid-template-columns: repeat(12, 1fr);
  }
}
  • Adds padding to the outer container and sets up a grid layout for the inner container.
  • Adjusts the grid layout to have 12 columns on larger screens.

Grid Width Classes

.grid-width-7 {
  grid-column: span 1;
}
@media all and (min-width: 1000px) {
  .grid-width-7 {
    grid-column: span 7;
  }
}
.grid-width-5 {
  grid-column: span 1;
}
@media all and (min-width: 1000px) {
  .grid-width-5 {
    grid-column: 8/span 5;
  }
}
  • Sets grid column spans for different content blocks within the news section, adjusting for larger screens.

News Section Title

.news-section-title {
  display: flex;
  align-items: center;
  font-size: 1.5rem;
}
@media all and (min-width: 1000px) {
  .news-section-title {
    font-size: 1.75rem;
  }
}
.news-section-title:before {
  display: block;
  font-family: "Material Icons Outlined";
  margin-right: 0.75rem;
  font-size: 2.5rem;
  font-weight: 400;
  color: var(--color-links-primary);
}
.news-section-title.icon-news:before {
  content: "local_library";
}
.news-section-title.icon-announcement:before {
  content: "flag";
}
  • Styles the news section title with flexbox and font size adjustments for larger screens.
  • Adds icons before the title text using "Material Icons Outlined" and different content based on additional classes.

News List

.news {
  list-style: none;
  padding: 0;
  margin-top: 1rem;
  padding-left: 1.25rem;
  border-left: 1px solid var(--color-border-secondary);
  padding-top: 1.5rem;
  padding-bottom: 3rem;
}
@media all and (min-width: 1000px) {
  .news {
    margin-left: 1.25rem;
    padding-left: 2rem;
  }
}
  • Removes list styling and adds padding, margin, and border to the news list.
  • Adjusts padding and margin for larger screens.

News Items

.news-item + * {
  margin-top: 3rem;
}
.news-headline {
  font-size: 1.25rem;
  transition: background-color 0.15s ease;
}
.news-headline:hover, .news-headline:focus {
  background-color: var(--color-bg-secondary);
  text-decoration: none;
}
.news-excerpt {
  margin-top: 0.75rem;
}
@media all and (min-width: 1000px) {
  .news-section-actions {
    padding-left: 1.25rem;
  }
}
  • Adds top margin to adjacent news items.
  • Styles headlines with font size, transition effects, and changes background color on hover and focus.
  • Adds margin to the top of news excerpts.
  • Adjusts padding for actions within the news section on larger screens.

Footer Container

.footer {
  background-color: var(--palette-1);
  color: #fff;
  padding: 4rem 0 8rem;
  background-image: url("img/topography.svg");
  background-repeat: no-repeat;
  background-size: 700px;
  background-position: bottom -175px right -300px;
}
  • Sets the background color and text color of the footer.
  • Adds padding for spacing within the footer.
  • Applies a background image with specific positioning, size, and no-repeat properties.

Footer Content

.footer-content {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 4rem;
  line-height: 1.375;
}
@media all and (min-width: 1000px) {
  .footer-content {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    font-size: 1.125rem;
  }
}
  • Uses a grid layout for the footer content with a single column by default.
  • Adds a gap between grid items and sets the line height.
  • On screens wider than 1000px, switches to a three-column layout with a smaller gap and increased font size.

Footer Headings

.footer-heading {
  font-size: 1.5rem;
}
.footer-heading + * {
  margin-top: 1.5rem;
}
  • Sets the font size for footer headings.
  • Adds a top margin to elements that follow a footer heading.

Footer Data List

.footer-datalist dt {
  margin-top: 1.75rem;
  color: var(--palette-6);
}
.footer-datalist dt:first-of-type {
  margin-top: 0;
}
  • Adds a top margin and sets the text color for definition terms (<dt> elements).
  • Removes the top margin for the first definition term in each list.

Definition Description Styles

.footer-datalist dd {
  margin-top: 0.25rem;
}
.footer-datalist a {
  font-weight: 400;
  text-decoration: none;
}
.footer-datalist a:hover, .footer-datalist a:focus {
  background-color: var(--palette-6);
  color: var(--color-text-primary);
}
  • Adds a top margin to definition descriptions (<dd> elements).
  • Styles links within the definition list with a normal font weight and no text decoration.
  • Changes the background and text color on hover and focus for these links.

Footer List

.some-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
  • Removes the default list styling and padding for lists.
  • Uses flexbox to layout list items and allows wrapping to new lines as needed.

List Item Styles

.some-list-item {
  margin-right: 0.75rem;
}
  • Adds a right margin to list items for spacing.

List Link Styles

.some-list-link {
  display: block;
  line-height: 1;
}
.some-list-link svg {
  width: 2rem;
}
  • Ensures that list links are displayed as block elements and sets the line height.
  • Sets the width for SVG icons within these links.
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Manrope:wght@400;500;600;700;800&display=swap");
*,
*:before,
*:after {
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

html {
  overflow-x: hidden;
}

body {
  scroll-behavior: smooth;
  line-height: 1.5;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  font-weight: bold;
}

input,
button,
textarea,
select {
  margin: 0;
  border-radius: 0;
  font: inherit;
}

button {
  border: 1px solid;
  background-color: transparent;
}

:focus {
  outline-width: 2px;
  outline-style: dashed;
  outline-color: var(--color-text-primary);
  outline-offset: 2px;
}
.footer :focus {
  outline-color: var(--color-bg-primary);
}

@media (prefers-reduced-motion: reduce) {
  * {
    -webkit-animation-duration: 0.01ms !important;
            animation-duration: 0.01ms !important;
    -webkit-animation-iteration-count: 1 !important;
            animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
:root {
  --palette-1: #0a403d;
  --palette-2: #13948d;
  --palette-3: #e8fbfa;
  --palette-4: #eee;
  --palette-5: #fff;
  --palette-6: #92f2ed;
  --color-text-primary: var(--palette-1);
  --color-links-primary: var(--palette-2);
  --color-bg-primary: var(--palette-5);
  --color-bg-secondary: var(--palette-3);
  --color-border-primary: var(--palette-4);
  --color-border-secondary: var(--palette-2);
}

body {
  font-family: "Manrope", "DM Sans", sans-serif;
  color: var(--color-text-primary);
}

.responsive-wrapper {
  width: 90%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

.header {
  display: flex;
  border-bottom: 2px solid var(--color-border-primary);
  height: 92px;
  border-top: 8px solid var(--color-border-secondary);
}

.header-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  position: relative;
}

.logo {
  display: block;
  padding-top: 20px;
  margin-bottom: -20px;
  height: 100px;
}
.logo img {
  max-height: 100%;
}

.header-nav {
  display: flex;
  align-items: center;
}

.header-nav-item {
  margin-left: 1.5rem;
  font-weight: 400;
  font-size: 1.125rem;
  text-decoration: none;
  align-items: center;
  height: 100%;
  position: relative;
  transition: color 0.15s ease;
  display: none;
}
.header-nav-item:after {
  content: "";
  display: block;
  height: 4px;
  transform: scale(0);
  background-color: var(--color-links-primary);
  border-radius: 4px 4px 0 0;
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  transition: transform 0.25s ease;
  transform-origin: bottom center;
}
.header-nav-item:hover, .header-nav-item:focus {
  color: var(--color-links-primary);
}
.header-nav-item:hover:after, .header-nav-item:focus:after {
  transform: scale(1);
}
@media all and (min-width: 1000px) {
  .header-nav-item {
    display: flex;
  }
}

.menu-toggle {
  border: 1px solid;
  border-bottom-width: 3px;
  padding: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
}
.menu-toggle:before {
  display: block;
  content: "menu";
  font-family: "Material Icons Outlined";
  font-size: 1.5rem;
  margin-right: 0.25rem;
}
@media all and (min-width: 1000px) {
  .menu-toggle {
    display: none;
  }
}

.link {
  color: var(--color-links-primary);
}

.banner-outer {
  padding-top: 4rem;
  padding-bottom: 4rem;
  min-height: 375px;
}

.banner {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 2rem;
  align-items: center;
  font-size: 1.125rem;
}
@media all and (min-width: 800px) {
  .banner {
    grid-template-columns: repeat(6, 1fr);
  }
}
@media all and (min-width: 1000px) {
  .banner {
    grid-template-columns: repeat(12, 1fr);
  }
}

@media all and (min-width: 800px) {
  .banner-search-wrapper {
    grid-column: span 3;
  }
}
@media all and (min-width: 1000px) {
  .banner-search-wrapper {
    grid-column: span 7;
  }
}

.banner-image-wrapper {
  text-align: center;
}
@media all and (min-width: 800px) {
  .banner-image-wrapper {
    grid-column: span 3;
  }
}
@media all and (min-width: 1000px) {
  .banner-image-wrapper {
    grid-column: 9/span 4;
  }
}
.banner-image-wrapper svg {
  max-width: 100%;
  max-height: 250px;
}
@media all and (min-width: 1000px) {
  .banner-image-wrapper svg {
    max-height: 100%;
  }
}

.banner-title {
  font-size: 1.75rem;
  line-height: 1.125;
}
@media all and (min-width: 1000px) {
  .banner-title {
    font-size: 2.5rem;
  }
}

.banner-search {
  display: flex;
  width: 100%;
  align-items: center;
  position: relative;
  height: 56px;
  overflow: hidden;
  margin-top: 1rem;
}
@media all and (min-width: 1000px) {
  .banner-search {
    height: 64px;
  }
}

.banner-search-input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid;
  padding: 0 5rem 0 1rem;
  height: 100%;
  width: 100%;
}
.banner-search-input:focus {
  border-color: var(--color-links-primary);
  background-color: var(--color-bg-secondary);
}
@media all and (min-width: 1000px) {
  .banner-search-input {
    font-size: 1.125rem;
  }
}

.banner-search-submit {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: var(--color-links-primary);
  color: var(--palette-5);
  border: none;
  font-weight: 700;
  padding: 0 1.5rem;
  position: absolute;
  height: calc(100% - 0.75rem);
  top: 0.375rem;
  right: 0.375rem;
}
@media all and (min-width: 1000px) {
  .banner-search-submit {
    font-size: 1.125rem;
    height: calc(100% - 1rem);
    top: 0.5rem;
    right: 0.5rem;
  }
}
.banner-search-submit:hover, .banner-search-submit:focus {
  background-color: var(--color-text-primary);
}

.banner-nav {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
}

.banner-nav-item {
  margin-right: 1.5rem;
  margin-bottom: 0.75rem;
  font-weight: 400;
}
.banner-nav-item:hover, .banner-nav-item:focus {
  background-color: var(--color-bg-secondary);
  color: var(--color-text-primary);
  text-decoration: none;
}

.services-outer {
  padding: 4rem 0 3rem;
  background-color: var(--color-bg-secondary);
  border-top-left-radius: 50% 20px;
  border-top-right-radius: 50% 20px;
}
@media all and (min-width: 1000px) {
  .services-outer {
    border-top-left-radius: 50% 50px;
    border-top-right-radius: 50% 50px;
  }
}

.services-title {
  font-size: 1.75rem;
  line-height: 1.25;
  text-align: center;
}

.services {
  margin-top: 1.5rem;
}

.services-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1rem;
}
@media all and (min-width: 1000px) {
  .services-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

.services-item {
  background-color: var(--color-bg-primary);
  padding: 1.25rem;
  border: 1px solid var(--color-border-secondary);
  position: relative;
  transition: 0.15s ease;
}
@media all and (min-width: 1000px) {
  .services-item {
    padding: 1.75rem;
  }
}
.services-item:hover, .services-item:focus-within {
  transform: translateY(-0.5rem);
  box-shadow: 0 3px 0 var(--color-links-primary);
}

.services-item-link {
  font-size: 1.25rem;
  text-decoration: none;
}
.services-item-link:after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.services-item-description {
  margin-top: 0.75rem;
}

.services-actions {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

.link-btn {
  background-color: var(--color-links-primary);
  color: var(--palette-5);
  display: inline-flex;
  padding: 0.5em 1em;
  text-decoration: none;
  align-items: center;
  font-size: 1.125rem;
  font-weight: 400;
}
.link-btn:after {
  display: block;
  content: "arrow_forward";
  font-family: "Material Icons Outlined";
  margin-left: 0.5rem;
}
.link-btn:hover, .link-btn:focus {
  background-color: var(--color-text-primary);
}

.news-outer {
  padding: 5rem 0;
}

.news-inner {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 4rem;
}
@media all and (min-width: 1000px) {
  .news-inner {
    grid-template-columns: repeat(12, 1fr);
  }
}

.grid-width-7 {
  grid-column: span 1;
}
@media all and (min-width: 1000px) {
  .grid-width-7 {
    grid-column: span 7;
  }
}

.grid-width-5 {
  grid-column: span 1;
}
@media all and (min-width: 1000px) {
  .grid-width-5 {
    grid-column: 8/span 5;
  }
}

.news-section-title {
  display: flex;
  align-items: center;
  font-size: 1.5rem;
}
@media all and (min-width: 1000px) {
  .news-section-title {
    font-size: 1.75rem;
  }
}
.news-section-title:before {
  display: block;
  font-family: "Material Icons Outlined";
  margin-right: 0.75rem;
  font-size: 2.5rem;
  font-weight: 400;
  color: var(--color-links-primary);
}
.news-section-title.icon-news:before {
  content: "local_library";
}
.news-section-title.icon-announcement:before {
  content: "flag";
}

.news {
  list-style: none;
  padding: 0;
  margin-top: 1rem;
  padding-left: 1.25rem;
  border-left: 1px solid var(--color-border-secondary);
  padding-top: 1.5rem;
  padding-bottom: 3rem;
}
@media all and (min-width: 1000px) {
  .news {
    margin-left: 1.25rem;
    padding-left: 2rem;
  }
}

.news-item + * {
  margin-top: 3rem;
}

.news-headline {
  font-size: 1.25rem;
  transition: background-color 0.15s ease;
}
.news-headline:hover, .news-headline:focus {
  background-color: var(--color-bg-secondary);
  text-decoration: none;
}

.news-excerpt {
  margin-top: 0.75rem;
}

@media all and (min-width: 1000px) {
  .news-section-actions {
    padding-left: 1.25rem;
  }
}

.footer {
  background-color: var(--palette-1);
  color: #fff;
  padding: 4rem 0 8rem;
  background-image: url("img/topography.svg");
  background-repeat: no-repeat;
  background-size: 700px;
  background-position: bottom -175px right -300px;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 4rem;
  line-height: 1.375;
}
@media all and (min-width: 1000px) {
  .footer-content {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    font-size: 1.125rem;
  }
}

.footer-heading {
  font-size: 1.5rem;
}
.footer-heading + * {
  margin-top: 1.5rem;
}

.footer-datalist dt {
  margin-top: 1.75rem;
  color: var(--palette-6);
}
.footer-datalist dt:first-of-type {
  margin-top: 0;
}
.footer-datalist dd {
  margin-top: 0.25rem;
}
.footer-datalist a {
  font-weight: 400;
  text-decoration: none;
}
.footer-datalist a:hover, .footer-datalist a:focus {
  background-color: var(--palette-6);
  color: var(--color-text-primary);
}

.some-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

.some-list-item {
  margin-right: 0.75rem;
}

.some-list-link {
  display: block;
  line-height: 1;
}
.some-list-link svg {
  width: 2rem;
}

Final Output:

norwegian-municipality-website-clone-using-html-and-css.gif
Read Alsocreate a pure css simple search bar step-by-step tutorial.jpgCreate a Pure CSS Simple Search Bar: Step-by-Step Tutorial

Conclusion:

Building a Norwegian municipality website clone using HTML and CSS is an excellent way to enhance your web development skills. We've covered setting up your development environment, structuring HTML, styling with CSS, and making the site responsive.

Final Thoughts and Next Steps

Now that you've completed this guide, consider exploring more advanced topics such as JavaScript for interactivity, back-end development for dynamic content, and web accessibility to ensure your site is usable by everyone. Keep practicing and building new projects to continue improving your skills.

Code by: Havard Brynjulfsen

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: norwegian municipality website, html, css, website clone, web development, source code, municipality website landing page, municipality templates, how to clone a norwegian municipality website, html and css for beginners, step-by-step guide to creating a website clone, building a municipality website with html and css
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post

Please allow ads on our site🥺