Website Header With Sidebar Navigation
A website header with sidebar typically refers to a website layout where the header is located at the top of the page and the sidebar is located on either the left or right-hand side of the page.
To create a website header with sidebar, you will need to use HTML and CSS. Here is a basic example:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>header</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<section class="side_navbar" id="navbar">
<center>
<div class="logo">
<div class="img">
<img src="img1.png">
</div>
</div>
<div class="link" id="link">
<a href="#" class="acitv"><ion-icon name="home-outline"></ion-icon>home</a>
<a href="#"><ion-icon name="briefcase-outline"></ion-icon>features</a>
<a href="#"><ion-icon name="layers-outline"></ion-icon>portfilo</a>
<a href="#"><ion-icon name="people-outline"></ion-icon>resume</a>
<a href="#"><ion-icon name="person-outline"></ion-icon>clients</a>
<a href="#"><ion-icon name="cart-outline"></ion-icon>pricing</a>
<a href="#"><ion-icon name="image-outline"></ion-icon>blog</a>
<a href="#"><ion-icon name="chatbubble-outline"></ion-icon>contacts</a>
</div>
<button class="btn">
<ion-icon name="cart-outline"></ion-icon>
<span>0</span>
</button>
<hr class="line">
<div class="icon">
<ion-icon name="logo-facebook"></ion-icon>
<ion-icon name="logo-twitter"></ion-icon>
<ion-icon name="logo-linkedin"></ion-icon>
</div>
</center>
</section>
<!-- ===================================================== -->
<section class="home" id="home">
<center>
<div class="home_logo">
<div class="img">
<img src="img2.png" alt="">
</div>
</div>
<h1>Hi, I'm Jone Lee</h1>
<div class="container">
<p>I am a
<span class="typed-text"></span>
<span class="TypeCursor"> </span>
</p>
</div>
<button class="btn1">contant me</button>
<script src="function.js"></script>
</center>
</section>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
<script>
const TypingText = document.querySelector(".typed-text");
const AutoTyping = document.querySelector(".TypeCursor");
const textArray = ["UI/UX Designer.", "Professionl Coder.", "Developer."];
const typingDelay = 100;
const erasingDelay = 100;
const newTextDelay = 1000;
let textArrayIndex = 0;
let charIndex = 0;
function type() {
if (charIndex < textArray[textArrayIndex].length) {
if (!AutoTyping.classList.contains("typing")) AutoTyping.classList.add("typing");
TypingText.textContent += textArray[textArrayIndex].charAt(charIndex);
charIndex++;
setTimeout(type, typingDelay);
}
else {
AutoTyping.classList.remove("typing");
setTimeout(erase, newTextDelay);
}
}
function erase() {
if (charIndex > 0) {
if (!AutoTyping.classList.contains("typing")) AutoTyping.classList.add("typing");
TypingText.textContent = textArray[textArrayIndex].substring(0, charIndex - 1);
charIndex--;
setTimeout(erase, erasingDelay);
}
else {
AutoTyping.classList.remove("typing");
textArrayIndex++;
if (textArrayIndex >= textArray.length) textArrayIndex = 0;
setTimeout(type, typingDelay + 1100);
}
}
document.addEventListener("DOMContentLoaded", function () {
if (textArray.length) setTimeout(type, newTextDelay + 250);
});
</script>
</body>
</html>
CSS:
:root {
--main-color: #212428;
--main-color2: #ea044c;
}
* {
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
text-decoration: none;
border: none;
outline: none;
}
html {
font-size: 62.5%;
overflow-x: hidden;
scroll-padding-top: 9rem;
scroll-behavior: smooth;
}
html::-webkit-scrollbar {
width: .8rem;
}
html::-webkit-scrollbar-track {
background: var(--main-color);
}
html::-webkit-scrollbar-thumb {
background: var(--main-color);
border-radius: 4rem;
}
.side_navbar {
width: 20%;
height: 800px;
background: var(--main-color);
display: flex;
align-items: center;
justify-content: left;
padding: 50px 20px 50px 50px;
border-right: 1px solid #3e3c3c;
}
.side_navbar .logo {
width: 200px;
height: 200px;
border-radius: 50%;
position: relative;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
}
.side_navbar .logo .img {
width: 95%;
height: 95%;
border-radius: 50%;
overflow: hidden;
}
.side_navbar .logo .img img {
width: 100%;
height: 100%;
}
.logo::before {
content: "";
width: 100%;
height: 100%;
background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
position: absolute;
top: 0;
left: 0;
z-index: -1;
border-radius: 50%;
animation: rot 5s ease-in-out infinite;
}
@keyframes rot {
50% {
transform: rotate(360deg);
}
100% {
transform: rotate(360deg);
}
}
/* ==================== */
.link {
padding: 20px 0;
text-align: left;
}
.link a {
display: block;
padding: 15px 0px;
text-transform: uppercase;
font-size: 18px;
color: #eee;
font-weight: 100;
letter-spacing: 1px;
}
.link .acitv {
color: var(--main-color2);
}
.link a ion-icon {
padding: 0 20px 0 0;
}
.link a:hover {
color: var(--main-color2);
}
/* ============================================= */
.btn {
width: 100%;
height: 50px;
border-radius: 9px;
background: #212428;
box-shadow: 10px 10px 19px #1b1e21,
-10px -10px 19px #272a2f;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
transition: .5s;
transform: translateY(10px);
}
.btn ion-icon {
font-size: 25px;
color: #eee;
}
.btn span {
font-size: 20px;
padding: 2px 5px;
background: var(--main-color2);
border-radius: 50%;
color: #eee;
}
.btn:hover {
transform: translateY(-10px);
cursor: pointer;
}
/* ==================== */
.line {
width: 100%;
border-bottom: 1px solid #3e3c3c;
margin-top: 40px;
}
/* ========================================= */
.icon {
width: 100%;
height: auto;
margin-top: 50px;
}
.icon ion-icon {
font-size: 25px;
padding: 15px;
border-radius: 8px;
background: linear-gradient(145deg, #1e2024, #23272b);
box-shadow: 12px 12px 19px #1c1f22,
-12px -12px 19px #26292e;
margin-right: 10px;
color: #eee;
transition: .5s;
}
.icon ion-icon:hover {
transform: translateY(-10px);
cursor: pointer;
background: linear-gradient(145deg, #23272b, #1e2024);
box-shadow: 12px 12px 19px #1c1f22,
-12px -12px 19px #26292e;
}
/* ==========================================================
=============================================================== */
.home {
width: 80%;
height: 100vh;
position: fixed;
top: 0;
right: 0;
z-index: -1;
background: var(--main-color);
display: flex;
align-items: center;
justify-content: center;
}
.home_logo {
width: 360px;
height: 360px;
border-radius: 50%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 40px 40px 80px #1a1c1f,
-40px -40px 80px #282c31;
}
.home_logo::before {
content: "";
width: 100%;
height: 100%;
background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: -1;
border-radius: 50%;
animation: rot2 5s ease-in-out infinite;
}
@keyframes rot2 {
50% {
transform: rotate(360deg);
background-color: #0093E9;
background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
}
100% {
transform: rotate(360deg);
background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
}
}
.home_logo .img {
width: 93%;
height: 93%;
overflow: hidden;
border-radius: 50%;
}
.home_logo .img img {
width: 100%;
height: 100%;
}
.home h1 {
font-size: 50px;
font-weight: 600;
color: #eee;
z-index: 9999;
padding: 30px 0;
}
.container p {
font-size: 30px;
font-weight: 100;
color: #eee;
}
.typed-text {
color: var(--main-color2);
}
.container p span.TypeCursor {
display: inline-block;
background-color: #ccc;
margin-left: 0.1rem;
width: 3px;
animation: blink 1s infinite;
}
.home .btn1 {
padding: 15px 20px;
border-radius: 5px;
background: linear-gradient(315deg, #1e2024, #23272b);
box-shadow: -7px -7px 15px #1c1f22,
7px 7px 15px #26292e;
color: #eee;
font-size: 15px;
text-transform: uppercase;
letter-spacing: 2px;
margin-top: 30px;
transition: .5s;
color: var(--main-color2);
}
In this example, the header contains a website name and a navigation menu. The main content of the page is divided into a section that contains an aside (the sidebar) and an article. The CSS styles the header, navigation, sidebar, and article to create the desired layout.
#website #websitetemplate #sidebar #navigation #menu #sourcecode #html #css #web