Добавила видео в product.

login.html

@@ -68,6 +68,25 @@
 
     </main>
 
+    <footer>
+        <div class="footer" id="footer">
+            <div class="footer-container">
+
+                <p class="footer-copyright">Copyright © Render Line Technologies</p>
+
+                <ul class="footer-list">
+
+                    <li>Legal</li>
+                    <li>Privacy Policy</li>
+                    <li>Cookies</li>
+                    <li>Help</li>
+
+                </ul>
+
+            </div>
+        </div>
+    </footer>
+
     <script src="source/files/gsap-public/minified/gsap.min.js"></script>
 
 

main.js

@@ -42,7 +42,9 @@ gsap.from('.home-l', 1.5, { opacity: 0, y: 300, delay: 0.8 });
 if (window.innerWidth <= 766) {
     gsap.from('.home-content', 1.5, { opacity: 0, y: -300, delay: 0.8 });
     gsap.from('.home-title img', 1.5, { opacity: 0, x: 100, delay: 1.3 });
+    gsap.from('.product-video', 1.5, { opacity: 0, y: 300, delay: 0.8 });
 } else {
     gsap.from('.home-content', 1.5, { opacity: 0, x: -300, delay: 0.8 });
     gsap.from('.home-title img', 1.5, { opacity: 0, x: 300, delay: 1.2 });
+    gsap.from('.product-video', 1.5, { opacity: 0, x: 300, delay: 0.8 });
 }

product.html

@@ -11,7 +11,7 @@
 
     <link rel="stylesheet" href="source/styles/style.css">
 
-    <title>Render Line</title>
+    <title>Render Line Download</title>
 
 </head>
 
@@ -62,10 +62,57 @@
     <main class="main">
 
         <section class="home">
+            <div class="home-container container">
+                <div class="home-content">
+                    <h3 class="home-subtitle">
+                        Render Line
+                    </h3>
 
+                    <h1 class="home-title">
+                        <span>
+                            Download <br>
+                            Create <br>
+                            Get inspired
+                        </span>
+
+                        <!-- <img src="source/images/Wave.png" alt="" width="100"> -->
+                    </h1>
+
+                    <p class="home-description">
+                        Develop, Overachieve and Outshine!
+                    </p>
+
+                    <a href="#" class="dowload-button">
+                        Get Free
+                    </a>
+                </div>
+
+                <div class="product-video">
+                    <video autoplay loop muted height="100%" width="100%" src="source/Video/Video_Engine.mov" class="product-engine" ></video>
+                </div>
+            </div>
 
         </section>
 
+        <footer>
+            <div class="footer" id="footer">
+                <div class="footer-container">
+
+                    <p class="footer-copyright">Copyright © Render Line Technologies</p>
+
+                    <ul class="footer-list">
+
+                        <li>Legal</li>
+                        <li>Privacy Policy</li>
+                        <li>Cookies</li>
+                        <li>Help</li>
+
+                    </ul>
+
+                </div>
+            </div>
+        </footer>
+
     </main>
 
     <script src="source/files/gsap-public/minified/gsap.min.js"></script>

source/styles/style.css

@@ -176,6 +176,10 @@ img {
     font-weight: var(--font-semi-bold);
 }
 
+.nav-button:hover {
+    background: radial-gradient(#373737 0%, #00000000 100%);
+}
+
 .nav-close {
     position: absolute;
     top: 1rem;
@@ -246,6 +250,25 @@ img {
         inset 0 4px 8px hsla(0, 0%, 44%, 0.4);
 }
 
+.home-button:hover {
+    background: radial-gradient(#373737 0%, #00000000 100%);
+}
+
+.dowload-button {
+    display: inline-block;
+    color: var(--title-color);
+    border: 1px solid var(--text-color);
+    padding: 1.125rem 3rem;
+    border-radius: 4rem;
+    font-weight: var(--font-semi-bold);
+    box-shadow: 0 8px 32px hsla(0, 0%, 32%, 0.3),
+        inset 0 4px 8px hsla(0, 0%, 44%, 0.4);
+}
+
+.dowload-button:hover {
+    background: radial-gradient(#373737 0%, #00000000 100%);
+}
+
 .home-images {
     position: relative;
     display: flex;
@@ -253,6 +276,17 @@ img {
     height: 250px;
 }
 
+.product-video {
+    position: relative;
+    display: flex;
+    justify-content: center;
+}
+
+.product-engine {
+    /* width: 256px; */
+    top: -1rem;
+}
+
 .home-images img {
     position: absolute;
 }
@@ -329,6 +363,7 @@ img {
     .footer-list {
         column-gap: .5rem;
     }
+
 }
 
 /* Samsung Z Fold 5 */