-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgallery.html
169 lines (157 loc) · 7.05 KB
/
gallery.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Recording Studio homepage">
<title>El Rio Vista Recording Studio</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- Libraries -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"
integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"
integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css"
integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Personal -->
<link rel="stylesheet" href="css/styles.css">
<script src="js/scripts.js"></script>
</head>
<body>
<!-- Skip links -->
<nav aria-label="Skip links">
<ul class="off-screen">
<li>
<a href="#a11y-primary-nav" class="skip-link">Skip to primary navigation</a>
</li>
<li>
<a href="#a11y-main-content" class="skip-link">Skip to main content</a>
</li>
</ul>
</nav>
<header class="container-fluid dark-bg">
<div class="container-lg pb-5">
<!-- Navbar -->
<nav class="d-flex flex-column flex-sm-row text-center pt-3" id="a11y-primary-nav" tabindex="-1">
<!-- Company name/logo -->
<div class="d-flex flex-column flex-sm-row col-sm-6">
<a href="index.html" aria-label="logo">
<img src="images/company_logo.svg" class="mx-2 mt-3" height="50px" width="100px" alt="">
<img src="images/company_name.svg" class="mx-2 mt-3" height="40px" width="200px" alt="">
</a>
</div>
<!-- Toggle button/Hamburger menu -->
<div class="menubtn d-sm-none mt-4" data-toggle="collapse" data-target="#navbarContent"
onclick="this.classList.toggle('active')">
<svg xmlns="http://www.w3.org/2000/svg" width="75" height="75" viewBox="0 0 200 200">
<g stroke-width="6.5" stroke-linecap="round">
<path d="M72 82.286h28.75" fill="#009100" fill-rule="evenodd" stroke="#fff" />
<path
d="M100.75 103.714l72.482-.143c.043 39.398-32.284 71.434-72.16 71.434-39.878 0-72.204-32.036-72.204-71.554"
fill="none" stroke="#fff" />
<path d="M72 125.143h28.75" fill="#009100" fill-rule="evenodd" stroke="#fff" />
<path
d="M100.75 103.714l-71.908-.143c.026-39.638 32.352-71.674 72.23-71.674 39.876 0 72.203 32.036 72.203 71.554"
fill="none" stroke="#fff" />
<path d="M100.75 82.286h28.75" fill="#009100" fill-rule="evenodd" stroke="#fff" />
<path d="M100.75 125.143h28.75" fill="#009100" fill-rule="evenodd" stroke="#fff" />
</g>
</svg>
</div>
<!-- Internal Nav Links -->
<div class="collapse navbar-collapse d-sm-flex" id="navbarContent">
<ul class="navbar-nav text-uppercase font-weight-bold flex-sm-row ml-auto mt-3">
<li class="navbar-item">
<a class="nav-link mx-4 mt-2" href="index.html">Home</a>
</li>
<li class="navbar-item">
<a class="nav-link mx-4 mt-2 wave" href="#">Gallery</a>
</li>
<li class="navbar-item">
<a class="nav-link mx-4 mt-2" href="contact.html">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
</header>
<main id="a11y-main-content" tabindex="-1">
<!-- Album Section -->
<section class="container-fluid py-5">
<div class="container-lg text-center pb-5">
<h1 class="my-5">Works</h1>
<h2 class="lead my-5">Here are just a few of the songs we've helped produce. We're proud of the many
different genres we can handle. If you like what you hear and would like to dive into a partnership,
<a href="contact.html">contact us</a>! We would love to talk with you about your upcoming project.
</h2>
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3" id="tracks"> </div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="page-footer dark-bg pt-4">
<div class="container-lg">
<div class="d-flex flex-column flex-sm-row justify-content-between align-items-center my-5">
<div class="mt-4">
<a href="#" aria-label="logo">
<img src="images/company_logo.svg" class="mx-2" height="50px" width="100px" alt="">
<img src="images/company_name.svg" class="mx-2 d-md-inline-block d-none" height="40px"
width="200px" alt="">
</a>
</div>
<div class="d-flex mt-4">
<div class="row">
<ul class="list-group list-group-horizontal list-unstyled">
<li class="mx-2">
<a class="text-decoration-none" href="https://www.facebook.com/HolbertonSchool/"
aria-label="Facebook">
<i class="fa fa-facebook social" aria-hidden="true"></i>
</a>
</li>
<li class="mx-2">
<a class="text-decoration-none" href="https://twitter.com/holbertonschool"
aria-label="Twitter">
<i class="social fa fa-twitter" aria-hidden="true"></i>
</a>
</li>
<li class="mx-2">
<a class="text-decoration-none" href="https://www.instagram.com/holbertonschool/"
aria-label="Instagram">
<i class="social fa fa-instagram" aria-hidden="true"></i>
</a>
</li>
<li class="mx-2">
<a class="text-decoration-none"
href="https://open.spotify.com/playlist/6MfkoiUr4P9iDLN5VZSvQN?si=73aba6d4061f4c00"
aria-label="Spotify">
<i class="social fa fa-spotify" aria-hidden="true"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<p class="text-center small pb-5 mb-0">©El Rio Vista Recording Studio 2021</p>
</footer>
<form action="">
<input type="hidden" id='hidden_token'>
</form>
</body>
</html>