Merge pull request #78 from ujjawalD07/hacktober

Contact page changes
TheGuyDangerous · Oct 17, 2022 · 28ead5c · 28ead5c
2 parents 7b804a6 + a5b3658
commit 28ead5c
Show file tree

Hide file tree

Showing 7 changed files with 77 additions and 18 deletions.
diff --git a/Contact.css b/Contact.css
@@ -1,6 +1,7 @@
 .contact-support-box{
-    /* border: 1px solid red; */
-    margin-top: 50px;
+    margin-top: 0px;
+    padding: 15px;
+    background-color: aliceblue;
 }
 .contact-heading{
     text-align: center;
@@ -105,4 +106,32 @@
     right: 100%;
     width: 100%;
     height: 3px;
-  }
+  }
+
+  .form-control {
+    display: block;
+    width: 148%;
+    padding: 0.375rem 0.75rem;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #212529;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid #ced4da;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    border-radius: 0.375rem;
+    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+}
+
+label{
+    font-size: 18px;
+    font-weight: 500;
+}
+
+.leftPart{
+    padding-right: 7px;
+    margin: 12px 0px 8px 0px;
+}
diff --git a/Contact.html b/Contact.html
@@ -8,6 +8,9 @@
     <meta name="description" content="">
     <meta name="page_type" content="np-template-header-footer-from-plugin">
     <title>Contact</title>
+    <!-- CSS only -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
     <link rel="shortcut icon" href="images/FC.png" type="image/png">
     <link rel="stylesheet" href="noobcoders.css" media="screen">
     <link rel="stylesheet" href="Vegetarian.css" media="screen">
@@ -109,9 +112,10 @@
         <div class="contact-container">
             <div class="contact-box">
                 <div class="leftPart">
-                    <img src="https://claxindia.com/wp-content/uploads/elementor/thumbs/contact-header-art-1-ohha01dqa21p4m3oifega9qovr6j364e3ppduer3sg.png" alt="">
+                    <img src="images/icon.jpg"
+                        alt="">
                 </div>
-                <div class="rightPart">
+                <!-- <div class="rightPart">
                     <form action="" id="form">
                         <label for="Name">
                             <span class="contact-ques"> Name </span>
@@ -132,7 +136,29 @@
                         </label>
                         <button type="submit">Submit</button>
                     </form>
-                </div>
+                </div> -->
+                <form>
+                    <div class="form-group">
+                        <label for="exampleFormControlInput1">Name</label>
+                        <input type="email" class="form-control" id="exampleFormControlInput1"
+                            placeholder="Enter your name">
+                    </div>
+                    <div class="form-group">
+                        <label for="exampleFormControlInput1">Email address</label>
+                        <input type="email" class="form-control" id="exampleFormControlInput1"
+                            placeholder="Enter your Email">
+                    </div>
+                    <div class="form-group">
+                        <label for="exampleFormControlInput1">Subject</label>
+                        <input type="email" class="form-control" id="exampleFormControlInput1"
+                            placeholder="Write a subject">
+                    </div>
+
+                    <div class="form-group">
+                        <label for="exampleFormControlTextarea1">Message</label>
+                        <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Describe your issue"></textarea>
+                    </div>
+                </form>
             </div>
 
         </div>

diff --git a/Home.css b/Home.css
@@ -1,5 +1,5 @@
 .u-section-1 {
-  background-image: url("images/yy-min.jpg");
+  background-image: url("images/bg-image.jpg");
   background-position: 50% 50%;
 }
 
@@ -14,7 +14,7 @@
 }
 
 .u-section-1 .u-container-layout-1 {
-  padding: 30px 0 30px 30px;
+  padding: 207px 7px 0px 63px;
 }
 
 .u-section-1 .u-text-1 {
@@ -28,7 +28,7 @@
 
 .u-section-1 .u-text-2 {
   text-transform: uppercase;
-  color: aliceblue;
+  color: yellowgreen;
   font-size: 6.875rem;
   line-height: 0.8;
   font-weight: 700;
@@ -55,7 +55,7 @@
 .u-section-1 .u-image-1 {
   width: 408px;
   height: 408px;
-  margin: -408px auto 0 -24px;
+  margin: -331px auto 0 -103px;
 }
 
 @media (max-width: 1199px) {
@@ -124,17 +124,21 @@
   }
 
   .u-section-1 .u-container-layout-1 {
-    padding-left: 10px;
+    margin-top: 156px;
+    margin-left: 167px;
+    /* width: 39px; */
+    display: block;
+    padding: 0px 28px 0px 38px; 
   }
 
   .u-section-1 .u-text-2 {
     font-size: 4.0625rem;
   }
 
   .u-section-1 .u-image-1 {
-    width: 168px;
-    height: 168px;
-    margin-top: -381px;
+    width: 408px;
+    height: 408px;
+    margin: -353px 12px 14px -30px;
   }
 }
 
@@ -144,10 +148,9 @@
   }
 
   .u-section-1 .u-group-1 {
-    min-height: 472px;
-    width: 340px;
-    margin-right: auto;
-    margin-left: -29px;
+    width: 712px;
+    min-height: 484px;
+    margin: 53px -93px -16px auto;
   }
 
   .u-section-1 .u-container-layout-1 {

diff --git a/images/bg-image.jpg b/images/bg-image.jpg
diff --git a/images/contact.jpg b/images/contact.jpg
diff --git a/images/icon.jpg b/images/icon.jpg
diff --git a/noobcoders.css b/noobcoders.css
@@ -34618,6 +34618,7 @@ a.u-link.u-text-hover-grey-90:hover {
 /*end-variables sitestylecss*/
 .u-header {
   background-image: none;
+  background-color: lightyellow;
 }
 
 .u-header .u-sheet-1 {