added seperate page for contact me

sumana-2705 · sumana-2705 · commit 4e2c1ece7c2a · 2024-12-11T22:13:36.000+05:30
diff --git a/contact-me.html b/contact-me.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sumana-Portfolio</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <header class="header">
+        <a href="#" class="logo">A.Sumana Sree</a>
+        <nav class="navbar">
+            <a href="index.html" class="active">Home</a>
+            <a href="index.html#education">Education</a>
+            <a href="#">Experience</a>
+            <a href="projects.html">Projects</a>
+        </nav>
+        <a href="contact-me.html" class="contact">Contact Me</a>
+    </header>
+    
+    <section id="contact-me" class="contact-form">
+        <div class="contact-box">
+            <h2 class="contact-me">Send me a message here...</h2>
+            <form action="#" >
+            <div class="input-box">
+                <input type="text" placeholder="First name">
+                <input type="text" placeholder="Last name">
+            </div>
+            <div class="input-box">
+                <input type="number" placeholder="Phone Number">
+                <input type="email" placeholder="email">
+            </div>
+            <textarea name="" id="" cols="30" rows="1" placeholder="Subject"></textarea>
+            <textarea name="" id="" cols="30" rows="5" placeholder="Your Message"></textarea>
+            <input type="submit" value="Send Message" class="btn-1">
+        </form>
+        </div>
+    </section>
+
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -17,7 +17,7 @@
             <a href="#">Experience</a>
             <a href="projects.html">Projects</a>
         </nav>
-        <a href="#contact-me" class="contact">Contact Me</a>
+        <a href="contact-me.html" class="contact">Contact Me</a>
     </header>
 
     <section class="home">
@@ -52,24 +52,8 @@ <h2 class="heading">Education</h2>
         </div>
     </section>
 
-    <section id="contact-me" class="contact-form">
-        <div class="contact-box">
-            <h2 class="contact-me">Contact <span>Me</span></h2>
-            <form action="#">
-            <div class="input-box">
-                <input type="text" placeholder="Name">
-                <input type="email" placeholder="Email">
-            </div>
-
-            <div class="input-box">
-                <input type="number" placeholder="Phone Number">
-                <input type="text" placeholder="Subject">
-            </div>
-
-            <textarea name="" id="" cols="30" rows="5" placeholder="Your Message"></textarea>
-            <input type="submit" value="Send Message" class="btn-1">
-        </form>
-        </div>
+    <section id="skills" class="skills">
+        
     </section>
     
     <footer class="footer">
@@ -82,7 +66,7 @@ <h2 class="contact-me">Contact <span>Me</span></h2>
             <a href="https://x.com/sumana_2705"><i class='bx bxl-twitter' ></i></a>
             <a href="mailto:sumanasree2705@gmail.com"><i class='bx bxl-gmail' ></i></a>
         </div>
-
+    </footer>
 
 
 </body>
diff --git a/style.css b/style.css
@@ -246,25 +246,34 @@ span{
 
 .contact-box{
     justify-content: center;
-    margin: 0%;
+    margin: 0;
     align-items: center;
     background-color: whitesmoke;
 }
 .contact-form{
     height: 100vh;
+    margin: 0;
+    background-color: whitesmoke;
 }
 .contact-form h2{
     text-align: center;
     font-size: 36px;
-    padding-top: 0.8em;
+    padding-top: 9rem;
+    padding-bottom: 2rem;
 }
 .contact-form form{
     max-width: 50em;
-    margin: 1rem auto;
+    margin: auto;
     text-align: center;
-    padding-bottom: 1em;
+    padding-bottom: 0em;
     background: whitesmoke;
 }
+
+.input-box{
+    display: flex;
+    gap: 5rem;
+}
+
 .contact-form form .input-box input,
 .contact-form form textarea{
     width: 100%;
