Merge pull request #18 from Yaser-123/main

Creating Contact us form (Improved UI/UX)
ChromeGaming · Jun 20, 2024 · 5f61191 · 5f61191
2 parents f23b3cd + e4d0a9c
commit 5f61191
Show file tree

Hide file tree

Showing 2 changed files with 98 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -6,6 +6,7 @@
   <title>Experience Certificate Generator</title>
   <link rel="stylesheet" href="styles.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <script src="https://kit.fontawesome.com/2815a7015d.js" crossorigin="anonymous"></script>
 </head>
 <body>
     <div class="container">
@@ -38,7 +39,33 @@ <h1>Experience Certificate Generator</h1>
             <button type="submit">Generate Certificate</button>
         </form>
     </div>
+
+    <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>
 
   <script src="script.js"></script>
 </body>
-</html>
+</html>
diff --git a/styles.css b/styles.css
@@ -1,6 +1,6 @@
 body {
   font-family: Arial, sans-serif;
-  background: #f0f0f0;
+  background: yellowgreen;
   margin: 0;
   padding: 0;
   display: flex;
@@ -46,7 +46,7 @@ h1 {
 .form-group input {
   width: calc(100% - 20px);
   padding: 8px 10px;
-  border: 1px solid #ddd;
+  border: 1px solid mediumorchid;
   border-radius: 4px;
   font-size: 16px;
   outline: none;
@@ -58,7 +58,7 @@ h1 {
 }
 
 button {
-  background: #28a745;
+  background: blue;
   color: #fff;
   border: none;
   padding: 10px 15px;
@@ -71,3 +71,70 @@ button {
 button:hover {
   background: #218838;
 }
+
+#contact{
+  padding: 40px;
+  align-items: center;
+  text-align: center;
+}
+
+.contact-left{
+  flex-basis: 35%;
+}
+.contact-right{
+  flex-basis: 60%;
+}
+.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: rgb(36, 211, 59);
+  transform: translateY(-5px);
+}
+.btn.btn2{
+  display: inline-block;
+  background: #ff004f;
+  border-radius: 14px;
+  color: white;
+}
+
+.btn.btn2:hover{
+  background-color: #218838;
+}
+
+.contact-right form{
+  width: 350px;
+}
+form input, form textarea{
+  width: 100%;
+  border: 0;
+  outline: none;
+  padding: 15px;
+  margin: 15px 0;
+  color: black;
+  font-size: 18px;
+  border-radius: 6px;
+  border: 1px solid mediumorchid;
+}
+form .btn2{
+  padding: 14px 60px;
+  font-size: 18px;
+  margin-top: 20px;
+  cursor: pointer;
+}