You are browsing as a guest. Sign up (or log in) to start making projects!

Perfect-day

By @HappyMinion

  • 1 Devlogs
  • 6 Total hours

Its a website that shows all my favourite movies from different genres. You can click on the movie poster to know what the movie is about. There are also buttons in the header so you can easily access and genre by clicking on the respective button.

Source
Ship #1

@HappyMinion on Perfect-day

Perfect-day: Movies
I made a interactive web page which has movie recommendations across four popular genres. Users can browse through the movie posters , view the title of the movie on hover, and click any poster to reveal a summary on what the movie is about.

Features
-The header which contains buttons to navigate easily and reach a genre faster.
-The movie posters which show the title of the movie on hover.
-Clickable movie posters which display a quick summary when a user clicks on it.

Files
-index.html which is the main HTML page.
-style.css which is the CSS file for styling.
-.jpg, .jpeg for the image files.

How to run
1.Download all the files in one folder.
2.Open the index.html file in a suitable browser.

Try project → See source code →
Open comments for this post

@HappyMinion on Perfect-day

5h 49m 45s logged

Devlog : “My Perfect Day: Movies”

Project Overview

My Perfect Day: Movies is an interactive web page that shows my favorite movies across four genres: Marvel, Classics, Dystopian, and Animated that i would recommend to others so they can have a perfect day.

It is a clean, modern UI that feels smooth and easy to navigate, IIt has interactive posters and movie detail cards!

Key Features

  • Glass Header: Styled using CSS backdrop-filter to create a glassy effect.

  • Scrolling Posters: Each genre has scrollbars for easy browsing.

  • Hover Overlays: Poster titles show up whenever you hover over a movie.

  • Interactive Summary Cards: Clicking on any poster toggles an info card directly beneath the row to display a quick summary of the movie.

Languages Used

  • HTML5: Semantic structure and container layouts.

  • CSS3: Flexbox, glassmorphism filters, transitions, and custom scrollbar styling.

  • JavaScript (Vanilla): Event listeners and DOM class toggling.

Bug Fixes

  1. Poster Clicks Not Registering
    The overlay title box sat on top of the image element, due to which it would capture the mouse clicks instead of the poster.
    Solution: Added “pointer-events: none;” to the title class in CSS so clicks pass straight through to the image.
0
0
12

Delete project?

Are you sure you want to permanently delete this project? This action cannot be undone.

All devlogs, followers, and associated data will be removed.

Followers

Loading…