Skip to content

T
taskonsite-архив-перенесен
Commit 1d834f4f authored by Ruslan Karimov's avatar Ruslan Karimov
Browse files
Options

#2809. Арт Проект. Размещение шапки кейса по картам

parent 399b550f
Hide whitespace changes
Inline Side-by-side
Showing with 190 additions and 15 deletions
frontend/web/css/style_30.11.2018.css
View file @ 1d834f4f
...@@ -2602,4 +2602,176 @@ ...@@ -2602,4 +2602,176 @@
.youtube .play:hover { .youtube .play:hover {
opacity: 1; opacity: 1;
filter: alpha(opacity=100); filter: alpha(opacity=100);
}
.keys_obj_top{
width: 100%;
min-height: 464px;
background: #60AD26 url(../images_object/obj_bg.jpg) no-repeat bottom center;
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
padding-top: 60px;
padding-bottom: 60px;
position: relative;
}
.obj_title_wrap .toggle_bottom{
margin-top: 160px;
display: block !important;
color: #2d323a;
border-color: #2d323a;
}
.obj_title_wrap .toggle_bottom:hover{
background-color: #2d323a;
color: #fff;
}
.obj_title_wrap .icon-arrowDown2::after {
background: url(../images/icon/arrow_down_black.png) no-repeat;
}
.obj_title_wrap .toggle_bottom:hover .icon-arrowDown2::after {
background: url(../images/green/arrow_down2.png) no-repeat;
}
.keys_obj_top h1 {
font-size: 36px;
line-height: 50px;
font-family: "RobotoBold";
color: #2d323a;
margin-bottom: 20px;
}
.obj_mock_wrap {
margin-left: -235px;
max-width: 550px;
height: 340px;
top: 20px !important;
left: 10px;
position: relative;
z-index: 3;
}
.obj_mock1 {
width: 440px;
height: 190px;
position: absolute;
bottom: 0;
left: 0;
background: url(../images_object/obj_m1.png) no-repeat center center;
z-index: 3;
}
.obj_mock2 {
width: 440px;
height: 190px;
position: absolute;
bottom: 90px;
left: 70px;
background: url(../images_object/obj_m2.png) no-repeat center center;
z-index: 2;
}
.obj_mock3 {
width: 415px;
height: 190px;
position: absolute;
top: 0;
left: 140px;
background: url(../images_object/obj_m3.png) no-repeat center center;
z-index: 1;
}
.obj_p1 {
background: url(../images_object/obj_p1.png) no-repeat center center;
width: 90px;
height: 95px;
position: absolute;
top: 50px;
left: 30px;
}
.obj_p2 {
background: url(../images_object/obj_p2.png) no-repeat center center;
width: 115px;
height: 145px;
position: absolute;
top: 350px;
left: 0;
z-index: 4;
}
.obj_p3 {
background: url(../images_object/obj_p3.png) no-repeat center center;
width: 95px;
height: 155px;
position: absolute;
top: 70px;
right: 0px;
z-index: 4;
}
.obj_p4 {
background: url(../images_object/obj_p4.png) no-repeat center center;
width: 100px;
height: 195px;
position: absolute;
top: 280px;
right: 0;
z-index: 4;
}
.obj_title_logo{
margin-bottom: 40px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.obj_title_logo p{
font-size: 16px;
line-height: 18px;
color: #2d323a;
margin-bottom: 0;
margin-right: 15px;
}
@media only screen and (max-width: 1301px){
.obj_p{
display: none;
}
.obj_mock_wrap{
margin-left: -300px;
}
}
@media only screen and (max-width: 971px){
.obj_mock_wrap{
margin-left: 0;
}
.obj_title_wrap .toggle_bottom{
margin-top: 0;
margin-bottom: 40px;
}
}
@media only screen and (max-width: 767px){
.obj_mock_wrap{
width: 100%;
height: 350px;
background: url(../images_object/obj_m_bg.png) no-repeat center;
background-size: 100%;
}
.obj_mock1, .obj_mock2, .obj_mock3{
display: none;
}
.keys_obj_top{
padding-top: 20px;
padding-bottom: 60px;
}
.keys_obj_top h1{
font-size: 28px;
line-height: 35px;
}
.keys_obj_top h1 br{
display: none;
}
.obj_title_logo{
margin-bottom: 0;
}
} }
\ No newline at end of file
frontend/web/js/cases.js
View file @ 1d834f4f
...@@ -15,25 +15,28 @@ $(document).ready(function () { ...@@ -15,25 +15,28 @@ $(document).ready(function () {
}); });
} }
$(function() { $(".youtube").each(function () {
$(".youtube").each(function() { // Based on the YouTube ID, we can easily find the thumbnail image
// Based on the YouTube ID, we can easily find the thumbnail image $(this).css('background-image', 'url(http://i.ytimg.com/vi/' + this.id + '/sddefault.jpg)');
$(this).css('background-image', 'url(http://i.ytimg.com/vi/' + this.id + '/sddefault.jpg)');
// Overlay the Play icon to make it look like a video player // Overlay the Play icon to make it look like a video player
$(this).append($('<div/>', {'class': 'play'})); $(this).append($('<div/>', {'class': 'play'}));
$(document).delegate('#'+this.id, 'click', function() { $(document).delegate('#' + this.id, 'click', function () {
// Create an iFrame with autoplay set to true // Create an iFrame with autoplay set to true
var iframe_url = "https://www.youtube.com/embed/" + this.id + "?autoplay=1&autohide=1"; var iframe_url = "https://www.youtube.com/embed/" + this.id + "?autoplay=1&autohide=1";
if ($(this).data('params')) iframe_url+='&'+$(this).data('params'); if ($(this).data('params')) iframe_url += '&' + $(this).data('params');
// The height and width of the iFrame should be the same as parent // The height and width of the iFrame should be the same as parent
var iframe = $('<iframe/>', {'frameborder': '0', 'src': iframe_url, 'width': $(this).width(), 'height': $(this).height() }) var iframe = $('<iframe/>', {
'frameborder': '0',
// Replace the YouTube thumbnail with YouTube HTML5 Player 'src': iframe_url,
$(this).replaceWith(iframe); 'width': $(this).width(),
'height': $(this).height()
}); });
// Replace the YouTube thumbnail with YouTube HTML5 Player
$(this).replaceWith(iframe);
}); });
}); });
}); });
\ 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 - ООО "Арт Проект"