generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathbio.html
190 lines (176 loc) · 15.7 KB
/
bio.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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="description" content="Website for Irish pop musician Kryan">
<meta name="author" content="Rebecca Tracey-Timoney">
<link rel="shortcut icon" href="assets/images/icon.png" title="Kryan Thumbnail Image">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"/> <!-- Bootstrap Import-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous"/> <!-- Font Awesome Import-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.3.1/css/hover-min.css"
integrity="sha512-csw0Ma4oXCAgd/d4nTcpoEoz4nYvvnk21a8VA2h2dzhPAvjbUIK6V3si7/g/HehwdunqqW18RwCJKpD7rL67Xg==" crossorigin="anonymous"/> <!-- Hover.css Import-->
<link rel="stylesheet" href="assets/css/style.css"/> <!-- style.css import-->
<title>KryanLive - Bio</title>
</head>
<body>
<!-- ================================= HEADER ================================= -->
<!-- ========= Header Logo ========= -->
<div class="navbar-logo">
<a href="index.html" aria-label="Kryan Logo linking to Homepage">
<img src="assets/images/logo.png" width="200" height="70" alt="Click to return home">
</a>
</div>
<!-- Navigation Bar - Sourced from bootstrap.com -->
<nav class="navbar navbar-expand-lg scroll-nav" aria-label="Navigation Bar">
<div class="container-fluid">
<!-- ========= Toggler Button ========= -->
<button class="navbar-toggler ml-auto custom-toggler" type="button" data-toggle="collapse" data-target="#navbarMenu" aria-controls="navbarMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- ========= Nav Links ========= -->
<div class="collapse navbar-collapse nav-padding" id="navbarMenu">
<ul class="nav navbar-nav scroll-nav ml-auto">
<!-- hvr-grow class sourced from Hover.css (https://ianlunn.github.io/Hover/)-->
<li class="nav-item hvr-grow"><a class="nav-link" href="index.html" aria-label="Homepage">Home</a></li>
<li class="nav-item hvr-grow"><a class="nav-link active" href="bio.html" aria-label="Bio Page">Bio</a></li>
<li class="nav-item hvr-grow"><a class="nav-link" href="live.html" aria-label="Live Page">Live</a></li>
<li class="nav-item hvr-grow"><a class="nav-link" href="epk.html" aria-label="Press Kit">Press Kit</a></li>
<li class="nav-item text-center d-inline d-none d-sm-block d-md-none">
<ul class="socials-nav">
<li class="list-inline-item"><a href="https://www.facebook.com/kryanlive/" target="_blank" rel="noopener" aria-label="Kryan Facebook"><i class="fab fa-facebook-f"></i></a></li>
<li class="list-inline-item"><a href="https://www.instagram.com/kryanlive/" target="_blank" rel="noopener" aria-label="Kryan Instagram"><i class="fab fa-instagram"></i></a></li>
<li class="list-inline-item"><a href="https://twitter.com/kryanlive/" target="_blank" rel="noopener" aria-label="Kryan Twitter"><i class="fab fa-twitter"></i></a></li>
<li class="list-inline-item"><a href="https://open.spotify.com/artist/6wcRo4TN7UDcoKn591afad?si=fxSJdsAiQYe6CHeAwpKR4Q" target="_blank" rel="noopener" aria-label="Kryan Spotify"><i class="fab fa-spotify"></i></a></li>
<li class="list-inline-item"><a href="https://music.apple.com/us/artist/kryan/1423240683" target="_blank" rel="noopener" aria-label="Kryan Apple Music"><i class="fab fa-apple"></i></a></li>
<li class="list-inline-item"><a href="https://www.deezer.com/en/artist/13491991" target="_blank" rel="noopener" aria-label="Kryan Deezer"><i class="fab fa-deezer"></i></a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- ================================= MAIN SECTION ================================= -->
<section aria-label="Bio Page main section">
<div class="container-fluid">
<div class="row">
<!-- ========= Hero Image ========= -->
<div class="col-12 col-lg-6" id="bio-hero">
<!-- Empty div to call in image in css -->
</div>
<!-- ========= Text ========= -->
<div class="col-12 col-lg-6" id="bio-info">
<div id="bio-title">
<h2>Meet <span class="text-exception">Kryan</span></h2>
</div>
<div id="bio-text">
<p>
Hey! My name is Kryan (pronounced 'cryin') <br>
Dublin-based singer/songwriter 'Kryan' first garnered attention when he released his debut single "Alone" in August of 2018.
Kryan would later return with "Rumours" in 2019. After taking the first half of 2020 off to rebrand his sound/image,
'Kryan' made a return with "I Always Knew", produced by David Morys Prendergast (Kodaline, Overhead The Albatross) with a new
confidence and a determination that could conquer the world, twice over. New single “Scars” out November 20, 2020.
<!-- Paragraph only broken this way for reading purposes -->
</p>
<p>Click to read about some of my other works:</p>
<!-- Code sourced from W3Schools in order to understand accordion collapsible menus.
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_collapsible_accordion&stacked=h -->
<div class="container" id="bio-accordion">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="panel-title">
<a data-toggle="collapse" href="#collapse1" aria-label="accordion menu for Jordo and the legs">Jordo and 'the Legs'
<i class="fas fa-angle-down"></i>
</a>
</h5>
</div>
<div id="collapse1" data-parent="#accordion" class="panel-collapse collapse in">
<div class="panel-body">
<p>Irish tap dancer Ryan “The Legs” Kelly and Jordan O’Leary, guitarist of Dublins heavy acoustic act “The Scratch” started busking together on Grafton Street in the Summer of 2019.
The act quickly and consistently managed to gather large crowds on the streets, as well as multiple viral <a href="https://www.youtube.com/watch?v=V1NAVZsZQtQ" target="_blank" rel="noopener" aria-label="Link to Jordo and the Legs video">videos</a>, some of which reaching up to 20 Million views on Facebook and YouTube.
They have gotten nods of respect from the likes of Riverdance legend and composer Bill Whelan and Hollywood’s Irish Chris O’Dowd. They have been a source of joy for many shoppers and locals on Grafton street, both young and old.
Their show consists of old Irish reels and jigs, played with furious speed on the guitar while Ryan and his legs go 90 in intermittent bursts of pure raw power, with plenty of craic and crowd pleasing interaction thrown in along the way.
<!-- Paragraph only broken this way for reading purposes -->
</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="panel-title">
<a data-toggle="collapse" href="#collapse2" aria-label="accordion menu for the Scratch">The Scratch
<i class="fas fa-angle-down"></i>
</a>
</h5>
</div>
<div id="collapse2" data-parent="#accordion" class="panel-collapse collapse in">
<div class="panel-body">
<p>Born from the love of acoustic guitar, metal and trad music, The Scratch are a 4-piece acoustic act from Dublin, Ireland.
Kryan (known as 'the Legs'), with a shared love of Irish music, joins the Scratch on stage to create a unique live expereience for gig goers,
creating a mini trad-session. Having performed at festivals around Ireland (including KnockanStockan and Electric Picnic), The Scratch and Kryan's collaboration shows no signs of slowing down, with an upcomiing Irish tour
<a href="https://linktr.ee/TheScratch" target="_blank" rel="noopener" aria-label="Link to tickets for the Scratch">(click for ticket information)</a>
<!-- Paragraph only broken this way for reading purposes -->
</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="panel-title">
<a data-toggle="collapse" href="#collapse3" aria-label="accordion menu for the Hit Machine Drummers">The Hit Machine Drummers
<i class="fas fa-angle-down"></i>
</a>
</h5>
</div>
<div id="collapse3" data-parent="#accordion" class="panel-collapse collapse in">
<div class="panel-body">
<p> One of Ireland's top entertainment companies, the Hit Machine provides a wide range of acts nationwide, including the <a href="https://www.youtube.com/watch?v=znu0Jsm4uNE" target="_blank" rel="noopener" aria-label="Link to the Hit Machine Drummers on YouTube">Hit Machine Drummers</a>.
Formed in 2013, the drummers choreograph a fun-filled immersive experience for all. Performing at a variety of locations (including The Guinness Storehouse, Dublin Castle and the Aviva Stadium to name a few) as well as festivals and parades, country-wide.
<!-- Paragraph only broken this way for reading purposes -->
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ================================= FOOTER ================================= -->
<footer class="container-fluid fixed-bottom" aria-label="Footer containing Social Icons">
<div class="row">
<div class="col left-footer d-none d-lg-block d-xl-block">
<!-- Empty div in order to divide the footer -->
</div>
<div class="col socials-large d-none d-md-block d-lg-block d-xl-block">
<ul class="list-inline">
<li class="list-inline-item"><a href="https://www.facebook.com/kryanlive/" target="_blank" rel="noopener" aria-label="Kryan Facebook"><i class="fab fa-facebook-f"></i></a></li>
<li class="list-inline-item"><a href="https://www.instagram.com/kryanlive/" target="_blank" rel="noopener" aria-label="Kryan Instagram"><i class="fab fa-instagram"></i></a></li>
<li class="list-inline-item"><a href="https://twitter.com/kryanlive/" target="_blank" rel="noopener" aria-label="Kryan Twitter"><i class="fab fa-twitter"></i></a></li>
<li class="list-inline-item"><a href="https://open.spotify.com/artist/6wcRo4TN7UDcoKn591afad?si=fxSJdsAiQYe6CHeAwpKR4Q" target="_blank" rel="noopener" aria-label="Kryan Spotify"><i class="fab fa-spotify"></i></a></li>
<li class="list-inline-item"><a href="https://music.apple.com/us/artist/kryan/1423240683" target="_blank" rel="noopener" aria-label="Kryan Apple Music"><i class="fab fa-apple"></i></a></li>
<li class="list-inline-item"><a href="https://www.deezer.com/en/artist/13491991" target="_blank" rel="noopener" aria-label="Kryan Deezer"><i class="fab fa-deezer"></i></a></li>
</ul>
</div>
</div>
</footer>
<!-- ================================= Scripts ================================= -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- Changes background of navigation bar on scroll for UX purposes.
Sourced from https://jsfiddle.net/we9L9h2r/ -->
<script>
$(function () {
$(document).scroll(function () {
var $nav = $(".scroll-nav");
$nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
});
});
</script>
</body>
</html>