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

frontend/web/css/style_30.11.2018.css

@@ -2603,3 +2603,175 @@
 	opacity: 1;
 	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

@@ -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
         $(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
         $(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
             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
-                var iframe = $('<iframe/>', {'frameborder': '0', 'src': iframe_url, 'width': $(this).width(), 'height': $(this).height() })
+            var iframe = $('<iframe/>', {
+                'frameborder': '0',
+                'src': iframe_url,
+                'width': $(this).width(),
+                'height': $(this).height()
+            });
 
             // Replace the YouTube thumbnail with YouTube HTML5 Player
             $(this).replaceWith(iframe);
         });
     });
-    });
 });
\ No newline at end of file