j1-template 2022.4.7 → 2022.4.8

data/assets/themes/j1/modules/masterslider_pro/js/slider-templates/classic-sliders/home slider/style/style.css

@@ -0,0 +1,375 @@
+.ms-skin-default .ms-timerbar {top: 1px; bottom:auto;}
+.ms-skin-default .ms-time-bar {
+  height: 3px;
+  background:white;
+  background: rgba(255, 255, 255, 0.6);
+  border-top: none;
+}
+
+.ms-layer {
+  margin: 0;
+  padding: 0;
+  line-height: 100%;
+  letter-spacing:0;
+}
+
+.slide-1 .hps-title1 {
+  text-transform: uppercase;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.slide-1 .hps-title2 {
+  font-size: 28px;
+  font-weight: 300;
+  text-transform: uppercase;
+  color: #508295;
+}
+
+.slide-2 .hps-title1 {
+  font-weight: 300;
+  font-size: 45px;
+  text-transform: uppercase;
+  color: white;
+  background-color: #f65256;
+  padding: 6px 9px;
+}
+.slide-2 .hps-title2 {
+  font-weight: 300;
+  font-size: 32px;
+  text-transform: uppercase;
+  background: white;
+  padding: 11px 12px;
+}
+
+.slide-3 .hps-title1 {
+  font-weight: 900;
+  color: white;
+  text-transform: uppercase;
+  font-size: 46px;
+}
+.slide-3 .hps-title2 {
+  font-weight: 300;
+  font-size: 20px;
+  text-transform: uppercase;
+  color: white;
+}
+.slide-3 .hps-amp {
+  font-weight: 100;
+  font-size: 78px;
+  color: #7C96BD;
+}
+.slide-3 .hps-title3 {
+  color: white;
+  font-size: 37px;
+  text-transform: uppercase;
+  font-weight: 300;
+  padding: 10px 12px;
+  background-color: #dd0d14;
+}
+.slide-3 .hps-title4 {
+  color: white;
+  background-color: black;
+  font-size: 37px;
+  font-weight: 300;
+  text-transform: uppercase;
+  padding: 10px 14px;
+}
+
+.ms-tooltip{
+  max-width: 250px !important;
+}
+
+.ms-tooltip .product-tt {
+    font-size: 1em;
+    padding:5px;
+    color:#222;
+    text-shadow:none;
+}
+
+.ms-tooltip .product-tt h3 {
+  font-size: 1.4em;
+  color: #222;
+  margin: 0 0 5px 0;
+  font-weight: 400;
+}
+
+
+.slide-4 .hps-title1 {
+  font-weight: 600;
+  font-size: 23px;
+  text-transform: uppercase;
+  color: #222;
+}
+
+.slide-5 .hps-title1, .slide-5 .hps-title2 {
+  color: white;
+  text-transform: uppercase;
+  font-size: 2.6em;
+  font-weight: 300;
+  text-shadow: 0 1px black;
+}
+.slide-5 .hps-title3 {
+  background-color: #61c6d7;
+  text-transform: uppercase;
+  font-size: 1.8em;
+  font-weight: 400;
+  color: black;
+  text-shadow: 0 1px white;
+  padding: 13px;
+}
+.slide-5 .hps-text1 {
+  color: white;
+  text-shadow: 0 1px black;
+  width: 30%;
+  line-height: 19px;
+  font-size: 14px;
+}
+
+.slide-6 .hps-title1 {
+  color: #222;
+  text-transform: uppercase;
+  font-weight: 900;
+  font-size: 2.3em;
+  line-height: 26px;
+  text-shadow: 0 1px white;
+  background-color: white;
+  background-color: rgba(255, 255, 255, 0.9);
+  padding: 17px 23px;
+}
+.slide-6 .hps-title1 > .sub-title {
+  font-weight: 300;
+  font-size: 0.7em;
+}
+.slide-6 .hps-title2 {
+  color: white;
+  text-shadow: 0 1px black;
+  background-color: #222;
+  font-weight: 400;
+  font-size: 1em;
+  padding: 10px 25px;
+}
+.slide-6 .hps-title3 {
+  text-transform: uppercase;
+  color: white;
+  font-weight: 400;
+  text-shadow: 0 1px black;
+  font-size: 1.2em;
+  padding: 18px 25px;
+  background-color: #df192a;
+}
+.slide-6 .hps-title3-vimeo {
+  background-color: #1bb6ec;
+  padding: 17px 25px;
+}
+
+.slide-7 .hps-title1 {
+  color: white;
+  font-weight: 100;
+  text-transform: uppercase;
+  font-size: 60px;
+  text-shadow: 0 1px black;
+}
+.slide-7 .hps-title2 {
+  text-transform: uppercase;
+  color: #f74e50;
+  text-shadow: 0 1px black;
+  font-size: 21px;
+  letter-spacing: 0.76em;
+  font-weight: 900;
+}
+.slide-7 .hps-title3 {
+  color: white;
+  text-transform: uppercase;
+  text-shadow: 0 1px black;
+  background-color: #222;
+  background-color: rgba(0, 0, 0, 0.7);
+  padding: 14px 81px;
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.slide-video{
+	color:#222;
+	text-shadow:0 1px white;
+}
+
+.slide-video .hps-vicapton-box {
+    width: 48%;
+    height: 24%;
+    background: rgba(255, 255, 255, 0.6);
+}
+
+.slide-video .hps-hd {
+    font-weight: 900;
+    font-size: 130px;
+}
+
+.slide-video .hps-videotitle {
+    font-size: 32px;
+    text-transform: uppercase;
+    font-weight: 300;
+    -webkit-transform-origin: top right;
+    -moz-transform-origin: top right;
+    -ms-transform-origin: top right;
+    -o-transform-origin: top right;
+    transform-origin: top right;
+}
+
+.slide-video .hps-videotext {
+    width: 29%;
+    line-height: 22px;
+}
+
+/*----------------------------------------*/
+
+.hrow{
+  position: relative;
+  min-height: 253px;
+}
+
+.hrow.row-title {
+    height: 195px;
+    min-height:0;
+    background-color: #eee;
+    text-align: center;
+}
+.row-arrow {
+    position: absolute;
+    height: 10px;
+    border-left: solid 18px rgba(0, 0, 0, 0);
+    border-right: solid 18px rgba(0, 0, 0, 0);
+    border-top: solid 20px #EEE;
+    top: 0;
+    left: 50%;
+    margin-left: -18px;
+}
+.row-title h2 {
+    margin-top: 84px;
+    padding: 0 15px 25px;  font-weight: 400;  letter-spacing: 0.1em;  color: #4F2840;  
+    display: inline-block;
+    text-shadow: 0 1px 0px #FFF;
+    font-size: 1.15em;  text-transform: uppercase;  
+    background: url("http://www.masterslider.com/wp-content/uploads/home-title-arrow.gif") no-repeat center 32px;
+}
+
+.hrow.white-hrow {
+    background: #Fbfbfb;
+}
+
+.hrow.gray-hrow {
+    background: #eee;
+}
+
+.hrow.gray-hrow .row-content {
+text-shadow: 0 1px 0 #FFF;
+}
+
+.hrow .row-content {
+    padding: 70px 60px 0 550px;
+}
+
+.hrow .feature-img {
+    position: absolute;
+    bottom: 0;
+    margin:0;
+}
+
+.hrow .row-content>p {
+  margin:0px;
+  padding-bottom: 20px;
+}
+
+.hrow .row-content>h3 {
+    text-transform: uppercase;
+    font-weight: 800;
+    letter-spacing: 0;
+    font-size: 2.3em;
+    color: #333;
+}
+
+.hrow.gray-hrow .row-content {
+    padding: 70px 550px 0 80px;
+}
+
+.hrow.gray-hrow .feature-img {
+  right:0;
+}
+
+.hrow.fe-transitions .row-content {
+    padding-left: 585px;
+}
+
+@media only screen and (max-width: 1199px){
+  .row-content {
+   	  padding-top: 50px !important;
+  }
+  
+  .hrow .row-content>h3 {
+   	 font-size: 1.5em;
+   	}
+}
+
+
+@media only screen and (max-width: 990px){
+  .hrow.fe-transitions .row-content,
+  .hrow.fe-flickr .row-content {
+    		padding-top: 40px !important;
+  }
+}
+
+@media only screen and (max-width: 960px){
+  
+  
+  .hrow{
+    min-height: 197px !important;
+  }
+  
+  .hrow.row-title {
+      height: 120px  !important;
+      min-height: 0px !important;
+  }
+  
+  .row-title h2 {
+      margin-top: 40px;
+  }
+  
+  .hrow .feature-img {
+    width:40%;
+  }
+  .hrow.gray-hrow .row-content {
+   	  padding-right: 45%;
+   	  padding-left: 50px;
+  }
+  .hrow.white-hrow .row-content {
+   	  padding-left: 45%;
+   	  padding-right: 50px;
+  }
+  
+}
+
+@media only screen and (max-width: 650px){
+
+  
+  .hrow .feature-img {
+    width:90%;
+    position:relative;
+    float:none !important;
+    display: block;
+  }
+  
+  .hrow .row-content {
+    padding-right: 30px !important;
+   	  padding-left: 30px !important;
+   	  text-align:center;
+  }
+  
+  .hrow.gray-hrow .feature-img {
+    margin-left:10%;
+  }
+  .hrow.white-hrow .feature-img {
+    margin-right:10%;
+  }
+  
+
+}

data/assets/themes/j1/modules/masterslider_pro/js/slider-templates/classic-sliders/laptop/laptop-demo.html

@@ -0,0 +1,226 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+
+		<title>Master Slider Laptop Template</title>
+		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+
+		<!-- bootstrap style sheet -->
+		<link rel="stylesheet" href="../assets/css/bootstrap.min.css" />
+
+		<!-- syntaxHilighter style sheet -->
+		<link rel="stylesheet" type="text/css" href="../assets/syntax-highlighter/styles/shCore.css" media="all">
+		<link rel="stylesheet" type="text/css" href="../assets/syntax-highlighter/styles/shThemeDefault.css" media="all">
+
+		<!-- main style -->
+		<link rel="stylesheet" type="text/css" href="../assets/css/style.css" media="all">
+
+		<!-- Base MasterSlider style sheet -->
+		<link rel="stylesheet" href="../masterslider/style/masterslider.css" />
+
+		<!-- Master Slider Skin -->
+		<link href="../masterslider/skins/default/style.css" rel='stylesheet' type='text/css'>
+
+
+		<!-- MasterSlider Template Style -->
+		<link href='style/ms-laptop-style.css' rel='stylesheet' type='text/css'>
+
+		<!-- jQuery -->
+		<script src="../masterslider/jquery.min.js"></script>
+		<script src="../masterslider/jquery.easing.min.js"></script>
+
+		<!-- Master Slider -->
+		<script src="../masterslider/masterslider.min.js"></script>
+
+		<!-- Tabs -->
+		<script src="../assets/js/tab.js"></script>
+		<script src="../assets/syntax-highlighter/scripts/shCore.js"></script>
+		<script src="../assets/syntax-highlighter/scripts/shBrushXml.js"></script>
+		<script src="../assets/syntax-highlighter/scripts/shBrushCss.js"></script>
+		<script src="../assets/syntax-highlighter/scripts/shBrushJScript.js"></script>
+
+
+	</head>
+
+	<body>
+
+		<!-- header -->
+		<header class="header">
+			<img src="../assets/css/img/ms-logo.gif" class="logo"/>
+			<nav class="navbar mainnav" >
+				<ul class="nav">
+					<li><a href="http://www.masterslider.com/">HOME</a></li>
+					<li><a href="http://www.masterslider.com/transition-gallery/">TRANSITION GALLERY</a></li>
+					<li><a href="http://support.averta.net/envato/support/master-slider/">SUPPORT FORUM</a></li>
+					<li><a href="http://support.averta.net/envato/faq/master-slider/">FAQ</a></li>
+				</ul>
+			</nav>
+		</header>
+		<!-- end of header -->
+
+		<!-- template -->
+		<div class="ms-laptop-template">
+			<div class="ms-laptop-cont">
+				<img src="style/laptop.png" class="ms-laptop-bg" />
+				<div class="ms-lt-slider-cont">
+					<!-- masterslider -->
+					<div class="master-slider ms-skin-default" id="masterslider">
+					    <div class="ms-slide">
+					        <img src="../masterslider/style/blank.gif" data-src="img/1.jpg" alt="lorem ipsum dolor sit"/>
+					    </div>
+					    <div class="ms-slide">
+					        <img src="../masterslider/style/blank.gif" data-src="img/2.jpg" alt="lorem ipsum dolor sit"/>
+					    </div>
+					    <div class="ms-slide">
+					        <img src="../masterslider/style/blank.gif" data-src="img/3.jpg" alt="lorem ipsum dolor sit"/>
+					    </div>
+					    <div class="ms-slide">
+					        <img src="../masterslider/style/blank.gif" data-src="img/4.jpg" alt="lorem ipsum dolor sit"/>
+					    </div>
+					    <div class="ms-slide">
+				        	<img src="../masterslider/style/blank.gif" data-src="img/cover.jpg" alt="lorem ipsum dolor sit"/>
+							<a href="http://player.vimeo.com/video/53914149" data-type="video"> vimeo video </a>
+				    	</div>
+					    <div class="ms-slide">
+					        <img src="../masterslider/style/blank.gif" data-src="img/5.jpg" alt="lorem ipsum dolor sit"/>
+					    </div>
+					    <div class="ms-slide">
+					        <img src="../masterslider/style/blank.gif" data-src="img/6.jpg" alt="lorem ipsum dolor sit"/>
+					    </div>
+					    <div class="ms-slide">
+					        <img src="../masterslider/style/blank.gif" data-src="img/7.jpg" alt="lorem ipsum dolor sit"/>
+					    </div>
+					</div>
+					<!-- end of masterslider -->
+				</div>
+			</div>
+		</div>
+		<!-- end of template -->
+
+		<div class="hilight-wrapper">
+		<!-- Nav tabs -->
+		<ul class="nav nav-tabs">
+		  <li class="active"><a  href="#html" data-toggle="tab">HTML</a></li>
+		  <li><a href="#java-script" data-toggle="tab">JavaScript</a></li>
+		  <li><a href="#requierd-files" data-toggle="tab">Required Files</a></li>
+		  <a class="ms-doc-link" target="_blank"  href="http://www.masterslider.com/doc/">Master Slider Documentation</a>
+		</ul>
+
+		<!-- Tab panes -->
+
+		<div class="tab-content">
+		 	<div class="tab-pane fade in active" id="html">
+		 		<div class="html-describe">You need to put the following html markup in your html document where you want to have slider </div>
+		 		<pre class="brush: html">
+		&lt;!-- template -->
+		&lt;div class="ms-laptop-template">
+			&lt;div class="ms-laptop-cont">
+				&lt;img src="style/laptop.png" class="ms-laptop-bg" />
+				&lt;div class="ms-lt-slider-cont">
+					&lt;!-- masterslider -->
+					&lt;div class="master-slider ms-skin-default" id="masterslider">
+					    &lt;div class="ms-slide">
+					        &lt;img src="../masterslider/style/blank.gif" data-src="img/1.jpg" alt="lorem ipsum dolor sit"/>
+					    &lt;/div>
+					    &lt;div class="ms-slide">
+					        &lt;img src="../masterslider/style/blank.gif" data-src="img/2.jpg" alt="lorem ipsum dolor sit"/>
+					    &lt;/div>
+					    &lt;div class="ms-slide">
+					        &lt;img src="../masterslider/style/blank.gif" data-src="img/3.jpg" alt="lorem ipsum dolor sit"/>
+					    &lt;/div>
+					    &lt;div class="ms-slide">
+					        &lt;img src="../masterslider/style/blank.gif" data-src="img/4.jpg" alt="lorem ipsum dolor sit"/>
+					    &lt;/div>
+					    &lt;div class="ms-slide">
+				        	&lt;img src="../masterslider/style/blank.gif" data-src="img/cover.jpg" alt="lorem ipsum dolor sit"/>
+							&lt;a href="http://player.vimeo.com/video/53914149" data-type="video"> vimeo video &lt;/a>
+				    	&lt;/div>
+					    &lt;div class="ms-slide">
+					        &lt;img src="../masterslider/style/blank.gif" data-src="img/5.jpg" alt="lorem ipsum dolor sit"/>
+					    &lt;/div>
+					    &lt;div class="ms-slide">
+					        &lt;img src="../masterslider/style/blank.gif" data-src="img/6.jpg" alt="lorem ipsum dolor sit"/>
+					    &lt;/div>
+					    &lt;div class="ms-slide">
+					        &lt;img src="../masterslider/style/blank.gif" data-src="img/7.jpg" alt="lorem ipsum dolor sit"/>
+					    &lt;/div>
+					&lt;/div>
+					&lt;!-- end of masterslider -->
+				&lt;/div>
+			&lt;/div>
+		&lt;/div>
+		&lt;!-- end of template -->
+				</pre>
+
+		 	</div>
+		  	<div class="tab-pane fade" id="java-script">
+		  		<div class="html-describe">You need to put the following scripts just before the &lt; &#8260; body&gt; </div>
+		  		<pre class="brush: js">
+	&lt;script type="text/javascript">
+
+		var slider = new MasterSlider();
+		slider.setup('masterslider' , {
+			width:492,
+			height:309,
+			speed:20,
+			preload:0,
+			space:2,
+			view:'mask'
+		});
+		slider.control('arrows');
+		slider.control('bullets',{autohide:false});
+
+	&lt;/script>
+				</pre>
+		  	</div>
+			<div class="tab-pane fade" id="requierd-files">
+				<div class="html-describe">You need to import the following files  </div>
+				<pre class="brush: html">
+		&lt;!-- Base MasterSlider style sheet -->
+		&lt;link rel="stylesheet" href="../masterslider/style/masterslider.css" />
+
+		&lt;!-- Master Slider Skin -->
+		&lt;link href="../masterslider/skins/default/style.css" rel='stylesheet' type='text/css'>
+
+
+		&lt;!-- MasterSlider Template Style -->
+		&lt;link href='style/ms-laptop-style.css' rel='stylesheet' type='text/css'>
+
+		&lt;!-- jQuery -->
+		&lt;script src="../masterslider/jquery.min.js">&lt;/script>
+		&lt;script src="../masterslider/jquery.easing.min.js">&lt;/script>
+
+		&lt;!-- Master Slider -->
+		&lt;script src="../masterslider/masterslider.min.js">&lt;/script>
+				</pre>
+			</div>
+
+		</div>
+		<!-- end of Tab panes -->
+	</div>
+	<!-- end of syntaxHylight wrapper -->
+	</body>
+
+	<script type="text/javascript">
+		var slider = new MasterSlider();
+		slider.setup('masterslider' , {
+			width:492,
+			height:309,
+			speed:20,
+			preload:0,
+			space:2,
+			view:'mask'
+		});
+		slider.control('arrows');
+		slider.control('bullets',{autohide:false});
+
+
+		$('#myTab a').on('click', function (e) {
+		  e.preventDefault()
+		  $(this).tab('show')
+		});
+
+		SyntaxHighlighter.all();
+	</script>
+</html>