Text goes on the header - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Header

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Header

Description

Text goes on the header

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

body {<!--   ww  w .  java  2  s .c om-->
   margin: 0;
   padding: 0;
}
header div, main {
   max-width: 100%;
   padding: 0 1em 0 1em;
}
header {
   background: #d000c2;
   width: 100%;
   height: 40px;
   -webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
   -moz-box-shadow:    0px 3px 5px rgba(100, 100, 100, 0.49);
   box-shadow:         0px 3px 5px rgba(100, 100, 100, 0.49);
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   align-items: center;
   justify-content: flex-end;
}
header h1 {
   float: left;
   margin-top: 0px;
}
main {
   padding: 21;
}
header a {
   margin-top: -14px;
   text-decoration: none;
   color: white;
}
header li {
   text-transform: uppercase;
   display: inline;
   margin-right: -14 px;
   margin-top: 0 px;
   font-family: Helvetica;
   font-size: 24px;
   z-index: 11;
}
header a:hover {
   border-top: 3px cyan;
   border-style: solid;
   border-bottom: 0px white;
   border-right: 0px white;
   border-left: 0px white;
}
header li a:hover {
   color: cyan;
}
header ul {
   float: right;
   list-style-type: none;
}
#vid{
   position:fixed;
   right:0;
   bottom:0;
   min-width:100%;
   min-height:100%;
   background-size:cover;
   z-index: -1;
}
@media only screen and (max-width: 520px) {
   header {
      text-align: center;
      position: relative;
   }
   main {
      padding: 14 px;
   }
   header h1 {
      float: none;
      margin: 0;
   }
   header ul {
      float: none;
      margin: 0;
   }
}


      </style> 
 </head> 
 <body> 
  <header> 
   <div> 
    <h1> <img src="https://www.java2s.com/style/demo/Safari.png"> </h1> 
    <ul> 
     <li> <a href="#">home</a> </li> 
     <li> </li> 
     <li> <a href="">log-in</a> </li> 
     <li> </li> 
     <li> <a href="">contact</a> </li> 
     <li> </li> 
     <li> <a href="">test</a> </li> 
    </ul> 
   </div> 
  </header> 
  <main> 
   <video autoplay loop id="vid"> 
    <source src="./videos/background.mp4" type="video/webm"> 
   </video> 
  </main>  
 </body>
</html>

Related Tutorials