generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
96 lines (85 loc) · 5.36 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
<!DOCTYPE html>
<html lang="en">
<!---------------------METATAGS------------------>
<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" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.3.1/css/hover-min.css" />
<link rel="stylesheet" href="assets/css/style.css" />
<title>Faux Djs</title>
</head>
<body class="bg-colour">
<!---------------------Header made with bootstrap 4 navbar------------------>
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-colour fixed-top">
<a class="logo-position" id="logo" href="#index.html">FAUX DJs</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="dates.html">Dates</a>
</li>
<li class="nav-item">
<a class="nav-link" href="audio.html">Audio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</nav>
</header>
<!---------------------Main Section with Hero image, call out button and bio------------------>
<section class="bg-colour hero-outer no-gutters">
<div id="hero-image"></div>
<div class="book-us-button">
<a href="contact.html"><h2>BOOK US NOW!</h2></a>
</div>
</section>
<!---------------------Bio paragraph using bootstrap grid structure------------------>
<section>
<div class="paragraph-container container-fluid">
<div class="row">
<div class="col-lg"></div>
<div class="col-lg">
<p id="paragraph">
This is the Home of FAUX DJS. We’re the most experienced party starters in Belfast with over 15 years experience in causing a commotion. As resident DJs of Belfast's busiest bars Laverys and Ulster Sports Club over 1000 people per week see
us play. Our specialty is raucous club sets but we’re also adept at setting bar vibes but even they can sometimes get a bit out of hand!
</p>
</div>
<div class="col-lg"></div>
</div>
</div>
</section>
<!---------------------Footer inc Social Links with Fontawesome icons------------------>
<footer>
<div class="container-fluid bg-colour fixed-bottom">
<div class="row row-cols-4" id="icon-size">
<div class="col">
<a href="https://www.facebook.com/FAUXDJS/" target="_blank" rel="noopener"><i class="fa fa-facebook" aria-hidden="true"></i><span class="sr-only">Facebook</span></a>
</div>
<div class="col">
<a href="https://www.instagram.com/faux_djs/" target="_blank" rel="noopener"><i class="fa fa-instagram" aria-hidden="true"></i><span class="sr-only">Instagram</span></a>
</div>
<div class="col">
<a href="https://open.spotify.com/playlist/5M18RVJ7ieNpgNbO42d5yE?si=eLizbJ1lQVai1DiTPlesUw" target="_blank" rel="noopener"><i class="fa fa-spotify" aria-hidden="true"></i><span class="sr-only">Spotify</span></a>
</div>
<div class="col">
<a href="https://soundcloud.com/fauxdjs/santeri-a" target="_blank" rel="noopener"><i class="fa fa-soundcloud" aria-hidden="true"></i><span class="sr-only">Soundcloud</span></a>
</div>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>