Merge branch 'Karamraj:main' into main

Karamraj · Oct 2, 2023 · 58231d4 · 58231d4
2 parents a4436d4 + 335d271
commit 58231d4
Show file tree

Hide file tree

Showing 5 changed files with 311 additions and 259 deletions.
diff --git a/CSS/animation.css b/CSS/animation.css
@@ -0,0 +1,29 @@
+img.vert-move {
+    -webkit-animation: mover 1s infinite alternate;
+    animation: mover 1s infinite alternate;
+  }
+
+  img.vert-move {
+    -webkit-animation: mover 1s infinite alternate;
+    animation: mover 1s infinite alternate;
+  }
+
+  @-webkit-keyframes mover {
+    0% {
+      transform: translateY(0);
+    }
+
+    100% {
+      transform: translateY(-10px);
+    }
+  }
+
+  @keyframes mover {
+    0% {
+      transform: translateY(0);
+    }
+
+    100% {
+      transform: translateY(-10px);
+    }
+  }
diff --git a/IMG/deafults/sign_up.jpg b/IMG/deafults/sign_up.jpg
diff --git a/SignUpModal/index.html b/SignUpModal/index.html
@@ -1,105 +1,79 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link
-      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
-      rel="stylesheet"
-      integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
-      crossorigin="anonymous"
-    />
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
-    <title>SignUp Page</title>
-  </head>
-  <body>
-    <section class="container p-5">
-      <form class="row g-3 needs-validation border border-danger p-5 rounded" novalidate>
-        <div class="col-md-4">
-          <label for="validationCustom01" class="form-label">First name</label>
-          <input
-            type="text"
-            class="form-control"
-            id="validationCustom01"
-            required
-          />
-          <div class="valid-feedback">Looks good!</div>
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="../CSS/animation.css">
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
+  <title>Sign Up Page</title>
+</head>
+
+<body>
+  <section class="fluid-container">
+    <div class="container py-3 h-100">
+      <div class="row d-flex align-items-center justify-content-center h-100">
+        <div class="col-md-8 col-lg-7 col-xl-6">
+          <img src="../IMG/deafults/sign_up.jpg" class="img-fluid vert-move" alt="Phone image">
         </div>
-        <div class="col-md-4">
-          <label for="validationCustom02" class="form-label">Last name</label>
-          <input
-            type="text"
-            class="form-control"
-            id="validationCustom02"
-            required
-          />
-          <div class="valid-feedback">Looks good!</div>
-        </div>
-        <div class="col-md-4">
-          <label for="validationCustomUsername" class="form-label"
-            >Username</label
-          >
-          <div class="input-group has-validation">
-            <span class="input-group-text" id="inputGroupPrepend">@</span>
-            <input
-              type="text"
-              class="form-control"
-              id="validationCustomUsername"
-              aria-describedby="inputGroupPrepend"
-              required
-            />
-            <div class="invalid-feedback">Please choose a username.</div>
-          </div>
-        </div>
-        <div class="col-md-4">
-          <label for="validationCustom03" class="form-label">City</label>
-          <input
-            type="text"
-            class="form-control"
-            id="validationCustom03"
-            required
-          />
-          <div class="invalid-feedback">Please provide a valid city.</div>
-        </div>
-        <div class="col-md-8">
-          <label for="validationCustom05" class="form-label">Address</label>
-          <textarea
-            type="text"
-            class="form-control"
-            id="validationCustom05"
-            required
-          ></textarea>
-          <div class="invalid-feedback">Please provide a valid Address.</div>
-        </div>
-        <div class="col-12">
-          <div class="form-check">
-            <input
-              class="form-check-input"
-              type="checkbox"
-              value=""
-              id="invalidCheck"
-              required
-            />
-            <label class="form-check-label" for="invalidCheck">
-              Agree to terms and conditions
-            </label>
-            <div class="invalid-feedback">
-              You must agree before submitting.
+        <div class="col-md-7 col-lg-5 col-xl-5 offset-xl-1">
+          <h2 class="text-center text-danger">Sign Up</h2>
+          <form>
+            <!-- First Name input -->
+            <div class="form-outline mb-3">
+              <label class="form-label" for="form1Example13">First Name</label>
+              <input type="text" id="form1Example13" class="form-control form-control-lg" />
             </div>
-          </div>
-        </div>
-        <div class="d-flex gap-3">
-          <button id="submitBtn" class="btn btn-danger" type="submit">Submit form</button>
-          <button class="btn btn-outline-danger" type="reset">Reset</button>
+            <!-- Second Name input -->
+            <div class="form-outline mb-3">
+              <label class="form-label" for="form1Example13">Second Name</label>
+              <input type="text" id="form1Example13" class="form-control form-control-lg" />
+            </div>
+            <!-- username input -->
+            <div class="form-outline mb-3">
+              <label class="form-label" for="form1Example13">User Name</label>
+              <div class="input-group">
+                <span class="input-group-text" id="inputGroupPrepend">@</span>
+                <input type="text" id="form1Example13" class="form-control form-control-lg" />
+              </div>
+            </div>
+            <!-- city input -->
+            <div class="form-outline mb-3">
+              <label class="form-label" for="form1Example13">City</label>
+              <input type="text" id="form1Example13" class="form-control form-control-lg" />
+            </div>
+            <!-- address input -->
+            <div class="form-outline mb-3">
+              <label for="validationCustom05" class="form-label">Address</label>
+              <textarea class="form-control" id="validationCustom05" required></textarea>
+            </div>
+            <!-- agree input -->
+            <div class="form-outline mb-3">
+              <input type="checkbox" class="form-check-input" id="invalidCheck" required>
+              <label class="form-check-label" for="invalidCheck">Agree to terms and conditions</label>
+              <div class="invalid-feedback">You must agree before submitting.</div>
+            </div>
+
+            <!-- Submit button -->
+            <div class="form-outline mb-2 text-center">
+              <button type="submit" class="btn-lg btn btn-danger mx-3">Sign in</button>
+              <button type="reset" class="btn-lg btn btn-outline-danger">Reset</button>
+            </div>
+
+          </form>
         </div>
-      </form>
-    </section>
-    <script
-      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
-      integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
-      crossorigin="anonymous"
-    ></script>
-    <script src="./script.js"></script>
-  </body>
-</html>
+      </div>
+    </div>
+  </section>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+    integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
+    crossorigin="anonymous"></script>
+
+
+
+</body>
+
+</html>
diff --git a/index.html b/index.html
@@ -97,7 +97,7 @@
       <div class="header-img p-5">
         <div class="in-img-text bg-dark bg-opacity-25 my-5 p-5 d-flex flex-column justify-content-center gap-4">
           <h1 class="fs-46 align-self-center">welcome to the town of books</h1>
-          <h3 class="fs-24 d-none d-md-block align-self-center ps-md-5 ms-md-5">easily find and purchase your favorite
+          <h3 class="fs-24 d-none d-md-block align-self-center pe-md-4 ms-md-5">easily find and purchase your favorite
             books.</h3>
         </div>
       </div>