-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
178 lines (177 loc) · 10.9 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
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
170
171
172
173
174
175
176
177
178
<!DOCTYPE html>
<html lang="en">
<head>
<!--Linking Bootstrap, Javascript and my CSS stylesheet-->
<link media="screen" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link media="screen" href="styles.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Ubuntu+Mono&family=Ubuntu:wght@400;500&display=swap" rel="stylesheet">
<link media="screen" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<title>Z-Station</title>
<!-- Meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A creative platform housing curated lists of the top Metal/Rock tracks, and Anime. Click now to get plugged in!">
<meta name="keywords" content="Anime, Metal, Rock, Pixel-Art, Recommendations">
<meta name="author" content="Zach Quita">
</head>
<body class="page-backgroud-boxes">
<!-- Navbar -->
<header>
<nav class="shadow-lg user-select-none navbar navbar-expand-md navbar-light" style="background-color: #ffd500;">
<div class="container-fluid my-2">
<a class="fs-5 navbar-brand " href="index.html">
<svg xmlns="http:https://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-usb-plug-fill align-items-top" viewBox="0 0 16 16">
<path d="M6 .5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4H6v-4ZM7 1v1h1V1H7Zm2 0v1h1V1H9ZM5.5 5a.5.5 0 0 0-.5.5v4.894a2 2 0 0 0 .336 1.11l.83 1.245c.544.816.834 1.774.834 2.754 0 .275.222.497.497.497h2.006a.497.497 0 0 0 .497-.497c0-.98.29-1.938.834-2.754l.83-1.245a2 2 0 0 0 .336-1.11V5.5a.5.5 0 0 0-.5-.5h-6Z"/>
</svg>
Z-Station
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="justify-content-center navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="about.html">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="music.html">Music</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="anime.html">Anime</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!-- Center Page Hero-->
<main>
<div class="page-background-boxes">
<div class="shadow-lg container">
<div class="row align-items-center text-center">
<div class="col-md-6 justify-content-between fs-3">
<div class="mt-5 mb-3">
<h1 class ="user-select-none gradient-text-yellow">A creative center</h1>
<p id="center-page-text" class="text-light lead mt-4">
An avid media enthusiast's recommendations of everything: from <span class="text-yellow">music</span>, to <span class="text-yellow">Anime</span>.
Ready to get inspired? Check out the cards below
</p>
<a class="btn btn-outline-secondary btn-sm mb-3" href="#cards">
<i class="bi bi-caret-down"></i>
</a>
</div>
</div>
<div class="col-md-6 align-self-end mt-4">
<img id="fingerguns-img" class="user-select-none d-none d-md-block" src="images/index/nobara-flowers-no-bg.webp" alt="girl holding flowers">
</div>
</div>
</div>
</div>
<!-- Recommendations section/Cards -->
<div id="cards" class="content-wrapper user-select-none" style="background-color: #ffd500;">
<div class="container py-5">
<div class="row text-center gap-3">
<!-- First card -->
<div class="col-md">
<div class="cards-aligned shadow-lg card">
<div class="mt-3 h1 gradient-text-blue">
<i class="bi bi-star-fill"></i>
<h1 class="h4 mt-3 card-title">
Anime
</h1>
</div>
<div class="text-dark card-body fs-6">
<p>
In my many years of watching anime, I have compiled my Top 10 all-time faves for you
to check out whenever you want something nice to watch
</p>
<a href="anime.html" class="btn btn-outline-secondary">
Explore top picks!
</a>
</div>
</div>
</div>
<!-- Second card -->
<div class="col-md">
<div class="cards-aligned shadow-lg card" style="background-color: #001524;">
<div class="mt-3 h1 gradient-text-yellow">
<i class="bi bi-music-note-beamed"></i>
<h1 class="h4 mt-3 card-title">
Music
</h1>
</div>
<div class="text-light card-body fs-6">
<p>
Explore the best tracks from across Rock and Metal genres; if you like rocking out, our catalogue will not fail to
cater to your various moods and genres
</p>
<a id="btn-music" href="music.html" class="btn btn-outline-warning">
Start vibing!
</a>
</div>
</div>
</div>
<!-- Third card -->
<div class="col-md">
<div class="cards-aligned shadow-lg card">
<div class="mt-3 h1 gradient-text-blue">
<i class="bi bi-person-workspace"></i>
<h1 class="h4 mt-3 card-title">
About Me
</h1>
</div>
<div class="text-dark card-body fs-6">
<p>
Learn more about my hobbies, my projects, and my interests. All my socials may also be found here, including a contact
form for sending me a message
</p>
<a href="about.html" class="btn btn-outline-secondary">
Learn more!
</a>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Footer -->
<div id="footer" class="pt-4" style="background-color: #001524;">
<div class="container border-top border-secondary">
<footer class="d-flex flex-wrap justify-content-between align-items-center py-5">
<div class="col-md-4 align-items-center">
<a href="index.html" class="link-light fs-5 text-decoration-none">
<svg xmlns="http:https://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-usb-plug-fill align-items-top" viewBox="0 0 16 16">
<path d="M6 .5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4H6v-4ZM7 1v1h1V1H7Zm2 0v1h1V1H9ZM5.5 5a.5.5 0 0 0-.5.5v4.894a2 2 0 0 0 .336 1.11l.83 1.245c.544.816.834 1.774.834 2.754 0 .275.222.497.497.497h2.006a.497.497 0 0 0 .497-.497c0-.98.29-1.938.834-2.754l.83-1.245a2 2 0 0 0 .336-1.11V5.5a.5.5 0 0 0-.5-.5h-6Z"/>
</svg>
Z-Station
</a>
</div>
<ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
<li class="ms-3">
<a name="" href="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/Zakar98k" class="link-light">
<svg xmlns="http:https://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
</svg>
</a>
</li>
<li class="ms-3">
<a href="https://www.youtube.com/channel/UCInk-bnn81e3CVRUPDaX7bA" class="link-light">
<svg xmlns="http:https://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-youtube" viewBox="0 0 16 16">
<path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z"/>
</svg>
</a>
</li>
<li class="ms-3">
<a href="https://www.linkedin.com/in/zachquita/" class="link-light">
<svg xmlns="http:https://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"/>
</svg>
</a>
</li>
</ul>
</footer>
</div>
</div>
</body>
</html>