https://github.com/talhat298/quader

A responsive web page featuring a full-screen background, Bengali text overlay, and looping audio, prompting the question: "Will all problems be solved just by saying sorry?"
https://github.com/talhat298/quader

audioapi css3 html5 media-queries responsive-web-design

Last synced: 17 days ago
JSON representation

A responsive web page featuring a full-screen background, Bengali text overlay, and looping audio, prompting the question: "Will all problems be solved just by saying sorry?"

• Host: GitHub
• URL: https://github.com/talhat298/quader
• Owner: TalhaT298
• Created: 2024-08-11T16:57:40.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-08-11T17:10:35.000Z (5 months ago)
• Last Synced: 2024-08-11T18:33:28.119Z (5 months ago)
• Topics: audioapi, css3, html5, media-queries, responsive-web-design
• Language: CSS
• Homepage: https://sorryquader.netlify.app/
• Size: 3 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Sorry bollei sob somossar somadhan hoye jabe?

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.

## Features

- **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.

## Usage

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.

## File Structure

- **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.

## Notes

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

## Live Link