Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Responsive Design with CSS</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
            
            <link rel="stylesheet" href="css/nav.css">
    <script src="js/libs/modernizr-2.6.1-respond-1.1.0.min.js"></script>
</head>
<body>
            
        <div id="wrapper">
            <div class="phone">
               <span class="dn320">Телефон: </span><b>(495) 258-8211&nbsp;</b>
               <a href="http://www.facebook.com/pages" target="_blanc" class="fb"><img src="images/i_fb.png" width="16" height="16" alt="Facebook"/></a>
            </div>
            
                <div id="container">
            <!-- #header -->
                    <div id="header">
                <div id='logo'>
                <a href="/"><img src="images/logo.png" border="none" width="200px" height="50px" alt="Центр стратегических инициатив и инноваций"/></a>
                </div>
                
                <div id='nav'>
               <ul>
                    <li><a href="/about.html">Компания</a></li>
                    <li><a href="/services.html">Услуги</a></li>
                    <li><a href="/analytics.html">Аналитика</a></li>
                    <li><a href="/cooperation.html">Сотрудничество</a></li>
                    <li><a href="/contact.html">Контакты</a></li>
              
               </ul>
                </div>
                
                    </div>
                </div>
    </div>
</body>
</html>
 
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  padding: 0;
}
​
body {
   background-color: #AAAAAA;
}
​
#wrapper{
  width: 100%;
  margin:0.1em;
  padding:0.1em;
}
​
#container{
  margin: 10% 12%;
  height: 90%; 
  text-align: center;
  
}
​
#header{
  padding:0.1% 20px;
  overflow:auto;
  
}
​
#nav ul {
 list-style:none;
 text-transform: uppercase;
 font-weight: bold;
 font-size: 1em;
 font-family: 'Open Sans Condensed',sans-serif;
 text-align: center;
}
 
#nav ul li {
  float: left;
  padding: 7px;
}
 
#nav a{
  margin: 2.3%  0 0;
  padding: 2.3% 2.3%;
  color: #000;
  text-decoration: none;
}
​
​
.phone {
    float: right;
    margin: 0 70px 0 -50px;
    color: #777777;
    vertical-align: middle;
    text-align: right;
    font-size: 11px;
}
​
#header .phone b {
  color: #000;
}
​
​
@media only screen and (min-width: 980px){
  
  ul {
    float:left;
  }
​
  li { 
    float:left;
    min-width:12%;
    padding:4px;
    margin-right:8px;
  }
​
}
​
@media only screen and (min-width: 1050px) {
​
  #logo {
    float:left;
    width:5%;
  }
​
  #logo img{
    width: 100%;
  }
​
  #nav {
    float:right;
    width:95%;
  }
​
  ul{
    float:right;
  }
​
  li{
    float:left;
    padding:4px;
    margin-right:8px;
  }
​
}
​
@media only screen and (min-width: 1140px) {
​
​
}
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers