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 @@ ...@@ -2,7 +2,24 @@
white-space: nowrap; white-space: nowrap;
display: inline !important; 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 { #overlay {
background: rgba(0, 0, 0, .5); background: rgba(0, 0, 0, .5);
position: fixed; position: fixed;
...@@ -180,7 +197,7 @@ fieldset { ...@@ -180,7 +197,7 @@ fieldset {
} }
.input { .input {
width: 336px; width: 100%;
height: 46px; height: 46px;
-webkit-border-radius: 7px; -webkit-border-radius: 7px;
border-radius: 7px; border-radius: 7px;
...@@ -194,6 +211,9 @@ fieldset { ...@@ -194,6 +211,9 @@ fieldset {
box-sizing: border-box; box-sizing: border-box;
padding: 4px 16px; padding: 4px 16px;
} }
#order-form .input, #callback-form #phone {
width: 336px;
}
.error { .error {
color: #ed1c24; color: #ed1c24;
...@@ -243,105 +263,187 @@ input.valid { ...@@ -243,105 +263,187 @@ input.valid {
.last { .last {
padding-top: 20px; padding-top: 20px;
} }
.map-ct1 { max-height:712px!important; }
@media (max-width: 480px) and (min-width: 321px) { @media (max-width: 320px) {
.modal { .btn-320 {width: 270px!important;}
width: 360px; #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 { .map-ct1 {
padding-top: 0px!important; 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 { #footer-form input {
width: 328px; width: 282px;
}
#order-form label.error {
left:106px;
}
#footer-form label.error{
left: 124px
} }
.last { .modal {
padding-top: 18px; width: 300px;
} }
.modal-label { .button {
width: 273px;
} }
.input {
width: 273px;
}
#order-form label { #order-form label {
padding: 0 13px; padding:0px 16px;
}
#footer-form label {
padding: 0px 5px;
} }
.time { .arrow-up, .arrow-down {
width: 42%; right: -80px;
display: inline-block;
} }
.tm { .time {
margin-left: 12px; width: 122px;
} }
} }
@media (max-width: 769px) and (min-width: 481px) { @media (max-width: 360px) and (min-width:321px) {
.map-ct1 { .map-ct1 {
padding-top: 0px!important; padding-top: 0px!important;
height:1150px!important; height:850px!important;
overflow: hidden;
} }
#order-form label.error {
#footer-form input { left:137px;
width: 282px; }
.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) { .modal {
.time.tm::after { width: 360px;
right: -130px;
} }
.map-ct1 { .map-ct1 {
padding-top: 0px!important; padding-top: 0px!important;
height:950px!important;
overflow: hidden;
} }
#footer-form input { .last {
width: 282px; padding-top: 18px;
} }
#footer-form label.error { .modal-label {
left: 127px
} }
.modal { #order-form label {
width: 300px; padding: 0 7px;
} }
.button { .time {
width: 273px; width: 42%;
display: inline-block;
} }
.input { .tm {
width: 273px; margin-left: 12px;
} }
#order-form label.error {left: 142px;}
#footer-form label.error {left:128px;}
}
#footer-form label { @media (max-width: 960px) and (min-width: 761px) {
padding: 0px 5px; #footer-form input {
width: 282px;
} }
}
@media (max-width: 768px) and (min-width: 481px) {
.arrow-up, .arrow-down { #footer-form input {
right: -80px; width: 282px;
} }
.time { #footer-form label.error {
width: 122px; 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; } ...@@ -188,7 +188,7 @@ body { font-family: PFAgoraSansPro; }
#page { position: relative; overflow: hidden; width: 100%; } #page { position: relative; overflow: hidden; width: 100%; }
@media only screen and (min-device-width: 1440px) { @media (min-width: 1440px) {
#page { #page {
width: 1344px!important; width: 1344px!important;
margin: 0 auto!important; margin: 0 auto!important;
......
files/YES.pdf 0 → 100644
No preview for this file type
index.html
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<title></title> <title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"> <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/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/app.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script> <script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/moment.min.js"></script> <script type="text/javascript" src="js/moment.min.js"></script>
...@@ -45,7 +45,7 @@ ...@@ -45,7 +45,7 @@
каждым годом все больше людей инвестируют в изучение языков. Огромная целевая аудитория, умеренная каждым годом все больше людей инвестируют в изучение языков. Огромная целевая аудитория, умеренная
конкуренция и высокая репутация бренда YES обеспечивают стабильный поток клиентов. конкуренция и высокая репутация бренда YES обеспечивают стабильный поток клиентов.
</div> </div>
<a href="" class="ord2">Получить план открытия школы</a> <a href="" class="ord2 btn-320">Получить план открытия школы</a>
</div> </div>
<div class="rr1"> <div class="rr1">
<ul> <ul>
...@@ -67,7 +67,7 @@ ...@@ -67,7 +67,7 @@
</li> </li>
</ul> </ul>
</div> </div>
<a href="" class="ord2-1">Получить план открытия школы</a> <a href="" class="ord2-1 btn-320">Получить план открытия школы</a>
</div> </div>
</div> </div>
<div class="b3"> <div class="b3">
...@@ -155,6 +155,9 @@ ...@@ -155,6 +155,9 @@
</ul> </ul>
</div> </div>
</div> </div>
<div class="button-present-wrapper">
<a href="/files/YES.pdf" class="button-present btn-320" download>Скачать презентацию</a>
</div>
</div> </div>
</div> </div>
<div class="b4"> <div class="b4">
...@@ -176,7 +179,7 @@ ...@@ -176,7 +179,7 @@
<p class="p1">Логотип Школы иностранных языков YES — не просто фирменный знак, это знак качества. <p class="p1">Логотип Школы иностранных языков YES — не просто фирменный знак, это знак качества.
Изображенный в форме круглой печати, он символизирует многолетний успешный опыт обучения иностранным Изображенный в форме круглой печати, он символизирует многолетний успешный опыт обучения иностранным
языкам, подтвержденный тысячами сертификатов наших выпускников.</p> языкам, подтвержденный тысячами сертификатов наших выпускников.</p>
<a href="" class="ord3">Получить план открытия школы</a> <a href="" class=" btn-320">Получить план открытия школы</a>
</div> </div>
</div> </div>
<div class="b5"> <div class="b5">
...@@ -244,7 +247,7 @@ ...@@ -244,7 +247,7 @@
<input type="text" name="city" id="city" class="input"> <input type="text" name="city" id="city" class="input">
</fieldset> </fieldset>
<fieldset class="last"> <fieldset class="last">
<input type="submit" value="Отправить заявку" class="button"> <input type="submit" value="Отправить заявку" class="button btn-320">
</fieldset> </fieldset>
</form> </form>
...@@ -289,7 +292,7 @@ ...@@ -289,7 +292,7 @@
<fieldset> <fieldset>
<input type="hidden" name="type" value="callback"> <input type="hidden" name="type" value="callback">
<label for="phone">&nbsp;</label> <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>
<fieldset class="time tm"> <fieldset class="time tm">
<label for="from">&nbsp;</label> <label for="from">&nbsp;</label>
...@@ -513,7 +516,7 @@ ...@@ -513,7 +516,7 @@
myMap.geoObjects.add(myCollection); myMap.geoObjects.add(myCollection);
//myMap.behaviors.disable("scrollZoom"); myMap.behaviors.disable("scrollZoom");
myMap.controls.remove('searchControl'); myMap.controls.remove('searchControl');
myMap.controls.remove('typeSelector'); myMap.controls.remove('typeSelector');
myMap.controls.remove('zoomControl'); 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!