-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
124 lines (109 loc) · 5.49 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
<!DOCTYPE HTML>
<!--
Full Motion by TEMPLATED
templated.co @templatedco
Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
-->
<html>
<head>
<title>Yoel Popovici's Life</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body id="top">
<!-- Banner -->
<!--
To use a video as your background, set data-video to the name of your video without
its extension (eg. images/banner). Your video must be available in both .mp4 and .webm
formats to work correctly.
-->
<section id="banner" data-video="images/banner">
<div class="inner">
<header>
<h1>Music Videos from Yoel Popovici</h1>
<p>My dedication to music and to empower others through creative tunes and lifestyles</p>
</header>
<a href="#main" class="more">Learn More</a>
</div>
</section>
<!-- Main -->
<div id="main">
<div class="inner">
<!-- Boxes -->
<div class="thumbnails">
<div class="box">
<a href="https://youtu.be/VvopX-yD2QU" class="image fit"><img src= "images/mq2.jpg" alt="" /></a>
<div class="inner">
<h3>Despair in the Depature Lounge</h3>
<p>Listen to Yoel Perform the great hit "Despair in the depature lounge" by Arctic Monkey's
from their album "Who The F*** Are the Arctic Monkeys.</p>
<a href="https://youtu.be/VvopX-yD2QU" class="button fit" data-poptrox="youtube,800x400">Watch</a>
</div>
</div>
<div class="box">
<a href="https://youtu.be/xJPh2IGDgZU" class="image fit"><img src="images/hqdefault.jpg" alt="" /></a>
<div class="inner">
<h3>Stairway to Heaven</h3>
<p>Listen to Yoel Perform a guitar cover of the classical song "Stairway to Heaven" by legendary hard rock band Led Zepplin.</p>
<a href="https://youtu.be/xJPh2IGDgZU" class="button style2 fit" data-poptrox="youtube,800x400">Watch</a>
</div>
</div>
<div class="box">
<a href="https://youtu.be/BPq_GScLRkc" class="image fit"><img src="images/SomewhereOvertheRainbow.jpg" alt="" /></a>
<div class="inner">
<h3>Somewhere Over the Rainbow</h3>
<p>Listen to Yoel perform the classical song Somewhere over the Rainbow which was featrued in the movie "The Wizard of Oz" on piano.</p>
<a href= "https://youtu.be/BPq_GScLRkc" class="button style3 fit" data-poptrox="youtube,800x400">Watch</a>
</div>
</div>
<div class="box">
<a href="https://youtu.be/s6zR2T9vn2c" class="image fit"><img src="images/pic04.jpg" alt="" /></a>
<div class="inner">
<h3>Nascetur nunc varius commodo</h3>
<p>Interdum amet accumsan placerat commodo ut amet aliquam blandit nunc tempor lobortis nunc non. Mi accumsan.</p>
<a href="https://youtu.be/s6zR2T9vn2c" class="button style2 fit" data-poptrox="youtube,800x400">Watch</a>
</div>
</div>
<div class="box">
<a href="https://youtu.be/s6zR2T9vn2c" class="image fit"><img src="images/pic05.jpg" alt="" /></a>
<div class="inner">
<h3>Nascetur nunc varius commodo</h3>
<p>Interdum amet accumsan placerat commodo ut amet aliquam blandit nunc tempor lobortis nunc non. Mi accumsan.</p>
<a href="https://youtu.be/s6zR2T9vn2c" class="button style3 fit" data-poptrox="youtube,800x400">Watch</a>
</div>
</div>
<div class="box">
<a href="https://youtu.be/s6zR2T9vn2c" class="image fit"><img src="images/pic06.jpg" alt="" /></a>
<div class="inner">
<h3>Nascetur nunc varius commodo</h3>
<p>Interdum amet accumsan placerat commodo ut amet aliquam blandit nunc tempor lobortis nunc non. Mi accumsan.</p>
<a href="https://youtu.be/s6zR2T9vn2c" class="button fit" data-poptrox="youtube,800x400">Watch</a>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer id="footer">
<div class="inner">
<h2>Etiam veroeros lorem</h2>
<p>Pellentesque eleifend malesuada efficitur. Curabitur volutpat dui mi, ac imperdiet dolor tincidunt nec. Ut erat lectus, dictum sit amet lectus a, aliquet rutrum mauris. Etiam nec lectus hendrerit, consectetur risus viverra, iaculis orci. Phasellus eu nibh ut mi luctus auctor. Donec sit amet dolor in diam feugiat venenatis. </p>
<ul class="icons">
<li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
<li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
<li><a href="#" class="icon fa-envelope"><span class="label">Email</span></a></li>
</ul>
<p class="copyright">© Untitled. Design: <a href="https://templated.co">TEMPLATED</a>. Images: <a href="https://unsplash.com/">Unsplash</a>. Videos: <a href="http://coverr.co/">Coverr</a>.</p>
</div>
</footer>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/jquery.poptrox.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>