-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.hbs
60 lines (56 loc) · 2.73 KB
/
index.hbs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>{{title}}</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link href="css/main.css" rel="stylesheet">
</head>
<body class="text-center homepage">
<div id="blurred-bg" style="height: 100%; width: 100%; position: fixed; z-index: -1; opacity: 0; background-image: none; background-position: initial initial; background-repeat: initial initial;">
<div class="backstretch" style="left: 0px; top: 0px; overflow: hidden; margin: 0px; padding: 0px; height: 667px; width: 1278px; z-index: -999998; position: absolute;">
<img src="{{background-image}}" clas="position: absolute; margin: 0px; padding: 0px; border: none; width: 1278px; height: 719.088px; max-height: none; max-width: none; z-index: -999999; left: 0px; top: -26.043999999999983px;">
</div>
</div>
<div style="width:200px; height:270px;"></div>
<h1 style="color: {{title-color}};">{{title}}</h1>
<h3 style="color: {{sub-title-color}}">{{sub-title}}</h3>
<div id="content" class="container" style="color:#fff; background-color:rgba(0, 0, 0, 0.8); padding: 25px; border-radius: 5px;">
{{#each section}}
<div class="row">
<h2 style="color: white; margin-bottom:20px">{{this.section-title}}</h2>
{{#each this.person}}
<div class="person col-xs-6 col-sm-4 col-height">
<img src="{{this.img-src}}" class="img-circle" style="width: 150px; height:150px;">
<div style="width:20px; height:10px;"></div>
<p><b>{{{this.name}}}</b></p>
<p style="height:60px; overflow: auto;">{{{this.content}}}</p>
</div>
{{/each}}
</div>
<div style="width: 50px; height:50px;"></div>
{{/each}}
</div>
<div style="width:100%; height:100px; float:none;"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js" type="text/javascript"></script>
<script type="text/javascript">
var img_src = $(".backstretch").find("img").attr("src");
$.backstretch([img_src]);
$("#blurred-bg").backstretch([img_src]);
var blurBackground = function(e){
var s = $(window).scrollTop(),
opacityVal = (s / 150.0);
$('#blurred-bg').css('opacity', opacityVal);
}
// blur background when window is scrolled down
$(window).scroll(blurBackground);
// blur background when window is swiped down
$('body').on({'touchmove': blurBackground});
</script>
</body>
</html>