generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
117 lines (105 loc) · 8.57 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
<!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</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 and w3schools.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 active" 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" 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="Homepage main section">
<div class="container-fluid">
<div class="row">
<!-- ========= Hero Image ========= -->
<div class="col-12 col-lg-6" id="home-hero">
<!-- Empty div to call in image in css -->
</div>
<!-- ========= Text ========= -->
<div class="col-12 col-lg-6" id="home-text">
<div>
<h1>'SCARS'</h1>
<h2>New Single - <a href="https://outnow.io/t/scars" target="_blank" rel="noopener" class="feature-link" aria-label="Link to 'Out Now' platform selection">Out Now!</a></h2>
</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>