From 1948683d55d9849d288d5f500c3f970a5d35b23e Mon Sep 17 00:00:00 2001
From: Yulia Polushvayko <y.polushvayko@kefirgames.com>
Date: Fri, 6 Jun 2025 16:03:30 +0300
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB?=
 =?UTF-8?q?=D0=B0=20=D1=88=D0=B0=D0=B1=D0=BB=D0=BE=D0=BD=20=D0=BF=D0=BE?=
 =?UTF-8?q?=D0=B4=20=D0=BF=D1=80=D0=BE=D0=B4=D1=83=D0=BA=D1=82=20=D0=B8=20?=
 =?UTF-8?q?=D0=B2=D1=85=D0=BE=D0=B4.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html              |  22 ++++++-
 login.html              |  77 ++++++++++++++++++++++
 product.html            |   4 +-
 source/styles/style.css | 142 ++++++++++++++++++++++++++++++++++------
 4 files changed, 220 insertions(+), 25 deletions(-)
 create mode 100644 login.html
diff --git a/index.html b/index.html
index 88c67fa..32e029c 100644
--- a/index.html
+++ b/index.html
@@ -42,7 +42,7 @@
                     </li>
                 </ul>
 
-                <a href="#" class="nav-button">Login</a>
+                <a href="login.html" class="nav-button">Login</a>
 
                 <!-- Close button -->
                 <div class="nav-close" id="nav-close">
@@ -95,9 +95,27 @@
                 </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>
diff --git a/login.html b/login.html
new file mode 100644
index 0000000..1963998
--- /dev/null
+++ b/login.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link rel="shortcut icon" href="source/images/Logo512х512.png">
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.6.0/remixicon.css">
+
+    <link rel="stylesheet" href="source/styles/style.css">
+
+    <title>Render Line</title>
+
+</head>
+
+<body>
+    <header class="header" id="header">
+        <nav class="nav-container">
+            <a href="index.html" class="nav-logo">
+                <!-- <i class="ri-cactus-fill"></i> -->
+                <img src="source/images/Logo512х512.png" alt="Logo" width="25">
+            </a>
+
+            <div class="nav-menu" id="nav-menu">
+                <ul class="nav-list">
+                    <li class="nav-item">
+                        <a href="#" class="nav-link">Home</a>
+                    </li>
+
+                    <li class="nav-item">
+                        <a href="#" class="nav-link">Store</a>
+                    </li>
+
+                    <li class="nav-item">
+                        <a href="#" class="nav-link">Documentation</a>
+                    </li>
+
+                    <li class="nav-item">
+                        <a href="#" class="nav-link">Contacts</a>
+                    </li>
+                </ul>
+
+                <a href="#" class="nav-button">Login</a>
+
+                <!-- Close button -->
+                <div class="nav-close" id="nav-close">
+                    <i class="ri-close-line"></i>
+                </div>
+            </div>
+
+            <!-- Toggle button -->
+
+            <div class="nav-toggle" id="nav-toggle">
+                <i class="ri-menu-line"></i>
+            </div>
+
+        </nav>
+    </header>
+
+    <main class="main">
+
+        <section class="home">
+
+
+        </section>
+
+    </main>
+
+    <script src="source/files/gsap-public/minified/gsap.min.js"></script>
+
+
+    <script src="main.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/product.html b/product.html
index e25557f..cfca093 100644
--- a/product.html
+++ b/product.html
@@ -42,7 +42,7 @@
                     </li>
                 </ul>
 
-                <a href="#" class="nav-button">Login</a>
+                <a href="login.html" class="nav-button">Login</a>
 
                 <!-- Close button -->
                 <div class="nav-close" id="nav-close">
@@ -62,7 +62,7 @@
     <main class="main">
 
         <section class="home">
-    
+
 
         </section>
 
diff --git a/source/styles/style.css b/source/styles/style.css
index 8bcde73..0450765 100644
--- a/source/styles/style.css
+++ b/source/styles/style.css
@@ -54,6 +54,24 @@ body {
     color: var(--text-color);
 }
 
