Merge pull request #90 from 18Ayushi/main

Issue #13 resolved
E-Cell-VSSUT · Oct 9, 2022 · b5a8c33 · b5a8c33
2 parents 7daf7f9 + 343f69c
commit b5a8c33
Show file tree

Hide file tree

Showing 7 changed files with 284 additions and 0 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/Ayushi_kumari/.DS_Store b/Ayushi_kumari/.DS_Store
diff --git a/Ayushi_kumari/dark theme.png b/Ayushi_kumari/dark theme.png
diff --git a/Ayushi_kumari/index.html b/Ayushi_kumari/index.html
@@ -0,0 +1,61 @@
+<!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" />
+    <title>contact UI form</title>
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
+    />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+
+</head>
+<body>
+
+    <div class="form">
+        <h2>Contact us</h2>
+
+        <div class="input">
+            <div class="inputBox">
+                <label>Username</label>
+                <input class="insert1" type ="text" name="" placeholder="example one">
+
+            </div>
+            <div class="inputBox">
+                <label>E-mail</label>
+                <input class="insert2" type="email" name="" placeholder="[email protected]">
+            </div>
+            <div class="inputBox">
+                <label>Phone</label>
+                <input class="insert3" type="number" name="" placeholder="123-456-789">
+            </div>
+            <div class="inputBox">
+                <label>Message</label>
+                <input class="insert4" type="text" name="messages" placeholder=" Leave your messages here">
+            </div>
+            <div class="inputBox">
+                <input class="insert5" type="submit" name="" value="Send">
+            </div>
+
+        </div>
+
+    </div>
+
+    <div class="toggle">
+        <i class="far fa-sun"></i>
+      </div>
+
+
+
+    <script src="script.js"></script>
+
+</body>
+</html>
diff --git a/Ayushi_kumari/light theme.png b/Ayushi_kumari/light theme.png
diff --git a/Ayushi_kumari/script.js b/Ayushi_kumari/script.js
@@ -0,0 +1,23 @@
+const form = document.querySelector(".form");
+const toggle = document.querySelector(".toggle");
+const body = document.querySelector("body");
+const input1 = document.querySelector(".insert1");
+const input2 = document.querySelector(".insert2");
+const input3 = document.querySelector(".insert3");
+const input4 = document.querySelector(".insert4");
+const input5 = document.querySelector(".insert5");
+
+
+
+toggle.addEventListener("click", () => {
+  form.classList.toggle("light")
+    ? (toggle.firstElementChild.className = "far fa-moon")
+    : (toggle.firstElementChild.className = "far fa-sun");
+  body.classList.toggle("light");
+  input1.classList.toggle("light");
+  input2.classList.toggle("light");
+  input3.classList.toggle("light");
+  input4.classList.toggle("light");
+  input5.classList.toggle("light");
+
+});
diff --git a/Ayushi_kumari/style.css b/Ayushi_kumari/style.css
@@ -0,0 +1,200 @@
+@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900&display=swap');
+*
+{
+
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Poppins',sans-serif;
+
+}
+
+body
+{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    background-color: #131419;
+}
+
+body.light{
+    background-color: #ffffff;
+}
+
+
+.toggle 
+{
+    width: 4.2rem;
+  height: 4.2rem;
+  background-color: #ddd;
+  position: absolute;
+  top: 2.2rem;
+  right: 26rem;
+  display: grid;
+  place-items: center;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.form.light .toggle
+{
+    color: #222222;
+}
+
+.toggle i
+ {
+    font-size: 3rem;
+    color: #222222;
+  }
+
+.form.light .toggle i
+{
+    color: #777;
+}  
+
+.form
+{
+    position: relative;
+    width: 470px;
+    height: 600px;
+    padding: 40px 40px  60 px;
+    background: #131419;
+    border-radius: 30px;
+    text-align: center;
+    backdrop-filter: blur(5px);
+    box-shadow: -10px -10px 20px rgba(255,255,255,0.05),
+                 10px 10px 20px rgba(0,0,0,0.5);
+} 
+
+.form.light
+{
+    background-color: #FAF9F6;
+    box-shadow: -20px -20px 30px rgba(255,255,255,0.01),
+                 10px 10px 20px rgba(0,0,0,0.4);
+}
+
+
+
+
+.form h2
+{
+    padding-top: 19px;
+    color: #c7c7c7;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    word-spacing: 1px;
+    font-size: 33px;
+    font-style: normal;
+    font-family:Verdana, Geneva, Tahoma, sans-serif;
+
+}
+
+.form.light h2
+{
+    color: #000000;
+}
+
+.form.input
+{
+
+    text-align: left;
+    margin-top: 40px;
+
+
+}
+
+.form .input .inputBox input.light{
+    background: #FAF9F6;
+
+}
+
+.form.input.inputBox
+{
+
+    margin-top: px;
+
+
+}
+
+.form .input .inputBox label
+{
+    display: block;
+    color:#868686;
+    margin-bottom: 5px;
+    font-size: 17.5px;
+    padding-top: 10px;
+    text-align: start;
+    padding-left: 70px;
+
+
+}
+
+.form.light .input .inputBox label
+{
+    color: #000000;
+}
+
+.form .input .inputBox input
+{
+    width: 78%;
+    height: 50px;
+    background: #131419;
+    border: 5px;
+    outline: none;
+    border-radius: 20px;
+    padding: 5px 15px;
+    color: #ffffff;
+    font-size: 18px;
+    padding-left: 20px;
+    color: #03a9f4;
+    box-shadow: inset -4px -4px 8px rgba(255,255,255,0.1),
+                 inset 4px 4px 8px rgba(0,0,0,0.8);
+
+}
+.form .input .inputBox input.light{
+    color: #0ABAB5;
+    font-size: 19px;
+    box-shadow: inset -6px -6px 10px rgba(255,255,255,0.01),
+                 inset 2px 3px 7px rgba(0,0,0,0.4);
+
+}
+
+
+
+
+.form .input .inputBox input[type="submit"]
+{
+    font-size: 23px;
+    letter-spacing: 2.5px;
+
+
+    width: 45%;
+    margin-top: 40px;
+    box-shadow:   -4px -4px 8px rgba(255,255,255,0.1),
+                    4px 4px 8px rgba(0,0,0,0.8);
+}
+
+.form .input .inputBox input[type="submit"]:active
+{
+    color: #006c9c;
+    margin-top: 30px;
+    box-shadow: inset -4px -4px 8px rgba(255,255,255,0.1),
+                inset 4px 4px 8px rgba(0,0,0,0.8);
+
+}
+
+.form .input .inputBox input::placeholder
+{
+    color: #555;
+    font-size: 16px;
+    padding-left: 10px;
+}
+
+.form .input .inputBox input[name="messages"]
+{
+    width: 78%;
+    height: 110px;
+
+}