Skip to content

Руслан Ибрагимов / yescenter

Go to a project
Commit 64a22a9e by Ruha
Options

финальные правки адаптивности под все разрешения

1 parent 7a0d01e9
Pipeline #2664 for 64a22a9e skipped in 0 seconds
Expand all
Inline Side-by-side
Showing 7 changed files with 163 additions and 58 deletions
css/additional.css
......@@ -2,7 +2,24 @@
white-space: nowrap;
display: inline !important;
}
.button-present-wrapper {
margin-top:44px;
}
.button-present {
display: block;
width: 306px;
height: 48px;
line-height: 48px;
-webkit-border-radius: 7px;
border-radius: 7px;
background-color: #ed1c24;
text-align: center;
color: #ffffff;
font-family: PFAgoraSansPro;
font-size: 15px;
font-weight: 500;
margin-bottom: 16px;
}
#overlay {
background: rgba(0, 0, 0, .5);
position: fixed;
......@@ -180,7 +197,7 @@ fieldset {
}
.input {
width: 336px;
width: 100%;
height: 46px;
-webkit-border-radius: 7px;
border-radius: 7px;
......@@ -194,6 +211,9 @@ fieldset {
box-sizing: border-box;
padding: 4px 16px;
}
#order-form .input, #callback-form #phone {
width: 336px;
}
.error {
color: #ed1c24;
......@@ -243,105 +263,187 @@ input.valid {
.last {
padding-top: 20px;
}
@media (max-width: 480px) and (min-width: 321px) {
.modal {
width: 360px;
.map-ct1 { max-height:712px!important; }
@media (max-width: 320px) {
.btn-320 {width: 270px!important;}
#callback-form .error {left:122px;}
#order-form .input, #callback-form #phone {
width: 273px!important;
}
.b2 .ord1, .button-present {
width:288px;
}
.button {
width: 286px;
}
.time.tm::after {
right: -130px;
}
.tm2 {
width:50%;
}
.tm {margin-left:14px;}
.time .input {width:98%}
.map-ct1 {
padding-top: 0px!important;
height:950px!important;
overflow: hidden;
}
.map-ct1 .form1 {
padding:27px 0 0 0!important;
margin-bottom:-6px!important;
}
#footer .rr2 a {
height:65px;
}
.b5 .ll1 {
height: 110px;
}
#footer-form input {
width: 328px;
width: 282px;
}
#order-form label.error {
left:106px;
}
#footer-form label.error{
left: 124px
}
.last {
padding-top: 18px;
.modal {
width: 300px;
}
.modal-label {
.button {
width: 273px;
}
.input {
width: 273px;
}
#order-form label {
padding: 0 13px;
padding:0px 16px;
}
#footer-form label {
padding: 0px 5px;
}
.time {
width: 42%;
display: inline-block;
.arrow-up, .arrow-down {
right: -80px;
}
.tm {
margin-left: 12px;
.time {
width: 122px;
}
}
@media (max-width: 769px) and (min-width: 481px) {
@media (max-width: 360px) and (min-width:321px) {
.map-ct1 {
padding-top: 0px!important;
height:1150px!important;
height:850px!important;
overflow: hidden;
}
#footer-form input {
width: 282px;
#order-form label.error {
left:137px;
}
.map-ct1 .form1 {
padding:27px 0 0 0!important;
margin-bottom:-6px!important;
}
.b4 .ord3, .b2 .ord2-1 {
width:100%;
}
#footer-form input {width:282px!important;}
#footer-form label.error {
left: 127px
}
@media (max-width: 767px) {
.map-ct1 {
padding-top: 0px!important;
height:950px!important;
overflow: hidden;
}
}
@media (max-width: 375px) and (min-width: 361px) {
.map-ct1 {
padding-top: 0px!important;
height:950px!important;
overflow: hidden;
}
}
@media (max-width: 480px) and (min-width: 321px) {
.time.tm::after {right:-152px;}
#callback-form #phone {width:318px;}
@media (max-width: 320px) {
.time.tm::after {
right: -130px;
.modal {
width: 360px;
}
.map-ct1 {
padding-top: 0px!important;
height:950px!important;
overflow: hidden;
}
#footer-form input {
width: 282px;
.last {
padding-top: 18px;
}
#footer-form label.error {
left: 127px
.modal-label {
}
.modal {
width: 300px;
#order-form label {
padding: 0 7px;
}
.button {
width: 273px;
.time {
width: 42%;
display: inline-block;
}
.input {
width: 273px;
.tm {
margin-left: 12px;
}
#order-form label.error {left: 142px;}
#footer-form label.error {left:128px;}
}
#footer-form label {
padding: 0px 5px;
@media (max-width: 960px) and (min-width: 761px) {
#footer-form input {
width: 282px;
}
}
@media (max-width: 768px) and (min-width: 481px) {
.arrow-up, .arrow-down {
right: -80px;
#footer-form input {
width: 282px;
}
.time {
width: 122px;
#footer-form label.error {
left: 126px;
}
}
@media (max-width:650px){
.map-ct1 .form1 {
width: 281px!important;
margin: 0 auto;
padding: 27px 0 0 0!important;}
}
@media (min-width:768px) and (max-width:800px){
.map-ct1 .form1 {
top:48px!important;
}
.label-error {
left: 127px;
}
#footer-form label.error {
left: 126px!important;
}
}
@media (min-width:800px) and (max-width:960px){
#footer-form label.error {
left: 126px!important;
@media (max-width: 360px) {
.map-ct1 {
padding-top: 0px!important;
height:950px!important;
overflow: hidden;
}
}
css/additional.min.css
.nowrap{white-space:nowrap;display:inline !important}#overlay{background:rgba(0,0,0,.5);position:fixed;z-index:4999;width:100%;height:100%;top:0;left:0;bottom:0;right:0;align-content:center;justify-content:center;align-items:center}.modal{z-index:5000;width:416px;background:#fff;padding:0 0 12px 0;border-radius:8px}.hidden{display:none}.button{display:block;width:336px;height:48px;line-height:48px;-webkit-border-radius:7px;border-radius:7px;background-color:#ed1c24;text-align:center;color:#fff;font-family:PFAgoraSansPro;font-size:15px;font-weight:500;margin:0 auto;margin-top:17px}#callback-form .button{margin-top:10px}.modal-head{text-align:right;height:28px}.modal-close{text-align:right}.modal-close-xray{padding:18px;position:relative;background:url("/img/modal/close.png") no-repeat 96% 15px;cursor:pointer}.modal-body-header{font-size:36px;text-align:center}.modal-body-header small{font-size:14px;display:block;padding:0 0 28px}.modal-label{display:block;font-size:14px;font-weight:bold;margin:auto;padding:0 40px;margin-bottom:2px}#success .modal-body-header{padding-top:36px}#success small{display:block;padding-top:18px}.time{width:152px;display:inline-block;float:left;margin-top:-20px}fieldset{max-height:89px;min-height:87px}#order-form fieldset{min-height:86px}#order-form fieldset:last-of-type{min-height:94px}.time .input{width:100%;display:inline-block}.tm{margin-left:40px}.item-poss a{cursor:default}.arrow-up{content:"";display:block;position:relative;background:url('/img/modal/butt_up.svg');height:30px;width:42px;top:22px;right:-109px;background-size:cover;margin-top:-32px;cursor:pointer;z-index:100}.arrow-down{content:"";display:block;position:relative;background:url('/img/modal/butt_down.svg');height:30px;width:42px;top:44px;right:-109px;background-size:cover;margin-top:-32px;cursor:pointer;z-index:50}.time.tm::after{width:16px;height:4px;display:block;content:"";position:relative;top:-45px;right:-161px;border-top:2px solid #cacaca}.tm2{margin-left:32px}.input{width:336px;height:46px;-webkit-border-radius:7px;border-radius:7px;border:1px solid #d0d0d0;background-color:#fff;display:block;margin:auto;margin-bottom:20px;font-size:15px;color:#333;box-sizing:border-box;padding:4px 16px}.error{color:#ed1c24}label.error{position:relative;height:0;top:-86px;left:148px;display:inline-block;width:55%;text-align:right;font-size:13px}#footer-form label{padding:0}input:disabled,input[disabled]{border:1px solid #999;background-color:#eee !important;color:#000 !important;cursor:not-allowed}input.error{border-color:#ed1c24 !important}input.valid{border-color:#18ff00 !important}.input input[type="text"]{font-size:15px;color:#333;display:block;background:0;border:0;width:100%;height:46px}.last{padding-top:20px}@media(max-width:480px) and (min-width:321px){.modal{width:360px}.map-ct1{padding-top:0 !important}#footer-form input{width:328px}.last{padding-top:18px}#order-form label{padding:0 13px}.time{width:42%;display:inline-block}.tm{margin-left:12px}}@media(max-width:769px) and (min-width:481px){.map-ct1{padding-top:0 !important;height:1150px !important}#footer-form input{width:282px}#footer-form label.error{left:127px}}@media(max-width:320px){.time.tm::after{right:-130px}.map-ct1{padding-top:0 !important;height:950px !important;overflow:hidden}#footer-form input{width:282px}#footer-form label.error{left:127px}.modal{width:300px}.button{width:273px}.input{width:273px}#footer-form label{padding:0 5px}.arrow-up,.arrow-down{right:-80px}.time{width:122px}}@media(max-width:360px){.map-ct1{padding-top:0 !important;height:950px !important;overflow:hidden}}
.nowrap{white-space:nowrap;display:inline !important}.button-present-wrapper{margin-top:44px}.button-present{display:block;width:306px;height:48px;line-height:48px;-webkit-border-radius:7px;border-radius:7px;background-color:#ed1c24;text-align:center;color:#fff;font-family:PFAgoraSansPro;font-size:15px;font-weight:500;margin-bottom:16px}#overlay{background:rgba(0,0,0,.5);position:fixed;z-index:4999;width:100%;height:100%;top:0;left:0;bottom:0;right:0;align-content:center;justify-content:center;align-items:center}.modal{z-index:5000;width:416px;background:#fff;padding:0 0 12px 0;border-radius:8px}.hidden{display:none}.button{display:block;width:336px;height:48px;line-height:48px;-webkit-border-radius:7px;border-radius:7px;background-color:#ed1c24;text-align:center;color:#fff;font-family:PFAgoraSansPro;font-size:15px;font-weight:500;margin:0 auto;margin-top:17px}#callback-form .button{margin-top:10px}.modal-head{text-align:right;height:28px}.modal-close{text-align:right}.modal-close-xray{padding:18px;position:relative;background:url("/img/modal/close.png") no-repeat 96% 15px;cursor:pointer}.modal-body-header{font-size:36px;text-align:center}.modal-body-header small{font-size:14px;display:block;padding:0 0 28px}.modal-label{display:block;font-size:14px;font-weight:bold;margin:auto;padding:0 40px;margin-bottom:2px}#success .modal-body-header{padding-top:36px}#success small{display:block;padding-top:18px}.time{width:152px;display:inline-block;float:left;margin-top:-20px}fieldset{max-height:89px;min-height:87px}#order-form fieldset{min-height:86px}#order-form fieldset:last-of-type{min-height:94px}.time .input{width:100%;display:inline-block}.tm{margin-left:40px}.item-poss a{cursor:default}.arrow-up{content:"";display:block;position:relative;background:url('/img/modal/butt_up.svg');height:30px;width:42px;top:22px;right:-109px;background-size:cover;margin-top:-32px;cursor:pointer;z-index:100}.arrow-down{content:"";display:block;position:relative;background:url('/img/modal/butt_down.svg');height:30px;width:42px;top:44px;right:-109px;background-size:cover;margin-top:-32px;cursor:pointer;z-index:50}.time.tm::after{width:16px;height:4px;display:block;content:"";position:relative;top:-45px;right:-161px;border-top:2px solid #cacaca}.tm2{margin-left:32px}.input{width:100%;height:46px;-webkit-border-radius:7px;border-radius:7px;border:1px solid #d0d0d0;background-color:#fff;display:block;margin:auto;margin-bottom:20px;font-size:15px;color:#333;box-sizing:border-box;padding:4px 16px}#order-form .input,#callback-form #phone{width:336px}.error{color:#ed1c24}label.error{position:relative;height:0;top:-86px;left:148px;display:inline-block;width:55%;text-align:right;font-size:13px}#footer-form label{padding:0}input:disabled,input[disabled]{border:1px solid #999;background-color:#eee !important;color:#000 !important;cursor:not-allowed}input.error{border-color:#ed1c24 !important}input.valid{border-color:#18ff00 !important}.input input[type="text"]{font-size:15px;color:#333;display:block;background:0;border:0;width:100%;height:46px}.last{padding-top:20px}.map-ct1{max-height:712px !important}@media(max-width:320px){.btn-320{width:270px !important}#callback-form .error{left:122px}#order-form .input,#callback-form #phone{width:273px !important}.b2 .ord1,.button-present{width:288px}.button{width:286px}.time.tm::after{right:-130px}.tm2{width:50%}.tm{margin-left:14px}.time .input{width:98%}.map-ct1{padding-top:0 !important;height:950px !important;overflow:hidden}.map-ct1 .form1{padding:27px 0 0 0 !important;margin-bottom:-6px !important}#footer .rr2 a{height:65px}.b5 .ll1{height:110px}#footer-form input{width:282px}#order-form label.error{left:106px}#footer-form label.error{left:124px}.modal{width:300px}.button{width:273px}.input{width:273px}#order-form label{padding:0 16px}#footer-form label{padding:0 5px}.arrow-up,.arrow-down{right:-80px}.time{width:122px}}@media(max-width:360px) and (min-width:321px){.map-ct1{padding-top:0 !important;height:850px !important;overflow:hidden}#order-form label.error{left:137px}.map-ct1 .form1{padding:27px 0 0 0 !important;margin-bottom:-6px !important}.b4 .ord3,.b2 .ord2-1{width:100%}#footer-form input{width:282px !important}}@media(max-width:767px){.map-ct1{padding-top:0 !important;height:950px !important;overflow:hidden}}@media(max-width:375px) and (min-width:361px){.map-ct1{padding-top:0 !important;height:950px !important;overflow:hidden}}@media(max-width:480px) and (min-width:321px){.time.tm::after{right:-152px}#callback-form #phone{width:318px}.modal{width:360px}.map-ct1{padding-top:0 !important}.last{padding-top:18px}#order-form label{padding:0 7px}.time{width:42%;display:inline-block}.tm{margin-left:12px}#order-form label.error{left:142px}#footer-form label.error{left:128px}}@media(max-width:960px) and (min-width:761px){#footer-form input{width:282px}}@media(max-width:768px) and (min-width:481px){#footer-form input{width:282px}#footer-form label.error{left:126px}}@media(max-width:650px){.map-ct1 .form1{width:281px !important;margin:0 auto;padding:27px 0 0 0 !important}}@media(min-width:768px) and (max-width:800px){.map-ct1 .form1{top:48px !important}.label-error{left:127px}#footer-form label.error{left:126px !important}}@media(min-width:800px) and (max-width:960px){#footer-form label.error{left:126px !important}}
css/style.css
......@@ -188,7 +188,7 @@ body { font-family: PFAgoraSansPro; }
#page { position: relative; overflow: hidden; width: 100%; }
@media only screen and (min-device-width: 1440px) {
@media (min-width: 1440px) {
#page {
width: 1344px!important;
margin: 0 auto!important;
......
files/YES.pdf 0 → 100644
No preview for this file type
index.html
......@@ -7,7 +7,7 @@
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="css/additional.min.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection"/>
<link rel="stylesheet" href="css/style.min.css" type="text/css" media="screen, projection"/>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/moment.min.js"></script>
......@@ -45,7 +45,7 @@
каждым годом все больше людей инвестируют в изучение языков. Огромная целевая аудитория, умеренная
конкуренция и высокая репутация бренда YES обеспечивают стабильный поток клиентов.
</div>
<a href="" class="ord2">Получить план открытия школы</a>
<a href="" class="ord2 btn-320">Получить план открытия школы</a>
</div>
<div class="rr1">
<ul>
......@@ -67,7 +67,7 @@
</li>
</ul>
</div>
<a href="" class="ord2-1">Получить план открытия школы</a>
<a href="" class="ord2-1 btn-320">Получить план открытия школы</a>
</div>
</div>
<div class="b3">
......@@ -155,6 +155,9 @@
</ul>
</div>
</div>
<div class="button-present-wrapper">
<a href="/files/YES.pdf" class="button-present btn-320" download>Скачать презентацию</a>
</div>
</div>
</div>
<div class="b4">
......@@ -176,7 +179,7 @@
<p class="p1">Логотип Школы иностранных языков YES — не просто фирменный знак, это знак качества.
Изображенный в форме круглой печати, он символизирует многолетний успешный опыт обучения иностранным
языкам, подтвержденный тысячами сертификатов наших выпускников.</p>
<a href="" class="ord3">Получить план открытия школы</a>
<a href="" class=" btn-320">Получить план открытия школы</a>
</div>
</div>
<div class="b5">
......@@ -244,7 +247,7 @@
<input type="text" name="city" id="city" class="input">
</fieldset>
<fieldset class="last">
<input type="submit" value="Отправить заявку" class="button">
<input type="submit" value="Отправить заявку" class="button btn-320">
</fieldset>
</form>
......@@ -289,7 +292,7 @@
<fieldset>
<input type="hidden" name="type" value="callback">
<label for="phone">&nbsp;</label>
<input type="text" name="phone" id="phone" class="input" >
<input type="text" name="phone" id="phone" class="input" placeholder="8 999 4444444" >
</fieldset>
<fieldset class="time tm">
<label for="from">&nbsp;</label>
......@@ -513,7 +516,7 @@
myMap.geoObjects.add(myCollection);
//myMap.behaviors.disable("scrollZoom");
myMap.behaviors.disable("scrollZoom");
myMap.controls.remove('searchControl');
myMap.controls.remove('typeSelector');
myMap.controls.remove('zoomControl');
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!