Positioning elements with flexbox to create header panel - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Container

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Flex Container

Description

Positioning elements with flexbox to create header panel

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>  gc-nomade</title> 
  <style>

.flex{<!-- w  ww. jav a 2  s  .  co m-->
   color:rgb(253, 253, 254);
   display: flex;flex-direction:column;
   height:300px;
   background:linear-gradient(to left,rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(https://www.java2s.com/style/demo/InternetExplorer.png) center / cover;
}
#banner {
   margin:auto;
}
#banner h1 {
   background:linear-gradient(to left , rgba(18, 153, 221,0.8), rgba(18, 153, 221,0.8) ) no-repeat bottom center  / 90px 5px;
   padding-bottom:1em;
}
#banner-nav {
   background:rgba(18, 153, 221,0.8);
}
/* quick bad reset*/
ul,li,a {color:inherit;list-style-type:none;display:flex;margin:0 1em;padding:0.25em;}


      </style> 
 </head> 
 <body translate="no"> 
  <div class="container flex"> 
   <div id="banner"> 
    <h1>Nulla quis lotest</h1> 
   </div> 
   <div id="banner-nav"> 
    <ul class="get-in-touch-links"> 
     <li> <a href="/">Home</a> </li> 
    </ul> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials