Changes

7

web

0

New 2019 test

jQuery('.commerceProductsOrderBox').insertBefore('div.mainContent > h1')

none

<!doctype html>

<html lang="en">

	<head>

		<title></title>

		<meta charset="utf-8">

		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<meta name="viewport" content="width=device-width, initial-scale=1">

		<!-- Fonts-->

		<link href="https://fonts.googleapis.com/css?family=Asap:400,400i,700,700i&amp;subset=latin-ext" rel="stylesheet">

			

		<link href="https://fonts.googleapis.com/css?family=Calligraffitti" rel="stylesheet" type="text/css" />

		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

		<link rel="stylesheet" href="/media/website_designs/7/css/bootstrap.min.css" />

		<link rel="stylesheet" href="/media/website_designs/7/css/flickity.css" media="screen"/>

		<link rel="stylesheet" href="/media/website_designs/7/css/style.css" />

		

		<link rel="apple-touch-icon" sizes="57x57" href="/media/website_designs/7/img/favi/apple-icon-57x57.png" />

		<link rel="apple-touch-icon" sizes="60x60" href="/media/website_designs/7/img/favi/apple-icon-60x60.png" />

		<link rel="apple-touch-icon" sizes="72x72" href="/media/website_designs/7/img/favi/apple-icon-72x72.png" />

		<link rel="apple-touch-icon" sizes="76x76" href="/media/website_designs/7/img/favi/apple-icon-76x76.png" />

		<link rel="apple-touch-icon" sizes="114x114" href="/media/website_designs/7/img/favi/apple-icon-114x114.png" />

		<link rel="apple-touch-icon" sizes="120x120" href="/media/website_designs/7/img/favi/apple-icon-120x120.png" />

		<link rel="apple-touch-icon" sizes="144x144" href="/media/website_designs/7/img/favi/apple-icon-144x144.png" />

		<link rel="apple-touch-icon" sizes="152x152" href="/media/website_designs/7/img/favi/apple-icon-152x152.png" />

		<link rel="apple-touch-icon" sizes="180x180" href="/media/website_designs/7/img/favi/apple-icon-180x180.png" />

		<link rel="icon" type="image/png" sizes="192x192" href="/media/website_designs/7/img/favi/android-icon-192x192.png" />

		<link rel="icon" type="image/png" sizes="32x32" href="/media/website_designs/7/img/favi/favicon-32x32.png" />

		<link rel="icon" type="image/png" sizes="96x96" href="/media/website_designs/7/img/favi/favicon-96x96.png" />

		<link rel="icon" type="image/png" sizes="16x16" href="/media/website_designs/7/img/favi/favicon-16x16.png" />

		<link rel="manifest" href="/media/website_designs/7/img/favi/manifest.json" />

		<meta name="msapplication-TileColor" content="#ffffff">

		<meta name="msapplication-TileImage" content="/media/website_designs/7/img/favi/ms-icon-144x144.png">

		<meta name="theme-color" content="#ffffff">

				

	<script> 

		jQuery(function($) { 

		//caches a jQuery object containing the header element 

		var lastScrollTop = 0;

		var menu = $(".menuContainer"); 

		var logo = $(".logoContainer"); 



			$(window).scroll(function() {

				var st = $(this).scrollTop();

				if (st > lastScrollTop) { 

					menu.addClass("whitebg"); 

					logo.addClass("shrink"); 

				} else { 

					menu.removeClass("whitebg");

					logo.removeClass("shrink");

				} 

				lastScrollTop = st;

				}); 

			}); 

	

	</script>

		

	</head>

	<body>

		<ss:navigation:mobile id="mobile_nav" autopopulatelevel="2" rootpage="/2019-test/">

			<ss:navigation:item at="start" page="/tropic/">

				<i class="fa fa-home"></i>

			</ss:navigation:item>

			<ss:navigation:item at="end" page="/commerce/order/" autopopulatelevel="0" >

				<i class="fa fa-shopping-cart"></i>

			</ss:navigation:item>

			<ss:navigation:item at="end" autopopulatelevel="0" >

				<ss:standard:link opendialogid="search_popup">

					<i class="fa fa-search"></i>

				</ss:standard:link>

			</ss:navigation:item>

			<ss:navigation:item at="end" page="tel:(021) 431 0677" autopopulatelevel="0" >

				<i class="fa fa-phone"></i>  Call today!

			</ss:navigation:item>

		</ss:navigation:mobile>

			<div class="menuContainer fixed-top">

				<div class="container navbar ">

					<div class="centered menuHeight">

						<div class="logoContainer hidden-xs hidden-sm">

							<ss:standard:image src="/media/website_designs/7/img/logo.png" alt="" width="100%" />

						</div>

						<div class="logoSmallContainer hidden-md hidden-lg">

							<ss:standard:image src="/media/website_designs/7/img/logoSmall2.png" alt="" width="100%" />

						</div>	

						<div class="centered hidden-sm">

							<ss:navigation:primary openonhover="true" class="horNav" id="main-Menu" rootpage="/2019-test/" autopopulatelevel="2" classlicurrent="selected" orientation="horizontal" includeparentpagelevel="0" >

							</ss:navigation:primary>

						</div>

						<div class="rightMenu centered">

							<i class="fas fa-search"></i>

							<i class="fab fa-facebook-f"></i>

							<i class="fab fa-instagram"></i>

							<a href="/commerce/order/"><i class="fas fa-shopping-bag"></i></a>

							<i class="fa fa-bars hidden-md hidden-lg"></i>

						</div>				

					</div>

				</div>	

			</div>

		<div class="fullheightGreen">

			<div class="container padding-top120 fullheight">

				<div class="flexheight fullheight">

					<div class="slider">

					

					</div>

					<div class="subslider">

						<div class="row resize">

							<div class="col-xs-4">

								<h3>Lorem</h3>

								<p>

									ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis, urna at bibendum finibus, lacus tortor finibus ipsum, id elementum

									lacus tortor vitae magna. Donec mattis nibh at felis mattis ullamcorper. Aliquam et semper elit. Nunc id euismod nisl. Fusce sollicitudin

									elit eu arcu finibus viverra. Nulla facilisi. Duis maximus dolor turpis, in vestibulum erat tristique sed. In auctor nisl at nibh pharetra

									vehicula. Nulla lectus leo, consequat id dignissim eu, auctor vitae arcu.

								</p>

							</div>

							<div class="col-xs-4">

								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis, urna at bibendum finibus, lacus tortor finibus ipsum, id elementum lacus tortor vitae magna. Donec mattis nibh at felis mattis ullamcorper. Aliquam et semper elit. Nunc id euismod nisl. Fusce sollicitudin elit eu arcu finibus viverra. Nulla facilisi. Duis maximus dolor turpis, in vestibulum erat tristique sed. In auctor nisl at nibh pharetra vehicula. Nulla lectus leo, consequat id dignissim eu, auctor vitae arcu.</p>

							</div>

							<div class="col-xs-4">

								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis, urna at bibendum finibus, lacus tortor finibus ipsum, id elementum lacus tortor vitae magna. Donec mattis nibh at felis mattis ullamcorper. Aliquam et semper elit. Nunc id euismod nisl. Fusce sollicitudin elit eu arcu finibus viverra. Nulla facilisi. Duis maximus dolor turpis, in vestibulum erat tristique sed. In auctor nisl at nibh pharetra vehicula. Nulla lectus leo, consequat id dignissim eu, auctor vitae arcu.</p>

							</div>

						</div>

					</div>

				</div>

			</div>

		</div>

		<div class="container fullheightBlue">

			<div class="row">

				<div class="col-xs-4">

					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis, urna at bibendum finibus, lacus tortor finibus ipsum, id elementum lacus tortor vitae magna. Donec mattis nibh at felis mattis ullamcorper. Aliquam et semper elit. Nunc id euismod nisl. Fusce sollicitudin elit eu arcu finibus viverra. Nulla facilisi. Duis maximus dolor turpis, in vestibulum erat tristique sed. In auctor nisl at nibh pharetra vehicula. Nulla lectus leo, consequat id dignissim eu, auctor vitae arcu.</p>

				</div>

				<div class="col-xs-4">

					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis, urna at bibendum finibus, lacus tortor finibus ipsum, id elementum lacus tortor vitae magna. Donec mattis nibh at felis mattis ullamcorper. Aliquam et semper elit. Nunc id euismod nisl. Fusce sollicitudin elit eu arcu finibus viverra. Nulla facilisi. Duis maximus dolor turpis, in vestibulum erat tristique sed. In auctor nisl at nibh pharetra vehicula. Nulla lectus leo, consequat id dignissim eu, auctor vitae arcu.</p>

				</div>

				<div class="col-xs-4">

					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis, urna at bibendum finibus, lacus tortor finibus ipsum, id elementum lacus tortor vitae magna. Donec mattis nibh at felis mattis ullamcorper. Aliquam et semper elit. Nunc id euismod nisl. Fusce sollicitudin elit eu arcu finibus viverra. Nulla facilisi. Duis maximus dolor turpis, in vestibulum erat tristique sed. In auctor nisl at nibh pharetra vehicula. Nulla lectus leo, consequat id dignissim eu, auctor vitae arcu.</p>

				</div>

			</div>

		</div>

		

		<script src="/media/website_designs/7/js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>

		<script src="/media/website_designs/7/js/vendor/bootstrap.min.js"></script>

		<script src="/media/website_designs/7/js/jquery.flexisel.js"></script>

		<script src="/media/website_designs/7/js/main.js"></script>

		<script src="/media/website_designs/7/js/flickity.pkgd.min.js"></script>

		

		<ss:standard:script at="head" includejquery="true" />

	</body>

