Spaces:
Running
Running
| <html> | |
| <head> | |
| <title>Movie Review Webpage</title> | |
| <style> | |
| body { | |
| background-image: url("https://th.bing.com/th/id/R.ce83236dbbf477bf929a582c09f49e26?rik=OYKuBxUZBs%2fKEg&riu=http%3a%2f%2fil2.picdn.net%2fshutterstock%2fvideos%2f806437%2fthumb%2f1.jpg&ehk=%2b4cw9ZpDKSUYRQTV7yLclg2vaDvGOti8OHW%2bPxbbtZQ%3d&risl=&pid=ImgRaw&r=0"); | |
| height: 100%; | |
| background-size: cover; | |
| font-family: Arial, sans-serif; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| img{ | |
| height: 58%; | |
| width: 100%; | |
| border-radius: 10px; | |
| } | |
| .logo { | |
| font-size: 24px; | |
| font-weight: bold; | |
| color: #fff; | |
| text-decoration: none; | |
| } | |
| ul { | |
| list-style-type: none; | |
| margin: 0; | |
| padding: 0; | |
| display: flex; | |
| } | |
| li { | |
| margin-left: 15px; | |
| } | |
| a { | |
| color: #fff; | |
| text-decoration: none; | |
| } | |
| .main-section { | |
| text-align: center; | |
| padding: 20px; | |
| } | |
| .movie-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| grid-gap: 40px; | |
| } | |
| .movie-card { | |
| background-color: #f0f0f0; | |
| padding: 10px; | |
| border-radius: 10px; | |
| text-align: center; | |
| transition: transform 0.3s; | |
| color: black; | |
| } | |
| .movie-card:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); | |
| opacity: 0.5; | |
| } | |
| footer { | |
| background-color: #4BC1E3; | |
| color: #fff; | |
| text-align: center; | |
| padding: 10px; | |
| } | |
| h2{ | |
| font-size: 32px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <section class="main-section"> | |
| <h2>Welcome to our Movie Review Webpage!</h2> | |
| <p style="margin: 15px; margin-bottom: 35px;">Read the latest movie reviews, discover top-rated films, and learn more about your favorite movies.</p> | |
| <div class="movie-grid"> | |
| <div class="movie-card"> | |
| <a href="ironman.html" target="right"> | |
| <img src="https://img1.hotstarext.com/image/upload/f_auto,t_hcdl/sources/r1/cms/prod/4306/674306-h" alt="Movie 1"></a> | |
| <h3>Iron Man</h3> | |
| <p>Witness the birth of a genius, as Tony Stark becomes Iron Man and battles against his own creations.</p> | |
| </div> | |
| </a> | |
| <div class="movie-card"> | |
| <a href="captain.html" target="right"> | |
| <img src="https://facts.net/wp-content/uploads/2023/06/31-facts-about-the-movie-captain-america-the-first-avenger-1687244091.jpg" alt="Movie 2"></a> | |
| <h3>Captain America</h3> | |
| <p>Unleash the hero within as Captain America fights for justice in World War II. | |
| </p> | |
| </div> | |
| <div class="movie-card"> | |
| <a href="thor.html" target="right"> | |
| <img src="https://images.indianexpress.com/2018/04/thor-1-759.jpg" alt="Movie 3"></a> | |
| <h3>Thor: OdinSon</h3> | |
| <p>God of Thunder, mighty and bold, Thor Odinson's story untold.</p> | |
| </div> | |
| <div class="movie-card"> | |
| <a href="spidy.html" target="right"> | |
| <img src="https://www.adgully.com/img/800/201807/image-3.png.jpg" alt="Movie 3"></a> | |
| <h3>Spider Man</h3> | |
| <p>Neighborhood hero swings into action to prove he's ready for the big leagues.</p> | |
| </div> | |
| <div class="movie-card"> | |
| <a href="blackadam.html" target="right"> | |
| <img src="https://w0.peakpx.com/wallpaper/160/873/HD-wallpaper-black-adam-movie-poster-black-adam-2021-movies-movies-behance.jpg" alt="Movie 3"></a> | |
| <h3>Black Adam</h3> | |
| <p>Black Adam: The world's mightiest anti-hero arrives.</p> | |
| </div> | |
| <div class="movie-card"> | |
| <img src="https://i.ebayimg.com/images/g/JkwAAOSw5atb5FWM/s-l1200.webp" alt="Movie 3"> | |
| <h3>Avatar</h3> | |
| <p>Journey to Pandora, where dreams become reality.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <footer> | |
| <p>© 2021 Movie Review Webpage. All rights reserved.</p> | |
| </footer> | |
| </body> | |
| </html> | |