-
Notifications
You must be signed in to change notification settings - Fork 0
/
home.php
118 lines (104 loc) · 7.45 KB
/
home.php
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<?php include 'includes/header.php'; ?>
<div class="container-fluid m-0 p-0">
<div class="row min-700 min--100 p-5 m-0 min-100 text-light" style="background: linear-gradient(rgba(0,0,0, 0.7), rgba(0,0,0, 0.7)), url(http://neilw22.github.io/neilwhitford/images/neil_front.jpg) center bottom; background-size: cover;">
<div class="col-lg-12 d-flex flex-column justify-content-center align-items-start rellax">
<span class="display-1 stroke-white bounce-in-top">
<i class="fa fa-asterisk"></i>
</span>
<h1 style="line-height: 75%;" class="display-2 font-weight-bold m-0 tracking-in-expand">Neil
<span class="text-success">Whitford</span>
<span class="d-table text-focus-in">Guitarist.</span>
<span class="d-table text-focus-in">Producer.</span>
<span class="d-table text-focus-in">Educator.</span>
</h1>
</div>
</div>
<!-- about -->
<div class="row min-700 min--100 relative p-5 m-0 bg-success text-light" style="background: linear-gradient(rgba(20, 207, 160, 0.9), rgba(20, 207, 160, 0.9)), url(http://bighornsheepband.com/img/bhs-whitford-3.jpg) center; background-size: cover;">
<div class="absolute z-0 left bg-github rellax" style="width: 400px; height: 400px; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);" data-rellax-speed="1"></div>
<div class="absolute z-0 left bg-success rellax" style="width: 300px; height: 300px; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);" data-rellax-speed="2"></div>
<div class="col-lg-6 d-flex flex-column justify-content-center align-items-start">
<h1 class="display-1 font-weight-bold m-0 tracking-in-expand">About.</h1>
</div>
<div class="col-lg-6 d-flex flex-column justify-content-center align-items-start">
<p class="h3 border-left pl-3">Neil Whitford is a prolific guitarist and multi-genre composer, songwriter and producer from Toronto, Ontario</p>
<a href="/about.php">
<button class="btn btn-lg btn-outline-light rounded-0 mt-3">
<span class="h5">Read more</span>
</button>
</a>
</div>
</div>
<!-- guitarist -->
<div class="row min-700 min--100 relative p-5 m-0 bg-dribble text-light" style="background: linear-gradient(rgba(234, 76, 137, 0.9), rgba(234, 76, 137, 0.9)), url(http://bighornsheepband.com/img/bhs-whitford-2.jpg) center; background-size: cover;">
<div class="absolute z-0 left bg-success rellax" style="width: 400px; height: 400px; clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);" data-rellax-speed="1"></div>
<div class="absolute z-0 left bg-dribble rellax" style="width: 300px; height: 300px; clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);" data-rellax-speed="2"></div>
<div class="col-lg-6 d-flex flex-column justify-content-center align-items-start">
<h1 class="display-1 font-weight-bold m-0 tracking-in-expand">Guitarist.</h1>
</div>
<div class="col-lg-6 d-flex flex-column justify-content-center align-items-start">
<p class="h3 border-left pl-3">Neil Whitford is a prolific guitarist and multi-genre composer, songwriter and producer from Toronto, Ontario</p>
<a href="/guitarist.php">
<button class="btn btn-lg btn-outline-light rounded-0 mt-3">
<span class="h5">Read more</span>
</button>
</a>
</div>
</div>
<!-- producer -->
<div class="row min-700 min--100 relative p-5 m-0 bg-cream text-dark" style="background: linear-gradient(rgba(245, 235, 225, 0.9), rgba(245, 235, 225, 0.9)), url(/assets/img/neil_mixing.jpg) center; background-size: cover;">
<div class="absolute z-0 left bg-dribble rellax" style="width: 400px; height: 400px; clip-path: inset(5% 20% 15% 10%);" data-rellax-speed="1"></div>
<div class="absolute z-0 left bg-cream rellax" style="width: 300px; height: 300px; clip-path: inset(5% 20% 15% 10%);" data-rellax-speed="2"></div>
<div class="col-lg-6 d-flex flex-column justify-content-center align-items-start">
<h1 class="display-1 font-weight-bold m-0 tracking-in-expand">Producer.</h1>
</div>
<div class="col-lg-6 d-flex flex-column justify-content-center align-items-start">
<p class="h3 border-left border-dark pl-3">Neil Whitford is a prolific guitarist and multi-genre composer, songwriter and producer from Toronto, Ontario</p>
<a href="/producer.php">
<button class="btn btn-lg btn-outline-dark rounded-0 mt-3">
<span class="h5">Read more</span>
</button>
</a>
</div>
</div>
<!-- educator -->
<div class="row min-700 min--100 relative p-5 m-0 text-light" style="background: linear-gradient(rgba(0, 87, 255, 0.9), rgba(0, 87, 255, 0.9)), url(https://s3.amazonaws.com/teacher-files-musicteachershelper-com/13075/_JM20074.jpg) center; background-size: cover;">
<div class="absolute z-0 left bg-warning rellax" style="width: 400px; height: 400px; clip-path: polygon(50% 0%, 0% 100%, 100% 100%);" data-rellax-speed="1"></div>
<div class="absolute z-0 left bg-behance rellax" style="width: 300px; height: 300px; clip-path: polygon(50% 0%, 0% 100%, 100% 100%);" data-rellax-speed="2"></div>
<!-- <div class="absolute z-0 left bg-info rellax" style="width: 300px; height: 300px; clip-path: circle(50% at 50% 50%);" data-rellax-speed="2"></div> -->
<div class="col-lg-6 d-flex flex-column justify-content-center align-items-start">
<h1 class="display-1 font-weight-bold m-0 tracking-in-expand">Educator.</h1>
</div>
<div class="col-lg-6 d-flex flex-column justify-content-center align-items-start">
<p class="h3 border-left pl-3">Neil Whitford is a prolific guitarist and multi-genre composer, songwriter and producer from Toronto, Ontario</p>
<a href="/educator.php">
<button class="btn btn-lg btn-outline-light rounded-0 mt-3">
<span class="h5">Read more</span>
</button>
</a>
</div>
</div>
<!-- contact -->
<div class="row min-700 min--100 relative p-5 m-0 text-light" style="background: linear-gradient(rgba(163, 132, 255, 0.9), rgba(163, 132, 255, 0.9)), url(https://images.unsplash.com/photo-1516315973067-166cf84425bc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80) center; background-size: cover;">
<div class="absolute z-0 left bg-success rellax" style="width: 400px; height: 400px; clip-path: circle(50% at 50% 50%);" data-rellax-speed="1"></div>
<div class="absolute z-0 left bg-dribble rellax" style="width: 300px; height: 300px; clip-path: circle(50% at 50% 50%);" data-rellax-speed="2"></div>
<div class="col-lg-6 d-flex flex-column justify-content-center align-items-start">
<h1 class="display-1 font-weight-bold m-0 tracking-in-expand">Contact.</h1>
</div>
<div class="col-lg-6 d-flex flex-row justify-content-start align-items-center">
<span class="display-1 stroke-white pr-5">
<i class="fa fa-facebook"></i>
</span>
<span class="display-1 stroke-white pr-5">
<i class="fa fa-instagram"></i>
</span>
<span class="display-1 stroke-white pr-5">
<i class="fa fa-linkedin"></i>
</span>
<span class="display-1 stroke-white pr-5">
<i class="fa fa-envelope"></i>
</span>
</div>
</div>
</div><!--end container-->
<?php include 'includes/footer.php'; ?>