Skymovieshd Skin Category Bollywood Movies Html -
button:hover background-color: #555;
header nav ul li a color: #fff; text-decoration: none;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bollywood Movies | SkyMoviesHD</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Bollywood</a></li> <li><a href="#">Hollywood</a></li> <li><a href="#">TV Series</a></li> </ul> </nav> </header> <main> <section class="hero"> <h1>Bollywood Movies</h1> <p>Watch the latest and trending Bollywood movies online</p> </section> <section class="movies"> <div class="movie-grid"> <div class="movie-card"> <img src="movie1.jpg" alt="Movie 1"> <h2>Movie Title 1</h2> <p>2023 | Hindi | 2h 15m</p> <button>Watch Now</button> </div> <div class="movie-card"> <img src="movie2.jpg" alt="Movie 2"> <h2>Movie Title 2</h2> <p>2022 | Hindi | 2h 30m</p> <button>Watch Now</button> </div> <div class="movie-card"> <img src="movie3.jpg" alt="Movie 3"> <h2>Movie Title 3</h2> <p>2021 | Hindi | 2h 45m</p> <button>Watch Now</button> </div> <!-- Add more movie cards here --> </div> </section> </main> <footer> <p>© 2023 SkyMoviesHD</p> </footer> </body> </html> And some basic CSS to get you started ( style.css ):
.movie-grid display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; skymovieshd skin category bollywood movies html
header nav ul list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-around;
header background-color: #333; color: #fff; padding: 1em; text-align: center;
button background-color: #333; color: #fff; border: none; padding: 0.5em 1em; cursor: pointer; border-radius: 5px; button:hover background-color: #555; header nav ul li a
.movies display: flex; flex-direction: column; align-items: center; padding: 2em;
footer background-color: #333; color: #fff; text-align: center; padding: 1em; clear: both;
.movie-card img width: 100%; height: 200px; object-fit: cover; border-radius: 10px 10px 0 0; button:hover background-color: #555
.hero background-image: linear-gradient(to bottom, #333, #555); color: #fff; padding: 5em; text-align: center;
.movie-card h2 font-size: 1.2em; margin-bottom: 0.5em;
.movie-card background-color: #fff; border: 1px solid #ddd; padding: 1em; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
body font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f0f0f0;