Html / Tag Code
<!-- Just A Simple Header Bar - ClickLur.com -->
<header class="ClickLur">
<p class="lead">Just A Simple Header Bar. Prowered by ClickLur.</p>
<div class="lur-bar">
<h1 class="logo">ClickLur</h1>
<ul class="slider-menu">
<li>Home</li>
<li>About</li>
<li>Services</li>
</ul>
</div>
</header>
<!-- End - Just A Simple Header Bar - ClickLur.com -->
Css Theme
/* Just A Simple Header Bar - ClickLur.com */
@import url('https://fonts.googleapis.com/css?family=Parisienne|Quicksand&display=swap');
html, body {
color: #000;
height: 100%;
margin: 0;
}
.ClickLur {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: #000;
}
.lead { font-family: 'Quicksand'; }
.lur-bar {
position: relative;
min-width: 300px;
width: 95%;
height: 50px;
border: 10px solid transparent;
border-top: 10px solid #000a;
border-left: 10px solid #000a;
box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.25) inset;
}
.lur-bar::after {
content: '';
position: absolute;
top: -10px;
right: -10px;
width: 30%;
height: 49px;
border: 10px solid transparent;
border-bottom: 10px solid #000a;
border-right: 10px solid #000a;
transition: 0.3s linear all;
}
.lur-bar > .logo {
position: absolute;
top: calc(50% - 20px);
left: 10px;
transform: translateY(-50%);
color: #000c;
font-family: 'Parisienne', cursive;
cursor: default;
user-select: none;
}
.slider-menu {
position: absolute;
top: 0;
right: 0;
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
z-index: 1;
}
.slider-menu > li {
display: inline-flex;
padding: 14px;
margin-left: 2px;
font-family: 'Quicksand', sans-serif;
color: #000;
cursor: pointer;
transition: 0.3s linear all;
user-select: none;
}
.slider-menu > li:hover {
color: blue;
box-shadow: 0 50px 5px rgba(0, 0, 0, 0.15) inset;
}
/* End - Just A Simple Header Bar - ClickLur.com */
Free Download Template
1 Comments
Hi
ReplyDelete