<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script src="https://use.fontawesome.com/3cc4afe2e1.js"></script>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Black+Ops+One" />
<div class="container">
<div class="col-md-12">
<div class="row">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><i class="fa fa-tree"></i><span>Vikings:</span> <span>War of Clans</span></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">Гайды</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Много гайдов <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Много гайдов123213213213213 <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated linASDASDASDSADk</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
<div class="container">
<div class="col-md-12">
<div class="row">
<div class="wrapper">
<div class="wrap-header">Заголовок</div>
<div class="wrap-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis orci massa. Donec ultricies vulputate eros elementum euismod. Donec in ligula nunc. Quisque vehicula urna ut nulla imperdiet porttitor. Vestibulum turpis tellus, interdum sit amet magna vitae, tincidunt auctor nulla. Fusce rutrum interdum sapien id consequat. Donec luctus arcu et.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis orci massa. Donec ultricies vulputate eros elementum euismod. Donec in ligula nunc. Quisque vehicula urna ut nulla imperdiet porttitor. Vestibulum turpis tellus, interdum sit amet magna vitae, tincidunt auctor nulla. Fusce rutrum interdum sapien id consequat. Donec luctus arcu et.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis orci massa. Donec ultricies vulputate eros elementum euismod. Donec in ligula nunc. Quisque vehicula urna ut nulla imperdiet porttitor. Vestibulum turpis tellus, interdum sit amet magna vitae, tincidunt auctor nulla. Fusce rutrum interdum sapien id consequat. Donec luctus arcu et.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis orci massa. Donec ultricies vulputate eros elementum euismod. Donec in ligula nunc. Quisque vehicula urna ut nulla imperdiet porttitor. Vestibulum turpis tellus, interdum sit amet magna vitae, tincidunt auctor nulla. Fusce rutrum interdum sapien id consequat. Donec luctus arcu et.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis orci massa. Donec ultricies vulputate eros elementum euismod. Donec in ligula nunc. Quisque vehicula urna ut nulla imperdiet porttitor. Vestibulum turpis tellus, interdum sit amet magna vitae, tincidunt auctor nulla. Fusce rutrum interdum sapien id consequat. Donec luctus arcu et.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis orci massa. Donec ultricies vulputate eros elementum euismod. Donec in ligula nunc. Quisque vehicula urna ut nulla imperdiet porttitor. Vestibulum turpis tellus, interdum sit amet magna vitae, tincidunt auctor nulla. Fusce rutrum interdum sapien id consequat. Donec luctus arcu et.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis orci massa. Donec ultricies vulputate eros elementum euismod. Donec in ligula nunc. Quisque vehicula urna ut nulla imperdiet porttitor. Vestibulum turpis tellus, interdum sit amet magna vitae, tincidunt auctor nulla. Fusce rutrum interdum sapien id consequat. Donec luctus arcu et.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis orci massa. Donec ultricies vulputate eros elementum euismod. Donec in ligula nunc. Quisque vehicula urna ut nulla imperdiet porttitor. Vestibulum turpis tellus, interdum sit amet magna vitae, tincidunt auctor nulla. Fusce rutrum interdum sapien id consequat. Donec luctus arcu et.
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="navbar-fixed-bottom">
<div class="col-md-12">
<div class="row">
<div class="container">
<div class="footer" id="footer">
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
<h3> Lorem Ipsum </h3>
<ul>
<li> <a href="#"> Lorem Ipsum </a> </li>
<li> <a href="#"> Lorem Ipsum </a> </li>
<li> <a href="#"> Lorem Ipsum </a> </li>
<li> <a href="#"> Lorem Ipsum </a> </li>
</ul>
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
<h3> Lorem Ipsum </h3>
<ul>
<li> <a href="#"> Lorem Ipsum </a> </li>
<li> <a href="#"> Lorem Ipsum </a> </li>
<li> <a href="#"> Lorem Ipsum </a> </li>
<li> <a href="#"> Lorem Ipsum </a> </li>
</ul>
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
<h3> Lorem Ipsum </h3>
<ul>
<li> <a href="#"> Lorem Ipsum </a> </li>
<li> <a href="#"> Lorem Ipsum </a> </li>
<li> <a href="#"> Lorem Ipsum </a> </li>
<li> <a href="#"> Lorem Ipsum </a> </li>
</ul>
</div>
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
<h3> Lorem Ipsum </h3>
<ul>
<li> <a href="#"> Lorem Ipsum </a> </li>
<li> <a href="#"> Lorem Ipsum </a> </li>
<li> <a href="#"> Lorem Ipsum </a> </li>
<li> <a href="#"> Lorem Ipsum </a> </li>
</ul>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<h3> Lorem Ipsum </h3>
<ul>
<li>
<div class="input-append newsletter-box text-center">
<input type="text" class="full text-center" placeholder="Email ">
<button class="btn bg-gray" type="button"> Lorem ipsum <i class="fa fa-long-arrow-right"> </i> </button>
</div>
</li>
</ul>
<ul class="social">
<li> <a href="#"> <i class=" fa fa-facebook"> </i> </a> </li>
<li> <a href="#"> <i class="fa fa-twitter"> </i> </a> </li> </a> </li>
<li> <a href="#"> <i class="fa fa-youtube"> </i> </a> </li>
</ul>
</div>
</div>
<!--/.row-->
</div>
<!--/.footer-->
<div class="footer-bottom">
<div class="container">
<p class="pull-left"> Copyright © Footer E-commerce Plugin 2014. All right reserved. </p>
<div class="pull-right">
<ul class="nav nav-pills payments">
<li><i class="fa fa-cc-visa"></i></li>
<li><i class="fa fa-cc-mastercard"></i></li>
<li><i class="fa fa-cc-paypal"></i></li>
</ul>
</div>
</div>
</div><!--/.footer-bottom-->
</div><!--/.container-->
</div><!--/.row-->
</div><!--/.col-md-12-->
</div><!--/.navbar-fixed-bottom-->
</footer
html {
position: relative;
min-height: 100%;
}
body {
background: #fff;
}
/* Настройки заголовка навигации */
.navbar-brand {
font-family: "Black Ops One";
font-size: 17px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 20.4px;
border-right: 1px solid #23527c;
}
.navbar-brand span:first-of-type {
color: green;
}
.navbar-brand span {
color: #23527c;
}
.navbar-brand span:hover {
color: green;
}
.fa {
color: green;
vertical-align: middle;
padding-right: 10px;
}
/* Настройки навигации */
.navbar-default {
background-color: #262626;
border-color: #e7e7e7;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
border-color: #e7e7e7;
}
/* Цвета текста и кнопок навигации */
.navbar-default .navbar-nav>li>a:hover
{
color:#eee;
background-color:#262626 ;
}
.navbar-default .navbar-nav>li>a:focus {
color: #777;
}
/* Настройки dropdown */
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus {
color: #eee;
background-color: #000;
}
.dropdown-menu {
background-color: #eee;
padding: 0px 0;
}
.dropdown-menu > li > a {
display: block;
clear: both;
font-weight: 400;
line-height: 1.42857;
color: #eee;
white-space: nowrap;
padding: 7px 20px;
background-color: #000;
}
.dropdown-menu .divider {;
background-color: #235293;
margin: 0px 0;
}
.navbar-nav>li>.dropdown-menu {
margin-top: -1px;
}
.navbar .dropdown-menu:before {
content: '';
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #eee;
border-bottom-color: #eee;
position: absolute;
top: -7px;
left: 9px;
}
.caret {
color: #fff;
}
/* ------------------------------------------------------- */
/* Стили для контента
/* ------------------------------------------------------- */
.wrap-header {
color: #B8B8B8;
word-wrap: break-word;
font-size: 20px;
font-weight: bold;
background-color: #cfcfcf;
text-align: center;
padding: 10px 15px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-top: 1px solid #999;
border-left: 1px solid #999;
border-right: 1px solid #999;
}
.wrap-content {
padding: 15px;
background-color: #eeeeef;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom: 1px solid #999;
border-left: 1px solid #999;
border-right: 1px solid #999;
}
/* ------------------------------------------------------- */
/* Стили для футера
/* ------------------------------------------------------- */
.navbar-fixed-top, .navbar-fixed-bottom {
position: relative;
}
.footer {
width: 100%;
/* Фиксированная высота футера */
background: #EDEFF1;
margin-top: 15px;
text-align: left;
padding: 10px 15px;
border-bottom: 1px solid #999;
}
.footer h3 {
border-bottom: 1px solid #BAC1C8;
color: #54697E;
font-size: 18px;
font-weight: 600;
line-height: 27px;
padding: 40px 0 10px;
text-transform: uppercase;
}
.footer ul {
font-size: 13px;
list-style-type: none;
margin-left: 0;
padding-left: 0;
margin-top: 15px;
color: #7F8C8D;
}
.footer ul li a {
padding: 0 0 5px 0;
display: block;
}
.social li {
background: none repeat scroll 0 0 #B5B5B5;
border: 2px solid #B5B5B5;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
float: left;
height: 36px;
line-height: 36px;
margin: 0 8px 0 35px;
padding: 0;
text-align: center;
width: 36px;
transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-webkit-transition: all 0.5s ease 0s;
-ms-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
}
.social li:hover {
transform: scale(1.15) rotate(360deg);
-webkit-transform: scale(1.1) rotate(360deg);
-moz-transform: scale(1.1) rotate(360deg);
-ms-transform: scale(1.1) rotate(360deg);
-o-transform: scale(1.1) rotate(360deg);
}
.social li a {
color: #EDEFF1;
}
.social li:hover {
border: 2px solid #2c3e50;
background: #2c3e50;
}
.social li a i {
font-size: 16px;
margin: 0 0 0 5px;
color: #EDEFF1 !important;
}
.wrap-footer {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
padding: 15px;
background-color: #fafafa;
border: 1px solid #ddd;
}
.footer-bottom {
background: #E3E3E3;
border-top: 1px solid #DDDDDD;
padding-top: 10px;
padding-bottom: 10px;
}
p.pull-left {
padding-top: 5px;
}
.payments, .fa {
color: #23527c;
font-size: 1.5em;
padding-right: 15px;
}
