generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
100 lines (87 loc) · 5.54 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
<!DOCTYPE html>
<html lang="en">
<!--METATAGS-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="The homepage for Faux DJs Belfast. Find out about who they are and find links to music they play and where they are playing it!" />
<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 Homepage!</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 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">
<div id="hero-image"><span class="sr-only">Picture of Faux DJs at work being the decks playing music. Mark is shouting. Scott is doing all the work.</span></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">
<h2 class="paragraph">Who we are and what we do!</h2>
<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>