Header Nav ('-' * 10)
A Pen by Juan Obrach on CodePen.
<header> | |
<div class="top"> | |
<span class="market"></span> | |
<span class="logo off "><h1>p</h1></span> | |
<span class="social"> | |
<ul> | |
<li class="f " > | |
<i class="fa fa-facebook"></i> | |
</li> | |
<li class="i"> | |
<i class="fa fa-instagram"></i> | |
</li> | |
<li class="t"> | |
<i class="fa fa-twitter"></i> | |
</li> | |
</ul> | |
</span> | |
</div> | |
<nav> | |
<ul> | |
<li>mujeres</li> | |
<li>hombres</li> | |
<li>social</li> | |
<li>blog</li> | |
<li>contacto</li> | |
</ul> | |
</nav> | |
</header> |
setInterval(function(){ | |
var el = $(".logo") | |
if(el.hasClass("off")){ | |
el.removeClass("off") | |
el.toggleClass("play"); | |
}else{ | |
el.addClass("off") | |
} | |
},2100) |
*{ | |
transition:all .5s | |
} | |
html,body{ | |
width:100%; | |
height: 100%; | |
margin:0; | |
font-family:'Open Sans Condensed', sans-serif,"Arial"; | |
padding:1em; | |
box-sizing:border-box | |
} | |
header{ | |
display: flex; | |
flex-flow:column wrap; | |
width:100%; | |
} | |
.top{ | |
display:flex; | |
flex-flow:row wrap; | |
align-items:center; | |
justify-content:center; | |
align-content:stretch | |
} | |
.top span{ | |
flex:1 | |
} | |
.top .logo{ | |
text-align:center; | |
font-size:100px; | |
font-family:"Arial" | |
} | |
.top .logo h1{ | |
font-weight:bold; | |
text-transform:uppercase; | |
transform:rotate(90deg); | |
width:1em; | |
height:1em; | |
background:black; | |
margin:auto; | |
color:white; | |
} | |
.logo.off h1{ | |
border-radius:5em; | |
} | |
.logo.play h1{ | |
border-radius:1em; | |
} | |
@keyframes gira{ | |
0%{transform:rotate(90deg)} | |
100%{transform:rotate( 0deg);} | |
} | |
.logo h1:hover{ | |
transform:rotate(0deg); | |
} | |
.top .social{ | |
align-self:flex-start; | |
} | |
.top .social ul{ | |
display:flex; | |
flex-flow:row wrap; | |
justify-content:flex-end | |
} | |
.top .social ul li{ | |
margin-left:.5em; | |
font-size:35px; | |
} | |
.top .social i{ | |
text-align:center; | |
height:40px; | |
width:40px; | |
line-height:40px; | |
font-size:.5em; | |
border-radius:25px; | |
background:black; | |
color:white; | |
} | |
nav{ | |
align-self:center; | |
margin-top:1em; | |
width:100%; | |
position:relative; | |
border-top:1px solid #EBEBEB; | |
border-bottom:1px solid #EBEBEB; | |
padding-top:1em; | |
padding-bottom:1em; | |
} | |
nav ul{ | |
width:100%; | |
display:flex; | |
flex-flow:row wrap; | |
justify-content:center; | |
} | |
nav ul li{ | |
text-align:center; | |
text-transform: uppercase; | |
transition:all .2s; | |
padding-left:2.5em; | |
font-size:1.5em; | |
} | |
nav ul li:hover{ | |
color:brown; | |
} | |
@media(max-width:700px){ | |
nav ul { | |
font-size:.8em; | |
} | |
} | |
@media(max-width:600px){ | |
.top{ | |
display:block; | |
} | |
.top .logo{ | |
font-size:250px; | |
} | |
.top .logo h1{ | |
background:rgb(0, 0, 0) | |
} | |
.top span{ | |
width:100%; | |
} | |
.top .social ul{ | |
justify-content:center; | |
} | |
nav{ | |
width:100% | |
} | |
nav ul{ | |
display:flex; | |
flex-flow:column wrap; | |
align-items:center; | |
color:white; | |
} | |
nav ul li{ | |
background:black; | |
margin-bottom:.2em; | |
width:100%; | |
padding-left:0; | |
font-size:2em | |
} | |
} | |
.top .logo, | |
.top .social ul li, | |
nav ul li{ | |
cursor:pointer | |
} |