From 41eeaa08e4001e0361eff42d80ba8822a86a3754 Mon Sep 17 00:00:00 2001
From: martin machiebe <martinmachiebe21@gmail.com>
Date: Tue, 19 Mar 2024 19:09:34 -1100
Subject: [PATCH] changed the design of the trailer movie and made link to the
 site show only when there is a link to the site

---
 reviews.js  |  8 +++++---
 trailer.css | 11 ++++++++---
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/reviews.js b/reviews.js
index fd070d2..7361bb1 100644
--- a/reviews.js
+++ b/reviews.js
@@ -117,10 +117,12 @@ document.addEventListener("DOMContentLoaded", function () {
                <h4><span>Production companies:</span> ${movieDetails.production_companies
                  .map((comp) => comp.name)
                  .join(", ")}</h4>
-               <h4><a href="${
-                 movieDetails.homepage
-               }" target="_blank">Link to the site</a></h4>
                <h4><a id="watchTrailer" href="#">Watch Trailer</a></h4>
+               <h4>${
+                 movieDetails.homepage
+                   ? `<a href="${movieDetails.homepage}" target="_blank">Link to the site</a>`
+                   : ""
+               }</h4>
                
            </div>
           </div>
diff --git a/trailer.css b/trailer.css
index 68d292a..68604ae 100644
--- a/trailer.css
+++ b/trailer.css
@@ -1,5 +1,5 @@
 body {
-  background-color: rgba(5, 5, 31, 0.952);
+  background-color: rgb(221, 210, 182);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -11,6 +11,11 @@ body {
   padding: 15px;
   border-radius: 15px;
   overflow: hidden;
+  transition: transform 0.5s;
+}
+
+.trailer-body:hover {
+  border: 2px solid green;
 }
 
 .blur-overlay {
@@ -21,7 +26,7 @@ body {
   bottom: 0;
   width: 100%;
   height: 100%;
-  background-color: #ffffff67;
+  background-color: rgba(12, 11, 11, 0.836);
   backdrop-filter: blur(10px); /* Adjust blur intensity as needed */
   z-index: -1;
 }
@@ -29,7 +34,7 @@ body {
 .trailer-body h1 {
   text-align: center;
   margin: 10px 0px 15px;
-  color: #1d1b1bf3;
+  color: white;
 }
 
 .trailer-body iframe {