Cry Out – Lyrics Page
A simple responsive webpage that displays the lyrics and audio for the song “Cry Out” by Hope Henderson.
This project was created as a personal website to showcase a song written by my wife, along with a custom album cover and a responsive layout designed for both mobile and desktop viewing.
Features
-Responsive design for mobile and desktop devices
-Custom album cover artwork
-Embedded audio player for listening to the song
-Structured lyrics sections (Chorus, Verse, etc.)
-Clean and modern dark theme with gold accents
Technologies Used
-HTML5
-CSS3
-Responsive design using media queries
-Semantic HTML for accessibility and structure
Project Structure
project-folder
│
├── index.html
├── README.md
│
└── assets
├── audio
│ └── 13 Hope Finley-Cry Out.mp3
│
└── images
└── cry-out-cover.png
Responsive Design
The page is designed using a mobile-first approach.
-Mobile layout displays a smaller album cover (200px)
-Tablet and desktop screens increase the album cover to 400px
-Typography scales for readability across devices
Example media query:
@media (min-width: 768px) {
.album-cover {
width: 400px;
}
}
Purpose
This project was built to:
-Practice responsive web design
-Create a personal website for a song and its lyrics
-Improve front-end development skills using HTML and CSS
-Experiment with layout, typography, and media elements
Future Improvements
Potential future updates include:
-Lyrics highlighting synced with audio
-Animations for the album cover
-Improved typography using Google Fonts
-Hosting the page publicly
Author
Tyrone Henderson
Aspiring developer with a passion for building clean, responsive user experiences and solving technical problems.
LinkedIn: https://www.linkedin.com/in/tyrone-henderson-b92514a8