+/* Navigation for mabile devices */
+@media screen and (max-width: 1023px) {
+    .nav-menu {
+        position: fixed;
+        top: 0;
+        right: -100%;
+        background-color: var(--body-color);
+        width: 80%;
+        height: 100%;
+        box-shadow: 0 0 16px hsla(268, 58%, 4%, .2);
+        padding: 6rem 3rem;
+        display: flex;
+        flex-direction: column;
+        row-gap: 2.5rem;
+        transition: right .4s;
+    }
+}
+
 ul {
     list-style: none;
 }
@@ -131,24 +149,6 @@ img {
     /* margin: 1rem; */
 }
 
-/* Navigation for mabile devices */
-@media screen and (max-width: 1023px) {
-    .nav-menu {
-        position: fixed;
-        top: 0;
-        right: -100%;
-        background-color: var(--body-color);
-        width: 80%;
-        height: 100%;
-        box-shadow: 0 0 16px hsla(268, 58%, 4%, .2);
-        padding: 6rem 3rem;
-        display: flex;
-        flex-direction: column;
-        row-gap: 2.5rem;
-        transition: right .4s;
-    }
-}
-
 .nav-list {
     display: flex;
     flex-direction: column;
@@ -283,6 +283,38 @@ img {
     width: 256px;
 } */
 
+.footer {
+    display: block;
+    margin-inline: 3rem;
+    border-top: .2px solid var(--text-color);
+}
+
+
+.footer-copyright {
+    display: flex;
+    justify-content: left;
+    width: 100%;
+    padding-left: 1.5rem;
+    margin-top: 1rem;
+    font-weight: var(--font-semi-bold);
+}
+
+.footer-list {
+    display: flex;
+    align-items: center;
+    column-gap: 4.5rem;
+    padding: 1.5rem;
+    color: var(--title-color);
+    font-size: var(--small-font-size);
+    font-weight: var(--font-medium);
+}
+
+
+
+
+
+
+
 
 /* For small devices */
 @media screen and (max-width: 300px) {
@@ -293,12 +325,81 @@ img {
     .home-title {
         font-size: 1.75rem;
     }
+
+    .footer-list {
+        column-gap: .5rem;
+    }
 }
 
+/* Samsung Z Fold 5 */
+@media screen and (min-width: 344px) and (min-height: 882px) {
+    .home-container {
+        padding-top: 10rem;
+    }
+
+    .home-title {
+        font-size: 1.75rem;
+    }
+
+    .footer {
+        margin-top: 8rem;
+        margin-inline: 1rem;
+    }
+
+    .footer-list {
+        column-gap: 1rem;
+    }
+}
+
+/* Samsung S8+ */
+@media screen and (min-width: 360px) and (min-height: 740px) {
+    .home-container {
+        padding-top: 10rem;
+    }
+
+    .home-title {
+        font-size: 1.75rem;
+    }
+
+    .footer {
+        margin-top: 8rem;
+        margin-inline: 1rem;
+    }
+
+    .footer-list {
+        column-gap: 1rem;
+    }
+}
+
+/* iPhone SE */
+@media screen and (min-width: 375px) and (min-height: 667px) {
+    .home-container {
+        padding-top: 8rem;
+    }
+
+    .home-title {
+        font-size: 1.75rem;
+    }
+
+    .footer {
+        margin-top: 15rem;
+        margin-inline: 1rem;
+    }
+
+    .footer-list {
+        column-gap: 1rem;
+    }
+}
+
+
 @media screen and (min-width: 376px) and (min-height: 800px) {
     .home-container {
         padding-top: 10rem;
     }
+
+    .footer-list {
+        column-gap: 1rem;
+    }
 }
 
 
@@ -337,7 +438,6 @@ img {
     .home-triangle,
     .home-r,
     .home-l {
-        /* width: 250px; */
         margin-left: 4rem;
     }
 }
@@ -384,12 +484,12 @@ img {
     }
 
     .home-title {
-        letter-spacing: -3px;
+        /* letter-spacing: -3px; */
         margin-bottom: 1rem;
     }
 
     .home-title img {
-        width: 200px;
+        width: 100px;
         right: -.5rem;
     }
 
