This is the Raw Homepage Code from the Joomlashine Template JSN Mini and is for reference only.
Our latest projects
Minimalist Style
A style that uses pared-down design elements, removing everything in a piece, leaving just the necessary and needed elements
130+ font-icons for many purposes
JSN Mini is also the first JoomlaShine template with 130+ outstanding font icons for you to choose from.
Extended style for three extensions
JSN Mini is well-crafted with extended styles for three extensions: Advanced Portfolio from ExtStore, Kunena and K2.
Joomla! 2.5 &3.x Compatibility
Natively compatible with Joomla! 2.5 & Joomla! 3.x versions
Sticky menu
Sticky menu makes websites quicker to navigate.
Easy to start
JSN PowerAdmin facilitates delightful management and customization your Joomla website with ease and joy.
SEO Optimized
Pure html override and 2-1-3 ordered content presentation help search engines easily crawl the site.
Various Colors
6 color variations including blue, red, green, violet, orange and grey.
Portfolio Design
JSN Mini is dedicated to portfolio websites.
CSS
/* ==================== JSN MINI CUSTOM CSS ==================== */
/* ===== GENERAL ===== */
.jsn-demo-page #jsn-mainbody-content {
display: none;
}
#jsn-logo a {
padding: 28px 0 28px 20px;
}
.jsn-direction-rtl #jsn-logo a {
padding: 28px 20px 28px 0;
}
.jsn-demo-page #jsn-topbar,
.jsn-demo-page #jsn-topheader,
.jsn-demo-page #jsn-header,
.jsn-demo-page #jsn-logo {
position: relative;
z-index: 1000;
}
.jsn-demo-page #jsn-header.jsn-menu-sticky {
position: fixed;
}
.jsn-demo-page #jsn-header {
background-color: transparent;
transition: background-color 0.5s ease-in-out;
-moz-transition: background-color 0.5s ease-in-out;
-webkit-transition: background-color 0.5s ease-in-out;
}
.jsn-demo-page #jsn-header.hasbg {
background-color: #000;
}
.jsn-demo-page #jsn-promo {
margin: 0;
position: relative;
width: 100%;
}
.jsn-demo-page #jsn-pos-promo {
width: 100%;
overflow: hidden;
}
.jsn-demo-page #jsn-promo:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
display: block;
z-index: 50;
}
.jsn-demo-page.jsn-color-blue #jsn-promo:before {
background-color: rgba(30,41,53,0.7);
}
.jsn-demo-page.jsn-color-red #jsn-promo:before {
background-color: rgba(97,5,0,0.7);
}
.jsn-demo-page.jsn-color-green #jsn-promo:before {
background-color: rgba(0,76,52,0.7);
}
.jsn-demo-page.jsn-color-orange #jsn-promo:before {
background-color: rgba(145,58,0,0.7);
}
.jsn-demo-page.jsn-color-violet #jsn-promo:before {
background-color: rgba(44,24,53,0.7);
}
.jsn-demo-page.jsn-color-grey #jsn-promo:before {
background-color: rgba(35,38,42,0.7);
}
/* ===== GET IT NOW BUTTON ===== */
#jsn-get-now {
position: relative;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
#jsn-get-now .link-button.button-color {
position: absolute;
border-radius: 0 0 10px 10px;
padding: 8px 25px 12px;
font-size: 1.2em;
white-space: nowrap;
-webkit-transform: translate(-50%,0);
-moz-transform: translate(-50%,0);
-ms-transform: translate(-50%,0);
-o-transform: translate(-50%,0);
transform: translate(-50%,0);
}
/* ===== PROMO INTRO TEXT ===== */
.jsn-demo-page .promo-intro-text #promo-intro-text {
text-align: center;
font-family: 'PT Sans', Arial, Helvetica, sans-serif;
text-transform: uppercase;
position: absolute;
top: 50%;
margin-top: -60px;
width: 100%;
height: 120px;
max-height: 120px;
z-index: 500;
}
.jsn-demo-page .promo-intro-text #promo-intro-text h4 {
font-weight: 300;
font-size: 1.6em;
line-height: 30px;
margin: 0;
letter-spacing: 3px;
color: #d5d5d5;
}
.jsn-demo-page .promo-intro-text #promo-intro-text h3 {
font-weight: bold;
font-size: 3em;
margin: 0;
letter-spacing: 10px;
color: #fff;
}
.jsn-demo-page .promo-intro-text #promo-intro-text + a.scroll-down {
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -75px;
display: block;
width: 150px;
padding: 5px 10px;
background-color: #fff\9;
background-color: rgba(255,255,255,0.4);
color: #000;
letter-spacing: 2px;
text-transform: uppercase;
font-size: 12px;
text-align: center;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
z-index: 200;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.jsn-demo-page .promo-intro-text #promo-intro-text + a.scroll-down:hover {
background-color: #fff;
}
.ping {
opacity:0;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
transform: translate(0,-20px);
-moz-transform: translate(0,-20px);
-webkit-transform: translate(0,-20px);
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.ping.pop {
opacity:1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
transform: translate(0,0);
-moz-transform: translate(0,0);
-webkit-transform: translate(0,0);
}
/* ===== HOMEPAGE SLIDESHOW ===== */
.jsn-demo-page #jsn-pos-promo {
position: absolute;
top: 50%;
}
/* Fix slider images dimension for landscape tablet */
@media only screen and (min-width: 1025px) and (max-width: 1850px), (min-device-width: 1025px) and (max-device-width: 1850px) and (orientation:landscape) {
.jsn-demo-page .box_skitter,
.jsn-demo-page .container_skitter,
.jsn-demo-page .box_skitter .box_clone,
.jsn-demo-page .box_skitter .image img,
.jsn-demo-page .box_skitter .box_clone img {
height: 1280px !important;
width: 2325px !important;
}
}
/* Fix slider images dimension for portrait tablet */
/* For general tablet and smartphone */
@media only screen and (max-width: 1024px), (max-device-width: 1024px) {
.jsn-demo-page #jsn-promo{
height: 675px !important;
}
}
@media only screen and (max-width: 480px), (max-device-width: 480px) {
.jsn-demo-page #jsn-promo{
height: 850px !important;
}
}
/* Fix slider images dimension for landscape tablet */
@media only screen and (min-width: 1025px) and (max-width: 1850px), (min-device-width: 1025px) and (max-device-width: 1850px) and (orientation:landscape) {
.jsn-demo-page .box_skitter,
.jsn-demo-page .container_skitter,
.jsn-demo-page .box_skitter .box_clone,
.jsn-demo-page .box_skitter .image img,
.jsn-demo-page .box_skitter .box_clone img {
height: 1280px !important;
}
}
/* Fix slider images dimension for portrait tablet */
/* For general tablet and smartphone */
@media only screen and (max-width: 1024px), (max-device-width: 1024px) {
.jsn-mobile.jsn-demo-page .box_skitter,
.jsn-mobile.jsn-demo-page .container_skitter,
.jsn-mobile.jsn-demo-page .box_skitter .box_clone,
.jsn-mobile.jsn-demo-page .box_skitter .image img,
.jsn-mobile.jsn-demo-page .box_skitter .box_clone img,
.jsn-mobile.jsn-demo-page #jsn-pos-promo {
height: 768px !important;
width: 1394px !important;
}
.jsn-demo-page #jsn-promo {
height: auto !important;
}
.jsn-demo-page #jsn-pos-promo {
position: static !important;
top: 0 !important;
margin-top: 0 !important;
height: 768px !important;
}
}
@media only screen and (max-width: 480px), (max-device-width: 480px) {
.jsn-mobile.jsn-demo-page .box_skitter,
.jsn-mobile.jsn-demo-page .container_skitter,
.jsn-mobile.jsn-demo-page .box_skitter .box_clone,
.jsn-mobile.jsn-demo-page .box_skitter .image img,
.jsn-mobile.jsn-demo-page .box_skitter .box_clone img,
.jsn-mobile.jsn-demo-page #jsn-pos-promo {
height: 480px !important;
width: 870px !important;
}
.jsn-demo-page #jsn-promo {
height: auto !important;
}
.jsn-demo-page #jsn-pos-promo {
position: static !important;
top: 0 !important;
margin-top: 0 !important;
height: 480px !important;
}
}
/* ===== CONTENT TOP ===== */
#jsn-content-top {
background-color: #f5f5f5;
}
#welcome-to-jsn-mini {
padding: 80px 0;
}
#welcome-to-jsn-mini .welcome .grid-col_inner {
padding: 0 20px;
}
#welcome-to-jsn-mini .welcome .img img {
max-width: 100%;
}
#welcome-to-jsn-mini .welcome .text {
padding: 140px 0 40px;
}
#welcome-to-jsn-mini .welcome .text .heading {
text-transform: uppercase;
letter-spacing: 3px;
font-size: 1.9em;
}
#welcome-to-jsn-mini .welcome .text .desc {
margin: 30px 0 40px;
font-size: 1em;
line-height: 2em;
color: #888;
}
/* ===== CONTENT TOP BELOW ===== */
#jsn-content-top-below {
background: url(../../../media/joomlashine/jsn-mini/custom-html/bg/workplace.jpg) center center fixed;
background-size: 100% auto;
}
#demo-main-features {
padding: 30px 0;
}
#demo-main-features .main-features {
padding: 40px 0;
}
#demo-main-features .main-features .grid-col_inner {
padding: 0 20px;
}
#demo-main-features .main-features .feature-item [class*="jsn-icon-"] {
font-size: 2.5em;
}
#demo-main-features .main-features .feature-item .heading {
color: #fff;
text-transform: uppercase;
font-size: 1.2em;
letter-spacing: 5px;
}
#demo-main-features .main-features .feature-item .desc {
color: #999;
}
/* ===== USER TOP ===== */
.jsn-demo-page #jsn-pos-user-top {
border: none;
padding: 0;
}
.jsn-demo-page #jsn-centercol {
padding: 0 !important;
}
.jsn-modulecontainer.demo-latest-projects {
margin-top: 0 !important;
}
#demo-latest-projects .section-heading {
background-color: #111;
color: #fff;
font-size: 1.8em;
text-transform: uppercase;
letter-spacing: 5px;
text-align: center;
margin: 0;
padding: 45px 0;
}
.jsn-color-blue #demo-latest-projects .section-heading {
background-color: #1c8bbe;
}
.jsn-color-red #demo-latest-projects .section-heading {
background-color: #d85544;
}
.jsn-color-green #demo-latest-projects .section-heading {
background-color: #139d6b;
}
.jsn-color-orange #demo-latest-projects .section-heading {
background-color: #c78f23;
}
.jsn-color-violet #demo-latest-projects .section-heading {
background-color: #8762ae;
}
.jsn-color-grey #demo-latest-projects .section-heading {
background-color: #333;
}
#demo-latest-projects .latest-projects .grid-col {
width: 25%;
}
#demo-latest-projects .latest-projects .grid-col_inner {
margin: 0;
}
#demo-latest-projects .latest-projects .project-item a {
display: block;
position: relative;
z-index: 90;
top: 0;
left: 0;
}
#demo-latest-projects .latest-projects .project-item a img {
max-width: 100%;
display: block;
}
#demo-latest-projects .latest-projects .project-item {
position: relative;
overflow: hidden;
}
#demo-latest-projects .latest-projects .project-item a:before,
#demo-latest-projects .latest-projects .project-item a:after {
opacity: 0;
filter: alpha(opacity=0);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
#demo-latest-projects .latest-projects .project-item a:before {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
background-color: #000\9;
background-color: rgba(0,0,0,0.75);
z-index: 100;
}
#demo-latest-projects .latest-projects .project-item a:after {
content: "\e61e";
font-family: 'JSN-Mini-Icon';
font-size: 1.6em;
position: absolute;
display: block;
width: 80px;
height: 80px;
line-height: 70px;
text-align: center;
color: #fff;
top: 40%;
left: 50%;
margin-top: -40px;
margin-left: -40px;
border: 3px solid #fff;
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
z-index: 110;
}
#demo-latest-projects .latest-projects .project-item a:hover:before,
#demo-latest-projects .latest-projects .project-item a:hover:after {
opacity: 1;
filter: alpha(opacity=100);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
#demo-latest-projects .latest-projects .project-item a:hover:after {
top: 50%;
}
/* ===== MAINBODY TOP ===== */
/* TABULOUS by http://git.aaronlumsden.com/tabulous.js/ */
#demo-tab-news {
padding: 50px 0;
}
#demo-tab-news #tabs {
width: 1100px;
max-width: 100%;
margin: 50px auto;
}
#demo-tab-news ul.tabs_title {
display: inline-block;
float: right;
width: 50%;
margin: 0;
padding: 20px 0;
border-left: 1px solid #e1e1e1;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#demo-tab-news #tabs ul.tabs_title li {
display: block;
margin-right: 2px;
margin: 0;
}
#demo-tab-news #tabs ul.tabs_title li a {
position: relative;
display: block;
padding: 20px 0 20px 60px;
text-decoration: none;
color: #aaa;
text-transform: uppercase;
letter-spacing: 2px;
transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
}
#demo-tab-news #tabs ul.tabs_title li a:hover,
#demo-tab-news #tabs ul.tabs_title li a.tabulous_active {
color: #000;
}
#demo-tab-news #tabs ul.tabs_title li a:before {
content: "";
display: block;
position: absolute;
left: -10px;
width: 9px;
height: 9px;
background-color: #ddd;
border: 5px solid #fff;
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}
#demo-tab-news #tabs ul.tabs_title li a.tabulous_active:before {
transform: scale(1.5,1.5);
-moz-transform: scale(1.5,1.5);
-webkit-transform: scale(1.5,1.5);
}
.jsn-color-blue #demo-tab-news #tabs ul.tabs_title li a.tabulous_active:before {
background-color: #34a7c8;
}
.jsn-color-red #demo-tab-news #tabs ul.tabs_title li a.tabulous_active:before {
background-color: #e95e53;
}
.jsn-color-green #demo-tab-news #tabs ul.tabs_title li a.tabulous_active:before {
background-color: #40af6f;
}
.jsn-color-orange #demo-tab-news #tabs ul.tabs_title li a.tabulous_active:before {
background-color: #f39c12;
}
.jsn-color-violet #demo-tab-news #tabs ul.tabs_title li a.tabulous_active:before {
background-color: #b485c7;
}
.jsn-color-grey #demo-tab-news #tabs ul.tabs_title li a.tabulous_active:before {
background-color: #222;
}
#demo-tab-news #tabs_container {
overflow: hidden;
float: left;
position: relative;
padding-top: 40px;
width: 50%;
color: #999;
line-height: 2em;
}
#demo-tab-news #tabs_container > div {
margin-right: 60px;
}
#demo-tab-news #tabs_container .news-title {
text-transform: uppercase;
color: #000;
letter-spacing: 5px;
font-size: 1.8em;
margin: 0 0 30px;
}
.transition {
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
-webkit-transition-delay: .3s;
-moz-transition-delay: .3s;
-o-transition-delay: .3s;
-ms-transition-delay: .3s;
transition-delay: .3s;
}
.make_transist {
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.hidescale {
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-o-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
filter: alpha(opacity=0);
opacity: 0;
}
.showscale {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition-delay: .3s;
-moz-transition-delay: .3s;
-o-transition-delay: .3s;
-ms-transition-delay: .3s;
transition-delay: .3s;
}
.hideleft {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-o-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.showleft {
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-o-transform: translateX(0px);
-ms-transform: translateX(0px);
transform: translateX(0px);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition-delay: .3s;
-moz-transition-delay: .3s;
-o-transition-delay: .3s;
-ms-transition-delay: .3s;
transition-delay: .3s;
}
.hidescaleup {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.showscaleup {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition-delay: .3s;
-moz-transition-delay: .3s;
-o-transition-delay: .3s;
-ms-transition-delay: .3s;
transition-delay: .3s;
}
.hideflip {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: rotatey(-90deg) scale(1.1);
-moz-transform: rotatey(-90deg) scale(1.1);
-o-transform: rotatey(-90deg) scale(1.1);
-ms-transform: rotatey(-90deg) scale(1.1);
transform: rotatey(-90deg) scale(1.1);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.showflip {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transition-delay: .3s;
-moz-transition-delay: .3s;
-o-transition-delay: .3s;
-ms-transition-delay: .3s;
transition-delay: .3s;
-webkit-transform: rotatey(0deg) scale(1);
-moz-transform: rotatey(0deg) scale(1);
-o-transform: rotatey(0deg) scale(1);
-ms-transform: rotatey(0deg) scale(1);
transform: rotatey(0deg) scale(1);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.tabulousclear {
display: block;
clear: both;
}
/* FEATURE GRAPH */
.jsn-demo-page #demo-feature-graph {
padding: 50px 0;
background-color: #f6fafc;
}
.jsn-demo-page #demo-feature-graph .feature-graph {
padding: 0;
}
.jsn-demo-page #demo-feature-graph .feature-graph:first-child {
border-bottom: 3px solid #cbd4d8;
}
.jsn-demo-page #demo-feature-graph .feature-graph .graph-item {
overflow: hidden;
}
.jsn-demo-page #demo-feature-graph .feature-graph .graph-item .graph-item-inner {
padding: 60px 0;
width: 400px;
max-width: 100%;
}
.jsn-demo-page #demo-feature-graph .feature-graph .graph-item [class*="jsn-icon-"] {
position: relative;
float: left;
display: block;
width: 75px;
height: 75px;
color: #fff;
background-color: #222;
font-size: 2.5em;
line-height: 72px;
text-align: center;
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
transform: scale(1,1);
-moz-transform: scale(1,1);
-webkit-transform: scale(1,1);
transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
}
.jsn-demo-page #demo-feature-graph .feature-graph .graph-item-inner:hover [class*="jsn-icon-"] {
transform: scale(1.5,1.5);
-moz-transform: scale(1.5,1.5);
-webkit-transform: scale(1.5,1.5);
}
.jsn-demo-page #demo-feature-graph .feature-graph .item1 [class*="jsn-icon-"] {
background-color: #5bace2;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item2 [class*="jsn-icon-"] {
background-color: #6ece97;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item3 [class*="jsn-icon-"] {
background-color: #e9974e;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item4 [class*="jsn-icon-"] {
background-color: #c08dd7;
}
.jsn-demo-page #demo-feature-graph .feature-graph .graph-item .text {
padding-left: 120px;
}
.jsn-demo-page #demo-feature-graph .feature-graph .graph-item .text .heading {
text-transform: uppercase;
font-size: 1.65em;
line-height: 1.65em;
margin: 0;
padding: 20px 0 0;
letter-spacing: 3px;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item1 .graph-item-inner,
.jsn-demo-page #demo-feature-graph .feature-graph .item3 .graph-item-inner {
float: right;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item2 .graph-item-inner,
.jsn-demo-page #demo-feature-graph .feature-graph .item4 .graph-item-inner {
float: left;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item1 .graph-item-inner {
padding-right: 150px;
}
.jsn-desktop.jsn-demo-page #demo-feature-graph .feature-graph .item1 .graph-item-inner {
padding-right: 0;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item2 .graph-item-inner {
padding-left: 50px;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item3 .graph-item-inner {
padding-right: 0;
width: 350px;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item4 .graph-item-inner {
padding-left: 100px;
}
.jsn-demo-page #demo-feature-graph .feature-graph .graph-item [class*="jsn-icon-"]:after {
content: "";
display: block;
position: absolute;
width: 3px;
height: 200px;
background-color: #cbd4d8;
left: 50%;
margin-left: -2px;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item1 [class*="jsn-icon-"]:after,
.jsn-demo-page #demo-feature-graph .feature-graph .item2 [class*="jsn-icon-"]:after {
top: 90px;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item3 [class*="jsn-icon-"]:after,
.jsn-demo-page #demo-feature-graph .feature-graph .item4 [class*="jsn-icon-"]:after {
bottom: 90px;
}
/* ===== COUNTING UP STATISTICS ===== */
.jsn-demo-page #jsn-usermodules1,
.jsn-demo-page #jsn-usermodules2 {
border: none;
padding: 0;
}
.jsn-demo-page #demo-countingup-stats {
background: #2e353c url(../../../media/joomlashine/jsn-mini/custom-html/bg/triangles.jpg) center center fixed;
background-size: 100% auto;
color: #fff;
}
.jsn-demo-page #demo-countingup-stats {
width: 1000px;
max-width: 100%;
margin: 0 auto;
padding: 100px 0;
}
.jsn-demo-page #demo-countingup-stats .stat-group {
text-align: center;
padding: 0 30px;
border-right: 1px solid rgba(255,255,255,0.1);
}
.jsn-demo-page #demo-countingup-stats .grid-lastcol .stat-group {
border-right: none;
}
.jsn-demo-page #demo-countingup-stats .stat-group .heading {
text-transform: uppercase;
letter-spacing: 3px;
font-size: 2.2em;
line-height: 36px;
margin: 0;
}
.jsn-demo-page #demo-countingup-stats .stat-group .sub-heading {
text-transform: uppercase;
letter-spacing: 3px;
font-size: 1.5em;
line-height: 20px;
margin: 0;
color: #ddd;
font-weight: 400;
}
.jsn-demo-page #demo-countingup-stats .stat-group .counting-number {
font-family: 'PT Sans', Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 8.5em;
line-height: 90px;
padding: 30px 0 20px;
text-transform: uppercase;
color: #fff;
}
.jsn-demo-page #demo-countingup-stats .stat-group .desc {
text-transform: uppercase;
font-size: 1.3em;
letter-spacing: 4px;
line-height: 30px;
margin: 0;
color: #ddd;
}
/* ===== PROMOTION BOX ===== */
.jsn-demo-page #demo-promotion-box {
padding: 40px 0;
}
.jsn-demo-page #demo-promotion-box .promotion-box h3 {
letter-spacing: 2px;
color: #666;
}
.jsn-demo-page #demo-promotion-box .promotion-box a.link-button {
float: right;
}
/* ===== MAP INFO ===== */
#demo-map-info .map-wrapper {
width: 100%;
height: 160px;
margin: 15px 0;
}
/* ===== SUBCRIPTION FORM ===== */
/* =============== DEMO CONTACT INFO =============== */
.demo-contact-info .jsn-modulecontent {
padding: 12px 0;
}
.demo-contact-info .jsn-uniform .jsn-row-container {
margin: 0;
}
.demo-contact-info .jsn-uniform .jsn-row-container .form-actions {
margin: 15px 0;
padding: 0;
}
.demo-contact-info .jsn-uniform .jsn-row-container .form-actions + .jsn-text-center {
display: none;
}
.demo-contact-info .jsn-uniform .jsn-row-container .form-actions .btn-toolbar {
margin: 0;
}
.demo-contact-info .jsn-uniform .jsn-row-container .form-actions .btn-toolbar .jsn-form-submit {
background: #6ece97;
box-shadow: none;
border: none;
color: #fff;
text-shadow: none;
font-family: 'PT Sans', Arial, Helvetica, sans-serif;
cursor: pointer;
margin: 0;
padding: 6px 30px;
display: inline-block;
text-decoration: none;
border-radius: 100px;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 400 !important;
transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
}
.demo-contact-info .jsn-uniform .jsn-row-container .form-actions .btn-toolbar .jsn-form-submit:hover {
background-color: #439968;
}
.demo-contact-info .jsn-uniform .jsn-row-container .control-group {
padding: 0 !important;
}
.demo-contact-info .jsn-uniform .jsn-row-container .control-group.ui-state-highlight {
border: none !important;
background: none !important;
}
.demo-contact-info .jsn-uniform .jsn-row-container label {
display: none !important;
}
.demo-contact-info .jsn-uniform .jsn-row-container input.email {
border: none;
border-radius: 0;
margin: 0;
padding: 15px 10px;
}
.demo-contact-info .jsn-uniform .demo-contact-desc {
margin: 5px 0;
padding: 10px;
}
/* ===== WAYPOINT ONSCROLL ACTION ===== */
/* Waypoint by http://imakewebthings.com/jquery-waypoints/ */
/* Declare scale-fade animation */
@keyframes scale-fade
{
0% { transform:scale(0.5);
opacity:0;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
100% { transform:scale(1);
opacity:1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
}
@-moz-keyframes scale-fade
{
0% { -moz-transform:scale(0.5);
opacity:0;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
100% { -moz-transform:scale(1);
opacity:1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
}
@-webkit-keyframes scale-fade
{
0% { -webkit-transform:scale(0.5);
opacity:0;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
100% { -webkit-transform:scale(1);
opacity:1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
}
/* Declare translate-fade animation */
@keyframes translate-fade
{
0% { transform:translate(0,50px);
opacity:0;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
100% { transform:translate(0,0);
opacity:1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
}
@-moz-keyframes translate-fade
{
0% { -moz-transform:translate(0,50px);
opacity:0;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
100% { -moz-transform:translate(0,0);
opacity:1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
}
@-webkit-keyframes translate-fade
{
0% { -webkit-transform:translate(0,50px);
opacity:0;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
100% { -webkit-transform:translate(0,0);
opacity:1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
}
.appearing .project-item,
.appearing .main-features .feature-item [class*="jsn-icon-"],
.appearing .graph-item .graph-item-inner,
.appearing .stat-group .counting-number {
opacity:0;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-moz-transform: scale(0.5);
-webkit-transform: scale(0.5);
-ms-transform: scale(0.5);
transform: scale(0.5);
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.appearing.scroll-action .project-item,
.appearing.scroll-action .main-features .feature-item [class*="jsn-icon-"],
.appearing.scroll-action .graph-item .graph-item-inner,
.appearing.scroll-action .stat-group .counting-number {
-webkit-animation: scale-fade 0.8s 1 cubic-bezier(0,.61,.46,1.33);
-moz-animation: scale-fade 0.8s 1 cubic-bezier(0,.61,.46,1.33);
animation: scale-fade 0.8s 1 cubic-bezier(0,.61,.46,1.33);
opacity:1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.appearing .apple-devices {
opacity:0;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-moz-transform: translate(0,50px);
-webkit-transform: translate(0,50px);
-ms-transform: translate(0,50px);
transform: translate(0,50px);
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.appearing.scroll-action .apple-devices {
-webkit-animation: translate-fade 1s 1 ease-in-out;
-moz-animation: translate-fade 1s 1 ease-in-out;
animation: translate-fade 1s 1 ease-in-out;
opacity:1;
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-moz-transform: translate(0,0);
-webkit-transform: translate(0,0);
-ms-transform: translate(0,0);
transform: translate(0,0);
}
.scroll-down {
}
.scroll-down.scroll-action {
opacity:0;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
/* ===== RESPONSIVE OPTIMIZING ===== */
@media only screen and (max-width: 1100px), (max-device-width: 1100px) {
.jsn-desktop #demo-tab-news #tabs_container > div {
margin-left: 60px;
}
.jsn-desktop.jsn-demo-page #demo-feature-graph {
padding: 50px;
}
.jsn-desktop #jsn-pos-content-bottom-below {
padding: 80px 20px;
}
}
@media only screen and (max-width: 960px), (max-device-width: 960px) {
.jsn-mobile.jsn-demo-page #jsn-usermodules1,
.jsn-mobile.jsn-demo-page #jsn-usermodules2 {
padding: 0 !important;
}
/* Welcome to JSN Mini */
.jsn-mobile.jsn-demo-page #welcome-to-jsn-mini .welcome .text {
padding: 0;
}
/* Demo main features */
.jsn-mobile.jsn-demo-page #demo-main-features .main-features {
padding: 30px 0;
}
/* Latest project */
.jsn-mobile.jsn-demo-page #jsn-pos-user-top {
padding: 0 !important;
}
.jsn-mobile #demo-tab-news {
padding: 30px 50px;
}
/* Feature graph */
.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .graph-item .graph-item-inner {
width: 300px;
}
.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .item1 .graph-item-inner {
padding-right: 50px;
}
.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .item2 .graph-item-inner {
padding-left: 0;
}
.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .item3 .graph-item-inner {
padding-right: 0;
width: 280px;
}
.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .item4 .graph-item-inner {
padding-left: 50px;
}
/* Counting Stats */
.jsn-mobile.jsn-demo-page #demo-countingup-stats div.grid-layout4 div.grid-col {
width: 24.96%;
}
.jsn-mobile.jsn-demo-page #demo-countingup-stats .stat-group .heading {
font-size: 1.4em;
}
.jsn-mobile.jsn-demo-page #demo-countingup-stats .stat-group .counting-number {
font-size: 6em;
}
.jsn-mobile.jsn-demo-page #demo-countingup-stats .stat-group .sub-heading,
.jsn-mobile.jsn-demo-page #demo-countingup-stats .stat-group .desc {
font-size: 1em;
}
/* Promotion box */
.jsn-mobile.jsn-demo-page #demo-promotion-box .promotion-box h3 {
font-size: 1em;
}
}
@media only screen and (max-width: 480px), (max-device-width: 480px) {
.jsn-mobile.jsn-demo-page .promo-intro-text #promo-intro-text h4 {
font-size: 1.2em;
}
.jsn-mobile.jsn-demo-page .promo-intro-text #promo-intro-text h3 {
font-size: 2em;
}
.jsn-mobile #welcome-to-jsn-mini .welcome .text .heading {
font-size: 1.4em;
margin-top: 20px;
}
.jsn-mobile #jsn-content-top-below {
background-size: 300% auto;
}
.jsn-mobile.jsn-demo-page #demo-main-features .main-features {
padding: 20px;
}
.jsn-mobile.jsn-demo-page #demo-main-features .main-features .grid-col {
margin-bottom: 30px;
}
.jsn-mobile #demo-latest-projects .latest-projects .grid-col {
width: 100%;
}
.jsn-mobile #demo-latest-projects .section-heading {
font-size: 1.2em;
padding: 30px 0;
}
.jsn-mobile #demo-tab-news #tabs_container {
width: 89%;
padding-top: 0;
}
.jsn-mobile #demo-tab-news ul.tabs_title {
width: 10%;
}
.jsn-mobile #demo-tab-news #tabs ul.tabs_title li a {
text-indent: -1000px;
padding-left: 0px;
}
.jsn-mobile #demo-tab-news #tabs_container .news-title {
font-size: 1.4em;
margin-bottom: 10px;
}
.jsn-mobile #demo-tab-news #tabs_container > div {
margin-right: 30px;
}
.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .graph-item [class*="jsn-icon-"]:after {
display: none;
}
.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .graph-item {
padding: 0 40px;
}
.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .graph-item .graph-item-inner {
padding: 30px 0;
float: none;
width: auto;
text-align: center;
}
.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph:first-child {
border: none;
}
.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .graph-item .text {
padding-left: 0;
}
.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .graph-item .text .heading {
font-size: 1.2em;
line-height: 1.8em;
}
.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .graph-item [class*="jsn-icon-"] {
float: none;
margin: 0 auto;
}
.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .graph-item-inner:hover [class*="jsn-icon-"] {
transform: none;
-moz-transform: none;
-webkit-transform: none;
}
.jsn-mobile.jsn-demo-page .demo-countingup-stats {
background-size: 300% auto;
}
.jsn-mobile.jsn-demo-page #demo-countingup-stats {
padding: 60px 0;
}
.jsn-mobile.jsn-demo-page #demo-countingup-stats div.grid-layout4 div.grid-col {
width: 100%;
}
.jsn-mobile.jsn-demo-page #demo-countingup-stats .stat-group {
padding: 30px 0;
margin: 0 40px;
border-right: none;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.jsn-mobile.jsn-demo-page #demo-countingup-stats .stat-group .counting-number {
padding: 10px 0 0;
}
.jsn-mobile.jsn-demo-page #demo-promotion-box .promotion-box a.link-button {
float: none;
margin-bottom: 20px;
}
.jsn-mobile #jsn-pos-content-bottom-below {
padding: 60px 40px 40px !important;
}
.jsn-mobile #jsn-footermodules {
padding: 60px 40px !important;
}
.jsn-mobile #jsn-pos-content-bottom-below div.jsn-modulecontainer {
margin-top: 50px;
}
.jsn-mobile #jsn-pos-content-bottom-below div.jsn-modulecontainer:first-child {
margin-top: 0;
}
}
CSS Fixes for this template
/* Latest Projects - Correct gap between images in mobile view for this template */
@media only screen and (max-width: 480px), (max-device-width: 480px) {
div.grid-col {
margin-bottom: 0px;
}
}
/* Tabulous - Fixes White / Missing Balls */
/* Correct an applied global rule - template.css line 8 */
*:before,
*:after {
box-sizing: content-box;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
}
Javascript
/* ==================== JSN MINI CUSTOM JS ==================== */
// i have seperated out each complete function with //----------------------------------------
// use the whole file for Mini effects and just delete stuff you do not want
setTimeout(function() {
(function($) {
//----------------------------------------
// Tabulous - The Vertical Line Thing
/* Set negative margin-top value to #jsn-promo */
/* Tab function */
(function ( $, window, document, undefined ) {
var pluginName = "tabulous",
defaults = {
effect: 'scale'
};
// $('<style>body { background-color: red; color: white; }</style>').appendTo('head');
function Plugin( element, options ) {
this.element = element;
this.$elem = $(this.element);
this.options = $.extend( {}, defaults, options );
this._defaults = defaults;
this._name = pluginName;
this.init();
}
Plugin.prototype = {
init: function() {
var links = this.$elem.find('ul li a');
var firstchild = this.$elem.find('li:first-child').find('a');
var lastchild = this.$elem.find('li:last-child').after('<span class="tabulousclear"></span>');
if (this.options.effect == 'scale') {
tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hidescale');
} else if (this.options.effect == 'slideLeft') {
tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hideleft');
} else if (this.options.effect == 'scaleUp') {
tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hidescaleup');
} else if (this.options.effect == 'flip') {
tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hideflip');
}
var firstdiv = this.$elem.find('#tabs_container');
var firstdivheight = firstdiv.find('div:first').height();
var alldivs = this.$elem.find('div:first').find('div');
alldivs.css({'position': 'absolute'});
firstdiv.css('height',firstdivheight+'px');
firstchild.addClass('tabulous_active');
links.bind('click', {myOptions: this.options}, function(e) {
e.preventDefault();
var $options = e.data.myOptions;
var effect = $options.effect;
var mythis = $(this);
var thisform = mythis.parent().parent().parent();
var thislink = mythis.attr('href');
firstdiv.addClass('transition');
links.removeClass('tabulous_active');
mythis.addClass('tabulous_active');
thisdivwidth = thisform.find('div'+thislink).height();
if (effect == 'scale') {
alldivs.removeClass('showscale').addClass('make_transist').addClass('hidescale');
thisform.find('div'+thislink).addClass('make_transist').addClass('showscale');
} else if (effect == 'slideLeft') {
alldivs.removeClass('showleft').addClass('make_transist').addClass('hideleft');
thisform.find('div'+thislink).addClass('make_transist').addClass('showleft');
} else if (effect == 'scaleUp') {
alldivs.removeClass('showscaleup').addClass('make_transist').addClass('hidescaleup');
thisform.find('div'+thislink).addClass('make_transist').addClass('showscaleup');
} else if (effect == 'flip') {
alldivs.removeClass('showflip').addClass('make_transist').addClass('hideflip');
thisform.find('div'+thislink).addClass('make_transist').addClass('showflip');
}
firstdiv.css('height',thisdivwidth+'px');
});
},
yourOtherFunction: function(el, options) {
// some logic
}
};
// A really lightweight plugin wrapper around the constructor,
// preventing against multiple instantiations
$.fn[pluginName] = function ( options ) {
return this.each(function () {
new Plugin( this, options );
});
};
})( jQuery, window, document );
//----------------------------------------
// intiates the Waypoints codebase
// This causes animations to be paused until triggered by the Waypoints code
// Waypoints are configured later
/* Waypoints */
(function(){var t=[].indexOf||function(t){for(var e=0,n=this.length;e<n;e++){if(e in this&&this[e]===t)return e}return-1},e=[].slice;(function(t,e){if(typeof define==="function"&&define.amd){return define("waypoints",["jquery"],function(n){return e(n,t)})}else{return e(t.jQuery,t)}})(window,function(n,r){var i,o,l,s,f,u,c,a,h,d,p,y,v,w,g,m;i=n(r);a=t.call(r,"ontouchstart")>=0;s={horizontal:{},vertical:{}};f=1;c={};u="waypoints-context-id";p="resize.waypoints";y="scroll.waypoints";v=1;w="waypoints-waypoint-ids";g="waypoint";m="waypoints";o=function(){function t(t){var e=this;this.$element=t;this.element=t[0];this.didResize=false;this.didScroll=false;this.id="context"+f++;this.oldScroll={x:t.scrollLeft(),y:t.scrollTop()};this.waypoints={horizontal:{},vertical:{}};this.element[u]=this.id;c[this.id]=this;t.bind(y,function(){var t;if(!(e.didScroll||a)){e.didScroll=true;t=function(){e.doScroll();return e.didScroll=false};return r.setTimeout(t,n[m].settings.scrollThrottle)}});t.bind(p,function(){var t;if(!e.didResize){e.didResize=true;t=function(){n[m]("refresh");return e.didResize=false};return r.setTimeout(t,n[m].settings.resizeThrottle)}})}t.prototype.doScroll=function(){var t,e=this;t={horizontal:{newScroll:this.$element.scrollLeft(),oldScroll:this.oldScroll.x,forward:"right",backward:"left"},vertical:{newScroll:this.$element.scrollTop(),oldScroll:this.oldScroll.y,forward:"down",backward:"up"}};if(a&&(!t.vertical.oldScroll||!t.vertical.newScroll)){n[m]("refresh")}n.each(t,function(t,r){var i,o,l;l=[];o=r.newScroll>r.oldScroll;i=o?r.forward:r.backward;n.each(e.waypoints[t],function(t,e){var n,i;if(r.oldScroll<(n=e.offset)&&n<=r.newScroll){return l.push(e)}else if(r.newScroll<(i=e.offset)&&i<=r.oldScroll){return l.push(e)}});l.sort(function(t,e){return t.offset-e.offset});if(!o){l.reverse()}return n.each(l,function(t,e){if(e.options.continuous||t===l.length-1){return e.trigger([i])}})});return this.oldScroll={x:t.horizontal.newScroll,y:t.vertical.newScroll}};t.prototype.refresh=function(){var t,e,r,i=this;r=n.isWindow(this.element);e=this.$element.offset();this.doScroll();t={horizontal:{contextOffset:r?0:e.left,contextScroll:r?0:this.oldScroll.x,contextDimension:this.$element.width(),oldScroll:this.oldScroll.x,forward:"right",backward:"left",offsetProp:"left"},vertical:{contextOffset:r?0:e.top,contextScroll:r?0:this.oldScroll.y,contextDimension:r?n[m]("viewportHeight"):this.$element.height(),oldScroll:this.oldScroll.y,forward:"down",backward:"up",offsetProp:"top"}};return n.each(t,function(t,e){return n.each(i.waypoints[t],function(t,r){var i,o,l,s,f;i=r.options.offset;l=r.offset;o=n.isWindow(r.element)?0:r.$element.offset()[e.offsetProp];if(n.isFunction(i)){i=i.apply(r.element)}else if(typeof i==="string"){i=parseFloat(i);if(r.options.offset.indexOf("%")>-1){i=Math.ceil(e.contextDimension*i/100)}}r.offset=o-e.contextOffset+e.contextScroll-i;if(r.options.onlyOnScroll&&l!=null||!r.enabled){return}if(l!==null&&l<(s=e.oldScroll)&&s<=r.offset){return r.trigger([e.backward])}else if(l!==null&&l>(f=e.oldScroll)&&f>=r.offset){return r.trigger([e.forward])}else if(l===null&&e.oldScroll>=r.offset){return r.trigger([e.forward])}})})};t.prototype.checkEmpty=function(){if(n.isEmptyObject(this.waypoints.horizontal)&&n.isEmptyObject(this.waypoints.vertical)){this.$element.unbind([p,y].join(" "));return delete c[this.id]}};return t}();l=function(){function t(t,e,r){var i,o;if(r.offset==="bottom-in-view"){r.offset=function(){var t;t=n[m]("viewportHeight");if(!n.isWindow(e.element)){t=e.$element.height()}return t-n(this).outerHeight()}}this.$element=t;this.element=t[0];this.axis=r.horizontal?"horizontal":"vertical";this.callback=r.handler;this.context=e;this.enabled=r.enabled;this.id="waypoints"+v++;this.offset=null;this.options=r;e.waypoints[this.axis][this.id]=this;s[this.axis][this.id]=this;i=(o=this.element[w])!=null?o:[];i.push(this.id);this.element[w]=i}t.prototype.trigger=function(t){if(!this.enabled){return}if(this.callback!=null){this.callback.apply(this.element,t)}if(this.options.triggerOnce){return this.destroy()}};t.prototype.disable=function(){return this.enabled=false};t.prototype.enable=function(){this.context.refresh();return this.enabled=true};t.prototype.destroy=function(){delete s[this.axis][this.id];delete this.context.waypoints[this.axis][this.id];return this.context.checkEmpty()};t.getWaypointsByElement=function(t){var e,r;r=t[w];if(!r){return[]}e=n.extend({},s.horizontal,s.vertical);return n.map(r,function(t){return e[t]})};return t}();d={init:function(t,e){var r;e=n.extend({},n.fn[g].defaults,e);if((r=e.handler)==null){e.handler=t}this.each(function(){var t,r,i,s;t=n(this);i=(s=e.context)!=null?s:n.fn[g].defaults.context;if(!n.isWindow(i)){i=t.closest(i)}i=n(i);r=c[i[0][u]];if(!r){r=new o(i)}return new l(t,r,e)});n[m]("refresh");return this},disable:function(){return d._invoke.call(this,"disable")},enable:function(){return d._invoke.call(this,"enable")},destroy:function(){return d._invoke.call(this,"destroy")},prev:function(t,e){return d._traverse.call(this,t,e,function(t,e,n){if(e>0){return t.push(n[e-1])}})},next:function(t,e){return d._traverse.call(this,t,e,function(t,e,n){if(e<n.length-1){return t.push(n[e+1])}})},_traverse:function(t,e,i){var o,l;if(t==null){t="vertical"}if(e==null){e=r}l=h.aggregate(e);o=[];this.each(function(){var e;e=n.inArray(this,l[t]);return i(o,e,l[t])});return this.pushStack(o)},_invoke:function(t){this.each(function(){var e;e=l.getWaypointsByElement(this);return n.each(e,function(e,n){n[t]();return true})});return this}};n.fn[g]=function(){var t,r;r=arguments[0],t=2<=arguments.length?e.call(arguments,1):[];if(d[r]){return d[r].apply(this,t)}else if(n.isFunction(r)){return d.init.apply(this,arguments)}else if(n.isPlainObject(r)){return d.init.apply(this,[null,r])}else if(!r){return n.error("jQuery Waypoints needs a callback function or handler option.")}else{return n.error("The "+r+" method does not exist in jQuery Waypoints.")}};n.fn[g].defaults={context:r,continuous:true,enabled:true,horizontal:false,offset:0,triggerOnce:false};h={refresh:function(){return n.each(c,function(t,e){return e.refresh()})},viewportHeight:function(){var t;return(t=r.innerHeight)!=null?t:i.height()},aggregate:function(t){var e,r,i;e=s;if(t){e=(i=c[n(t)[0][u]])!=null?i.waypoints:void 0}if(!e){return[]}r={horizontal:[],vertical:[]};n.each(r,function(t,i){n.each(e[t],function(t,e){return i.push(e)});i.sort(function(t,e){return t.offset-e.offset});r[t]=n.map(i,function(t){return t.element});return r[t]=n.unique(r[t])});return r},above:function(t){if(t==null){t=r}return h._filter(t,"vertical",function(t,e){return e.offset<=t.oldScroll.y})},below:function(t){if(t==null){t=r}return h._filter(t,"vertical",function(t,e){return e.offset>t.oldScroll.y})},left:function(t){if(t==null){t=r}return h._filter(t,"horizontal",function(t,e){return e.offset<=t.oldScroll.x})},right:function(t){if(t==null){t=r}return h._filter(t,"horizontal",function(t,e){return e.offset>t.oldScroll.x})},enable:function(){return h._invoke("enable")},disable:function(){return h._invoke("disable")},destroy:function(){return h._invoke("destroy")},extendFn:function(t,e){return d[t]=e},_invoke:function(t){var e;e=n.extend({},s.vertical,s.horizontal);return n.each(e,function(e,n){n[t]();return true})},_filter:function(t,e,r){var i,o;i=c[n(t)[0][u]];if(!i){return[]}o=[];n.each(i.waypoints[e],function(t,e){if(r(i,e)){return o.push(e)}});o.sort(function(t,e){return t.offset-e.offset});return n.map(o,function(t){return t.element})}};n[m]=function(){var t,n;n=arguments[0],t=2<=arguments.length?e.call(arguments,1):[];if(h[n]){return h[n].apply(null,t)}else{return h.aggregate.call(null,n)}};n[m].settings={resizeThrottle:100,scrollThrottle:30};return i.on("load.waypoints",function(){return n[m]("refresh")})})}).call(this);
//----------------------------------------
// The 'Counting Up' module with 4 numbers
/* Count Up */
function countUp(a,b,c,d,e,f){for(var g=0,h=["webkit","moz","ms"],i=0;i<h.length&&!window.requestAnimationFrame;++i)window.requestAnimationFrame=window[h[i]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[h[i]+"CancelAnimationFrame"]||window[h[i]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(a){var c=(new Date).getTime(),d=Math.max(0,16-(c-g)),e=window.setTimeout(function(){a(c+d)},d);return g=c+d,e}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(a){clearTimeout(a)}),this.options=f||{useEasing:!0,useGrouping:!0,separator:",",decimal:"."},""==this.options.separator&&(this.options.useGrouping=!1);var j=this;this.d="string"==typeof a?document.getElementById(a):a,this.startVal=Number(b),this.endVal=Number(c),this.countDown=this.startVal>this.endVal?!0:!1,this.startTime=null,this.timestamp=null,this.remaining=null,this.frameVal=this.startVal,this.rAF=null,this.decimals=Math.max(0,d||0),this.dec=Math.pow(10,this.decimals),this.duration=1e3*e||2e3,this.version=function(){return"1.1.1"},this.easeOutExpo=function(a,b,c,d){return 1024*c*(-Math.pow(2,-10*a/d)+1)/1023+b},this.count=function(a){null===j.startTime&&(j.startTime=a),j.timestamp=a;var b=a-j.startTime;if(j.remaining=j.duration-b,j.options.useEasing)if(j.countDown){var c=j.easeOutExpo(b,0,j.startVal-j.endVal,j.duration);j.frameVal=j.startVal-c}else j.frameVal=j.easeOutExpo(b,j.startVal,j.endVal-j.startVal,j.duration);else if(j.countDown){var c=(j.startVal-j.endVal)*(b/j.duration);j.frameVal=j.startVal-c}else j.frameVal=j.startVal+(j.endVal-j.startVal)*(b/j.duration);j.frameVal=Math.round(j.frameVal*j.dec)/j.dec,j.frameVal=j.countDown?j.frameVal<j.endVal?j.endVal:j.frameVal:j.frameVal>j.endVal?j.endVal:j.frameVal,j.d.innerHTML=j.formatNumber(j.frameVal.toFixed(j.decimals)),b<j.duration?j.rAF=requestAnimationFrame(j.count):null!=j.callback&&j.callback()},this.start=function(a){return j.callback=a,isNaN(j.endVal)||isNaN(j.startVal)?(console.log("countUp error: startVal or endVal is not a number"),j.d.innerHTML="--"):j.rAF=requestAnimationFrame(j.count),!1},this.stop=function(){cancelAnimationFrame(j.rAF)},this.reset=function(){j.startTime=null,cancelAnimationFrame(j.rAF),j.d.innerHTML=j.formatNumber(j.startVal.toFixed(j.decimals))},this.resume=function(){j.startTime=null,j.duration=j.remaining,j.startVal=j.frameVal,requestAnimationFrame(j.count)},this.formatNumber=function(a){a+="";var b,c,d,e;if(b=a.split("."),c=b[0],d=b.length>1?j.options.decimal+b[1]:"",e=/(\d+)(\d{3})/,j.options.useGrouping)for(;e.test(c);)c=c.replace(e,"$1"+j.options.separator+"$2");return c+d},j.d.innerHTML=j.formatNumber(j.startVal.toFixed(j.decimals))}
/* i think this set the physical dimensions in readyness for Counting Up */
function setHeightToHeaderElement()
{
var height = $(window).height();
var TopHeaderHeight = 0;
var HeaderHeight = 0;
var TopBarHeight = 0;
var PosPromoHeight = 0;
if (typeof $('#jsn-topheader') !== 'undefined')
{
var TopHeaderHeight = $('#jsn-topheader').outerHeight();
}
if (typeof $('#jsn-header') !== 'undefined')
{
var HeaderHeight = $('#jsn-header').outerHeight();
}
if (typeof $('#jsn-topbar') !== 'undefined')
{
var TopBarHeight = $('#jsn-topbar').outerHeight();
}
if (typeof $('#jsn-pos-promo') !== 'undefined')
{
var PosPromoHeight = $('#jsn-pos-promo').outerHeight();
}
var topMarginOffsetPromo = - (TopHeaderHeight + HeaderHeight + TopBarHeight);
var topMarginOffsetIS = - (height / 2);
$( '#jsn-promo' ).css('margin-top',topMarginOffsetPromo+'px'); // Set negative margin value for #jsn promo
$( '#jsn-promo' ).height(height); // Set height to #jsn-promo equals to height of windows
$( '#jsn-pos-promo' ).css('margin-top',topMarginOffsetIS+'px'); // Set margin-top to #jsn-pos-promo to vertically align it
$( '#jsn-pos-promo' ).height(height);
}
//----------------------------------------
/* Perform smooth scrolling */
$(document).ready(function ()
{
$('a.smooth[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 600);
return false;
}
}
});
});
//----------------------------------------
/* Add style for sticky menu when scroll down an specific distance from top */
$(window).on("scroll", function()
{
var startScroll = $(window).scrollTop();
if ($( "#jsn-master" ).hasClass( "jsn-demo-page" ))
{
if (startScroll >= 300)
{
$( '#jsn-header' ).addClass( 'hasbg' );
}
else
{
$( '#jsn-header' ).removeClass( 'hasbg' );
}
}
});
//----------------------------------------
// Now the javascript has been setup this code triggers all the effects
$(document).ready( function()
{
/* Add class 'fullwidth' to element if in #jsn-master.jsn-demo-page */
// To make the promo area full width
if ($( "#jsn-master" ).hasClass( "jsn-demo-page" ))
{
$( '#jsn-promo-inner' ).addClass( 'fullwidth' );
$( '#jsn-content' ).addClass( 'fullwidth' );
setHeightToHeaderElement();
};
/* Fabulous tab news */
$('#tabs').tabulous({
effect: 'scale' // Available effects: scale, slideLeft, scaleUp, flip
});
/* Add timeout for animation */
// 'Back to', simplicity, the 6 grid with icons starting 'modern design'
setTimeout(function(){
$(".ping.title").addClass("pop");
},1000);
setTimeout(function(){
$(".ping.desc").addClass("pop");
},1200);
setTimeout(function(){
$(".ping.scroll-down").addClass("pop");
},4500);
/* Waypoint script to add action when scroll onto objects */
/* This effect brought by http://imakewebthings.com/jquery-waypoints/ */
// This sets the Waypoint triggers
// Waypoints is the easiest way to trigger a function when you scroll to an element.
// this adds a scrolling action to elements but not the 'counting up'
// delete the ones you dont use
$( 'a.scroll-down' ).waypoint(function()
{
$( 'a.scroll-down' ).addClass( 'scroll-action' );
}, {
offset: '25%'
})
$( '#welcome-to-jsn-mini' ).waypoint(function()
{
$( '#welcome-to-jsn-mini' ).addClass( 'scroll-action' );
}, {
offset: '75%'
})
$( '#demo-latest-projects' ).waypoint(function()
{
$( '#demo-latest-projects' ).addClass( 'scroll-action' );
}, {
offset: '70%'
})
$( '#demo-main-features' ).waypoint(function()
{
$( '#demo-main-features' ).addClass( 'scroll-action' );
}, {
offset: '70%'
})
$( '#demo-feature-graph' ).waypoint(function()
{
$( '#demo-feature-graph' ).addClass( 'scroll-action' );
}, {
offset: '70%'
})
/* CountUp Number by https://github.com/inorganik/countUp.js */
if ($('#jsn-master').hasClass('jsn-demo-page')) {
if (typeof(countUp) !== 'undefined')
{
var options = {
useEasing : true,
useGrouping : true,
separator : ',',
decimal : '.'
}
// set the counting up module numbers here
// ( Starting Number / Target Number / Number of decimals / Time to get to Final Number / Additional Options)
// ( startVal / endVal / decimals / duration / options )
var countup1 = new countUp("counting-1", 01, 36, 0, 5, options);
var countup2 = new countUp("counting-2", 01, 54, 0, 5, options);
var countup3 = new countUp("counting-3", 01, 12, 0, 5, options);
var countup4 = new countUp("counting-4", 01, 90, 0, 5, options);
}
$( '#demo-countingup-stats' ).waypoint(function()
{
$( '#demo-countingup-stats' ).addClass( 'scroll-action' );
countup1.start();
countup2.start();
countup3.start();
countup4.start();
}, {
offset: '80%'
})
}
/* Parallax Scrolling */
// this scolls the background images behind the modules
$('.demo-countingup-stats').attr('data-type', 'background');
$('.demo-countingup-stats').attr('data-speed', '3');
if ($( "#jsn-master" ).hasClass( "jsn-demo-page" ))
{
$('#jsn-content-top-below').attr('data-type', 'background');
$('#jsn-content-top-below').attr('data-speed', '3');
}
$('div[data-type="background"]').each(function(){
var $bgobj = $(this); // assigning the object
$window = $(window);
$(window).scroll(function() {
var yPos = -($window.scrollTop() / $bgobj.data('speed'));
// Put together our final background position
var coords = '50% '+ yPos + 'px';
// Move the background
$bgobj.css({ backgroundPosition: coords });
});
});
});
//----------------------------------------
})(jQuery);
}, 0);
HTML
<div id="demo-main-features" class="appearing">
<div class="grid-layout main-features">
<div class="grid-col">
<div class="feature-item">
<a href="#"><span class="jsn-icon-pencil-ruler"></span></a>
<h3 class="heading">Modern Design</h3>
<p class="desc">Flat design – currently growing in popularity</p>
</div>
</div>
<div class="grid-col">
<div class="feature-item">
<a href="#"><span class="jsn-icon-book"></span></a>
<h3 class="heading">Full Documentation</h3>
<p class="desc">JSN Mini is equipped with a very comprehensive documentation package that will help you with template utilization.</p>
</div>
</div>
<div class="grid-col">
<div class="feature-item">
<a href="#"><span class="jsn-icon-lightning"></span></a>
<h3 class="heading">Painless Configuration</h3>
<p class="desc">You can configure the template the way you like without special technical knowledge</p>
</div>
</div>
</div>
<div class="grid-layout main-features">
<div class="grid-col">
<div class="feature-item">
<a href="#"><span class="jsn-icon-eye"></span></a>
<h3 class="heading">Responsive design</h3>
<p class="desc">Special built-in design optimized for modern mobile devices such as iPhone, Android and Windows-based mobiles</p>
</div>
</div>
<div class="grid-col">
<div class="feature-item">
<a href="#"><span class="jsn-icon-equalizer"></span></a>
<h3 class="heading">Multi-language support</h3>
<p class="desc"> Currently, the template supports 14 languages for both front-end and back-end.</p>
</div>
</div>
<div class="grid-col">
<div class="feature-item">
<a href="#"><span class="jsn-icon-diamond"></span></a>
<h3 class="heading">Social media integrated</h3>
<p class="desc">You are free to integrate your social channels without digging into the code</p>
</div>
</div>
</div>
</div>
<div id="demo-latest-projects" class="appearing">
<h2 class="section-heading">Our latest projects</h2>
<div class="grid-layout latest-projects">
<div class="grid-col">
<div class="project-item">
<a href="/media/joomlashine/jsn-mini/custom-html/latest-projects/1.jpg" class="modal link-tooltip" style="z-index: 90;" rel="{handler: 'iframe', size: {x: 640, y: 440}}">
<img src="/media/joomlashine/jsn-mini/custom-html/latest-projects/1.jpg" alt="" />
</a>
</div>
</div>
<div class="grid-col">
<div class="project-item">
<a href="/media/joomlashine/jsn-mini/custom-html/latest-projects/2.jpg" class="modal link-tooltip" style="z-index: 90;" rel="{handler: 'iframe', size: {x: 640, y: 440}}">
<img src="/media/joomlashine/jsn-mini/custom-html/latest-projects/2.jpg" alt="" />
</a>
</div>
</div>
<div class="grid-col">
<div class="project-item">
<a href="/media/joomlashine/jsn-mini/custom-html/latest-projects/3.jpg" class="modal link-tooltip" style="z-index: 90;" rel="{handler: 'iframe', size: {x: 640, y: 440}}">
<img src="/media/joomlashine/jsn-mini/custom-html/latest-projects/3.jpg" alt="" />
</a>
</div>
</div>
<div class="grid-col">
<div class="project-item">
<a href="/media/joomlashine/jsn-mini/custom-html/latest-projects/4.jpg" class="modal link-tooltip" style="z-index: 90;" rel="{handler: 'iframe', size: {x: 640, y: 440}}">
<img src="/media/joomlashine/jsn-mini/custom-html/latest-projects/4.jpg" alt="" />
</a>
</div>
</div>
</div>
</div>
<div id="demo-tab-news">
<div id="tabs" class="clearfix">
<div id="tabs_container">
<div id="tabs-1">
<h3 class="news-title">Minimalist Style</h3>
<p>A style that uses pared-down design elements, removing everything in a piece, leaving just the necessary and needed elements</p>
</div>
<div id="tabs-2">
<h3 class="news-title">130+ font-icons for many purposes</h3>
<p>JSN Mini is also the first JoomlaShine template with 130+ outstanding font icons for you to choose from.</p>
</div>
<div id="tabs-3">
<h3 class="news-title">Extended style for three extensions</h3>
<p>JSN Mini is well-crafted with extended styles for three extensions: Advanced Portfolio from ExtStore, Kunena and K2.</p>
</div>
<div id="tabs-4">
<h3 class="news-title">Joomla! 2.5 &3.x Compatibility</h3>
<p>Natively compatible with Joomla! 2.5 & Joomla! 3.x versions</p>
</div>
<div id="tabs-5">
<h3 class="news-title">Sticky menu </h3>
<p>Sticky menu makes websites quicker to navigate.</p>
</div>
</div><!--End tabs container-->
<ul class="tabs_title">
<li><a href="#tabs-1" title="">Minimalist Style</a></li>
<li><a href="#tabs-2" title="">130+ font-icons for many purposes</a></li>
<li><a href="#tabs-3" title="">Extended style for three extensions</a></li>
<li><a href="#tabs-4" title="">Joomla! 2.5 &3.x Compatibility</a></li>
<li><a href="#tabs-5" title="">Sticky menu </a></li>
</ul>
</div><!--End tabs-->
</div>
<div id="demo-feature-graph" class="appearing">
<div class="grid-layout feature-graph">
<div class="grid-col">
<div class="graph-item item1 clearfix">
<div class="graph-item-inner">
<a href="#" class="jsn-icon-cup"></a>
<div class="text">
<h3 class="heading"><a href="#">Easy to start</a></h3>
<p class="desc">JSN PowerAdmin facilitates delightful management and customization your Joomla website with ease and joy.</p>
</div>
</div>
</div>
</div>
<div class="grid-col">
<div class="graph-item item2 clearfix">
<div class="graph-item-inner">
<a href="#" class="jsn-icon-basketball"></a>
<div class="text">
<h3 class="heading"><a href="#">SEO Optimized</a></h3>
<p class="desc">Pure html override and 2-1-3 ordered content presentation help search engines easily crawl the site.</p>
</div>
</div>
</div>
</div>
</div>
<div class="grid-layout feature-graph">
<div class="grid-col">
<div class="graph-item item3 clearfix">
<div class="graph-item-inner">
<a href="#" class="jsn-icon-handspeaker"></a>
<div class="text">
<h3 class="heading"><a href="#">Various Colors</a></h3>
<p class="desc">6 color variations including blue, red, green, violet, orange and grey.</p>
</div>
</div>
</div>
</div>
<div class="grid-col">
<div class="graph-item item4 clearfix">
<div class="graph-item-inner">
<a href="#" class="jsn-icon-command"></a>
<div class="text">
<h3 class="heading"><a href="#">Portfolio Design</a></h3>
<p class="desc">JSN Mini is dedicated to portfolio websites.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="demo-countingup-stats" class="appearing">
<div class="grid-layout countingup-stats">
<div class="grid-col">
<div class="stat-group">
<h3 class="heading"><a href="#">Our Team</a></h3>
<h4 class="sub-heading">Powered by</h4>
<div id="counting-1" class="counting-number">01</div>
<p class="desc">Soldiers</p>
</div>
</div>
<div class="grid-col">
<div class="stat-group">
<h3 class="heading"><a href="#">Works</a></h3>
<h4 class="sub-heading">Done</h4>
<div id="counting-2" class="counting-number">01</div>
<p class="desc">Projects</p>
</div>
</div>
<div class="grid-col">
<div class="stat-group">
<h3 class="heading"><a href="#">Design</a></h3>
<h4 class="sub-heading">Winning</h4>
<div id="counting-3" class="counting-number">01</div>
<p class="desc">Awards</p>
</div>
</div>
<div class="grid-col">
<div class="stat-group">
<h3 class="heading"><a href="#">Client</a></h3>
<h4 class="sub-heading">Quantity</h4>
<div id="counting-4" class="counting-number">01</div>
<p class="desc">And more</p>
</div>
</div>
</div>
</div>
Notes
- The code is untouched from the JSN Mini Template
- This is for reference only aas these modules have be made standalone elsewhere in the KB
- You need to add the page suffix jsn-demo-page to get this working or
- you can wrap the code in
<div class="jsn-mobile jsn-demo-page"> </div>
- This code is not 100% working, use the standalone version of the modules if you want them.
- Instuctions on those articles hold the information on how to get the missing icons and other broken things working