changed the design of the trailer movie and made link to the site sho…

…w only when there is a link to the site
martinvibes · Mar 20, 2024 · 41eeaa0 · 41eeaa0
1 parent 6ff2961
commit 41eeaa0
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 6 deletions.
diff --git 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
@@ -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,15 +26,15 @@ 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;
 }
 
 .trailer-body h1 {
   text-align: center;
   margin: 10px 0px 15px;
-  color: #1d1b1bf3;
+  color: white;
 }
 
 .trailer-body iframe {