This project is a simple yet engaging web page designed to convey a message through a combination of visuals and audio. The page's title is "Sorry bollei sob somossar somadhan hoye jabe?" which translates to "Will all problems be solved just by saying sorry?" in English.
-
Full-Screen Background Image: The page displays a full-screen background image that covers the entire viewport, creating a visually immersive experience.
-
Overlay Text: A centered text overlay, written in Bengali, delivers the message "সরি বললেই সব সমস্যার সমাধান হয়ে যাবে ?" ("Will all problems be solved just by saying sorry?"). The text is styled with a semi-transparent black background to ensure it stands out against the image.
-
Audio Playback: An audio file (
sorry2.mp3) is included in the page, which can be played by clicking a play button. The audio automatically loops, creating a continuous auditory experience. Additionally, the audio will play automatically if the user interacts with the page. -
Responsive Design: The page is fully responsive, ensuring a smooth experience across various devices. The text and button sizes adjust based on the screen width, making the page accessible on both desktop and mobile devices.
-
Interactive Play Button: The play button is prominently positioned at the bottom center of the page. It is styled with larger padding, bold text, and a smooth hover effect that changes its background color, enhancing user interaction.
To use this project, simply open the index.html file in a web browser. Ensure that the styles.css file is in the same directory as the HTML file, and that the sorry2.mp3 audio file and sorry1.jpg image file are correctly referenced in their respective locations.
- index.html: The main HTML file containing the structure of the web page.
- styles.css: The external CSS file for styling the page elements.
- sorry2.mp3: The audio file that is played when the user clicks the play button.
- sorry1.jpg: The background image displayed on the page.
- The play button will start the audio manually if clicked.
- The page is designed to prevent scrolling by hiding overflow, ensuring the full-screen effect remains intact.
- The background image and text overlay are carefully positioned to provide a visually pleasing and meaningful presentation.