contact.html

nkverified · Jan 7, 2025 · ff6ec2f · ff6ec2f
1 parent 151c801
commit ff6ec2f
Showing 1 changed file with 53 additions and 15 deletions.
diff --git a/contact.html b/contact.html
@@ -3,44 +3,51 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Contact Form</title>
+    <title>Cyberpunk Contact Form</title>
     <style>
+        /* Global Styles */
         body {
             font-family: 'Courier New', monospace;
-            background: linear-gradient(135deg, #020204, #111010, #090c19);
+            background: linear-gradient(135deg, #020204, #0a0c17, #111827);
             color: #00ffc3;
             margin: 0;
             padding: 0;
             display: flex;
             justify-content: center;
             align-items: center;
-            height: 100vh;
-            overflow: hidden;
+            min-height: 100vh;
         }
+
+        /* Contact Form Container */
         .contact-form {
             background: #181b2c;
             border: 2px solid #00ffc3;
             border-radius: 10px;
             padding: 20px;
-            width: 100%;
+            width: 90%;
             max-width: 400px;
             box-shadow: 0 0 20px #00ffc3;
+            text-align: center;
         }
+
+        /* Form Header */
         .contact-form h2 {
-            text-align: center;
+            font-size: 24px;
             margin-bottom: 20px;
-            font-size: 26px;
             color: #ff007f;
         }
+
+        /* Input and Textarea Styles */
         .contact-form label {
             display: block;
-            margin-bottom: 5px;
+            text-align: left;
+            margin-bottom: 8px;
             font-size: 14px;
             color: #00ffc3;
         }
+
         .contact-form input,
-        .contact-form textarea,
-        .contact-form button {
+        .contact-form textarea {
             width: 100%;
             padding: 10px;
             margin-bottom: 15px;
@@ -49,35 +56,66 @@
             background: #020204;
             color: #00ffc3;
             font-size: 14px;
+            box-sizing: border-box;
         }
+
         .contact-form textarea {
             height: 100px;
+            resize: none;
         }
+
+        /* Button Styles */
         .contact-form button {
+            width: 100%;
+            padding: 10px;
             background: #ff007f;
             color: #fff;
             border: none;
+            border-radius: 5px;
             font-size: 16px;
             cursor: pointer;
-            transition: background 0.3s;
+            transition: background 0.3s, color 0.3s;
         }
+
         .contact-form button:hover {
             background: #00ffc3;
             color: #020204;
         }
+
+        /* Responsive Design */
+        @media (max-width: 600px) {
+            .contact-form {
+                padding: 15px;
+                width: 95%;
+            }
+
+            .contact-form h2 {
+                font-size: 20px;
+            }
+
+            .contact-form input,
+            .contact-form textarea {
+                font-size: 13px;
+            }
+
+            .contact-form button {
+                font-size: 14px;
+            }
+        }
     </style>
 </head>
 <body>
-    <form class="contact-form" action="mailto:nkverifiedyt@gmail.com" method="POST" enctype="text/plain">
+    <form class="contact-form" action="mailto:example@example.com" method="POST" enctype="text/plain">
         <h2>Contact Us</h2>
+
         <label for="name">Name:</label>
-        <input type="text" id="name" name="name" required>
+        <input type="text" id="name" name="name" placeholder="Enter your name" required>
 
         <label for="email">Email:</label>
-        <input type="email" id="email" name="email" required>
+        <input type="email" id="email" name="email" placeholder="Enter your email" required>
 
         <label for="message">Message:</label>
-        <textarea id="message" name="message" required></textarea>
+        <textarea id="message" name="message" placeholder="Type your message here" required></textarea>
 
         <button type="submit">Send Message</button>
     </form>