Header & Footer, Html and CSS

How to create a header in Html and CSS | Html CSS templates

In this lesson, we are going to learn how to create a header of the website using HTML, CSS, and JS. In the last lecture, we learned how to create a responsive navigation bar using HTML, CSS, and JS.

What is the header of the website in Html?

If you have visited any website then you must go through the header of the website because it is the first and top part of the website which includes the logo, menu, login, signup, and social media buttons for sharing content or link.

A header is the main part of the website because it helps the visitors to visit the website and understand the type of the website. It contains a navigational bar (logo and menu) which helps the users to connect with other parts of the website or other sections/pages of the website because every section and page has different content and the user wants to visit that portion.

How to create a header for the website?

This header is responsive across all devices (mobile, tab, and PC/laptop). It contains different buttons for linking it with other sections of the website so that users can visit every corner of the website.

How to download the code?

Scroll down to get the source code of this header section. So, here are some designs as well.

Download code of the header of the website:

Name the Html file header.html and CSS file header.css and then paste the given code into these files. Save these files with the extensions. HTML and . CSS because these extensions help the browser to understand the type of the file and execute the code properly.

Source code of HTML:

<!-- fantacydesigns.com-->
<!-- fantacy Designs Free Templets  -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Fantacy Design | Sticky Navigation</title>
  </head>
  <body>
    <nav class="nav">
      <div class="container">
        <h1 class="logo"><a href="/index.html">F<span>D</span></a></h1>
        <ul>
          <li><a href="#" class="current">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
          <li><a href="#">Privacy-Policy </a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </nav>

    <div class="hero">
      <div class="container">
        <h1>Welcome To <span>Fantacy Design<span></h1>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores, consequuntur?</p>
      </div>
    </div>

    <section class="container content">
      <h2>Content One</h2>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione dolorem voluptates eveniet tempora ut cupiditate magnam, sapiente, hic quo in ipsum iste soluta eaque perferendis nihil recusandae dolore officia aperiam corporis similique. Facilis quos tempore labore totam! Consectetur molestiae iusto ducimus error reiciendis aspernatur dolor, modi dolorem sit architecto, voluptate magni sunt unde est quas? Voluptates a dolorum voluptatum quo perferendis aut sit. Aspernatur libero laboriosam ab eligendi omnis delectus earum labore, placeat officiis sint illum rem voluptas ipsum repellendus iste eius recusandae quae excepturi facere, iure rerum sequi? Illum velit delectus dicta et iste dolorum obcaecati minus odio eligendi!</p>

      <h3>Content Two</h3>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Pariatur provident nostrum possimus inventore nisi laboriosam consequatur modi nulla eos, commodi, omnis distinctio! Maxime distinctio impedit provident, voluptates illo odio nostrum minima beatae similique a sint sapiente voluptatum atque optio illum est! Tenetur tempora doloremque quae iste aperiam hic cumque repellat?</p>
    </section>

    <script src="script.js"></script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Fantacy Design | Sticky Navigation</title>

</head>

<body>

<ul>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

<li><a href="#">Privacy-Policy </a></li>

<li><a href="#">Contact</a></li>

</ul>

</div>

</nav>

<h1>Welcome To <span>Fantacy Design<span></h1>

<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores, consequuntur?</p>

</div>

<h2>Content One</h2>

<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione dolorem voluptates eveniet tempora ut cupiditate magnam, sapiente, hic quo in ipsum iste soluta eaque perferendis nihil recusandae dolore officia aperiam corporis similique. Facilis quos tempore labore totam! Consectetur molestiae iusto ducimus error reiciendis aspernatur dolor, modi dolorem sit architecto, voluptate magni sunt unde est quas? Voluptates a dolorum voluptatum quo perferendis aut sit. Aspernatur libero laboriosam ab eligendi omnis delectus earum labore, placeat officiis sint illum rem voluptas ipsum repellendus iste eius recusandae quae excepturi facere, iure rerum sequi? Illum velit delectus dicta et iste dolorum obcaecati minus odio eligendi!</p>

<h3>Content Two</h3>

<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Pariatur provident nostrum possimus inventore nisi laboriosam consequatur modi nulla eos, commodi, omnis distinctio! Maxime distinctio impedit provident, voluptates illo odio nostrum minima beatae similique a sint sapiente voluptatum atque optio illum est! Tenetur tempora doloremque quae iste aperiam hic cumque repellat?</p>

</section>

</body>

</html>

