#2299. Арт Проект. Правки по кейсу Юнармии

frontend/web/css/style_30.11.2018.css

@@ -2236,3 +2236,370 @@
 	}
 
 }
+
+
+.army_how_works{
+	background-color: #ff1343;
+	position: relative;
+}
+.keys-btn_army{
+	z-index: 22;
+}
+.army_how_works::before{
+	content: '';
+	position: absolute;
+	left: 0;
+	top: -165px;
+	width: 100%;
+	height: 365px;
+	background: url(../images/img_army/main_bg.png) no-repeat bottom center;
+	background-size: 100% 365px;
+}
+.keys_army_bt{
+	background:  url(../images/img_army/main_bg_treyg.png) no-repeat;
+	width: 100%;
+	min-height: 100px;
+	background-position-y: 10px;
+}
+.keys_army_top{
+	background:  url(../images/img_army/head_bg.jpg) no-repeat;
+	background-size: cover;
+	height: auto;
+}
+.army_main_title span{
+	font-size: 34px;
+	line-height: 60px;
+	background-color: #db1a44;
+	padding: 5px 10px;
+}
+.army_par{
+	background:  url(../images/img_army/army_term.png) no-repeat;
+	max-width: 555px;
+}
+.army_p1{
+	background:  url(../images/img_army/par_1.png) no-repeat;
+}
+.army_p2{
+	background:  url(../images/img_army/par_3.png) no-repeat;
+}
+.army_p3{
+	background:  url(../images/img_army/par_2.png) no-repeat;
+}
+.army_p4{
+	background:  url(../images/img_army/par_4.png) no-repeat;
+}
+.army_title_second {
+	background-color: #047ad4 !important;
+}
+.army_cont{
+	padding-bottom: 90px;
+}
+.army_offset{
+	padding: 20px 30px;
+}
+.army_section p{
+	font-size: 17px;
+	line-height: 26px;
+	color: #2d323a;
+	margin-bottom: 30px;
+}
+.p_1{
+	padding-top: 50px;
+}
+.army_main_third{
+	font-size: 27px;
+	line-height: 36px;
+	background-color: #db1a44;
+	display: inline-block;
+	padding: 10px 15px 17px 23px;
+	font-family: "RobotoBold";
+}
+.title_1_poz{
+	margin-top: -65px;
+}
+.title_1{
+	z-index: 22;
+	position: relative;
+}
+.army_img_1{
+	margin-top: -45px;
+}
+.army_offset_big{
+	padding-top: 100px;
+}
+.army_bold_txt{
+	font-size: 20px !important;
+	margin: 30px 0;
+}
+.army_ipad_txt{
+	float: right;
+	width: 30%;
+	position: relative;
+}
+.army_ipad_txt p{
+	font-size: 16px;
+	line-height: 21px;
+	color: #647e8e;
+	padding-top: 90px;
+	padding-right: 15px;
+}
+.army_ipad{
+	float: left;
+	width: 70%;
+	position: relative;
+}
+.army_ipad::before{
+	content: '';
+	position: absolute;
+	left: 400px;
+	top: 182px;
+	width: 100%;
+	height: 13px;
+	background: url(../images/img_army/army_line.png) no-repeat;
+}
+.army_ipad img{
+	width: 100%;
+	height: auto;
+}
+.title_3{
+	margin-bottom: 30px;
+}
+.army_align_center{
+	text-align: center;
+}
+.army_item{
+	background-color: #e5e5e5;
+	width: 100%;
+	min-height: 175px;
+	margin-bottom: 15px;
+}
+.army_item_img img{
+	max-width: 100%;
+	height: auto;
+}
+.army_section_last{
+	padding-bottom: 100px;
+}
+.army_item_small{
+	background-color: #e5e5e5;
+	width: 100%;
+	min-height: 80px;
+	margin-right: 10px;
+	margin-bottom: 15px;
+}
+.img_wrap img{
+	width: 100%;
+	height: auto;
+}
+/* .short_keys_block_army{
+    width: auto;
+} */
+.army_test_wrap{
+	position: relative;
+	perspective: 500px;
+	perspective-origin: 125% 0;
+}
+.army_test p{
+	font-size: 12px;
+	line-height: 12px;
+	color: #ffffff;
+	margin-bottom: 0;
+	/* transform: rotate(-2deg);
+    -webkit-transform: rotate(-2deg);
+    -moz-transform: rotate(-2deg);
+    -o-transform: rotate(-2deg);       */
+}
+.army_test{
+	position: absolute;
+	left: 125px;
+	background-color: #c5462a;
+	border-radius: 3px;
+	box-shadow: 3px 3px 0px 0px rgba(191, 58, 28, 0.75);
+	transform: rotateX(10deg) rotateZ(-2deg);
+}
+.army_test_1{
+	top: 60px;
+	padding: 10px 15px;
+}
+.army_test_2{
+	top: 110px;
+	padding: 10px 10px;
+}
+.army_shadow{
+	background: url(../images/img_army/army_shadow.png) no-repeat bottom center;
+	background-size: 100% 190px;
+	position: relative;
+	z-index: 22;
+}
+.army_ipad_offset{
+	padding-bottom: 0;
+}
+
+@media only screen and (max-width: 991px){
+	.army_img_1{
+		margin-top: 0;
+	}
+	.army_main_title span {
+		font-size: 22px;
+		line-height: 48px;
+	}
+	.army_ipad_txt{
+		width: 30%;
+	}
+	.army_ipad_txt p{
+		padding-right: 0;
+	}
+	.army_ipad{
+		width: 70%;
+	}
+	.army_ipad::before{
+		display: none;
+	}
+	.army_test_1{
+		top: 110px;
+	}
+	.army_test_2{
+		top: 155px;
+	}
+	.army_par{
+		background: transparent;
+	}
+}
+@media only screen and (max-width: 767px){
+	.army_ipad_txt{
+		width: 100%;
+		float: none;
+	}
+	.army_ipad_txt p{
+		padding-top: 0;
+	}
+	.army_ipad{
+		width: 100%;
+	}
+	.army_test p{
+		font-size: 8px;
+		line-height: 8px;
+	}
+	.army_test_1{
+		top: 70px;
+		left: 75px;
+		padding: 5px 10px;
+	}
+	.army_test_2{
+		top: 100px;
+		left: 75px;
+		padding: 5px 5px;
+	}
+	.army_offset {
+		padding: 20px 0px;
+	}
+	.army_ipad_offset{
+		padding-bottom: 0;
+	}
+	.army_par{
+		height: 140px;
+	}
+	.keys-btn_army {
+		position: relative !important;
+	}
+}
+@media only screen and (max-width: 486px){
+	.army_test{
+		display: none;
+	}
+	.army_main_third {
+		font-size: 25px;
+		line-height: 30px;
+	}
+	.army_main_title span {
+		padding: 0;
+	}
+}
+
+/*==========>>  3.18.     FLEX BOX   <<==========*/
+
+.flex_box {
+	display: -webkit-flex;
+	display: -moz-flex;
+	display: -ms-flex;
+	display: -o-flex;
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+}
+
+.flex_box_middle {
+	-webkit-align-items: center;
+	-moz-align-items: center;
+	-ms-align-items: center;
+	-o-align-items: center;
+	-webkit-box-align: center;
+	-ms-flex-align: center;
+	align-items: center;
+}
+
+.flex_box_between {
+	-webkit-justify-content: space-between;
+	-moz-justify-content: space-between;
+	-ms-justify-content: space-between;
+	-o-justify-content: space-between;
+	-webkit-box-pack: justify;
+	-ms-flex-pack: justify;
+	justify-content: space-between;
+}
+
+.flex_wrap {
+	-webkit-flex-wrap: wrap;
+	-ms-flex-wrap: wrap;
+	-o-flex-wrap: wrap;
+	flex-wrap: wrap;
+}
+
+.flex_center {
+	-webkit-justify-content: center;
+	-moz-justify-content: center;
+	-ms-justify-content: center;
+	-o-justify-content: center;
+	-webkit-box-pack: center;
+	-ms-flex-pack: center;
+	justify-content: center;
+}
+
+.flex_right {
+	-webkit-justify-content: flex-end;
+	-moz-justify-content: flex-end;
+	-ms-justify-content: flex-end;
+	-o-justify-content: flex-end;
+	-webkit-box-pack: end;
+	-ms-flex-pack: end;
+	justify-content: flex-end;
+}
+
+.youtube {
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: cover;
+	position: relative;
+	display: block;
+	overflow: hidden;
+	transition: all 200ms ease-out;
+	cursor: pointer;
+	width: 100%;
+	height: 176px;
+	border: 1px solid #cecece;
+}
+
+.youtube .play {
+	background: url("../images/img_army/youtube_play.png") no-repeat center center;
+	position: absolute;
+	height: 100%;
+	width: 100%;
+	opacity: .9;
+	filter: alpha(opacity=90);
+	transition: all 0.2s ease-out;
+}
+
+.youtube .play:hover {
+	opacity: 1;
+	filter: alpha(opacity=100);
+}
\ No newline at end of file

frontend/web/js/cases.js

@@ -14,4 +14,26 @@ $(document).ready(function () {
             $("#" + id).find(".point_img_list_resp").append($("#" + id).find(".point_img_list").html());
         });
     }
+
+    $(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() {
+                // 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');
+
+                // 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() })
+
+                // Replace the YouTube thumbnail with YouTube HTML5 Player
+                $(this).replaceWith(iframe);
+            });
+        });
+    });
 });
\ No newline at end of file