generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 4
/
live.html
150 lines (135 loc) · 11 KB
/
live.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
<!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 - Dates</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="Kryan Logo">
</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" href="bio.html" aria-label="Bio Page">Bio</a></li>
<li class="nav-item hvr-grow"><a class="nav-link active" 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="Live Page main section">
<div class="container-fluid">
<div class="row" id="live-bg">
<!-- ========= Hero Image ========= -->
<div class="col-12 col-lg-6" id="live-hero">
<!-- Empty div to call in image in css -->
</div>
<!-- ========= Text ========= -->
<div class="col-12 col-lg-6" id="live-details">
<div id="live-title" class="col-12">
<h1>Upcoming Dates</h1>
</div>
<div class="row" id="live-info">
<div class="col-12">
<div class="row">
<!-- Event Details -->
<div id="live-table" class="col-12 col-md-6 col-lg-12">
<table>
<thead>
<tr>
<td>
<h2> <span>Dublin </span> 21 May 2021</h2>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<h3><a href="https://www.facebook.com/events/633323897438970/" target="_blank" rel="noopener" aria-label="External link to Event Page">The Grand Social</a></h3>
</td>
</tr>
<tr>
<td><p>8:00pm <span> €10</span></p></td>
</tr>
<tr>
<td>
<div id="live-ticket" class="text-center">
<a href="https://www.ticketweb.ie/event/kryan-live-at-the-grand-the-grand-social-tickets/10785895" class="btn" target="_blank" rel="noopener" aria-label="External Link to ticket purchasing page">Tickets</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Event Location -->
<div class="col-12 col-md-6 col-lg-12">
<div id="live-location">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2381.7963839246195!2d-6.263477!3d53.34690100000001!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xd32fb2d0b09e1a6a!2sThe%20Grand%20Social!5e0!3m2!1sen!2sie!4v1609956406121!5m2!1sen!2sie" allowfullscreen="" aria-hidden="true" tabindex="0"></iframe>
</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>
</body>
</html>