Bootstrap 3 Template
This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.
HTML
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.0/bootstrap-table.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.0/bootstrap-table.min.css">
<div class="container wrap-container">
<!-- Jumbotron -->
<div class="container header">
<div class="col-sm-4 header-left">
<img src="images/header_left.png" alt="">
</div>
<div class="col-sm-6 header-center">
<a class="btn btn-lg btn-success" href="#" role="button">Зарегистрироваться</a>
</div>
<div class="col-sm-2 header-right"></div>
</div>
<!-- Example row of columns -->
<div class="row text1">
<div class="col-lg-12">
<p>«Как не умереть на пути к успеху» - о том, как можно быстро адаптироваться к изменению среды и избежать негативных последствий для физического и ментального здоровья.</p>
<p>Программа опирается на результаты научных исследований в области нейрофизиологии и эволюционной биологии человека. Практические рекомендации и инструменты адаптированы под требования корпоративной жизни.</p>
</div>
</div>
<div class="row place-date">
<div class="col-lg-6 date">
<h1 class="h1">Когда?</h1>
left
</div>
<div class="col-lg-6 place">
<h1 class="h1">Место</h1>
right
</div>
</div>
</div>
</div> <!-- /container -->
CSS
html, body, div, h1, h2, h3, h4, h5, h6, a, a img, p, ul, ol, li, span, fieldset , form, dl, dd, dt, table, tr, td, img, input{
border: none;
margin: 0;
outline: none;
padding: 0;
}
html{
height:100%;
}
body{
font: 18px 'Conv_MyriadPro-Regular', arial, sans-serif;
color: #000;
}
ul{
list-style-type: none;
}
input[type="text"]:focus, input[type="password"]:focus, textarea:focus { outline: none; }
textarea{
resize: none;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
zoom:1;
}
.clear{
clear: both;
}
.hide{
display: none;
}
/*************************************************************************************************************** GLOBAL_layout */
.wrap-container{
}
/*************************************************************************************************************** header */
.header{
background: #a3d8e3;
}
.header-left{
min-height: 280px;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
}
.header-center{
min-height: 280px;
font-weight: bold;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
}
.header-right{
background: #a3d8e3 url('../images/header_right.png') right bottom no-repeat;
min-height: 280px;
}