If you're learning HTML & CSS, try building this Media Player UI next! 🔥

Hey everyone, welcome back to day 21 of our HTML and CSS series. Today we're building something really cool. A cinematic media player that looks like a modern Mac style video window. Let's get started. We'll start with our basic HTML structure. The doc type, HTML and head sections, and give it a title called "Cinematic Media Player". Now, let's start by creating our main container. I'll call it video-wrapper. This section will hold everything that makes up our player, the top bar, all its styling. Think of it like the frame of a movie screen. Next, let's design a Mac style top bar to make our player look like a real app window. We'll add three small dots red, yellow and green, just like on a Mac. Now below that, let's add the actual video element. I'm giving it a source for and a poster image that shows before playback. I'll also add the controls attribute so we can use the browser's built-in player buttons. Now let's move on to our CSS and styling the body section. We'll set a smooth diagonal gradient background using two rich shades of purple and deep blue to give that cinematic look. Then we'll use Flexbox to perfectly centre our video player both vertically and horizontally on the screen. For the player box, we'll use a dark background color, rounded corners and a soft shadow to create depth. The max width keeps it responsive and the overflow hidden makes sure nothing spills out. Now we're styling our top bar, which gives this media player that modern Mac inspired look. We'll make the bar a deep navy blue and use Flexbox to align everything horizontally, the colored dots and the title next to them. Then for each dot, we'll give it a small circular shape with a soft border radius to match the overall card design. Finally, we remove the default outline for a cleaner, more cinematic look. Next, we'll enhance our video controls. By styling the WebKit media panel, we can change how the native play and volume bar appear. We'll give it a soft semi-transparent black background and rounded bottom corners so it blends beautifully with our video container, keeping that clean cinematic style consistent. And that's it. We've just created a cinematic media player using only HTML and CSS. No JavaScript needed. It looks professional, responsive, and feels like a real app window.