</html>

body {

	font-family: 'Asap', sans-serif;

	height: 100%;

	position:absolute;

 	width: 100%;

 	height: 100%;

  	margin: 0px;

  	padding: 0px;

}



/*  ___________________________________ Fonts  ___________________________________ */



#main-content-area h1,

h1 {

    font-size: 65px;

	font-weight: 700;

}



#main-content-area h2, h2 {

	font-size:45px;

	margin:30px 0;

	font-style: italic;

}



#main-content-area h3,

h3 {

    font-size: 28px;

    line-height: 32px;

}



#main-content-area h4,

h4 {

    font-size: 30px;

	font-style: italic;

}



#main-content-area h5,

h5 {

    font-weight: 700;

    font-style: italic;

    font-size: 24px;

    margin-bottom: 20px;

    line-height: 22px;

}



#main-content-area p,

p {

    font-weight: 300;

    font-size: 20px;

    margin-bottom: 20px;

    line-height: 22px;

}





/*  ___________________________________ menu  ___________________________________ */



.menuContainer {	

}

.menuHeight {

	height:96px;

}

.navbar {

	margin-bottom:0px;

}

.fixed-top {

	position: fixed;

	width:100%;

	z-index:10;

	-webkit-transition: all 0.4s ease;

    transition: all 0.4s ease;

}

