A Simple Header HIMYM

In this example below you will see how to do a A Simple Header HIMYM with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by mo7medsalah7, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright mo7medsalah7 ©

Technologies

  • HTML
  • CSS
  • JavaScript
    <html lang=en>
  <head>
  <meta charset=utf-8>
<link href="https://fonts.googleapis.com/css?family=Exo+2|Indie+Flower|Josefin+Sans" rel="stylesheet">

    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  </head>
  <body>
    <div class=head>
      <div class=overlay>
        <div class=container>
          <div class=how>
            <span>Cast 
              <i class="fa fa-bars" aria-hidden="true"></i>
            </span>
            <img src="https://yt3.ggpht.com/-b4rBLslwtAU/AAAAAAAAAAI/AAAAAAAAAAA/RjBFfaKSw_k/s900-c-k-no-mo-rj-c0xffffff/photo.jpg">
            <div class=intro>
          <h1>How I Met Your Mother</h1>
              <p>Really, I want to meet                     your Mother
              </p>
            <button>Download</button>
            <button>Watch</button>
      </div>
    </div>
  </body>

/*Downloaded from https://www.codeseek.co/mo7medsalah7/a-simple-header-himym-yoYGgb */
    .html .body{
  padding:0;
  margin:0;
}
.head{
  background:url('http://filmtangent.com/wp-content/uploads/2010/07/How_I_Met_Your_Mother.jpg');
  background-size: cover;
  height:100%;
}
.overlay{
 background-color:rgba(249,225,3,0.89);
}
.container{
   height:400px;
  width:1300px;
  margin:0 auto;
  padding:15px 15px 0 15px;
 border-top: 3px solid #141518;
  position:relative;
}
.how span{
  font-family: 'Exo 2', sans-serif;
  font-weight:bold;
   font-size:40px;
  cursor:pointer;
  position:absolute;
  right:5%;
}
.intro {
  position:absolute;
  top:20%;
   left:30%; 
  text-align: center;
 font-family: 'Indie Flower', cursive;
 font-size: 30px;
}
.intro p{
  font-size:32px;
}
.intro button{
  padding:5px 5px;
  font-size:20px;
  cursor: pointer;
  background:transparent;
  width:200px;
  margin: 15px;
   border: 1px solid #141518;
  border-radius:10px;
 font-family: 'Josefin Sans', sans-serif;
  font-weight:bold;
}
.intro button:hover{
  background-color:#0e0c09;
  transition:all 0.5s ease-in-out;
  color:#e1e7f0
}
.how img{
  width:120px;
  height:100px;
  position:absolute;
  left:10px;
  top:10px;
  opacity:0.3;
}
.how img:hover{
 transition:all 0.5 ease-in-out; 
  opacity:0.7;
}




/*Downloaded from https://www.codeseek.co/mo7medsalah7/a-simple-header-himym-yoYGgb */
    //Barney Stinson Sends His Greeting

Comments