Merge pull request #22 from Yaser-123/main

Contact us form
07sumit1002 · Jun 20, 2024 · e2e488f · e2e488f
2 parents 6696e9d + 170fe74
commit e2e488f
Show file tree

Hide file tree

Showing 4 changed files with 125 additions and 17 deletions.
diff --git a/Contact us/contact.html b/Contact us/contact.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://kit.fontawesome.com/2815a7015d.js" crossorigin="anonymous"></script>
+</head>
+<body>
+    <div id="contact">
+        <div class="container">
+            <div class="row">
+                <div class="contact-left">
+                    <h1 class="sub-title">Contact Me</h1>
+
+                    <div class="social-icon">
+                        <a href="#" target="_blank"><i class="fa-brands fa-facebook"></i></a>
+                        <a href="#" target="_blank"><i class="fa-brands fa-twitter-square"></i></a>
+                        <a href="#" target="_blank"><i class="fa-brands fa-instagram"></i></a>
+                        <a href="#" target="_blank"><i class="fa-brands fa-linkedin"></i></a>
+                    </div>
+
+                </div>
+                <div class="contact-right">
+                    <form name="submit-to-google-sheet">
+                        <input type="text" name="Name" placeholder="Your Name" required>
+                        <input type="email" name="Email" placeholder="Your Email" required>
+                        <textarea name="Message" rows="6" placeholder="Your Message"></textarea>
+                        <button type="submit" class="btn btn2">Submit</button>
+                    </form>
+                    <span id="msg"></span>
+                </div>
+            </div>
+        </div>
+</body>
+</html>
diff --git a/Contact us/style.css b/Contact us/style.css
@@ -0,0 +1,86 @@
+*{
+    margin: 0;
+    padding: 0;
+    font-family: 'poppins', sans-serif;
+    box-sizing: border-box;
+}
+html{
+    scroll-behavior: smooth;
+}
+body{
+    background: lightcyan;
+    color: black;
+}
+
+.contact-left{
+    flex-basis: 35%;
+    padding: 20px;
+}
+.contact-right{
+    flex-basis: 60%;
+    padding: 20px;
+}
+.contact-left p{
+    margin-top: 30px;
+}
+.contact-left p i{
+    color: #ff004f;
+    margin-right: 15px;
+    font-size: 25px;
+}
+.social-icon{
+    margin-top: 30px;
+}
+.social-icon a{
+    text-decoration: none;
+    font-size: 30px;
+    margin-right: 15px;
+    color: blue;
+    display: inline-block;
+    transition: transform 0.5s;
+}
+.social-icon a:hover{
+    color: yellowgreen;
+    transform: translateY(-5px);
+}
+.btn.btn2{
+    display: inline-block;
+    background: blueviolet;
+    border-radius: 14px;
+    color: white;
+}
+.btn.btn2:hover{
+    background-color: #ff004f;
+}
+
+.contact-right form{
+    width: 100%;
+}
+form input, form textarea{
+    width: 100%;
+    border: 0;
+    outline: none;
+    background: rgb(232, 210, 238);
+    padding: 15px;
+    margin: 15px 0;
+    color: #fff;
+    font-size: 18px;
+    border-radius: 6px;
+}
+form .btn2{
+    padding: 14px 60px;
+    font-size: 18px;
+    margin-top: 20px;
+    cursor: pointer;
+}
+.copyright{
+    width: 100%;
+    text-align: center;
+    padding: 25px 0;
+    background: #262626;
+    font-weight: 300;
+    margin-top: 20px;
+}
+.copyright i{
+    color: #ff004f;
+}
diff --git a/contact.html b/contact.html
diff --git a/index.html b/index.html
@@ -20,7 +20,7 @@
                 <li><a href="serv.html">Services</a></li>
                 <li><a href="about.html">About</a></li>
                 <li><a href="review.html">Reviews</a></li>
-                <li><a href="contact.html">Contact</a></li>
+                <li><a href="Contact us/contact.html">Contact</a></li>
             </ul>
             <div class="header-btn">
                 <a href="#" class="sign-up">Admin</a>
@@ -202,7 +202,7 @@ <h1>Get to know more about our company, our mission, and our commitment to provi
                         <ul>
                             <li><a href="#">Media Center</a></li>
                             <li><a href="#">Terms of Use</a></li>
-                            <li><a href="#">Contact Us</a></li>
+                            <li><a href="Contact us/contact.html">Contact Us</a></li>
                         </ul>
                     </div>
                 </div>