~franz/germanwindows.com.my

1458ded75b6ffd52afe99c71c5af9a7246fd6bd8 — Franz Geffke 3 years ago a843578
landing page goes live, mobile fixes frontpage
M _includes/footer.html => _includes/footer.html +31 -18
@@ 73,9 73,11 @@
{% else %}
<script src="/assets/js/bundle.min.js"></script>
{% endif %}

{% if page.vue == "true" %}
<script src="/assets/js/vue.min.js"></script>
{% endif %}

{% if page.cover %}
<style>
.cover-bg {


@@ 90,24 92,28 @@
  </style>
{% else %}
<script>
var classCycle=['bg1','bg2','bg3','bg4','bg5','bg6','bg7','bg8','bg9','bg10','bg11'];
var randomNumber = Math.floor(Math.random() * classCycle.length);
var classToAdd = classCycle[randomNumber];
$('.cover-bg').addClass(classToAdd);
	var classCycle=['bg1','bg2','bg3','bg4','bg5','bg6','bg7','bg8','bg9','bg10','bg11'];
	var randomNumber = Math.floor(Math.random() * classCycle.length);
	var classToAdd = classCycle[randomNumber];
	$('.cover-bg').addClass(classToAdd);
</script>
{% endif %}

{% unless page.url == "/landing/promotion/" %}
<script>
var myLazyLoad = new LazyLoad();
	var myLazyLoad = new LazyLoad();
</script>
{% endunless %}

{% if page.url == "/soundproofing/" %}
<script src="/assets/js/player.min.js"></script>
{% endif %}

{% if page.url contains "videos" or page.url contains "burglar-resistant-entrance-doors" %}
<link href="/assets/css/video-js.min.css" rel="stylesheet">
<script src="/assets/js/video.min.js"></script>
{% endif %}

{% if page.url contains "projects" %}
<script type="text/javascript">
$(window).load(function () {


@@ 117,6 123,7 @@ $(window).load(function () {
});
</script>
{% endif %}

{% if page.feature contains "slider" %}
<script>
$('.projects').slick({


@@ 140,6 147,7 @@ $('.projects').slick({
});
</script>
{% endif %}

{% if page.url contains "/westag-getalit-premium-interior-doors/" or page.url contains "/landing/premium-interior-door/" %}
<script>
$('.westag-getalit-premium-interior-doors').slick({


@@ 170,6 178,7 @@ $('.westag-getalit-premium-interior-doors').slick({
});
</script>
{% endif %}

{% if page.url contains "type" %}
<script>
$('.designs').slick({


@@ 182,6 191,7 @@ $('.designs').slick({
});
</script>
{% endif %}

{% if page.url == "/window-replacement/condominium/" %}
<script src='https://api.mapbox.com/mapbox.js/v3.1.0/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.1.0/mapbox.css' rel='stylesheet' />


@@ 235,6 245,21 @@ $('.designs').slick({
    mapPopupsJS.scrollWheelZoom.disable();
</script>
{% endif %}

{% unless page.url contains "/landing/" %}
<script>
	$(window).load( function(){
		$.preloadImages = function() {
			for (var i = 0; i < arguments.length; i++) {
				$("<img />").attr("src", arguments[i]);
			}
		}
		$.preloadImages({% for page in site.pages %}{% unless page.cover == nil %}"/assets/images/{{ page.cover }}.jpg"{% unless forloop.last %},{% endunless %}{% endunless %}{% endfor %}
	);
	});
</script>
{% endunless %}

<script type="text/javascript">
  var _paq = _paq || [];
  _paq.push(['trackPageView']);


@@ 247,6 272,7 @@ $('.designs').slick({
    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
  })();
</script>

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),


@@ 257,19 283,6 @@ $('.designs').slick({
  ga('send', 'pageview');
</script>

{% unless page.url contains "/landing/" %}
<script>
$(window).load( function(){
  $.preloadImages = function() {
    for (var i = 0; i < arguments.length; i++) {
      $("<img />").attr("src", arguments[i]);
    }
  }
  $.preloadImages({% for page in site.pages %}{% unless page.cover == nil %}"/assets/images/{{ page.cover }}.jpg"{% unless forloop.last %},{% endunless %}{% endunless %}{% endfor %}
);
});
</script>
{% endunless %}
{% unless page.chat == false %}
<script type="text/javascript">


M _includes/navigation.html => _includes/navigation.html +14 -1
@@ 44,11 44,24 @@
        </div>
      </nav>
    </div>
    {% if page.cover == "bg_promo" %}
    <div class="page-title{% if page.subtitle %} subtitle{% endif %}">
      <div class="container promo">
        <a href="/landing/promotion/">
          <span class="line l1">11% off on any order</span>
          <span class="line l2">11.11</span>
          <span class="line l3">SPECIAL</span>
          <span class="line l4">From 1/11 - 30/11/2018</span>
        </a>
      </div>
    </div>
    {% else %}
    <div class="page-title{% if page.subtitle %} subtitle{% endif %}">
      <div class="container">
        <h1><span>{% if page.page-title %}{{ page.page-title | escape }}{% else %}{{ page.title | escape }}{% endif %}</span></h1>
        {% if page.subtitle %}<h1 class="sub"><span>{{ page.subtitle }}</span></h1>{% endif %}
      </div>
    </div>
    {% endif %}
  </div>
</div>
</div>
\ No newline at end of file

M gulpfile.js => gulpfile.js +2 -1
@@ 72,7 72,8 @@ gulp.task('css', function () {
		'node_modules/slick-carousel/slick/slick.css',
		'node_modules/swipebox/src/css/swipebox.css',
		'src/slideout.css',
		'src/custom.css'
		'src/custom.css',
		'src/custom-promo.css'
	])
			.pipe(concat('custom.min.css'))
			.pipe(cleanCss())

M index.html => index.html +3 -18
@@ 5,7 5,7 @@ description: "Q-Windows manufactures and installs German soundproof, high-securi
image: sharing_cover.jpg
subtitle: "- the original"
layout: default
cover: bg36
cover: bg_promo
type: index
---



@@ 38,24 38,7 @@ type: index
    </div>
  </div>
</div>
<!--
<div class="section orange color">
  <div class="container">
    <h2>Q-Windows Spring Promotion 2018
    <br><small>German Quality, Local Price</small></h2>

    <ul class="clean">
      <li><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Premium manufactured hardware</li>
      <li><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> 10.76 mm Soundproof Glazing</li>
      <li><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> 50mm strong Aluminium profile</li>
      <li><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Professional installation</li>
    </ul>

    <p><a class="large link" href="/contact/">Request your customized offer</a></p>

  </div>
</div>
-->
<div class="container content">
  <div class="section">



@@ 91,6 74,7 @@ type: index
    </div>

  </div>

  <div class="section">

    <h3>Latest News</h3>


@@ 101,4 85,5 @@ type: index
    {% endfor %}

  </div>

</div>

M landing/promotion.html => landing/promotion.html +0 -90
@@ 70,7 70,6 @@ chat: false

</div>

<!-- it's here in order to avoid CSS being cached. -->
<style>
	#panel {
		background: url(/assets/images/bg_promo.jpg);


@@ 82,93 81,4 @@ chat: false
		margin-top: 0px;
		margin-bottom: 0px;
	}
	.parsley-custom-error-message, .parsley-errors-list .parsley-required, .parsley-type {
		color: #fff;
		font-weight: bold;
		line-height: 20px;
	}
	.promo {
		text-align: center;
	}
	.promo .form {
		margin-top: 30px;
		margin-bottom: 30px;
		line-height: 32px;
	}
	.promo .form .btn-default {
		width: 100%;
		font-weight: bold;
	}
	.promo .glyphicon {
		font-size: 30px;
		color: #e4450d;
		border-radius: 40px;
		border: 10px solid #f14c0d;
		background: #fff;
		width: 80px;
		height: 80px;
		padding-top: 16px;
	}
	.promo .line {
		color: #fff;
		font-weight: 900;
		display: block;
		width: 100%;
	}
	.promo .line.l1 {
		font-size: 80px;
		margin-top: 40px;
	}
	.promo .line.text {
		font-size: 20px;
		line-height: 40px;
	}
	.promo .line.l2 {
		font-size: 100px;
		margin-top: 30px;
	}
	.promo .line.l3 {
		font-size: 60px;
	}
	.promo .line.l4 {
		font-size: 30px;
	}
	@media (max-width: 970px) {
		.promo {

		}
		.promo .glyphicon {
			margin-top: 12px;
			margin-bottom: 30px;
		}
		.promo .line.l1 {
			font-size: 26px;
		}
		.promo .line.text {
			font-size: 20px;
			line-height: 26px;
			margin-top: 10px;
		}
		.promo .line.l2 {
			line-height: 60px;
		}
		.promo .line.l4 {
			font-size: 22px;
		}
	}
	@media (min-width: 970px) {
		.promo .glyphicon {
			margin-top: 110px;
		}
		.promo {
			line-height: 82px;
		}
		.promo .form .btn-default {
			font-size: 18px;
		}
		.promo .line.l4 {
			font-size: 30px;
			margin-bottom: 30px;
		}
	}
</style>
\ No newline at end of file

A src/custom-promo.css => src/custom-promo.css +98 -0
@@ 0,0 1,98 @@
.promo .parsley-custom-error-message, .promo .parsley-errors-list .parsley-required, .promo .parsley-type {
	color: #fff;
	font-weight: bold;
	line-height: 20px;
}
.promo {
	text-align: center;
}
.promo .form {
	margin-top: 30px;
	margin-bottom: 30px;
	line-height: 32px;
}
.promo .form .btn-default {
	width: 100%;
	font-weight: bold;
}
.promo .glyphicon {
	font-size: 30px;
	color: #e4450d;
	border-radius: 40px;
	border: 10px solid #f14c0d;
	background: #fff;
	width: 80px;
	height: 80px;
	padding-top: 16px;
}
.promo .line {
	color: #fff;
	font-weight: 900;
	display: block;
	width: 100%;
}
.promo .line.l1 {
	font-size: 80px;
	margin-top: 40px;
}
.promo .line.text {
	font-size: 20px;
	line-height: 40px;
}
.promo .line.l2 {
	font-size: 100px;
	margin-top: 30px;
}
.promo .line.l3 {
	font-size: 60px;
}
.promo .line.l4 {
	font-size: 30px;
}

@media (max-width: 970px) {
	.cover-bg {
		min-height: 500px;
		background-color: #888888;
	}
	img.innovative-product-award {
		margin-top: 400px;
	}
	.promo {

	}
	.promo .glyphicon {
		margin-top: 12px;
		margin-bottom: 30px;
	}
	.promo .line.l1 {
		font-size: 26px;
	}
	.promo .line.text {
		font-size: 20px;
		line-height: 26px;
		margin-top: 10px;
	}
	.promo .line.l2 {
		line-height: 60px;
	}
	.promo .line.l4 {
		font-size: 22px;
	}
}

@media (min-width: 970px) {
	.promo .glyphicon {
		margin-top: 110px;
	}
	.promo {
		line-height: 82px;
	}
	.promo .form .btn-default {
		font-size: 18px;
	}
	.promo .line.l4 {
		font-size: 30px;
		margin-bottom: 30px;
	}
}
\ No newline at end of file