Skip to content

T
taskonsite-архив-перенесен
Commit b91cf9ec authored by Олег Гиммельшпах's avatar Олег Гиммельшпах
Browse files
Options

update template

parent d287c0d8
Show whitespace changes
Inline Side-by-side
Showing with 967 additions and 207 deletions
frontend/web/css/screen.css
View file @ b91cf9ec
......@@ -155,19 +155,25 @@ u {
}
}
.container {
position: relative;
}
@media only screen and (min-width: 768px) and (max-width: 970px) {
.container {
width: 750px;
position: relative;
}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.container {
width: 450px;
position: relative;
}
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
.container {
width: 300px;
position: relative;
}
}
......@@ -412,6 +418,38 @@ a.show_d_menu {
}
}
.keys-btn {
display: block;
font-size: 20px;
color: #fff;
width: 201px;
height: 47px;
border: 2px solid #fff;
text-align: center;
line-height: 40px;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-o-border-radius: 50px;
-ms-border-radius: 50px;
display: block;
font-size: 20px;
color: #fff;
-moz-transition: all 0.3s linear 0.1s;
-o-transition: all 0.3s linear 0.1s;
-webkit-transition: all 0.3s linear 0.1s;
-ms-transition: all 0.3s linear 0.1s;
transition: all 0.3s linear 0.1s;
}
.keys-btn:hover, .keys-btn:active, .keys-btn:focus {
color: #000;
text-decoration: none;
background: #fff;
}
.keys-btn:hover .icon-arrowDown2:after, .keys-btn:active .icon-arrowDown2:after, .keys-btn:focus .icon-arrowDown2:after {
background: url(../images/icon/arrow_down_black.png) no-repeat;
}
.section1 {
min-height: 781px;
position: relative;
......@@ -538,31 +576,8 @@ a.show_d_menu {
}
a.toggle_bottom {
display: block;
font-size: 20px;
color: #fff;
width: 201px;
height: 47px;
border: 2px solid #fff;
text-align: center;
line-height: 40px;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-o-border-radius: 50px;
-ms-border-radius: 50px;
margin-top: 197px;
float: left;
-moz-transition: all 0.3s linear 0.1s;
-o-transition: all 0.3s linear 0.1s;
-webkit-transition: all 0.3s linear 0.1s;
-ms-transition: all 0.3s linear 0.1s;
transition: all 0.3s linear 0.1s;
}
a.toggle_bottom:hover, a.toggle_bottom:active, a.toggle_bottom:focus {
color: #000;
text-decoration: none;
background: #fff;
}
@media only screen and (min-width: 768px) and (max-width: 970px) {
a.toggle_bottom {
......@@ -597,10 +612,6 @@ a.toggle_bottom:hover, a.toggle_bottom:active, a.toggle_bottom:focus {
transition: all 0.3s linear 0.1s;
}
a.toggle_bottom:hover .icon-arrowDown2:after, a.rosneft_btn:hover .icon-arrowDown2:after, a.gem_mail_btn:hover .icon-arrowDown2:after, a.appl_btn:hover .icon-arrowDown2:after, a.ops_btn:hover .icon-arrowDown2:after {
background: url(../images/icon/arrow_down_black.png) no-repeat;
}
.bt_line {
background: url(../images/bt_line.png) no-repeat center center;
width: 233px;
......@@ -4448,26 +4459,11 @@ footer {
}
.video_btn {
display: block;
color: #fff;
border: 2px solid #fff;
border-radius: 50px;
margin-top: 153px;
height: 50px;
width: 200px;
line-height: 44px;
font-size: 18px;
text-align: center;
-moz-transition: all 0.3s linear 0.1s;
-o-transition: all 0.3s linear 0.1s;
-webkit-transition: all 0.3s linear 0.1s;
-ms-transition: all 0.3s linear 0.1s;
transition: all 0.3s linear 0.1s;
}
.video_btn:hover, .video_btn:active, .video_btn:focus {
color: #000;
text-decoration: none;
background: #fff;
}
@media only screen and (min-width: 768px) and (max-width: 970px) {
.video_btn {
......@@ -5166,7 +5162,6 @@ footer {
display: inline-block;
padding-bottom: 3px;
margin-bottom: 10px;
position: relative;
left: 0px;
top: 10px;
}
......@@ -11589,19 +11584,6 @@ h6 {
}
a.rosneft_btn {
display: block;
font-size: 20px;
color: #fff;
width: 201px;
height: 47px;
border: 2px solid #fff;
text-align: center;
line-height: 40px;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-o-border-radius: 50px;
-ms-border-radius: 50px;
position: relative;
top: 270px;
left: 0px;
......@@ -11630,11 +11612,6 @@ a.rosneft_btn {
margin: 20px 0 40px;
}
}
a.rosneft_btn:hover, a.rosneft_btn:active, a.rosneft_btn:focus {
color: #000;
text-decoration: none;
background: #fff;
}
.how_rosneft {
background: #FFC100;
......@@ -12473,6 +12450,10 @@ p.sborka_shkafov_bigp {
transition: all 0.2s linear;
background: #4B9C56;
}
.short_keys_block img {
max-width: 100%;
height: 100%;
}
@media only screen and (min-width: 320px) and (max-width: 970px) {
.short_keys_block {
width: 100%;
......@@ -12919,19 +12900,6 @@ p.sborka_shkafov_bigp {
}
a.gem_mail_btn {
display: block;
font-size: 20px;
color: #fff;
width: 201px;
height: 47px;
border: 2px solid #fff;
text-align: center;
line-height: 40px;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-o-border-radius: 50px;
-ms-border-radius: 50px;
margin-top: 66px;
float: left;
-moz-transition: all 0.3s linear 0.1s;
......@@ -12958,11 +12926,6 @@ a.gem_mail_btn {
margin: 40px 0;
}
}
a.gem_mail_btn:hover, a.gem_mail_btn:active, a.gem_mail_btn:focus {
color: #000;
text-decoration: none;
background: #fff;
}
.keys_mail_list {
margin-top: 52px;
......@@ -13671,28 +13634,12 @@ a.gem_mail_btn:hover, a.gem_mail_btn:active, a.gem_mail_btn:focus {
}
a.appl_btn {
display: block;
font-size: 20px;
color: #fff;
width: 201px;
height: 47px;
border: 2px solid #fff;
text-align: center;
line-height: 40px;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-o-border-radius: 50px;
-ms-border-radius: 50px;
position: relative;
top: 157px;
left: 0px;
float: left;
-moz-transition: all 0.3s linear 0.1s;
-o-transition: all 0.3s linear 0.1s;
-webkit-transition: all 0.3s linear 0.1s;
-ms-transition: all 0.3s linear 0.1s;
transition: all 0.3s linear 0.1s;
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
a.appl_btn {
......@@ -13712,11 +13659,6 @@ a.appl_btn {
margin: 20px 0 40px;
}
}
a.appl_btn:hover, a.appl_btn:active, a.appl_btn:focus {
color: #000;
text-decoration: none;
background: #fff;
}
.appl_par {
background: url(../images/appl_par.png) no-repeat center center;
......@@ -14664,29 +14606,11 @@ a.appl_btn:hover, a.appl_btn:active, a.appl_btn:focus {
}
a.ops_btn {
display: block;
font-size: 20px;
color: #fff;
width: 201px;
height: 47px;
border: 2px solid #fff;
text-align: center;
line-height: 40px;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-o-border-radius: 50px;
-ms-border-radius: 50px;
position: relative;
top: 157px;
left: 0px;
right: -28px;
float: right;
-moz-transition: all 0.3s linear 0.1s;
-o-transition: all 0.3s linear 0.1s;
-webkit-transition: all 0.3s linear 0.1s;
-ms-transition: all 0.3s linear 0.1s;
transition: all 0.3s linear 0.1s;
}
@media only screen and (min-width: 768px) and (max-width: 970px) {
a.ops_btn {
......@@ -14707,11 +14631,6 @@ a.ops_btn {
margin: auto;
}
}
a.ops_btn:hover, a.ops_btn:active, a.ops_btn:focus {
color: #000;
text-decoration: none;
background: #fff;
}
.ops_list {
margin-top: 30px;
......@@ -14827,3 +14746,536 @@ a.ops_btn:hover, a.ops_btn:active, a.ops_btn:focus {
right: 50px;
}
}
.top_keys_soc {
width: 100%;
min-height: 564px;
background: url(../images/top_keys_soc.jpg) no-repeat center center;
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
padding-top: 75px;
position: relative;
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.top_keys_soc {
min-height: 500px;
}
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
.top_keys_soc {
min-height: 500px;
padding-bottom: 40px;
}
}
.top_keys_soc h1 {
font-size: 36px;
line-height: 50px;
color: #fff;
letter-spacing: 0.7px;
font-family: "RobotoBold";
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.top_keys_soc h1 {
font-size: 27px;
line-height: 36px;
}
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
.top_keys_soc h1 {
font-size: 20px;
line-height: 30px;
text-align: center;
}
}
.top_keys_soc_subtitle {
font-size: 18px;
margin-top: 37px;
line-height: 22px;
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.top_keys_soc_subtitle {
font-size: 16px;
}
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
.top_keys_soc_subtitle {
font-size: 16px;
text-align: center;
}
}
a.soc_btn {
position: relative;
top: 128px;
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
a.soc_btn {
top: 0px;
margin: 30px auto;
}
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
a.soc_btn {
top: 0px;
margin: 30px auto;
}
}
.soc_zak_block {
position: relative;
top: 128px;
margin-left: 44px;
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.soc_zak_block {
top: 0px;
width: 200px;
right: 0px;
margin: auto;
}
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
.soc_zak_block {
top: 0px;
width: 200px;
right: 0px;
margin: auto;
}
}
.soc_zak_block_title {
font-size: 16px;
margin-bottom: 8px;
}
.soc_zaim_mockups {
position: relative;
}
@media only screen and (min-width: 320px) and (max-width: 970px) {
.soc_zaim_mockups {
display: none;
}
}
.soc_zaim_mockup1 {
width: 287px;
height: 338px;
background: url(../images/soc_zaim_mockup1.png) no-repeat center center;
position: absolute;
top: -52px;
}
.soc_zaim_mockup2 {
width: 289px;
height: 279px;
background: url(../images/soc_zaim_mockup2.png) no-repeat center center;
position: absolute;
top: 7px;
left: 69px;
}
.soc_zaim_mockup3 {
width: 238px;
height: 212px;
background: url(../images/soc_zaim_mockup3.png) no-repeat center center;
position: absolute;
top: 74px;
left: 119px;
}
.keys_soc_two {
background: #262E38;
width: 100%;
min-height: 100px;
padding-top: 40px;
padding-bottom: 40px;
}
.keys_soc_two h2 {
font-size: 30px;
color: #2d323a;
background: #FFCE3B;
padding: 13px 19px;
display: inline-block;
font-family: "RobotoBold";
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
.keys_soc_two h2 {
font-size: 20px;
}
}
.soc_list {
margin-top: 35px;
}
.soc_list li {
background: url(../images/icon/soc_list.png) no-repeat 0% 50%;
padding-left: 30px;
font-size: 21px;
color: #fff;
font-family: "RobotoBold";
line-height: 24px;
margin-bottom: 11px;
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.soc_list li {
background: url(../images/icon/soc_list.png) no-repeat 0% 30%;
font-size: 19px;
}
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
.soc_list li {
background: url(../images/icon/soc_list.png) no-repeat 0% 20%;
font-size: 16px;
}
}
.soc_p1 {
background: url(../images/parallax/soc_p1.png) no-repeat center center;
width: 247px;
height: 237px;
position: absolute;
top: 189px;
left: -232px;
z-index: 4;
}
@media only screen and (min-width: 320px) and (max-width: 970px) {
.soc_p1 {
display: none;
}
}
.soc_p2 {
background: url(../images/parallax/soc_p2.png) no-repeat center center;
width: 214px;
height: 229px;
position: absolute;
top: 191px;
left: -90px;
z-index: 4;
}
@media only screen and (min-width: 320px) and (max-width: 970px) {
.soc_p2 {
display: none;
}
}
.soc_p3 {
background: url(../images/parallax/soc_p3.png) no-repeat center center;
width: 137px;
height: 151px;
position: absolute;
top: -2px;
right: -167px;
z-index: 4;
}
@media only screen and (min-width: 320px) and (max-width: 970px) {
.soc_p3 {
display: none;
}
}
.e_cat_top {
width: 100%;
min-height: 687px;
background: url(../images/e_cat_top.jpg) no-repeat center bottom;
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
padding-top: 49px;
}
@media only screen and (min-width: 768px) and (max-width: 970px) {
.e_cat_top {
min-height: 553px;
}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.e_cat_top {
min-height: 553px;
}
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
.e_cat_top {
min-height: 600px;
}
}
.e_cat_top h1 {
font-size: 36px;
font-family: "RobotoBold";
line-height: 50px;
letter-spacing: 0.7px;
width: 720px;
display: inline-block;
}
@media only screen and (min-width: 768px) and (max-width: 970px) {
.e_cat_top h1 {
width: 530px;
}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.e_cat_top h1 {
width: 100%;
display: block;
font-size: 22px;
line-height: 35px;
}
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
.e_cat_top h1 {
width: 100%;
display: block;
font-size: 18px;
line-height: 30px;
}
}
.e_cat_zak_block {
display: inline-block;
vertical-align: top;
margin-left: 40px;
margin-top: 16px;
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.e_cat_zak_block {
display: block;
margin-left: 0;
}
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
.e_cat_zak_block {
display: block;
margin-left: 0;
}
}
.e_cat_zak_block_title {
font-size: 16px;
margin-bottom: 24px;
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.e_cat_zak_block_title {
margin-bottom: 15px;
}
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
.e_cat_zak_block_title {
margin-bottom: 15px;
}
}
.e_cat_zadacha {
margin-top: 26px;
}
.e_cat_zadacha h2 {
font-size: 16px;
font-family: "RobotoBold";
line-height: 35px;
}
.e_cat_zadacha p {
font-size: 18px;
line-height: 22px;
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
.e_cat_zadacha p {
font-size: 16px;
}
}
a.e_cat_btn {
margin-top: 160px;
}
@media only screen and (min-width: 768px) and (max-width: 970px) {
a.e_cat_btn {
margin-top: 30px;
}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
a.e_cat_btn {
margin-top: 30px;
}
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
a.e_cat_btn {
margin-top: 30px;
}
}
.e_cat_devices {
width: 664px;
height: 397px;
position: absolute;
top: 174px;
right: 35px;
}
@media only screen and (min-width: 320px) and (max-width: 970px) {
.e_cat_devices {
width: 100%;
position: relative;
top: 0px;
right: 0px;
margin-top: 30px;
margin-bottom: 40px;
height: auto;
}
.e_cat_devices img {
max-width: 100%;
}
}
.e_cat_p1 {
background: url(../images/parallax/e_cat_p1.png) no-repeat center center;
width: 254px;
height: 260px;
position: absolute;
top: 76px;
left: -460px;
z-index: 4;
}
@media only screen and (min-width: 320px) and (max-width: 970px) {
.e_cat_p1 {
display: none;
}
}
.e_cat_p2 {
background: url(../images/parallax/e_cat_p2.png) no-repeat center center;
width: 421px;
height: 383px;
position: absolute;
bottom: -191px;
left: -370px;
z-index: 4;
}
@media only screen and (min-width: 320px) and (max-width: 970px) {
.e_cat_p2 {
display: none;
}
}
.e_cat_p3 {
background: url(../images/parallax/e_cat_p3.png) no-repeat center center;
width: 267px;
height: 314px;
position: absolute;
top: 5px;
right: -282px;
z-index: 4;
}
@media only screen and (min-width: 320px) and (max-width: 970px) {
.e_cat_p3 {
display: none;
}
}
.e_cat_p4 {
background: url(../images/parallax/e_cat_p4.png) no-repeat center center;
width: 314px;
height: 285px;
position: absolute;
bottom: -90px;
right: -531px;
z-index: 4;
}
@media only screen and (min-width: 320px) and (max-width: 970px) {
.e_cat_p4 {
display: none;
}
}
.e_cat_p5 {
background: url(../images/parallax/e_cat_p5.png) no-repeat center center;
width: 267px;
height: 276px;
position: absolute;
bottom: -228px;
right: -184px;
z-index: 4;
}
@media only screen and (min-width: 320px) and (max-width: 970px) {
.e_cat_p5 {
display: none;
}
}
.e_cat_two {
background: #262E38;
min-height: 100px;
width: 100%;
padding-bottom: 38px;
}
.e_cat_two h2 {
font-size: 30px;
color: #fff;
background: #A843A0;
padding: 10px 15px;
background: #A843A0;
padding: 13px 20px;
display: inline-block;
font-family: "RobotoBold";
position: relative;
top: -46px;
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
.e_cat_two h2 {
font-size: 20px;
}
}
.e_cat_list {
margin-top: -26px;
}
.e_cat_list li {
background: url(../images/icon/e_cat_list.png) no-repeat 0% 20%;
padding-left: 30px;
font-size: 21px;
line-height: 35px;
font-family: "RobotoBold";
color: #fff;
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.e_cat_list li {
font-size: 17px;
line-height: 26px;
margin-bottom: 15px;
}
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
.e_cat_list li {
font-size: 14px;
line-height: 23px;
margin-bottom: 15px;
}
}
.e_cat_content {
background: #fff;
padding-top: 30px;
padding-bottom: 30px;
}
.e_cat_content p {
font-size: 17px;
line-height: 26px;
color: #2d323a;
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.e_cat_content p {
font-size: 14px;
line-height: 22px;
}
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
.e_cat_content p {
font-size: 14px;
line-height: 22px;
}
}
.short_keys_sect_ecat {
background: #fff;
padding-top: 30px;
padding-bottom: 30px;
}
.short_keys_sect_ecat .short_keys_title {
color: #2d323a;
margin-left: 0;
}
frontend/web/js/common.js
View file @ b91cf9ec
......@@ -388,6 +388,7 @@ $(document).ready(function() {
$(".menu").removeClass("menu_active");
$(".toggle-mnu").removeClass("on");
});
});
$(window).load(function() {
......@@ -463,6 +464,32 @@ $(window).scroll(function() {
$(".mail_p5").css({
"transform" : "translate(0%, -" + st /8 + "%"
});
$(".soc_p1").css({
"transform" : "translate(0%, -" + st /8 + "%"
});
$(".soc_p2").css({
"transform" : "translate(0%, -" + st /6 + "%"
});
$(".soc_p3").css({
"transform" : "translate(0%, -" + st /4 + "%"
});
$(".e_cat_p1").css({
"transform" : "translate(0%, -" + st /6 + "%"
});
$(".e_cat_p2").css({
"transform" : "translate(0%, -" + st /4 + "%"
});
$(".e_cat_p3").css({
"transform" : "translate(0%, -" + st /8 + "%"
});
$(".e_cat_p4").css({
"transform" : "translate(0%, -" + st /4 + "%"
});
$(".e_cat_p5").css({
"transform" : "translate(0%, -" + st /8 + "%"
});
});
jQuery(function($){
$(document).mouseup(function (e){
......
frontend/web/sass/screen.sass
View file @ b91cf9ec
......@@ -83,12 +83,16 @@ u
-ms-animation: none !important
animation: none !important
.container
position: relative
+r(768,970)
width: 750px
position: relative
+r(480,767)
width: 450px
position: relative
+r(320,479)
width: 300px
position: relative
header
background: #262E38
width: 100%
......@@ -249,6 +253,27 @@ a.show_d_menu
+r(480,767)
width: 300px
margin-left: 10px
.keys-btn
display: block
font-size: 20px
color: #fff
width: 201px
height: 47px
border: 2px solid #fff
text-align: center
line-height: 40px
+br(50px)
display: block
font-size: 20px
color: #fff
+transition(all 0.3s linear 0.1s)
&:hover, &:active, &:focus
color: #000
text-decoration: none
background: #fff
.icon-arrowDown2
&:after
background: url(../images/icon/arrow_down_black.png) no-repeat
.section1
min-height: 781px
position: relative
......@@ -322,22 +347,8 @@ a.show_d_menu
display: block
text-align: center
a.toggle_bottom
display: block
font-size: 20px
color: #fff
width: 201px
height: 47px
border: 2px solid #fff
text-align: center
line-height: 40px
+br(50px)
margin-top: 197px
float: left
+transition(all 0.3s linear 0.1s)
&:hover, &:active, &:focus
color: #000
text-decoration: none
background: #fff
+r(768,970)
margin-top: 68px
+r(480,767)
......@@ -357,12 +368,6 @@ a.toggle_bottom
vertical-align: middle
margin-left: 13px
+transition(all 0.3s linear 0.1s)
a.toggle_bottom, a.rosneft_btn, a.gem_mail_btn, a.appl_btn, a.ops_btn
&:hover
.icon-arrowDown2
&:after
background: url(../images/icon/arrow_down_black.png) no-repeat
.bt_line
background: url(../images/bt_line.png) no-repeat center center
width: 233px
......@@ -2923,21 +2928,11 @@ footer
margin-top: 90px
text-align: center
.video_btn
display: block
color: #fff
border: 2px solid #fff
border-radius: 50px
margin-top: 153px
height: 50px
width: 200px
line-height: 44px
font-size: 18px
text-align: center
+transition(all 0.3s linear 0.1s)
&:hover, &:active, &:focus
color: #000
text-decoration: none
background: #fff
+r(768,970)
margin-top: 92px
+r(480,767)
......@@ -3380,7 +3375,6 @@ footer
display: inline-block
padding-bottom: 3px
margin-bottom: 10px
position: relative
left: 0px
top: 10px
.rev_video_block
......@@ -7672,15 +7666,6 @@ h6
+cover
position: relative
a.rosneft_btn
display: block
font-size: 20px
color: #fff
width: 201px
height: 47px
border: 2px solid #fff
text-align: center
line-height: 40px
+br(50px)
position: relative
top: 270px
left: 0px
......@@ -7698,10 +7683,6 @@ a.rosneft_btn
left: 0
float: none
margin: 20px 0 40px
&:hover, &:active, &:focus
color: #000
text-decoration: none
background: #fff
.how_rosneft
background: #FFC100
width: 100%
......@@ -8261,6 +8242,9 @@ p.sborka_shkafov_bigp
margin-bottom: 31px
+transition(all 0.2s linear)
background: #4B9C56
img
max-width: 100%
height: 100%
+r(320,970)
width: 100%
.short_keys_foot
......@@ -8542,15 +8526,6 @@ p.sborka_shkafov_bigp
top: 85px
right: 40px
a.gem_mail_btn
display: block
font-size: 20px
color: #fff
width: 201px
height: 47px
border: 2px solid #fff
text-align: center
line-height: 40px
+br(50px)
margin-top: 66px
float: left
+transition(all 0.3s linear 0.1s)
......@@ -8566,10 +8541,6 @@ a.gem_mail_btn
left: 0
float: none
margin: 40px 0
&:hover, &:active, &:focus
color: #000
text-decoration: none
background: #fff
.keys_mail_list
margin-top: 52px
li
......@@ -9039,20 +9010,13 @@ a.gem_mail_btn
left: 10px
top: 15px
a.appl_btn
display: block
font-size: 20px
color: #fff
width: 201px
height: 47px
border: 2px solid #fff
text-align: center
line-height: 40px
+br(50px)
position: relative
top: 157px
left: 0px
float: left
+transition(all 0.3s linear 0.1s)
+r(480,767)
position: static
top: 0
......@@ -9065,10 +9029,6 @@ a.appl_btn
left: 0
float: none
margin: 20px 0 40px
&:hover, &:active, &:focus
color: #000
text-decoration: none
background: #fff
.appl_par
background: url(../images/appl_par.png) no-repeat center center
max-width: 539px
......@@ -9701,21 +9661,11 @@ a.appl_btn
+r(320,479)
font-size: 15px
a.ops_btn
display: block
font-size: 20px
color: #fff
width: 201px
height: 47px
border: 2px solid #fff
text-align: center
line-height: 40px
+br(50px)
position: relative
top: 157px
left: 0px
right: -28px
float: right
+transition(all 0.3s linear 0.1s)
+r(768,970)
top: 152px
+r(480,767)
......@@ -9726,10 +9676,6 @@ a.ops_btn
right: 0
float: none
margin: auto
&:hover, &:active, &:focus
color: #000
text-decoration: none
background: #fff
.ops_list
margin-top: 30px
li
......@@ -9801,3 +9747,338 @@ a.ops_btn
+r(1301,1600)
top: 390px
right: 50px
.top_keys_soc
width: 100%
min-height: 564px
background: url(../images/top_keys_soc.jpg) no-repeat center center
+cover
padding-top: 75px
position: relative
+r(480,767)
min-height: 500px
+r(320,479)
min-height: 500px
padding-bottom: 40px
h1
font-size: 36px
line-height: 50px
color: #fff
letter-spacing: 0.7px
font-family: "RobotoBold"
+r(480,767)
font-size: 27px
line-height: 36px
+r(320,479)
font-size: 20px
line-height: 30px
text-align: center
&_subtitle
font-size: 18px
margin-top: 37px
line-height: 22px
+r(480,767)
font-size: 16px
+r(320,479)
font-size: 16px
text-align: center
a.soc_btn
position: relative
top: 128px
+r(480,767)
top: 0px
margin: 30px auto
+r(320,479)
top: 0px
margin: 30px auto
.soc_zak_block
position: relative
top: 128px
margin-left: 44px
+r(480,767)
top: 0px
width: 200px
right: 0px
margin: auto
+r(320,479)
top: 0px
width: 200px
right: 0px
margin: auto
&_title
font-size: 16px
margin-bottom: 8px
.soc_zaim_mockups
position: relative
+r(320,970)
display: none
.soc_zaim_mockup1
width: 287px
height: 338px
background: url(../images/soc_zaim_mockup1.png) no-repeat center center
position: absolute
top: -52px
.soc_zaim_mockup2
width: 289px
height: 279px
background: url(../images/soc_zaim_mockup2.png) no-repeat center center
position: absolute
top: 7px
left: 69px
.soc_zaim_mockup3
width: 238px
height: 212px
background: url(../images/soc_zaim_mockup3.png) no-repeat center center
position: absolute
top: 74px
left: 119px
.keys_soc_two
background: #262E38
width: 100%
min-height: 100px
padding-top: 40px
padding-bottom: 40px
h2
font-size: 30px
color: #2d323a
background: #FFCE3B
padding: 13px 19px
display: inline-block
font-family: "RobotoBold"
+r(320,479)
font-size: 20px
.soc_list
margin-top: 35px
li
background: url(../images/icon/soc_list.png) no-repeat 0% 50%
padding-left: 30px
font-size: 21px
color: #fff
font-family: "RobotoBold"
line-height: 24px
margin-bottom: 11px
+r(480,767)
background: url(../images/icon/soc_list.png) no-repeat 0% 30%
font-size: 19px
+r(320,479)
background: url(../images/icon/soc_list.png) no-repeat 0% 20%
font-size: 16px
.soc_p1
background: url(../images/parallax/soc_p1.png) no-repeat center center
width: 247px
height: 237px
position: absolute
top: 189px
left: -232px
z-index: 4
+r(320,970)
display: none
.soc_p2
background: url(../images/parallax/soc_p2.png) no-repeat center center
width: 214px
height: 229px
position: absolute
top: 191px
left: -90px
z-index: 4
+r(320,970)
display: none
.soc_p3
background: url(../images/parallax/soc_p3.png) no-repeat center center
width: 137px
height: 151px
position: absolute
top: -2px
right: -167px
z-index: 4
+r(320,970)
display: none
.e_cat_top
width: 100%
min-height: 687px
background: url(../images/e_cat_top.jpg) no-repeat center bottom
+cover
padding-top: 49px
+r(768,970)
min-height: 553px
+r(480,767)
min-height: 553px
+r(320,479)
min-height: 600px
h1
font-size: 36px
font-family: "RobotoBold"
line-height: 50px
letter-spacing: 0.7px
width: 720px
display: inline-block
+r(768,970)
width: 530px
+r(480,767)
width: 100%
display: block
font-size: 22px
line-height: 35px
+r(320,479)
width: 100%
display: block
font-size: 18px
line-height: 30px
.e_cat_zak_block
display: inline-block
vertical-align: top
margin-left: 40px
margin-top: 16px
+r(480,767)
display: block
margin-left: 0
+r(320,479)
display: block
margin-left: 0
&_title
font-size: 16px
margin-bottom: 24px
+r(480,767)
margin-bottom: 15px
+r(320,479)
margin-bottom: 15px
.e_cat_zadacha
margin-top: 26px
h2
font-size: 16px
font-family: "RobotoBold"
line-height: 35px
p
font-size: 18px
line-height: 22px
+r(320,479)
font-size: 16px
a.e_cat_btn
margin-top: 160px
+r(768,970)
margin-top: 30px
+r(480,767)
margin-top: 30px
+r(320,479)
margin-top: 30px
.e_cat_devices
width: 664px
height: 397px
position: absolute
top: 174px
right: 35px
+r(320,970)
width: 100%
position: relative
top: 0px
right: 0px
margin-top: 30px
margin-bottom: 40px
height: auto
img
max-width: 100%
.e_cat_p1
background: url(../images/parallax/e_cat_p1.png) no-repeat center center
width: 254px
height: 260px
position: absolute
top: 76px
left: -460px
z-index: 4
+r(320,970)
display: none
.e_cat_p2
background: url(../images/parallax/e_cat_p2.png) no-repeat center center
width: 421px
height: 383px
position: absolute
bottom: -191px
left: -370px
z-index: 4
+r(320,970)
display: none
.e_cat_p3
background: url(../images/parallax/e_cat_p3.png) no-repeat center center
width: 267px
height: 314px
position: absolute
top: 5px
right: -282px
z-index: 4
+r(320,970)
display: none
.e_cat_p4
background: url(../images/parallax/e_cat_p4.png) no-repeat center center
width: 314px
height: 285px
position: absolute
bottom: -90px
right: -531px
z-index: 4
+r(320,970)
display: none
.e_cat_p5
background: url(../images/parallax/e_cat_p5.png) no-repeat center center
width: 267px
height: 276px
position: absolute
bottom: -228px
right: -184px
z-index: 4
+r(320,970)
display: none
.e_cat_two
background: #262E38
min-height: 100px
width: 100%
padding-bottom: 38px
h2
font-size: 30px
color: #fff
background: #A843A0
padding: 10px 15px
background: #A843A0
padding: 13px 20px
display: inline-block
font-family: "RobotoBold"
position: relative
top: -46px
+r(320,479)
font-size: 20px
.e_cat_list
margin-top: -26px
li
background: url(../images/icon/e_cat_list.png) no-repeat 0% 20%
padding-left: 30px
font-size: 21px
line-height: 35px
font-family: "RobotoBold"
color: #fff
+r(480,767)
font-size: 17px
line-height: 26px
margin-bottom: 15px
+r(320,479)
font-size: 14px
line-height: 23px
margin-bottom: 15px
.e_cat_content
background: #fff
padding-top: 30px
padding-bottom: 30px
p
font-size: 17px
line-height: 26px
color: #2d323a
+r(480,767)
font-size: 14px
line-height: 22px
+r(320,479)
font-size: 14px
line-height: 22px
.short_keys_sect_ecat
background: #fff
padding-top: 30px
padding-bottom: 30px
.short_keys_title
color: #2d323a
margin-left: 0
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

task-on.com - ООО "Арт Проект"