Pavel Popeskul / savelovsky

Go to a project
Toggle navigation Toggle navigation pinning
Pavel Popeskul
dc074da1 1 parent 55028d9a

candidate 2

Inline Side-by-side
Showing 5 changed files with 518 additions and 3 deletions
......@@ -7656,6 +7656,22 @@ label {
background-color: rgba(18, 95, 142, 0.8);
color: white;
}
.btn__thin {
font-weight: normal;
font-size: 14px;
text-transform: none;
letter-spacing: 0.4px;
padding: 4px 10px 5px 10px;
height: auto;
line-height: 14px;
border-radius: 8px;
background: #fb1e42;
color: white;
}
.btn__thin:hover,
.btn__thin:focus {
color: white;
}
.header {
padding: 20px 0px 20px 0px;
background: #125f8e;
......@@ -7978,6 +7994,64 @@ label {
box-sizing: border-box;
padding-left: 10px;
}
.jumbotron {
background-color: #125f8e;
color: #fff;
padding: 30px 30px;
}
.signs-list {
margin-bottom: 10px;
}
.signs-list:last-child {
margin-bottom: 0;
}
.progress-item {
margin-bottom: 32px;
position: relative;
}
.progress-item:hover .progress-btn .btn {
display: block;
}
.progress-btn {
position: absolute;
right: 0;
top: 7px;
}
.progress-btn .btn {
font-weight: normal;
font-size: 14px;
text-transform: none;
letter-spacing: 0.4px;
padding: 4px 10px 5px 10px;
height: auto;
line-height: 14px;
display: none;
border-radius: 8px;
}
.progress-title {
font-size: 32px;
letter-spacing: 1px;
}
.progress-value {
font-size: 18px;
margin: 2px 0px 4px;
}
.progress-bar__colorful {
border-radius: 2px;
background-image: -webkit-linear-gradient(0deg, #ff0000 0%, #ff5700 19%, #ffae00 50%, #8cac00 80%, #18a900 100%);
position: relative;
overflow: hidden;
height: 10px;
}
.progress-bar__overlap {
position: absolute;
right: 0;
height: 10px;
background-color: #368dc3;
top: 0;
border-bottom-right-radius: 2px;
border-top-right-radius: 2px;
}
.promo {
text-align: center;
padding: 30px 0px;
......
......@@ -60,7 +60,7 @@
<br>
<div class="row">
<div class="col-xs-18">
<div class="col-xs-24">
<p>Реквизиты избирательного счета для перевода пожертвования</p>
<p>Банк получатель: ПАО «Сбербанк»</p>
......@@ -71,6 +71,178 @@
<p>(ИНН указывать при переводе не нужно. Указывайте его, только если банк не даёт вам провести платёж без него: 773709696309)</p>
<p>Номер счета получателя: ------------</p>
<div class="jumbotron">
<div class="row signs-list">
<div class="col-xs-12">
<div class="progress-item">
<div class="progress-btn">
<a href="#section-form" onclick="scrollToAdvanced('#section-form');return false;" class="btn btn__thin">Оставить подпись</a>
</div>
<div class="progress-title">Капотня</div>
<div class="progress-value">10 000 рублей из 50 000</div>
<div class="progress-bar__colorful">
<div class="progress-bar__overlap" style="width: 96.4286%;"></div>
</div>
</div>
</div>
<div class="col-xs-12">
<div class="progress-item">
<div class="progress-btn">
<a href="#section-form" onclick="scrollToAdvanced('#section-form');return false;" class="btn btn__thin">Оставить подпись</a>
</div>
<div class="progress-title">Капотня</div>
<div class="progress-value">10 000 рублей из 50 000</div>
<div class="progress-bar__colorful">
<div class="progress-bar__overlap" style="width: 96.4286%;"></div>
</div>
</div>
</div>
</div>
<div class="row signs-list">
<div class="col-xs-12">
<div class="progress-item">
<div class="progress-btn">
<a href="#section-form" onclick="scrollToAdvanced('#section-form');return false;" class="btn btn__thin">Оставить подпись</a>
</div>
<div class="progress-title">Капотня</div>
<div class="progress-value">10 000 рублей из 50 000</div>
<div class="progress-bar__colorful">
<div class="progress-bar__overlap" style="width: 96.4286%;"></div>
</div>
</div>
</div>
<div class="col-xs-12">
<div class="progress-item">
<div class="progress-btn">
<a href="#section-form" onclick="scrollToAdvanced('#section-form');return false;" class="btn btn__thin">Оставить подпись</a>
</div>
<div class="progress-title">Капотня</div>
<div class="progress-value">10 000 рублей из 50 000</div>
<div class="progress-bar__colorful">
<div class="progress-bar__overlap" style="width: 96.4286%;"></div>
</div>
</div>
</div>
</div>
<div class="row signs-list">
<div class="col-xs-12">
<div class="progress-item">
<div class="progress-btn">
<a href="#section-form" onclick="scrollToAdvanced('#section-form');return false;" class="btn btn__thin">Оставить подпись</a>
</div>
<div class="progress-title">Капотня</div>
<div class="progress-value">10 000 рублей из 50 000</div>
<div class="progress-bar__colorful">
<div class="progress-bar__overlap" style="width: 96.4286%;"></div>
</div>
</div>
</div>
<div class="col-xs-12">
<div class="progress-item">
<div class="progress-btn">
<a href="#section-form" onclick="scrollToAdvanced('#section-form');return false;" class="btn btn__thin">Оставить подпись</a>
</div>
<div class="progress-title">Капотня</div>
<div class="progress-value">10 000 рублей из 50 000</div>
<div class="progress-bar__colorful">
<div class="progress-bar__overlap" style="width: 96.4286%;"></div>
</div>
</div>
</div>
</div>
<div class="row signs-list">
<div class="col-xs-12">
<div class="progress-item">
<div class="progress-btn">
<a href="#section-form" onclick="scrollToAdvanced('#section-form');return false;" class="btn btn__thin">Оставить подпись</a>
</div>
<div class="progress-title">Капотня</div>
<div class="progress-value">10 000 рублей из 50 000</div>
<div class="progress-bar__colorful">
<div class="progress-bar__overlap" style="width: 96.4286%;"></div>
</div>
</div>
</div>
<div class="col-xs-12">
<div class="progress-item">
<div class="progress-btn">
<a href="#section-form" onclick="scrollToAdvanced('#section-form');return false;" class="btn btn__thin">Оставить подпись</a>
</div>
<div class="progress-title">Капотня</div>
<div class="progress-value">10 000 рублей из 50 000</div>
<div class="progress-bar__colorful">
<div class="progress-bar__overlap" style="width: 96.4286%;"></div>
</div>
</div>
</div>
</div>
<div class="row signs-list">
<div class="col-xs-12">
<div class="progress-item">
<div class="progress-btn">
<a href="#section-form" onclick="scrollToAdvanced('#section-form');return false;" class="btn btn__thin">Оставить подпись</a>
</div>
<div class="progress-title">Капотня</div>
<div class="progress-value">10 000 рублей из 50 000</div>
<div class="progress-bar__colorful">
<div class="progress-bar__overlap" style="width: 96.4286%;"></div>
</div>
</div>
</div>
<div class="col-xs-12">
<div class="progress-item">
<div class="progress-btn">
<a href="#section-form" onclick="scrollToAdvanced('#section-form');return false;" class="btn btn__thin">Оставить подпись</a>
</div>
<div class="progress-title">Капотня</div>
<div class="progress-value">10 000 рублей из 50 000</div>
<div class="progress-bar__colorful">
<div class="progress-bar__overlap" style="width: 96.4286%;"></div>
</div>
</div>
</div>
</div>
</div>
<div class="recipient">
<div class="recipient__row">
<span class="recipient__text" id="basic-addon3">
......
......@@ -23,7 +23,7 @@
<br>
<div class="row">
<div class="col-xs-18">
<div class="col-xs-24">
<p>Реквизиты избирательного счета для перевода пожертвования</p>
<p>Банк получатель: ПАО «Сбербанк»</p>
......@@ -34,6 +34,178 @@
<p>(ИНН указывать при переводе не нужно. Указывайте его, только если банк не даёт вам провести платёж без него: 773709696309)</p>
<p>Номер счета получателя: ------------</p>
<div class="jumbotron">
<div class="row signs-list">
<div class="col-xs-12">
<div class="progress-item">
<div class="progress-btn">
<a href="#section-form" onclick="scrollToAdvanced('#section-form');return false;" class="btn btn__thin">Оставить подпись</a>
</div>
<div class="progress-title">Капотня</div>
<div class="progress-value">10 000 рублей из 50 000</div>
<div class="progress-bar__colorful">
<div class="progress-bar__overlap" style="width: 96.4286%;"></div>
</div>
</div>
</div>
<div class="col-xs-12">
<div class="progress-item">
<div class="progress-btn">
<a href="#section-form" onclick="scrollToAdvanced('#section-form');return false;" class="btn btn__thin">Оставить подпись</a>
</div>
<div class="progress-title">Капотня</div>
<div class="progress-value">10 000 рублей из 50 000</div>
<div class="progress-bar__colorful">
<div class="progress-bar__overlap" style="width: 96.4286%;"></div>
</div>
</div>
</div>
</div>
<div class="row signs-list">
<div class="col-xs-12">
<div class="progress-item">
<div class="progress-btn">
<a href="#section-form" onclick="scrollToAdvanced('#section-form');return false;" class="btn btn__thin">Оставить подпись</a>
</div>
<div class="progress-title">Капотня</div>
<div class="progress-value">10 000 рублей из 50 000</div>
<div class="progress-bar__colorful">
<div class="progress-bar__overlap" style="width: 96.4286%;"></div>
</div>
</div>
</div>
<div class="col-xs-12">
<div class="progress-item">
<div class="progress-btn">
<a href="#section-form" onclick="scrollToAdvanced('#section-form');return false;" class="btn btn__thin">Оставить подпись</a>
</div>
<div class="progress-title">Капотня</div>
<div class="progress-value">10 000 рублей из 50 000</div>
<div class="progress-bar__colorful">
<div class="progress-bar__overlap" style="width: 96.4286%;"></div>
</div>
</div>
</div>
</div>
<div class="row signs-list">
<div class="col-xs-12">
<div class="progress-item">
<div class="progress-btn">
<a href="#section-form" onclick="scrollToAdvanced('#section-form');return false;" class="btn btn__thin">Оставить подпись</a>
</div>
<div class="progress-title">Капотня</div>
<div class="progress-value">10 000 рублей из 50 000</div>
<div class="progress-bar__colorful">
<div class="progress-bar__overlap" style="width: 96.4286%;"></div>
</div>
</div>
</div>
<div class="col-xs-12">
<div class="progress-item">
<div class="progress-btn">
<a href="#section-form" onclick="scrollToAdvanced('#section-form');return false;" class="btn btn__thin">Оставить подпись</a>
</div>
<div class="progress-title">Капотня</div>
<div class="progress-value">10 000 рублей из 50 000</div>
<div class="progress-bar__colorful">
<div class="progress-bar__overlap" style="width: 96.4286%;"></div>
</div>
</div>
</div>
</div>
<div class="row signs-list">
<div class="col-xs-12">
<div class="progress-item">
<div class="progress-btn">
<a href="#section-form" onclick="scrollToAdvanced('#section-form');return false;" class="btn btn__thin">Оставить подпись</a>
</div>
<div class="progress-title">Капотня</div>
<div class="progress-value">10 000 рублей из 50 000</div>
<div class="progress-bar__colorful">
<div class="progress-bar__overlap" style="width: 96.4286%;"></div>
</div>
</div>
</div>
<div class="col-xs-12">
<div class="progress-item">
<div class="progress-btn">
<a href="#section-form" onclick="scrollToAdvanced('#section-form');return false;" class="btn btn__thin">Оставить подпись</a>
</div>
<div class="progress-title">Капотня</div>
<div class="progress-value">10 000 рублей из 50 000</div>
<div class="progress-bar__colorful">
<div class="progress-bar__overlap" style="width: 96.4286%;"></div>
</div>
</div>
</div>
</div>
<div class="row signs-list">
<div class="col-xs-12">
<div class="progress-item">
<div class="progress-btn">
<a href="#section-form" onclick="scrollToAdvanced('#section-form');return false;" class="btn btn__thin">Оставить подпись</a>
</div>
<div class="progress-title">Капотня</div>
<div class="progress-value">10 000 рублей из 50 000</div>
<div class="progress-bar__colorful">
<div class="progress-bar__overlap" style="width: 96.4286%;"></div>
</div>
</div>
</div>
<div class="col-xs-12">
<div class="progress-item">
<div class="progress-btn">
<a href="#section-form" onclick="scrollToAdvanced('#section-form');return false;" class="btn btn__thin">Оставить подпись</a>
</div>
<div class="progress-title">Капотня</div>
<div class="progress-value">10 000 рублей из 50 000</div>
<div class="progress-bar__colorful">
<div class="progress-bar__overlap" style="width: 96.4286%;"></div>
</div>
</div>
</div>
</div>
</div>
<div class="recipient">
<div class="recipient__row">
<span class="recipient__text" id="basic-addon3">
......
......@@ -78,4 +78,21 @@
}
}
}
&__thin {
font-weight: normal;
font-size: 14px;
text-transform: none;
letter-spacing: 0.4px;
padding: 4px 10px 5px 10px;
height: auto;
line-height: 14px;
border-radius: 8px;
background: #fb1e42;
color: white;
&:hover, &:focus {
color: white;
}
}
}
\ No newline at end of file
......
......@@ -104,4 +104,84 @@
box-sizing: border-box;
padding-left: 10px;
}
}
\ No newline at end of file
}
.jumbotron {
background-color: #125f8e;
color: #fff;
padding: 30px 30px;
}
.signs-list {
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
}
.progress {
&-item {
margin-bottom: 32px;
position: relative;
&:hover {
.progress-btn {
.btn {
display: block;
}
}
}
}
&-btn {
position: absolute;
right: 0;
top: 7px;
.btn {
font-weight: normal;
font-size: 14px;
text-transform: none;
letter-spacing: 0.4px;
padding: 4px 10px 5px 10px;
height: auto;
line-height: 14px;
display: none;
border-radius: 8px;
}
}
&-title {
font-size: 32px;
letter-spacing: 1px;
}
&-value {
font-size: 18px;
margin: 2px 0px 4px;
}
&-bar {
&__colorful {
border-radius: 2px;
background-image: -moz-linear-gradient( 0deg, rgb(255,0,0) 0%, rgb(255,87,0) 19%, rgb(255,174,0) 50%, rgb(140,172,0) 80%, rgb(24,169,0) 100%);
background-image: -ms-linear-gradient( 0deg, rgb(255,0,0) 0%, rgb(255,87,0) 19%, rgb(255,174,0) 50%, rgb(140,172,0) 80%, rgb(24,169,0) 100%);
background-image: -webkit-linear-gradient( 0deg, rgb(255,0,0) 0%, rgb(255,87,0) 19%, rgb(255,174,0) 50%, rgb(140,172,0) 80%, rgb(24,169,0) 100%);
position: relative;
overflow: hidden;
height: 10px;
}
&__overlap {
position: absolute;
right: 0;
height: 10px;
background-color: #368dc3;
top: 0;
border-bottom-right-radius: 2px;
border-top-right-radius: 2px;
}
}
}
......