Skip to content

Commit

Permalink
📝 Kiss Me Deadly by Gen X
Browse files Browse the repository at this point in the history
  • Loading branch information
@williamdsw
williamdsw committed Feb 23, 2022
1 parent 4d3fcf9 commit 7ed7391
Show file tree
Hide file tree
Showing 8 changed files with 1,259 additions and 1,197 deletions.
Binary file added covers/gen-x--kiss-me-deadly.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
72 changes: 52 additions & 20 deletions css/listened-albums.css
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,13 @@
body {background-color: #1e2c4f; }
body {
background-color: #1e2c4f;
}

/* search elements */
input, select, select > option {
input,
select,
select > option {
background: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 1));
background-color:rgba(0, 0, 0, 0.8);
background-color: rgba(0, 0, 0, 0.8);
color: white !important;
border-radius: 0 !important;
box-shadow: inset 1px 1px 10px rgba(255, 255, 255, 0.3);
Expand All @@ -15,7 +19,8 @@ nav {
border-bottom: 1px dashed rgba(0, 0, 0, 0.5);
}

nav, footer {
nav,
footer {
background: linear-gradient(to right, #2c4072, #091024);
}

Expand All @@ -26,19 +31,41 @@ footer {
border-top: 1px dashed rgba(0, 0, 0, 0.85);
}


/* accordion */
.accordion { margin: 10px; }
.card-header { background-color: cornsilk; cursor: pointer; }
.card-header:hover { background-color: rgb(241, 234, 203); }
.card-header h1 { color: darkslateblue; text-shadow: 2px 2px 3px #41a8b2; }
.card-content { background-color: honeydew; }
.accordion {
margin: 10px;
}
.card-header {
background-color: cornsilk;
cursor: pointer;
}
.card-header:hover {
background-color: rgb(241, 234, 203);
}
.card-header h1 {
color: darkslateblue;
text-shadow: 2px 2px 3px #41a8b2;
}
.card-content {
background-color: honeydew;
}

/* album */
#albums_header { color: white; text-shadow: 2px 2px purple; }
.album { color: white; text-shadow: 2px 1px red; }
.album a { text-shadow: none; }
.album a.listen { color: yellow; font-weight: bold; }
#albums_header {
color: white;
text-shadow: 2px 2px purple;
}
.album {
color: white;
text-shadow: 2px 1px red;
}
.album a {
text-shadow: none;
}
.album a.listen {
color: yellow;
font-weight: bold;
}

/* hover */
.hover-effect {
Expand All @@ -56,8 +83,8 @@ footer {
.hover-effect img {
display: block;
position: relative;
-webkit-transition: all .4s linear;
transition: all .4s linear;
-webkit-transition: all 0.4s linear;
transition: all 0.4s linear;
}

.hover-effect .overlay {
Expand All @@ -69,8 +96,8 @@ footer {
left: 0;
opacity: 0;
background-color: rgba(0, 0, 0, 0.5);
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}

.hover-effect:hover img {
Expand All @@ -79,7 +106,12 @@ footer {
transform: scale(1.2);
}

.hover-effect:hover .overlay { opacity: 1; filter: alpha(opacity=100); }
.hover-effect:hover .overlay {
opacity: 1;
filter: alpha(opacity=100);
}

/* bootstrap ... */
.form-group { margin: auto; }
.form-group {
margin: auto;
}
186 changes: 106 additions & 80 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,91 +1,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="author" content="William Santos">
<meta name="description" content="My Latest New Listened Albums">
<meta name="keywords" content="html5, css3, javascript, music, albums, disc">
<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="author" content="William Santos" />
<meta name="description" content="My Latest New Listened Albums" />
<meta
name="keywords"
content="html5, css3, javascript, music, albums, disc"
/>

<!-- css -->
<link rel="stylesheet" href="libs/bootstrap/bootstrap.min.css"/>
<link rel="stylesheet" href="css/listened-albums.css"/>
<link rel="shortcut icon" href="files/disc-vinyl.png"/>
<!-- css -->
<link rel="stylesheet" href="libs/bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="css/listened-albums.css" />
<link rel="shortcut icon" href="files/disc-vinyl.png" />

<title> My Latest New Listened Albums </title>
</head>
<body>
<title>My Latest New Listened Albums</title>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top mb-5">
<div class="container">
<!-- Toggle -->
<div>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#movelmenu"
aria-controls="movelmenu"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
</div>

<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top mb-5">
<div class="container">

<!-- Toggle -->
<div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#movelmenu" aria-controls="movelmenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>

<!-- Search -->
<div id="movelmenu" class="collapse navbar-collapse my-3 my-sm-0">
<div class="form-row col-md-6 m-auto">
<div class="form-group col-md-8 col-sm-6 my-md-0 my-3">
<input type="search" id="keywords_input" class="form-control" placeholder="Search" aria-label="Search" value=""/>
</div>
<div class="form-group col-md-4 col-sm-6">
<select id="property_select" class="form-control mr-sm-2">
<option value="name"> Album </option>
<option value="artist"> Artist </option>
<option value="releaseYear"> Released Year </option>
<option value="genre"> Genre </option>
</select>
</div>
</div>
</div>
<!-- Search -->
<div id="movelmenu" class="collapse navbar-collapse my-3 my-sm-0">
<div class="form-row col-md-6 m-auto">
<div class="form-group col-md-8 col-sm-6 my-md-0 my-3">
<input
type="search"
id="keywords_input"
class="form-control"
placeholder="Search"
aria-label="Search"
value=""
/>
</div>
<div class="form-group col-md-4 col-sm-6">
<select id="property_select" class="form-control mr-sm-2">
<option value="name">Album</option>
<option value="artist">Artist</option>
<option value="releaseYear">Released Year</option>
<option value="genre">Genre</option>
</select>
</div>
</nav>
</div>
</div>
</div>
</nav>

<br>
<br />

<!-- header -->
<header class="my-5">
<h1 class="text-center text-white"> My Latest New Listened Albums </h1>
</header>
<!-- header -->
<header class="my-5">
<h1 class="text-center text-white">My Latest New Listened Albums</h1>
</header>

<!-- Content -->
<main>
<article>
<div class="container">
<div class="row">
<div class="jumbotron m-auto">
<p>
Challanged by <a href="https://mrs4w.github.io/listened-albums/" target="_blank"> MrS4w </a>
to do something related to my last "new" listened albums.
</p>
</div>
</div>

<!-- Data -->
<div class="row mt-3 mb-3">
<div class="col-12">
<h2 class="text-center" id="albums_header"> Header </h2></div>
</div>
<div id="year_container"></div>
</div>
</article>
</main>
<!-- Content -->
<main>
<article>
<div class="container">
<div class="row">
<div class="jumbotron m-auto">
<p>
Challanged by
<a
href="https://mrs4w.github.io/listened-albums/"
target="_blank"
>
MrS4w
</a>
to do something related to my last "new" listened albums.
</p>
</div>
</div>

<!-- Data -->
<div class="row mt-3 mb-3">
<div class="col-12">
<h2 class="text-center" id="albums_header">Header</h2>
</div>
</div>
<div id="year_container"></div>
</div>
</article>
</main>

<footer>
<p class="text-center">
Done by <a href="https://github.com/williamdsw" target="_blank"> William Santos </a>
</p>
</footer>
<footer>
<p class="text-center">
Done by
<a href="https://github.com/williamdsw" target="_blank">
William Santos
</a>
</p>
</footer>

<!-- js -->
<script src="libs/jquery/jquery-3.4.1.min.js"></script>
<script src="libs/bootstrap/bootstrap.min.js"></script>
<script src="js/listened-albums.js"></script>
</body>
</html>
<!-- js -->
<script src="libs/jquery/jquery-3.4.1.min.js"></script>
<script src="libs/bootstrap/bootstrap.min.js"></script>
<script src="js/listened-albums.js"></script>
</body>
</html>
Loading

0 comments on commit 7ed7391

Please sign in to comment.