Started adding tracks to
This commit is contained in:
parent
60e2e0f040
commit
4687eb40e2
BIN
src/img/album-art/common-people.jpg
Normal file
BIN
src/img/album-art/common-people.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 71 KiB |
BIN
src/img/album-art/hits.jpg
Normal file
BIN
src/img/album-art/hits.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 82 KiB |
BIN
src/img/album-art/more.jpg
Normal file
BIN
src/img/album-art/more.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 143 KiB |
BIN
src/img/album-art/travelling-without-moving.jpg
Normal file
BIN
src/img/album-art/travelling-without-moving.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 102 KiB |
@ -37,7 +37,7 @@
|
||||
|
||||
<img src="./img/music-note.svg" class="link-icon">
|
||||
|
||||
<p class="link-card-text">Tunes</p>
|
||||
<p class="link-card-text">Music</p>
|
||||
|
||||
</div>
|
||||
</a>
|
||||
|
@ -76,6 +76,34 @@ a {
|
||||
|
||||
}
|
||||
|
||||
.album-art{
|
||||
|
||||
border-radius: 10px;
|
||||
width: 128px;
|
||||
|
||||
}
|
||||
|
||||
.track-list-container{
|
||||
|
||||
border-radius: 10px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.track-card{
|
||||
|
||||
margin: 5px;
|
||||
|
||||
padding: 10px;
|
||||
|
||||
border-radius: 10px;
|
||||
|
||||
display: inline-block;
|
||||
|
||||
max-width: fit-content;
|
||||
|
||||
}
|
||||
|
||||
.link-card{
|
||||
|
||||
|
||||
|
@ -9,5 +9,42 @@
|
||||
</head>
|
||||
<body>
|
||||
<script src="index.js"></script>
|
||||
|
||||
|
||||
<div class="centered-div intro-div">
|
||||
|
||||
<h3>Here's some of my favourite music!</h3>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="centered-div track-list-container" style="width: 100%;">
|
||||
|
||||
<div class="track-card" style="background-color: #bb9af7;">
|
||||
|
||||
<img class="album-art" src="./img/album-art/common-people.jpg">
|
||||
|
||||
<div class="track-info">
|
||||
<p>Common People</p>
|
||||
<p>Hits</p>
|
||||
<p>Pulp</p>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="track-card" style="background-color: #f7768e;">
|
||||
|
||||
<img class="album-art" src="./img/album-art/more.jpg">
|
||||
|
||||
<div class="track-info">
|
||||
<p>Grown Ups</p>
|
||||
<p>More</p>
|
||||
<p>Pulp</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
Loading…
x
Reference in New Issue
Block a user