Add files via upload

affancoder · Apr 14, 2024 · 40dd640 · 40dd640
1 parent b42c58e
commit 40dd640
Show file tree

Hide file tree

Showing 4 changed files with 139 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -28,7 +28,7 @@
         <span><img src="assests/img/logo.svg" width="63" /></span>
         <div>
           <button class="btn">&#8493;&nbsp;English</button>
-          <button class="btn-red-sm">Sign in</button>
+          <button class="btn-red-sm"><a href="login.html">Sign in</a></button>
         </div>
       </nav>
       <div class="box"></div>

diff --git a/login.html b/login.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Netflix - Watch TV Shows & movies</title>
+    <link rel="stylesheet" href="style.css" class="css">
+    <link rel="stylesheet" href="assests/img/logo.png" class="icon">
+</head>
+<body>
+    <div class="container">
+        <form action="#" method="POST" class="login-form">
+          <h2>Login</h2>
+          <div class="input-group">
+            <label for="username">Username or Email</label>
+            <input type="text" id="username" name="username" required>
+          </div>
+          <div class="input-group">
+            <label for="password">Password</label>
+            <input type="password" id="password" name="password" required>
+          </div>
+          <button type="submit" class="buttonlogin"><a href="index.html" id="text-dec">Login</a></button>
+          <div class="footerlogin">
+            <a href="#">Forgot Password?</a>
+            <span>Don't have an account? <a href="sign.html">Sign Up</a></span>
+            <a href="index.html">Return to home</a>
+          </div>
+        </form>
+      </div>
+</body>
+</html>
diff --git a/sign.html b/sign.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Netflix - Watch TV Shows & movies</title>
+    <link rel="stylesheet" href="style.css" class="css">
+    <link rel="stylesheet" href="assests/img/logo.png" class="icon">
+</head>
+<body>
+    <div class="container">
+        <form action="#" method="POST" class="login-form">
+          <h2>Sign Up</h2>
+          <div class="input-group">
+            <label for="text">Full Name</label>
+            <input type="name" id="name" name="text" required>
+          </div>
+          <div class="input-group">
+            <label for="username">Username or Email</label>
+            <input type="text" id="username" name="username" required>
+          </div>
+          <div class="input-group">
+            <label for="password">Password</label>
+            <input type="password" id="password" name="password" required>
+          </div>
+          <button type="submit" class="buttonlogin"><a href="index.html" id="text-dec">Sign Up</a></button>
+          <div class="footerlogin">
+            <a href="#">Forgot Password?</a>
+            <span>Already have an account? <a href="login.html">Login</a></span>
+            <a href="index.html">Return to home</a>
+          </div>
+        </form>
+      </div>
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -109,9 +109,14 @@ nav button {
 }
 .btn-red-sm {
   height: 34px;
-  border-style: solid;
+  border: 1px solid black;
   cursor: pointer;
 }
+
+.btn-red-sm a{
+  text-decoration: none;
+  color: #fff;
+}
 .main input {
   padding: 8px 28px;
   font-size: 16px;
@@ -173,6 +178,72 @@ section.first > div :nth-child(2) {
   top: 65px;
 }
 
+/* ----------- login ---------- */
+
+.container {
+  max-width: 400px;
+  margin: 100px auto;
+  background-color: rgba(0, 0, 0, 0.8);
+  padding: 20px;
+  border-radius: 5px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+  color: white;
+  border: 2px solid #8f8f8f;
+}
+
+.login-form {
+  text-align: center;
+}
+
+h2 {
+  margin-bottom: 20px;
+}
+
+.input-group {
+  margin-bottom: 20px;
+}
+
+label {
+  display: block;
+  margin-bottom: 5px;
+  display: flex;
+  justify-content: flex-start;
+}
+
+input {
+  width: 100%;
+  height: 36px;
+  padding: 10px -20px;
+  border-radius: 5px;
+  border: 1px solid #444;
+  background-color: #333;
+  color: #fff;
+}
+
+.buttonlogin {
+  width: 100%;
+  padding: 10px;
+  border: none;
+  background-color: #e50914;
+  color: #fff;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.buttonlogin:hover {
+  background-color: #b5070e;
+}
+
+.footerlogin{
+  text-decoration: none;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+
+#text-dec {
+  text-decoration: none;
+  color: white;
+}
 /* ----------------------FAQs Accordion------------------------ */
 
 .faq {