версия btour блог

by Denis Tverdokhlebov

HTML

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Адаптивно-фиксированный макет веб-страницы</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- <link rel="stylesheet" href="css/bootstrap-responsive.css"> -->
    <link rel="stylesheet" href="css/style.css">
    <!--[if lt IE 9]>
      <script src="js/html5shiv.min.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
  <!-- начало header -->
  <div class="container-fluid">
  <div class="row">
    <header>
      <div class="container">
      <div class="row">

      <div class="col-xs-12 col-sm-4 col-md-5 col-lg-5 logo_box">
          <a href="#"><img src="img/logo.png"></a>
        </div>

        <div class="col-xs-6 col-sm-4 col-md-5 col-lg-5 top_info">
          <div class="language pull-right">
            <a href="#">ru</a> /
            <a href="#">en</a> /
            <a href="#">fr</a> <br /><br />
            <a href="tel:+1234567890">+7(929)99 99 999</a> <br />
            <a href="mailto:[email protected]">[email protected]</a>
          </div>
        </div>

        <div class="col-xs-6 col-sm-4 col-md-2 col-lg-2 top_info">
          <div class="smm pull-right">
            <ul class="list-inline">
              <li><a href="#"><img src="img/smm_1.png"></a></li>
              <li><a href="#"><img src="img/smm_1.png"></a></li>
              <li><a href="#"><img src="img/smm_1.png"></a></li>
            </ul>
          </div>
        </div>
      </div>
      </div>

      <div class="container">
      <div class="row">
        <div class="mnu">
<ul id="navbar">
  <li><a href="#">Главная</a></li>
  <li><a href="#">События</a></li>
  <li><a href="#">Marketing</a></li>
  <li><a href="#">Travel</a></li>
  <li><a href="#">Management</a></li>
  <li><a...

CSS

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 100px;
  background-color: #ededed;
}
footer {
	background-color: #fff;
	position: absolute;
	bottom: 0;
	width: 100%;
	/* Set the fixed height of the footer here */
	height: 100px;
}
p {
	text-align: justify;
}
.slide {
	background-image: url(../img/bg.jpg);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
	height: 600px;
}
img {
  display: block;
  height: auto;
  max-width: 100%;
}
.img_prev {
	width: 40%;
	margin-right: 15px;
}
.logo_box {
    height: 130px;
}
.top_info {
	height: 130px;
}
.logo_box img {
    height: 100%;
    padding: 10px 0;
}
.smm {
    padding-top: 15px;
}
.smm li {
	padding: 0;
}
.smm img {
	height: 35px;
}
.language {
    padding-top: 20px;
}
.mnu {
    height: 50px;
}
.bot_info {

}
.bot_smm {

}
.bot_logo {

}
.bot_smm_body img {
	height: 35px;
}
.bot_logo_body img {
	height: 100%;
}
.bot_logo_body {
    height: 70px;
}
/*menu*/
#navbar ul{
        display: none;
        background-color: #f90;
        position: absolute;
        top: 100%;
      }
      #navbar li:hover ul { display: block; }
      #navbar, #navbar ul{
        margin: 0;
        padding: 0;
        list-style-type: none;
      }
      #navbar {
    height: 35px;
    max-width: 630px;
    margin: 0 auto;
}
      #navbar li {
        float: left;
        position: relative;
        height: 100%;
      }
      #navbar li a {
        display: block;
        height: 35px;
        padding: 0 15px;
        padding-top: 9px;
        color: #000;
        margin: 0 auto;
        text-decoration: none;
        text-align: center;
        text-transform: uppercase;
      }
      #navbar li a:hover { color:#fff; }
      #navbar ul li { float: none; }
      #navbar li:hover { background-color: #0bda51; color:#fff;}
      #navbar ul li:hover { background-color: #0bda51; }