-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
132 lines (118 loc) · 5.14 KB
/
index.html
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
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no'>
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<title>Winding Rhythm Films</title>
<link rel='stylesheet' href='style.css'>
<link rel='stylesheet' href='node_modules/bootstrap/dist/css/bootstrap.min.css'>
<link href="https://fonts.googleapis.com/css?family=Muli:200" rel="stylesheet">
</head>
<body>
<header>
<div class='nav'>
<a href='/' class='wrf-logo'><img class='wrf-logo' src='images/WRF-website-logo.png'></a>
<nav class='nav-list'>
<a href='#' class='meet-wrf-link'>meet the team</a>
<a href='#' class='work-wrf-link'>view our work</a>
<a href='#' class='contact-wrf-link'>get in touch</a>
</nav>
</div>
</header>
<section class='intro'>
<div class='intro-content slide-up--intro'>
<div class='wrfIntro'>
<p class='wrfText'>winding rhythm films</p>
</div>
<div class='intro-image'>
<video width='100%'>
<source src='images/prodReel720.mp4' type='video/mp4'/>
</video>
</div>
</div>
</section>
<section class='info work--white'>
<p>Winding Rhythm Films is a full-service, independent production company that offers high quality audio, video, and digital media.</p>
<p>We value our relationships with our clients, which is why the WRF team is dedicated to producing exceedingly professional products with speed and efficiency.</p>
<p>In other words: We film good.</p>
</section>
<section class='work work--black'>
<h1>recent work</h1>
<div id="wrfCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<iframe src="https://player.vimeo.com/video/196054658?title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<div class="item">
<iframe src="https://player.vimeo.com/video/192649906?title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#wrfCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#wrfCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<a href='/viewWork' class='button'>more work</a>
</section>
<section class='info work--yellow'>
<h1>strategy for client value</h1>
<p>Exceptional client communication relations</p>
<p>Highly produced imagery media for stragetic growth</p>
<p>Business enhancing resource</p>
</section>
<section class='meet-wrf meet-wrf--hidden'>
<a class='meet-wrf-close'>CLOSE</a>
<div id="wrfAbout" class="carousel carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#wrfAbout" data-slide-to="0" class="active"></li>
<li data-target="#wrfAbout" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class='charlesImage' src='images/charles-headshot.png' alt='Charles Powell'>
<div class='infoText'>
<p class='name'>Charles Powell</p>
<p class='title'>Co-Founder - Creative Director</p>
</div>
</div>
<div class="item">
<img class='tylerImage' src='images/tyler-headshot.png' alt='Tyler Whitaker'>
<div class='infoText'>
<p class='name'>Tyler Whitaker</p>
<p class='title'>Co-Founder - Producer - Editor</p>
</div>
</div>
</div>
</div>
</section>
<section class='work-wrf work-wrf--hidden'>
<a class='work-wrf-close'>CLOSE</a>
<div class='work-wrf-content'>
<img src='#'>
<p>THIS IS RECENT WORK</p>
<img src='#'>
<p>THIS IS ALSO RECENT WORK</p>
</div>
</section>
<section class='contact-wrf contact-wrf--hidden'>
<a class='contact-wrf-close'>CLOSE</a>
<div class='contact-wrf-content'>
<img src='#'>
<p>THIS IS TYLER'S INFO</p>
<img src='#'>
<p>THIS IS CHARLES' INFO</p>
</div>
</section>
<script src='node_modules/jquery/dist/jquery.min.js'></script>
<script src='node_modules/jquery-migrate/dist/jquery-migrate.min.js'></script>
<script src='node_modules/bootstrap/dist/js/bootstrap.min.js'></script>
<script src='node_modules/desandro-classie/classie.js'></script>
<script src='script.js'></script>
</body>
</html>