Header Nav

Header Nav.markdown

Header Nav ('-' * 10)

A Pen by Juan Obrach on CodePen.

License.

index.html

<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>

script.js

  setInterval(function(){
    var el = $(".logo")
    if(el.hasClass("off")){
      el.removeClass("off")
      el.toggleClass("play");
    }else{
      el.addClass("off")
    }
   },2100)

style.css

*{
    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
}