Source code of CSS file:

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Open Sans', sans-serif;
  color: #222;
  padding-bottom: 50px;
}
span{
  color: #1DBF73;
  font-size: 50px;
}
span:hover{
  color: #fff;
  transition: 0.5s;
}
.container {
  max-width: 1200px;
  margin: 0 auto;
}
.logo{
font-size: 46px;
color: #fff'
}
.nav {
  position: fixed;
  background-color: #222;
  top: 0;
  left: 0;
  right: 0;
  transition: all 0.3s ease-in-out;
}

.nav .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  transition: all 0.3s ease-in-out;
}

.nav ul {
  display: flex;
  list-style-type: none;
  align-items: center;
  justify-content: center;
}

.nav a {
  color: #fff;
  text-decoration: none;
  padding: 7px 15px;
  transition: all 0.3s ease-in-out;
}

.nav.active {
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.nav.active a {
  color: #000;
}

.nav.active .container {
  padding: 10px 0;
}

.nav a.current,
.nav a:hover {
  color: #1DBF73;
  font-weight: bold;
}

.hero {
  background-image: url('https://images.pexels.com/photos/450035/pexels-photo-450035.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom center;
  height: 100vh;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  margin-bottom: 20px;
  z-index: -2;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: -1;
}

.hero h1 {
  font-size: 46px;
  margin: -20px 0 20px;
}

.hero p {
  font-size: 20px;
  letter-spacing: 1px;
}

.content h2,
.content h3 {
  font-size: 150%;
  margin: 20px 0;
}

.content p {
  color: #555;
  line-height: 30px;
  letter-spacing: 1.2px;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

* {

box-sizing: border-box;

margin: 0;

padding: 0;

}

body {

font-family: 'Open Sans', sans-serif;

color: #222;

padding-bottom: 50px;

}

span{

color: #1DBF73;

font-size: 50px;

}

span:hover{

color: #fff;

transition: 0.5s;

}

.container {

max-width: 1200px;

margin: 0 auto;

}

.logo{

font-size: 46px;

color: #fff'

}

.nav {

position: fixed;

background-color: #222;

top: 0;

left: 0;

right: 0;

transition: all 0.3s ease-in-out;

}

.nav .container {

display: flex;

justify-content: space-between;

align-items: center;

padding: 20px 0;

transition: all 0.3s ease-in-out;

}

.nav ul {

display: flex;

list-style-type: none;

align-items: center;

justify-content: center;

}

.nav a {

color: #fff;

text-decoration: none;

padding: 7px 15px;

transition: all 0.3s ease-in-out;

}

.nav.active {

background-color: #fff;

box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);

}

.nav.active a {

color: #000;

}

.nav.active .container {

padding: 10px 0;

}

.nav a.current,

.nav a:hover {

color: #1DBF73;

font-weight: bold;

}

.hero {

background-image: url('https://images.pexels.com/photos/450035/pexels-photo-450035.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');

background-repeat: no-repeat;

background-size: cover;

background-position: bottom center;

height: 100vh;

color: #fff;

display: flex;

justify-content: center;

align-items: center;

text-align: center;

position: relative;

margin-bottom: 20px;

z-index: -2;

}

.hero::before {

content: '';

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-color: rgba(0, 0, 0, 0.5);

z-index: -1;

}

.hero h1 {

font-size: 46px;

margin: -20px 0 20px;

}

.hero p {

font-size: 20px;

letter-spacing: 1px;

}

.content h2,

.content h3 {

font-size: 150%;

margin: 20px 0;

}

.content p {

color: #555;

line-height: 30px;

letter-spacing: 1.2px;

}

Source code of JS file:

const nav = document.querySelector('.nav')
window.addEventListener('scroll', fixNav)

function fixNav() {
    if(window.scrollY > nav.offsetHeight + 150) {
        nav.classList.add('active')
    } else {
        nav.classList.remove('active')
    }
}

const nav = document.querySelector('.nav')

window.addEventListener('scroll', fixNav)

function fixNav() {

if(window.scrollY > nav.offsetHeight + 150) {

nav.classList.add('active')

} else {

nav.classList.remove('active')

}

In this way, you can create a header of the website in HTML and CSS. If you are facing any type of problem in understanding any property or tag of HTML and CSS then you can click here for learning all the tags and properties of Html and CSS.

Task:

We have created a header using Html and CSS languages. This header is connected with a hero section. In the hero section, we have an image of the landing page. Now change this hero section image with a video. Also, add a button below the heading. The button must have round corners and a title as “Read More”.

If you found this article useful then must like it and follow us. Also share it because sharing is caring and comment below if you have any queries.

Thanks for reading this article.

Download Source Code