How to Create a Header in Website Page
HTML
HTML is a programming language used to describe the structure of information on a web page. HTML file must be saved index.html. .html is the extension of HTML file.
Cascading Style Sheets
CSS is a style sheet language used for describing the presentation of a document written in a Markup Languages like HTML. .css is the extension of cascading style sheet.
Bootstrap
Bootstrap is a framework to help you design websites faster and easier. .html and .css is the extension of bootstrap.
How to write a code Step by Step Process
Step 1: Create a folder. Folder name Project.
Step 2: Open Sublime text and Type given HTML code.
Step 3: After enter this code, Save file name index.html (inside the Project folder)
Step 4: Open index.html with any browser like Chrome, Internet explorer, etc.
Step 5: Finally get an output.
Header Source Code
index.html
<html>
<head>
<title>Career Lines</title>
<link href=”css/bootstrap.css” rel=’stylesheet’ type=’text/css’ />
</head>
<body>
<div class=”banner” id=”home”>
<div class=”header-bottom wow slideInDown” data-wow-duration=”1s” data-wow-delay=”.3s”>
<div class=”container”>
<div class=”fixed-header”>
<div class=”logo”>
<a href=”index.html”><img src=”logo.png” height=”100″ width=”100″ alt=”logo”></a>
</div>
<div class=”top-menu”>
<span class=”menu”> </span>
<nav class=”link-effect-4″ id=”link-effect-4″>
<ul>
<li class=”active”><a data-hover=”Home” href=”index.html”>Home</a></li>
<li><a data-hover=”About” href=”#about” class=”scroll”>About</a></li>
<li><a data-hover=”Menus” href=”#menus” class=”scroll”>Menus</a></li>
<li><a data-hover=”Services” href=”#services” class=”scroll”>Services</a></li>
<li><a data-hover=”Gallery” href=”#gallery” class=”scroll”>Gallery</a></li>
<li><a data-hover=”Contact” href=”#contact” class=”scroll”>Contact</a></li>
</ul></nav></div><script>
$(“span.menu”).click(function(){
$(“.top-menu ul”).slideToggle(“slow” , function(){});});
</script>
<div class=”clearfix”></div>
<script>
$(document).ready(function() {
var navoffeset=$(“.header-bottom”).offset().top;
$(window).scroll(function(){
var scrollpos=$(window).scrollTop();
if(scrollpos >=navoffeset){
$(“.header-bottom”).addClass(“fixed”);
}else{
$(“.header-bottom”).removeClass(“fixed”);
} }); });
</script>
</div></div></div>
<style type=”text/css”>
body a {
-webkit-transition: 0.5s all;
}
html, body{
font-family: ‘Calibri’, sans-serif;
background: black;
}
@font-face {
font-family: ‘PoiretOne-Regular’;
src: url(../fonts/PoiretOne-Regular.ttf)format(‘truetype’);
}
a:hover{
text-decoration:none;
}
input[type=”button”],input[type=”submit”],li.parallelogram{
transition:0.5s all;
-webkit-transition:0.5s all;
-moz-transition:0.5s all;
-o-transition:0.5s all;
-ms-transition:0.5s all;
}
h1,h2,h3,h4,h5,h6{
margin:0;
font-family: serif;
color: white;
font-style: bold;
}
ul{
margin:0;
padding:0;
}
label{
margin:0;
}
.logo{
float:left;
}
.phone {
float: right;
}
.logo a{
display:block;
}
.logo a h1 {
font-weight: bold;
font-size: 4.5em;
color: #EFA52C;
text-transform: uppercase;
}
.logo a span {
color: #fff;
font-family: ‘Merriweather Sans’, sans-serif;
font-size: 0.3em;
font-weight: bold;
}
.logo p {
font-size: 0.8em;
color: #EFA52C;
text-transform: uppercase;
letter-spacing: 3px;
padding: 0;
margin: -9px 0 12px 0;
}
.header-bottom {
padding: 0.5em 0em;
margin: 0 auto;
width: 100%;
}
.fixed{
position: fixed;
top: 0;
width: 100%;
margin: 0 auto;
left:0%;
z-index:9999;
background-color: rgba(0, 0, 0, 0.59);
}
.top-menu {
float: right;
margin-top: 2.2em;
}
.top-menu ul{
margin:0;
padding:0;
}
.top-menu li {
text-transform:uppercase;
display:inline-block;
}
.top-menu li a{
color:white;
text-decoration:none;
display:block;
padding:0;
font-weight:400;
font-size:1.4em;
}
.top-menu li a.active{
color: #fff200;
}
.link-effect-4 a {
margin:0 12px;
text-shadow: none;
position: relative;
}
.link-effect-4 a::before {
position: absolute;
top: 0;
left: -10px;
overflow: hidden;
padding: 0 10px;
transition: max-height 0.5s;
}
.link-effect-4 a:hover::before {
max-height: 100%;
}
@media only screen and (max-width :800px) {
.top-menu {
float: none;
margin-top: 0em;
}
.top-menu ul{
display:none;
}
.top-menu ul li {
display:block;
margin-right:0;
}
.top-menu span.menu{
display:block;
}
.top-menu ul {
margin: 103px 0;
padding: 2% 0;
z-index: 999;
position: absolute;
width: 92%;
background: #efa52c;
text-align: center;
}
.top-menu li a {
padding: 0.5em;
font-weight: 400;
font-size:0.9em;
}
.top-menu ul li a {
font-size: 0.9em;
display: inline-block;
}
.link-effect-4 a::before {
position: absolute;
top: 6px;
left: -3px;
overflow: hidden;
padding: 0 10px;
max-height: 0;
color: #333;
}
}
</style>
</div>
</body>
</html>
Note:
<img src=“logo.png” height=”100″ width=”100″ alt=”logo”></a>
*Logo Image must be placed on your Device.
(For Ex: Here My Image Name- Logo.Png, File Name:Project) If I want view the Logo design I should save the Logo Image With in the Project Folder (File), otherwise i can’t View the Logo.
Next Blog – How to Create Banner Slideshow in Website Page step by step guidance.
For Detailed Information: Click Here