Site Header

Developer
Kevin Sherman
Size
3,300 Kb
Views
30,360
  1. Site Header Previews
  2. Site Header HTML Codes
  3. Site Header CSS Codes

How do I make an site header?

Homepage header revised style. What is a site header? How do you make a site header? This script and codes were developed by Kevin Sherman on 06 September 2022, Tuesday.

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 prefetch' href='https://www.ben.edu/style/foundation-grid.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav class="lisle"> <div class="utility"> <div class="row"> <div class="small-5 columns campus"> <ul> <li>Campus:</li> <li><a href="#">Lisle, IL</a></li> <li><a href="#">Springfield, IL</a></li> <li><a href="#">Mesa, AZ</a></li> <li><a href="#">National Moser Center</a></li> </ul> </div> <div class="small-7 columns secondary"> <ul> <li><a href="#">Account Login</a></li> <li><a href="#">Library</a></li> <li><a href="#">Apply Now</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Maps & Directions</a></li> <li><input type="text" placeholder="search..."></li> </ul> </div> </div> </div> <div class="brand"> <a href="/"><img src="https://ben.edu/style/images/BULogo.svg"></a> </div> <div class="primary">	<div class="row collapse">	<div class="small-12 columns">	<ul>	<li><a href="#">About&nbsp;&nbsp;&&nbsp;&nbsp;Campus Locations</a></li>	<li><a href="#">Degree Programs</a></li>	<li><a href="#">Admissions</a></li>	<li><a href="#">Campus Community</a></li>	<li><a href="#">Athletics</a></li>	</ul>	</div>	</div> </div>
</nav>
<div style="height: 75vh; background-color: #ddd; width: 100%;"></div>
</body>
</html>

Site Header - Script Codes CSS Codes

nav.lisle .utility { background: linear-gradient(#222, #333); color: white; display: block; width: 100%;
}
nav.lisle .utility .secondary { text-align: right;
}
nav.lisle .utility ul { list-style-type: none; margin: 0; padding: 0;
}
nav.lisle .utility ul > li { display: inline-block; font-size: 0.8rem;
}
nav.lisle .utility ul > li > a { display: block; text-decoration: none; color: white; padding: 6px 4px; border-bottom: 2px solid #333; height: 33px;
}
nav.lisle .utility ul > li > a:hover { color: #d65c5c; background-color: #2f2f2f; border-bottom: 2px solid #cc3333;
}
nav.lisle .utility ul > li input[type="text"] { border: none; border-left: 1px solid #666; border-right: 1px solid #666; padding: 7px 0 10px 6px; color: white; background-color: transparent;
}
nav.lisle .brand { border-top: 1px solid #e98585; background: linear-gradient(#dd4444, #cc3333); text-align: center; border-bottom: 1px solid #c03030;
}
nav.lisle .brand > a { display: block; width: 100%; padding: 1rem;
}
nav.lisle .brand > a > img { width: 300px;
}
nav.lisle .primary { background-color: #cc3333; width: 100%; border-bottom: 5px solid #db7070;
}
nav.lisle .primary ul { list-style: none; margin: 0; padding: 0; display: flex; width: 100%;
}
nav.lisle .primary li { background-image: linear-gradient(to bottom, transparent 50%, #b42d2d 50%, #b42d2d 95%, #832121 95%); background-size: 100% 200%; background-position: top center; color: #666; display: block; text-align: center; text-decoration: none; transition: all .25s ease-in-out; flex: 1 1 auto;
}
nav.lisle .primary li:hover { background-position: bottom center; transform: scale(1.2);
}
nav.lisle .primary li a { color: white; display: block; padding: 1rem 0; transition: all .25s ease-in-out; text-decoration: none; font-weight: 300; font-size: 14px;
}
Site Header - Script Codes
Site Header - Script Codes
Home Page Home
Developer Kevin Sherman
Username ksherman
Uploaded September 06, 2022
Rating 3
Size 3,300 Kb
Views 30,360
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!

Kevin Sherman (ksherman) Script Codes
Name
QCore Order Entry
Inquiry Form Test
BenU Interior Page Layout
BenU - Campus Life Experience
Degree Search with AngularJS
Main Campus Homepage Concept
Mobile floating menu
Vue - Alerts
Degree Map
International Admissions Scratch
Create amazing SEO content 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!