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 { ...@@ -155,19 +155,25 @@ u {
} }
} }
.container {
position: relative;
}
@media only screen and (min-width: 768px) and (max-width: 970px) { @media only screen and (min-width: 768px) and (max-width: 970px) {
.container { .container {
width: 750px; width: 750px;
position: relative;
} }
} }
@media only screen and (min-width: 480px) and (max-width: 767px) { @media only screen and (min-width: 480px) and (max-width: 767px) {
.container { .container {
width: 450px; width: 450px;
position: relative;
} }
} }
@media only screen and (min-width: 320px) and (max-width: 479px) { @media only screen and (min-width: 320px) and (max-width: 479px) {
.container { .container {
width: 300px; width: 300px;
position: relative;
} }
} }
...@@ -412,6 +418,38 @@ a.show_d_menu { ...@@ -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 { .section1 {
min-height: 781px; min-height: 781px;
position: relative; position: relative;
...@@ -538,31 +576,8 @@ a.show_d_menu { ...@@ -538,31 +576,8 @@ a.show_d_menu {
} }
a.toggle_bottom { 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; margin-top: 197px;
float: left; 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) { @media only screen and (min-width: 768px) and (max-width: 970px) {
a.toggle_bottom { a.toggle_bottom {
...@@ -597,10 +612,6 @@ a.toggle_bottom:hover, a.toggle_bottom:active, a.toggle_bottom:focus { ...@@ -597,10 +612,6 @@ a.toggle_bottom:hover, a.toggle_bottom:active, a.toggle_bottom:focus {
transition: all 0.3s linear 0.1s; 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 { .bt_line {
background: url(../images/bt_line.png) no-repeat center center; background: url(../images/bt_line.png) no-repeat center center;
width: 233px; width: 233px;
...@@ -4448,26 +4459,11 @@ footer { ...@@ -4448,26 +4459,11 @@ footer {
} }
.video_btn { .video_btn {
display: block;
color: #fff;
border: 2px solid #fff;
border-radius: 50px;
margin-top: 153px; margin-top: 153px;
height: 50px; height: 50px;
width: 200px; width: 200px;
line-height: 44px; line-height: 44px;
font-size: 18px; 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) { @media only screen and (min-width: 768px) and (max-width: 970px) {
.video_btn { .video_btn {
...@@ -5166,7 +5162,6 @@ footer { ...@@ -5166,7 +5162,6 @@ footer {
display: inline-block; display: inline-block;
padding-bottom: 3px; padding-bottom: 3px;
margin-bottom: 10px; margin-bottom: 10px;
position: relative;
left: 0px; left: 0px;
top: 10px; top: 10px;
} }
...@@ -11589,19 +11584,6 @@ h6 { ...@@ -11589,19 +11584,6 @@ h6 {
} }
a.rosneft_btn { 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; position: relative;
top: 270px; top: 270px;
left: 0px; left: 0px;
...@@ -11630,11 +11612,6 @@ a.rosneft_btn { ...@@ -11630,11 +11612,6 @@ a.rosneft_btn {
margin: 20px 0 40px; 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 { .how_rosneft {
background: #FFC100; background: #FFC100;
...@@ -12473,6 +12450,10 @@ p.sborka_shkafov_bigp { ...@@ -12473,6 +12450,10 @@ p.sborka_shkafov_bigp {
transition: all 0.2s linear; transition: all 0.2s linear;
background: #4B9C56; background: #4B9C56;
} }
.short_keys_block img {
max-width: 100%;
height: 100%;
}
@media only screen and (min-width: 320px) and (max-width: 970px) { @media only screen and (min-width: 320px) and (max-width: 970px) {
.short_keys_block { .short_keys_block {
width: 100%; width: 100%;
...@@ -12919,19 +12900,6 @@ p.sborka_shkafov_bigp { ...@@ -12919,19 +12900,6 @@ p.sborka_shkafov_bigp {
} }
a.gem_mail_btn { 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; margin-top: 66px;
float: left; float: left;
-moz-transition: all 0.3s linear 0.1s; -moz-transition: all 0.3s linear 0.1s;
...@@ -12958,11 +12926,6 @@ a.gem_mail_btn { ...@@ -12958,11 +12926,6 @@ a.gem_mail_btn {
margin: 40px 0; 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 { .keys_mail_list {
margin-top: 52px; margin-top: 52px;
...@@ -13671,28 +13634,12 @@ a.gem_mail_btn:hover, a.gem_mail_btn:active, a.gem_mail_btn:focus { ...@@ -13671,28 +13634,12 @@ a.gem_mail_btn:hover, a.gem_mail_btn:active, a.gem_mail_btn:focus {
} }
a.appl_btn { a.appl_btn {
display: block;
font-size: 20px;
color: #fff;
width: 201px; width: 201px;
height: 47px; 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; position: relative;
top: 157px; top: 157px;
left: 0px; left: 0px;
float: left; 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) { @media only screen and (min-width: 480px) and (max-width: 767px) {
a.appl_btn { a.appl_btn {
...@@ -13712,11 +13659,6 @@ a.appl_btn { ...@@ -13712,11 +13659,6 @@ a.appl_btn {
margin: 20px 0 40px; 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 { .appl_par {
background: url(../images/appl_par.png) no-repeat center center; 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 { ...@@ -14664,29 +14606,11 @@ a.appl_btn:hover, a.appl_btn:active, a.appl_btn:focus {
} }
a.ops_btn { 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; position: relative;
top: 157px; top: 157px;
left: 0px; left: 0px;
right: -28px; right: -28px;
float: right; 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) { @media only screen and (min-width: 768px) and (max-width: 970px) {
a.ops_btn { a.ops_btn {
...@@ -14707,11 +14631,6 @@ a.ops_btn { ...@@ -14707,11 +14631,6 @@ a.ops_btn {
margin: auto; margin: auto;
} }
} }
a.ops_btn:hover, a.ops_btn:active, a.ops_btn:focus {
color: #000;
text-decoration: none;
background: #fff;
}
.ops_list { .ops_list {
margin-top: 30px; margin-top: 30px;
...@@ -14827,3 +14746,536 @@ a.ops_btn:hover, a.ops_btn:active, a.ops_btn:focus { ...@@ -14827,3 +14746,536 @@ a.ops_btn:hover, a.ops_btn:active, a.ops_btn:focus {
right: 50px; 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() { ...@@ -388,6 +388,7 @@ $(document).ready(function() {
$(".menu").removeClass("menu_active"); $(".menu").removeClass("menu_active");
$(".toggle-mnu").removeClass("on"); $(".toggle-mnu").removeClass("on");
}); });
}); });
$(window).load(function() { $(window).load(function() {
...@@ -463,6 +464,32 @@ $(window).scroll(function() { ...@@ -463,6 +464,32 @@ $(window).scroll(function() {
$(".mail_p5").css({ $(".mail_p5").css({
"transform" : "translate(0%, -" + st /8 + "%" "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($){ jQuery(function($){
$(document).mouseup(function (e){ $(document).mouseup(function (e){
......
frontend/web/sass/screen.sass
View file @ b91cf9ec
...@@ -83,12 +83,16 @@ u ...@@ -83,12 +83,16 @@ u
-ms-animation: none !important -ms-animation: none !important
animation: none !important animation: none !important
.container .container
position: relative
+r(768,970) +r(768,970)
width: 750px width: 750px
position: relative
+r(480,767) +r(480,767)
width: 450px width: 450px
position: relative
+r(320,479) +r(320,479)
width: 300px width: 300px
position: relative
header header
background: #262E38 background: #262E38
width: 100% width: 100%
...@@ -249,6 +253,27 @@ a.show_d_menu ...@@ -249,6 +253,27 @@ a.show_d_menu
+r(480,767) +r(480,767)
width: 300px width: 300px
margin-left: 10px 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 .section1
min-height: 781px min-height: 781px
position: relative position: relative
...@@ -322,22 +347,8 @@ a.show_d_menu ...@@ -322,22 +347,8 @@ a.show_d_menu
display: block display: block
text-align: center text-align: center
a.toggle_bottom 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 margin-top: 197px
float: left float: left
+transition(all 0.3s linear 0.1s)
&:hover, &:active, &:focus
color: #000
text-decoration: none
background: #fff
+r(768,970) +r(768,970)
margin-top: 68px margin-top: 68px
+r(480,767) +r(480,767)
...@@ -357,12 +368,6 @@ a.toggle_bottom ...@@ -357,12 +368,6 @@ a.toggle_bottom
vertical-align: middle vertical-align: middle
margin-left: 13px margin-left: 13px
+transition(all 0.3s linear 0.1s) +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 .bt_line
background: url(../images/bt_line.png) no-repeat center center background: url(../images/bt_line.png) no-repeat center center
width: 233px width: 233px
...@@ -2923,21 +2928,11 @@ footer ...@@ -2923,21 +2928,11 @@ footer
margin-top: 90px margin-top: 90px
text-align: center text-align: center
.video_btn .video_btn
display: block
color: #fff
border: 2px solid #fff
border-radius: 50px
margin-top: 153px margin-top: 153px
height: 50px height: 50px
width: 200px width: 200px
line-height: 44px line-height: 44px
font-size: 18px 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) +r(768,970)
margin-top: 92px margin-top: 92px
+r(480,767) +r(480,767)
...@@ -3380,7 +3375,6 @@ footer ...@@ -3380,7 +3375,6 @@ footer
display: inline-block display: inline-block
padding-bottom: 3px padding-bottom: 3px
margin-bottom: 10px margin-bottom: 10px
position: relative
left: 0px left: 0px
top: 10px top: 10px
.rev_video_block .rev_video_block
...@@ -7672,15 +7666,6 @@ h6 ...@@ -7672,15 +7666,6 @@ h6
+cover +cover
position: relative position: relative
a.rosneft_btn 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 position: relative
top: 270px top: 270px
left: 0px left: 0px
...@@ -7698,10 +7683,6 @@ a.rosneft_btn ...@@ -7698,10 +7683,6 @@ a.rosneft_btn
left: 0 left: 0
float: none float: none
margin: 20px 0 40px margin: 20px 0 40px
&:hover, &:active, &:focus
color: #000
text-decoration: none
background: #fff
.how_rosneft .how_rosneft
background: #FFC100 background: #FFC100
width: 100% width: 100%
...@@ -8261,6 +8242,9 @@ p.sborka_shkafov_bigp ...@@ -8261,6 +8242,9 @@ p.sborka_shkafov_bigp
margin-bottom: 31px margin-bottom: 31px
+transition(all 0.2s linear) +transition(all 0.2s linear)
background: #4B9C56 background: #4B9C56
img
max-width: 100%
height: 100%
+r(320,970) +r(320,970)
width: 100% width: 100%
.short_keys_foot .short_keys_foot
...@@ -8542,15 +8526,6 @@ p.sborka_shkafov_bigp ...@@ -8542,15 +8526,6 @@ p.sborka_shkafov_bigp
top: 85px top: 85px
right: 40px right: 40px
a.gem_mail_btn 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 margin-top: 66px
float: left float: left
+transition(all 0.3s linear 0.1s) +transition(all 0.3s linear 0.1s)
...@@ -8566,10 +8541,6 @@ a.gem_mail_btn ...@@ -8566,10 +8541,6 @@ a.gem_mail_btn
left: 0 left: 0
float: none float: none
margin: 40px 0 margin: 40px 0
&:hover, &:active, &:focus
color: #000
text-decoration: none
background: #fff
.keys_mail_list .keys_mail_list
margin-top: 52px margin-top: 52px
li li
...@@ -9039,20 +9010,13 @@ a.gem_mail_btn ...@@ -9039,20 +9010,13 @@ a.gem_mail_btn
left: 10px left: 10px
top: 15px top: 15px
a.appl_btn a.appl_btn
display: block
font-size: 20px
color: #fff
width: 201px width: 201px
height: 47px height: 47px
border: 2px solid #fff
text-align: center
line-height: 40px
+br(50px)
position: relative position: relative
top: 157px top: 157px
left: 0px left: 0px
float: left float: left
+transition(all 0.3s linear 0.1s)
+r(480,767) +r(480,767)
position: static position: static
top: 0 top: 0
...@@ -9065,10 +9029,6 @@ a.appl_btn ...@@ -9065,10 +9029,6 @@ a.appl_btn
left: 0 left: 0
float: none float: none
margin: 20px 0 40px margin: 20px 0 40px
&:hover, &:active, &:focus
color: #000
text-decoration: none
background: #fff
.appl_par .appl_par
background: url(../images/appl_par.png) no-repeat center center background: url(../images/appl_par.png) no-repeat center center
max-width: 539px max-width: 539px
...@@ -9701,21 +9661,11 @@ a.appl_btn ...@@ -9701,21 +9661,11 @@ a.appl_btn
+r(320,479) +r(320,479)
font-size: 15px font-size: 15px
a.ops_btn 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 position: relative
top: 157px top: 157px
left: 0px left: 0px
right: -28px right: -28px
float: right float: right
+transition(all 0.3s linear 0.1s)
+r(768,970) +r(768,970)
top: 152px top: 152px
+r(480,767) +r(480,767)
...@@ -9726,10 +9676,6 @@ a.ops_btn ...@@ -9726,10 +9676,6 @@ a.ops_btn
right: 0 right: 0
float: none float: none
margin: auto margin: auto
&:hover, &:active, &:focus
color: #000
text-decoration: none
background: #fff
.ops_list .ops_list
margin-top: 30px margin-top: 30px
li li
...@@ -9801,3 +9747,338 @@ a.ops_btn ...@@ -9801,3 +9747,338 @@ a.ops_btn
+r(1301,1600) +r(1301,1600)
top: 390px top: 390px
right: 50px 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 - ООО "Арт Проект"