diff --git a/moviesite/Style.css b/moviesite/Style.css new file mode 100644 index 0000000..250b399 --- /dev/null +++ b/moviesite/Style.css @@ -0,0 +1,104 @@ +body { + background-color: #000000; + color: #ffa500; + align-items: center; +} + +.hero-section { + background-color: #ffa500; + border: 5px solid #000000; + animation: wave 5s linear infinite; + height: 100vh; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 1s ease-in-out; +} + +@keyframes wave { + 0% { + background-position: 0 0; + } + 50% { + background-position: 50% 0; + } + 100% { + background-position: 100% 0; + } +} + +.hero-section h1 { + color: black; +} + +.movies-section { + background-color: #000000; +} + +.movies-section h2 { + color: #ffa500; +} + +.movie-card { + background-color: #ffa500; + color: black; + box-shadow: 0 0 5px rgba(255, 165, 0, 0.5); + align-items: center; +} + +.footer { + background-color: #000000; + color: #ffa500; +} +.nav { + background-color: black; + border-bottom: 5px solid #00ff00; + transition: all 0.2s ease-in-out; +} + +.nav a { + color: white; + text-decoration: none; + padding: 10px 20px; + display: inline-block; +} + +.nav a:hover { + color: #00ff00; + text-shadow: 0 0 10px #00ff00; +} +.btn-watch-now { + background-color: black; + border: 5px solid #ffa500; + color: white; + text-decoration: none; + padding: 10px 20px; + display: inline-block; + text-align: center; + transition: all 0.2s ease-in-out; +} + +.btn-watch-now:hover { + color: #ff8000; + text-shadow: 0 0 10px #e2e2e2; +} +.btn-watch-now:hover { + animation: wave 1s linear infinite; +} + +@keyframes wave { + 0% { + background-position: 0 0; + } + 50% { + background-position: 50% 0; + } + 100% { + background-position: 100% 0; + } +} +img{ + block-size: 100%; + align-items: center; +} \ No newline at end of file diff --git a/moviesite/extraction-2-movie-review-2023.jpeg b/moviesite/extraction-2-movie-review-2023.jpeg new file mode 100644 index 0000000..fa1c8c7 Binary files /dev/null and b/moviesite/extraction-2-movie-review-2023.jpeg differ diff --git a/moviesite/index.html b/moviesite/index.html new file mode 100644 index 0000000..f222f62 --- /dev/null +++ b/moviesite/index.html @@ -0,0 +1,49 @@ + + + + Movie Landing Page + + + + + +
+ + Movie Background 2 + +
+

Coming Soon to Theaters

+ Watch Now +
+

Popular Movies

+
+
+ Movie Poster 2 +

Tejas

+
+
+ Movie Poster 3 +

Movie Title 3

+
+
+ Movie Poster 4 +

Movie Title 4

+
+
+ Movie Poster 5 +

Movie Title 5

+
+
+
+ + + + + diff --git a/moviesite/script.js b/moviesite/script.js new file mode 100644 index 0000000..a7732da --- /dev/null +++ b/moviesite/script.js @@ -0,0 +1,17 @@ +// Fade in the hero section when the page loads +window.addEventListener("load", function() { + document.querySelector(".hero-section").style.opacity = 1; +}); + +// Add a hovering effect to the movie cards +const movieCards = document.querySelectorAll(".movie-card"); + +movieCards.forEach((movieCard) => { + movieCard.addEventListener("mouseover", () => { + movieCard.style.transform = "scale(1.1)"; + }); + + movieCard.addEventListener("mouseout", () => { + movieCard.style.transform = "scale(1)"; + }); +});