Site Header

Developer
Rachel McGrane
Size
2,985 Kb
Views
42,504
  1. Site Header Previews
  2. Site Header HTML Codes
  3. Site Header CSS Codes

How do I make an site header?

What is a site header? How do you make a site header? This script and codes were developed by Rachel McGrane on 12 September 2022, Monday.

Site Header Previews
IQ Test

Site Header - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Site Header</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header class="main-head">	<div class="header-inner">
<div class="logo">	<div class="logo-inner">	<div class="wing-tip left"></div>	<div class="head"></div>	<div class="wing-tip right"></div>	</div>
</div>	<nav class="main-nav">	<ul>	<li><a href="#">Help</a></li>	<li><a href="#">Settings</a></li>	<li><a href="#">Logout</a></li>	</ul>	</nav>
</div>
</header>
</body>
</html>

Site Header - Script Codes CSS Codes

body { padding-bottom: 4rem; font-family: 'Proxima Nova', sans-serif; line-height: 1.6; background: #f5f5f5;
}
.main-head { background: #1fcecb; height: 50px;
}
.header-inner { width: 60%; margin: 0 auto;
}
.logo { float: left; height: 50px; overflow: hidden; padding: 0 1rem; line-height: 50px;
}
.wing-tip { height: 4px; width: 17px; background: #fff; border-radius: 50px; position: relative; display: inline-block;
}
.wing-tip.left { transform: rotate(25deg);
}
.wing-tip.right { transform: rotate(-25deg);
}
.wing-tip.right::before, .wing-tip.right::after { left: 0;
}
.wing-tip::before { content: ""; height: 4px; width: 11.33333px; background: #fff; position: absolute; top: -6px; right: 0; border-radius: 50px;
}
.wing-tip::after { content: ""; height: 4px; width: 5.66667px; background: #fff; position: absolute; top: -12px; right: 0; border-radius: 50px;
}
.head { width: 7.5px; height: 7.5px; background: #fff; border-radius: 50%; display: inline-block; margin: 0 0.1rem; position: relative; top: 0.15rem; /*&::after {	content: "";	position: absolute;	width: 0;	height: 0;	border-left: 4px solid transparent;	border-right: 3px solid transparent;	border-top: 6px solid $color;	bottom: -3px;	left: 50%;	margin-left: -3.5px; }*/
}
.main-nav { float: right;
}
.main-nav ul { list-style: none; margin: 0; padding: 0;
}
.main-nav li { display: inline-block;
}
.main-nav a { display: inline-block; color: rgba(255, 255, 255, 0.8); text-decoration: none; font-weight: 700; padding: .875rem 1rem; position: relative;
}
.main-nav a:hover { color: #fff;
}
.main-nav a:hover::after { content: ""; position: absolute; height: 3px; width: 100%; left: 0; bottom: 3px; background: #18a29f;
}
Site Header - Script Codes
Site Header - Script Codes
Home Page Home
Developer Rachel McGrane
Username rachelmcgrane
Uploaded September 12, 2022
Rating 3
Size 2,985 Kb
Views 42,504
Do you need developer help for Site Header?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Rachel McGrane (rachelmcgrane) Script Codes
Name
Angular-Meteor Showcase
A Pen by Rachel McGrane
Bumble Coming Soon Page
Rainbow Preloader with Offset-Path
Kerbal Space Program Buy Button
Gmail Icon Animation
Ship Name Lookup
Audio Player WIP
Data Input Form
Greensock Light Switch
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!