Skip to content

Commit

Permalink
Let There Be Rock by AC/DC
Browse files Browse the repository at this point in the history
  • Loading branch information
williamdsw committed Nov 2, 2020
1 parent 3b4049c commit e3eaaba
Show file tree
Hide file tree
Showing 12 changed files with 1,581 additions and 1,571 deletions.
4 changes: 2 additions & 2 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
{
"liveServer.settings.port": 5501
{
"liveServer.settings.port": 5501
}
1,348 changes: 674 additions & 674 deletions LICENSE

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
# listened-albums

# listened-albums

Challanged by [MrS4w](https://mrs4w.github.io/listened-albums/) to do something related to my last "new" listened albums.
Binary file added covers/acdc--let-there-be-rock.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
168 changes: 84 additions & 84 deletions css/listened-albums.css
Original file line number Diff line number Diff line change
@@ -1,85 +1,85 @@
body {background-color: #1e2c4f; }

/* search elements */
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);
color: white !important;
border-radius: 0 !important;
box-shadow: inset 1px 1px 10px rgba(255, 255, 255, 0.3);
box-shadow: 1px 1px 5px rgba(255, 255, 255, 0.7);
}

nav {
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.8);
border-bottom: 1px dashed rgba(0, 0, 0, 0.5);
}

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

footer {
color: white;
padding: 1rem;
font-size: 110%;
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; }

/* 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; }

/* hover */
.hover-effect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
border: 2px dotted rgba(0, 0, 0, 0.25);
box-shadow: 5px 5px 10px black;
}

.hover-effect img {
display: block;
position: relative;
-webkit-transition: all .4s linear;
transition: all .4s linear;
}

.hover-effect .overlay {
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
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;
}

.hover-effect:hover img {
-ms-transform: scale(1.2);
-webkit-transform: scale(1.2);
transform: scale(1.2);
}

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

/* bootstrap ... */
body {background-color: #1e2c4f; }

/* search elements */
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);
color: white !important;
border-radius: 0 !important;
box-shadow: inset 1px 1px 10px rgba(255, 255, 255, 0.3);
box-shadow: 1px 1px 5px rgba(255, 255, 255, 0.7);
}

nav {
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.8);
border-bottom: 1px dashed rgba(0, 0, 0, 0.5);
}

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

footer {
color: white;
padding: 1rem;
font-size: 110%;
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; }

/* 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; }

/* hover */
.hover-effect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
border: 2px dotted rgba(0, 0, 0, 0.25);
box-shadow: 5px 5px 10px black;
}

.hover-effect img {
display: block;
position: relative;
-webkit-transition: all .4s linear;
transition: all .4s linear;
}

.hover-effect .overlay {
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
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;
}

.hover-effect:hover img {
-ms-transform: scale(1.2);
-webkit-transform: scale(1.2);
transform: scale(1.2);
}

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

/* bootstrap ... */
.form-group { margin: auto; }
178 changes: 90 additions & 88 deletions index.html
Original file line number Diff line number Diff line change
@@ -1,89 +1,91 @@
<!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">

<!-- 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>

<!-- 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>
</div>
</nav>

<br>

<!-- 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>

<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>
<!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">

<!-- 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>

<!-- 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>
</div>
</nav>

<br>

<!-- 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>

<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>
Loading

0 comments on commit e3eaaba

Please sign in to comment.