Reg menu have been added

Max1mkasssss · Feb 18, 2024 · 36815c3 · 36815c3
1 parent c72abd4
commit 36815c3
Show file tree

Hide file tree

Showing 5 changed files with 144 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -39,8 +39,8 @@ <h3>antools.</h3>
                     <li class="header-list-item"><a href="#">Blog</a></li>
                 </ul>
                 <div class="buttons flex">
-                    <button type="button">Login</button>
-                    <button id="openModal" type="button">Sign Up</button>
+                    <button onclick="OpenRegMenuEN()" type="button">Login</button>
+                    <button onclick="OpenRegMenuEN()" type="button">Sign Up</button>
                     <button onclick="redirectToPage()" type="button">UA</button>
                 </div>
             </nav>
@@ -374,8 +374,10 @@ <h3 class="logo-footer">Company Info</h3>
         function redirectToPage() {
             window.location.href = "index.ua.html";
         }
+        function OpenRegMenuEN() {
+            window.location.href = "reg-menu-en.html";
+        }
     </script>
-    <script src="script.js"></script>
 </body>
 
 </html>
diff --git a/index.ua.html b/index.ua.html
@@ -39,8 +39,8 @@ <h3>antools.</h3>
                     <li class="header-list-item"><a href="#">Блог</a></li>
                 </ul>
                 <div class="buttons flex">
-                    <button type="button">Увійти</button>
-                    <button type="button" style="width: 200px;">Зареєструватися</button>
+                    <button onclick="OpenRegMenuEN()" type="button">Увійти</button>
+                    <button onclick="OpenRegMenuEN()" type="button" style="width: 200px;">Зареєструватися</button>
                     <button onclick="redirectToPageEN()" type="button">EN</button>
                 </div>
             </nav>
@@ -375,6 +375,9 @@ <h3 class="logo-footer">Інформація про компанію</h3>
         function redirectToPageEN() {
             window.location.href = "index.html";
         }
+        function OpenRegMenuEN(){
+            window.location.href = "reg-menu-en.html";
+        }
     </script>
 </body>
 

diff --git a/reg-menu-en.html b/reg-menu-en.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Register</title>
+
+    <!-- Modern-normalize  -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/2.0.0/modern-normalize.min.css"
+        integrity="sha512-4xo8blKMVCiXpTaLzQSLSw3KFOVPWhm/TRtuPVc4WG6kUgjH6J03IBuG7JZPkcWMxJ5huwaBpOpnwYElP/m6wg=="
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
+
+    <!-- Styles  -->
+    <link rel="stylesheet" href="style.css">
+
+    <!-- Website Icon  -->
+    <link rel="website icon" href="/img/logotype.svg">
+
+    <!-- Animation  -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
+    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+
+</head>
+
+<body class="reg-menu-body">
+    <main class="reg-menu-main">
+        <div class="reg-menu flex animate__animated animate__backInLeft">
+            <h2>Sign Up</h2>
+            <div class="inputs-reg-menu flex">
+                <input type="text" placeholder="Name">
+                <input type="email" name="" id="" placeholder="E-mail">
+                <input type="password" placeholder="Password">
+                <button onclick="redirectToPageEN()" class="reg-menu-sign-up-btn">Sign Up</button>
+            </div>
+        </div>
+    </main>
+    <script>
+        function redirectToPageEN() {
+            window.location.href = "index.html";
+        }
+    </script>
+</body>
+
+</html>
diff --git a/script.js b/script.js
diff --git a/style.css b/style.css
@@ -3,8 +3,8 @@
   @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Roboto&display=swap');
 
 /* Variables  */
-:root{ 
-
+:root{
+    
     /* Colors  */
     --backgroud-color: #1E252B;
     --blur: blur(25px); 
@@ -651,3 +651,90 @@ footer{
     margin-bottom: 20px; 
 }
 
+/* Reg  */
+.reg-menu-body{ 
+    background-size: 100%;
+    background-image: url(https://bogatyr.club/uploads/posts/2023-02/1677197090_bogatyr-club-p-fon-kosmosa-dlya-fotoshopa-fon-pinterest-1.jpg);
+}
+.reg-menu-main{ 
+    margin: 0;
+    padding: 0;
+}
+.reg-menu{ 
+    margin: 25px auto;
+    background: rgb(128, 0, 255);
+    width: 400px;
+    border-radius: 10px;
+    height: 500px;
+    flex-direction: column;
+    gap: 10px;
+}
+.reg-menu h2{ 
+    margin-top: 20px;
+    color: whitesmoke;
+    text-transform: uppercase;
+    letter-spacing: 7px;
+    font-family: var(--second-font);
+    font-weight: var(--SemiBold);
+    font-style: normal;
+    font-size: 50px;
+    text-align: center;
+} 
+.inputs-reg-menu{ 
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    gap: 10px;
+    margin: 0 auto;
+}
+.inputs-reg-menu input{ 
+    padding: 5px;
+    height: 30px; 
+    border-radius: 3px;
+    width: 300px;
+    border: 1px solid rgba(255, 255, 255, 0.5); 
+    border-radius: 5px;
+    background-color: rgba(255, 255, 255, 0.2); 
+    backdrop-filter: blur(20px); 
+    outline: none;
+    border: none;
+    caret-color: white;
+} 
+.inputs-reg-menu input::placeholder{ 
+    color: white;
+    font-family: var(--main-font);
+    letter-spacing: 2px;
+}
+.inputs-reg-menu input:focus{ 
+    border: none;
+    outline: none;
+}
+.reg-menu-sign-up-btn{ 
+    margin-top: 50px;
+    width: 118px;
+    height: 48px;
+    flex-shrink: 0;
+    color: var(--text-main-color);
+    font-family: var(--main-font);
+    font-size: 16px;
+    font-style: normal;
+    font-weight: var(--SemiBold);
+    line-height: normal;
+    border: none;
+    outline: none;
+    border-radius: 8px;
+    background: var(--backgroud-color);
+    text-align: center;
+}
+.reg-menu-sign-up-btn:hover{ 
+    border-radius: 8px;
+    background: var(--white-color);
+    color: black;
+    text-align: center;
+    transition: 1s;
+    cursor: pointer;
+}
+button:not(:hover){ 
+    transition: 0.7s;
+}