Skip to content

Interactive 3D quote generator with dynamic typography and visual effects. First web project featuring random inspirational quotes, 3D CSS transforms, and engaging animations. Built with vanilla HTML, CSS, and JavaScript.

Notifications You must be signed in to change notification settings

deepan-alve/3D-Quote-Generator

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

14 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Kanya West 3D Quote Generator

A dynamic web application that fetches and displays Kanye West quotes in an elegant 3D-style container with social sharing capabilities.


πŸ“Έ Screenshot

image image


✨ Features

  • 🎯 Fetches random Kanye West quotes using the Kanye.rest API
  • πŸ’« Stylish 3D container with hover effects
  • 🎨 Modern gradient background with blur effects
  • πŸ”„ "New Quote" button to fetch fresh quotes
  • πŸ“± Fully responsive design for seamless viewing on any device
  • πŸ“€ Social media sharing options:
    • Twitter
    • WhatsApp
    • Instagram (manual sharing)

πŸ› οΈ Technologies Used

  • HTML5
  • CSS3 (including modern features like backdrop-filter)
  • JavaScript (ES6+)
  • Remix Icon for social media icons
  • Fetch API for retrieving quotes

πŸš€ Key Features Demonstrated

  • Asynchronous JavaScript with async/await
  • Dynamic DOM manipulation
  • Robust error handling
  • CSS transforms and transitions for interactive effects
  • Flexible layout using Flexbox
  • Modern UI/UX design principles
  • Social media integration for sharing quotes

πŸ“ Project Structure

3D-Quote-Generator/
β”œβ”€β”€ index.html         # Main HTML file
β”œβ”€β”€ style.css          # CSS for styling
β”œβ”€β”€ script.js          # JavaScript for functionality

πŸƒ How to Run

  1. Clone this repository:
    git clone https://github.com/yourusername/3d-quote-generator.git
  2. Navigate to the project directory:
    cd 3d-quote-generator
  3. Open index.html in your browser.
  4. Click the "New Quote" button to generate quotes.
  5. Share your favorite quotes on your preferred social platform.

πŸ“¬ Feedback

Feel free to open an issue or contribute to enhance this project. Happy coding! πŸ˜„

About

Interactive 3D quote generator with dynamic typography and visual effects. First web project featuring random inspirational quotes, 3D CSS transforms, and engaging animations. Built with vanilla HTML, CSS, and JavaScript.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published