updated styling of feedback

Its-Aman-Yadav · May 19, 2024 · b67d6ba · b67d6ba
1 parent 81e7e4c
commit b67d6ba
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 23 deletions.
diff --git a/css/style.css b/css/style.css
@@ -528,14 +528,13 @@ strong {
 }
 
 #about,
-#services,
-#contact {
+#services
+{
   background: #ffffff;
 }
 
 #about,
 #services,
-#contact,
 footer {
   padding-top: 100px;
   padding-bottom: 100px;
@@ -855,12 +854,32 @@ div.card {
 }
 
 /* contact section  */
+#contact{
+  background-color:#f1c11a ;
+  padding-top:60px;
+  padding-bottom:100px;
+}
+.section-title h1{
+  font-size:50px;
+  letter-spacing: normal;
+  font-weight: 700;
+  font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+.section-title h1:hover{
+  font-size: 52px;
+}
+
+.section-title p{
+  font-size: 20px;
+
+}
+
 #contact .form-control {
-  background: transparent;
+  background-color: cornsilk;
   border: 2px solid #e0e0e0;
-  border-radius: 0px;
-  box-shadow: none;
-  font-size: 16px;
+  border-radius: 18px;
+  font-size: 18px;
   margin-bottom: 16px;
   transition: all 0.4s ease-in-out;
 }
@@ -869,23 +888,28 @@ div.card {
   border: 2px solid #797979;
 }
 
+#contact .form-control:active{
+  box-shadow:  1px 0px 5px black ;
+}
+
 #contact input {
   height: 55px;
 }
 
 #contact input[type="submit"] {
-  background: #242424;
   border: none;
-  color: #ffffff;
-  font-size: 15px;
-  font-weight: 400;
-  letter-spacing: 2px;
+  background: #242424;
+  color:white;
+  font-size: 20px;
+  font-weight: 600;
+  letter-spacing: 1px;
   transition: all 0.4s ease-in-out;
   margin-top: 10px;
 }
 
 #contact input[type="submit"]:hover {
-  background: #f1c11a;
+  font-size: 22px;
+  transition: font-size 0.3s linear 0.1s;
 }
 
 /* footer section  */
@@ -1049,7 +1073,7 @@ i {
   display: flex;
   align-items: center;
   justify-content: left;
-  padding: 50px 0px 0 0px;
+  padding: 50px 0px 40px 0px;
 
 
 }

diff --git a/index.html b/index.html
@@ -29,6 +29,13 @@
   <link href='https://fonts.googleapis.com/css?family=Rajdhani:400,500,700' rel='stylesheet' type='text/css'>
   <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+
+<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=Poppins&display=swap" rel="stylesheet">
+
+<link rel="stylesheet" href="@sweetalert2/theme-material-ui/material-ui.css">
+
 <style>
 @import url(https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap);
 .logo-text {
@@ -59,7 +66,7 @@
         <li><i class="fa-solid fa-list" style="filter:invert(1)"></i><a href="#services">Services</a></li>
         <li><i class="fa-solid fa-user"style="filter:invert(1)"></i><a href="#testimonials">Reviews</a></li>
         <li><i class="fa-solid fa-at" style="filter:invert(1)"></i><a href="#contact">Contact Us</a></li>
-        <li><i class="fa-solid fa-message" style="filter:invert(1)"></i><a href="#feedback">Feedback</a></li>
+        <li><i class="fa-solid fa-message" style="filter:invert(1)"></i><a href="#contact">Feedback</a></li>
       </ul>
     </nav>
     <section></section>
@@ -425,8 +432,8 @@ <h5 class="card-title" style="font-size: 28px;font-weight: bold;">Emily R.</h5>
 
         <div class="col-md-offset-2 col-md-8 col-sm-12">
           <div class="section-title">
-            <h1 class="wow fadeInUp" data-wow-delay="0.3s">Get in touch</h1>
-            <p class="wow fadeInUp" data-wow-delay="0.6s">If you have any query or for collaboration</p>
+            <h1>Get in touch</h1>
+            <p>If you have any query or for collaboration</p>
           </div>
           <div class="contact-form wow fadeInUp" data-wow-delay="1.0s">
 
@@ -570,9 +577,13 @@ <h4 class="footer_title">Quick Links</h4>
     + "<br> Message:" +document.getElementById("msg").value
 
   }).then(
-  message => alert("Message sent successsfully")
+  message => Swal.fire({
+  title: "Thank You!",
+  text: "Your message sent successfully!",
+  icon: "success"
+})
 );
-    }
+}
   </script>
 
 	<script src="https://smtpjs.com/v3/smtp.js"></script>
@@ -585,6 +596,8 @@ <h4 class="footer_title">Quick Links</h4>
   <script src="js/wow.min.js"></script>
   <script src="js/smoothscroll.js"></script>
   <script src="js/custom.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+  <script src="sweetalert2/dist/sweetalert2.min.js"></script>
 
 </body>
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,6 +13,5 @@
     "body-parser": "^1.20.2",
     "express": "^4.19.2",
     "nodemailer": "^6.9.13"
-  },
-  "devDependencies": {}
+  }
 }