Resources and Credits
Free-to-use snippets from my website, useful websites and credits for some of the graphics I have used. If you want a specific part of my website for personal use feel free to contact me about it!
I'll make this page prettier someday.
Resources
- Music player snippet (see sidebar for a live preview)
- Petrapixel's website - Her resources helped me with most of my issues regarding website building, I highly recommend checking it out!
- Public Domain Treasures - A website with a collection of public domain illustrations for free use.
- A Field Guide to Web Accessibility - A guide to the basics of web accessibility.
HTML
<div class="music-player">
<iframe width="150" height="150"
src="https://www.youtube.com/embed/GET EMBED LINK FROM YOUTUBE"
title="YouTube video player"frameborder="0" allow="accelerometer; autoplay;
clipboard-write; encrypted-media;
gyroscope; picture-in-picture;
web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<img src="ALBUM IMAGE LINK" alt="ALBUM ALT TEXT">
<p>Listening to...<br>
<i>Song Title</i><br>
Artist</p>
</div>
CSS
.music-player {
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: space-evenly;
width: 300px;
position: relative;
}
.music-player p {
margin: 5px 0 0 10px;
padding: 5px;
font-size: small;
align-content: center;
}
.music-player img {
height: 100px;
padding: 10px;
}
.music-player iframe {
display: inline;
/* relative to player */
position: absolute;
opacity: 0.001;
top: -30px;
left: -20px;
z-index: 1;
}
Credits
- Bookshelf image by OverTheSea.