Pavel Popeskul / savelovsky

Go to a project
Toggle navigation Toggle navigation pinning
Pavel Popeskul
c9f71e19 1 parent 5a927222

candidate mobile

Inline Side-by-side
Showing 7 changed files with 231 additions and 9 deletions
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Выборы в Совет депутатов Савёловского района</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="/img/apple-touch-icon.png">
<link rel="stylesheet" href="css/main.css">
<script src="js/main.js"></script>
</head>
<body>
<div class="header ">
<div class="header__container">
<div class="header__row">
<a href="#" class="header__logo ">
<div class="icon icon__logo"></div>
</a>
<div class="header__nav ">
<div class=" header__title ">Команда независимых кандидатов в совет депутатов Савёловского района</div>
<div class="header__nav__wrapper">
<ul class="nav nav--header">
<li><a href="about.html">О совете депутатов</a></li>
<li><a href="candidates.html">Кандидаты</a></li>
<li><a href="help.html">Как помочь</a></li>
<li><a href="volunteer.html">Стать волонтёром</a></li>
<li><a href="vote.html">Как проголосовать</a></li>
</ul>
</div>
</div>
<a href="#right-menu" id="right-menu" class="mobile-menu"><span></span></a>
<!--<a id="right-menu" href="#right-menu">Right Menu</a>-->
<div class="header__do">
<button type="button" class="btn btn-default btn__attention">Поддержать</button>
</div>
</div>
</div>
</div>
<div class="content">
<div class="content__container">
<div class="candidate">
<div class="candidate__img">
<img src="http://xn--2017-43dma2cjij0b9af0v.xn--p1ai/assets/images/2_vihoreva.jpg" alt="">
</div>
<div class="candidate__description">
<h1 class="head-h1">Кто-то там</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, porro?</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis debitis dicta dolor esse, hic ipsam maiores officiis quaerat repudiandae voluptatem?</p>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="footer__container">
<div class="footer__left">
<p>Следите за кампанией</p>
<ul class="social">
<li><a href="#">Вконтакте</a></li>
<li><a href="#">Фейсбук</a></li>
<li><a href="#">Твиттер</a></li>
<li><a href="#">Одноклассники</a></li>
</ul>
<p>Оставьте нам свой мобильный телефон. Мы отправим вам сообщение перед выборами</p>
<form class="form-inline" role="form">
<div class="form-group">
<input type="email" class="form-control" placeholder="">
</div>
<button type="submit" class="btn btn-default">Напомнить о выборах</button>
</form>
</div>
<div class="footer__right">
<p>Пообщаться с кандидатами</p>
<ul class="social">
<li><a href="#">Телеграм</a></li>
<li><a href="#">Электронная почта</a></li>
<li><a href="#">Телефон</a></li>
</ul>
</div>
<div class="col-xs-24 text-center">
<br>
<h4 class="">Приходите на выборы 10 сентября 2017 года <br> и голосуйте за независимую команду</h4>
<br>
<button type="button" class="btn btn-default btn__attention">Как проголосовать</button>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
......@@ -7739,6 +7739,7 @@ This must be run when you have at least 2 sprites.
}
.head-h1 {
font-size: 28px;
margin-top: 0;
}
h1,
h2,
......@@ -7930,6 +7931,8 @@ label {
}
}
.header__do {
float: left;
width: 100%;
position: relative;
min-height: 1px;
padding-left: 10px;
......@@ -7937,20 +7940,22 @@ label {
margin-top: 15px;
text-align: right;
}
@media (min-width: 797px) {
@media (min-width: 990px) {
.header__do {
float: left;
width: 100%;
width: 14.58333333%;
}
}
@media (min-width: 990px) {
@media (max-width: 989px) {
.header__do {
float: left;
width: 14.58333333%;
text-align: center;
}
}
.header__do .btn {
width: 100%;
@media (max-width: 989px) {
.header__do .btn {
width: 100%;
max-width: 200px;
}
}
.mobile-menu {
position: absolute;
......@@ -8386,6 +8391,50 @@ label {
height: 100%;
text-align: center;
}
.candidate {
margin: 0px -10px;
}
.candidate__img {
float: left;
width: 100%;
position: relative;
min-height: 1px;
padding-left: 10px;
padding-right: 10px;
}
@media (min-width: 550px) {
.candidate__img {
float: left;
width: 33.33333333%;
}
}
.candidate__img img {
width: 100%;
}
.candidate__description {
float: left;
width: 100%;
position: relative;
min-height: 1px;
padding-left: 10px;
padding-right: 10px;
}
@media (min-width: 550px) {
.candidate__description {
float: left;
width: 62.5%;
}
}
@media (min-width: 550px) {
.candidate__description {
margin-left: 4.16666667%;
}
}
@media (max-width: 549px) {
.candidate__description {
padding-top: 20px;
}
}
.promo {
text-align: center;
padding: 30px 0px;
......@@ -8411,6 +8460,7 @@ label {
}
.promo__title {
font-size: 28px;
margin-top: 0;
}
@media (max-width: 989px) {
.promo__title {
......
//= _head.html
//= _header.html
<div class="content">
<div class="content__container">
<div class="candidate">
<div class="candidate__img">
<img src="http://xn--2017-43dma2cjij0b9af0v.xn--p1ai/assets/images/2_vihoreva.jpg" alt="">
</div>
<div class="candidate__description">
<h1 class="head-h1">Кто-то там</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, porro?</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis debitis dicta dolor esse, hic ipsam maiores officiis quaerat repudiandae voluptatem?</p>
</div>
</div>
</div>
</div>
//= _footer.html
.candidate {
margin: 0px -10px;
&__img {
.make-xs-column(24);
.make-sm-column(8);
img {
width: 100%;
}
}
&__description {
.make-xs-column(24);
.make-sm-column(15);
.make-sm-column-offset(1);
@media(@xs){
padding-top: 20px;
}
}
}
\ No newline at end of file
......@@ -5,6 +5,7 @@ body, html{
.head-h1 {
font-size: 28px;
margin-top: 0;
}
h1, h2, h3 {
......
......@@ -43,13 +43,19 @@
}
&__do {
.make-md-column(24);
.make-xs-column(24);
.make-lg-column(3.5);
margin-top: 15px;
text-align: right;
@media(@md){
text-align: center;
}
.btn {
width: 100%;
@media(@md){
width: 100%;
max-width: 200px;
}
}
}
}
......
......@@ -14,6 +14,7 @@
@import "footer";
@import "content";
@import "candidate";
@import "promo";
@import "vote";
......