.whitebg {

	background-color:white;

}

.logoContainer {

	width:260px;

}

.logoSmallContainer {

	width:77px;

}

.rightMenu > * {

	color: #333;

	margin-left:15px;

	font-size:16px;

}

.rightMenu {

	margin-right:10px;



}



#main-Menu li a{

	padding-right:15px;

	color: #333;

	font-size:16px;

}

.s8-navigationPrimaryMobile {

	display:none;

}



/*  ___________________________________ slider  ___________________________________ */



.slider {

	background-color:white;

	width:100%;

	height:300px;

	border-radius:50px;

	min-height:100px;

}



/*  ___________________________________ magins & paddings ___________________________________ */

.padding-top120 {

	padding-top:120px;

}



/*  ___________________________________ flex layout  ___________________________________ */



.flexheight {

  display: flex; /* or inline-flex */

  flex-direction:column;

  justify-content: space-between;

}



/*  ___________________________________ Content  ___________________________________ */



.fullheight {

	height: 100%; 

}



.fullheightGreen {

	background: rgb(255,234,253);

	background: linear-gradient(129deg, rgba(255,234,253,1) 0%, rgba(206,249,245,1) 100%);

  	min-height: 100%; 

	height: 100%; 

}

.fullheightBlue {

  background-color: blue;

  min-height: 100%; 

}

.centered {

    display: flex;

    align-items: center;

	flex-direction: row; 

	justify-content: space-between;

	transition: all 0.4s ease;

}

.bluediv {

	width:200px;

	background-color: blue;

	padding:20px;

	margin-left:10px;

}



/*  ___________________________________ RESPONSIVE BREAKPOINT STYLES ___________________________________ */





@media screen and (max-width:991px) {



	.rightMenu > * {

	color: #333;

	margin-left:30px;

	font-size:20px;

	}

	.logoSmallContainer {

    	width: 90px;

	}

	.resize {

		width:70%;

		font-size: 25px;

	}

		#main-content-area h3, h3 {

	    font-size: 19px;

	    line-height: 21px;

	}

}

@media screen and (max-width: 767px) {



}