Image acting "responsive" with menu using flexbox - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Responsive

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

Description

Image acting "responsive" with menu using flexbox

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>  Sumit Maurya</title> 
  <style>

* {<!-- w  w  w  .  ja  va 2  s  .c  o m-->
   box-sizing: border-box;
}
.header-container {
   display: flex;
   width: 100%;
   height: 150px;
   align-items: center;
   justify-content: space-between;
   padding-left: 20px;
   padding-right: 40px
}
.header-container .logo {
   width: 250px;
}
.header-container .logo .sb{
   max-width: 100%;
}
.header-container .nav-bar-container {
   display: flex;
}
.nav-link {
   text-decoration: none;
   color: #4B4B4B;
   font-weight: bold;
   font-size: 14px;
   padding: 15px;
}
@media( max-width: 700px ){
   .header-container{
      flex-direction: column;
   }
}


      </style> 
 </head> 
 <body translate="no"> 
  <title> this is a test this is a test this is a test this is a test 
  this is a test this is a test this is a test this is a test this is a test 
  this is a test this is a test this is a test this is a test this is a test this is a test 
  this is a test this is a test this is a test this is a test this is a test this is a test 
  this is a test this is a test this is a test this is a test this is a test this is a test 
  this is a test this is a test this is a test this is a test this is a test this is a test 
  this is a test this is a test this is a test this is a test this is a test this is a test 
  this is a test this is a test this is a test this is a test this is a test this is a test 
  this is a test this is a test this is a test this is a test </title> 
  <link rel="stylesheet" type="text/css" href="second.css"> 
  <div class="header-container"> 
   <a class="logo" href=""> <img class="sb" src="https://www.java2s.com/style/demo/Opera.png" alt="logo" border="0"> </a> 
   <nav class="nav-bar-container"> 
    <a class="nav-link" href="#"> Tour </a> 
    <a class="nav-link" href="#"> Pricing </a> 
    <a class="nav-link" href="#"> Medium </a> 
    <a class="nav-link" href="#"> Sign Up </a> 
    <a class="nav-link" href="#"> Login </a> 
   </nav> 
  </div>  
 </body>
</html>

Related Tutorials