added contact page

RanitManik · Aug 20, 2023 · c7ee65c · c7ee65c
1 parent fc35b5a
commit c7ee65c
Show file tree

Hide file tree

Showing 2 changed files with 128 additions and 3 deletions.
diff --git a/contact.html b/contact.html
@@ -29,6 +29,7 @@
       rel="stylesheet"
     />
   </head>
+
   <body>
     <section class="sub-header">
       <nav>
@@ -39,15 +40,68 @@
             <li><a href="index.html">HOME</a></li>
             <li><a href="about.html">ABOUT</a></li>
             <li><a href="courses.html">COURSES</a></li>
-            <li><a href="contact.html">CONTACT</a></li>
             <li><a href="blog.html">BLOGS</a></li>
+            <li><a href="contact.html">CONTACT</a></li>
           </ul>
         </div>
         <i class="fa fa-bars" onclick="showMenu()"></i>
       </nav>
-      <h1>About Us</h1>
+      <h1>Contact Us</h1>
+    </section>
+
+    <!-- ---------------------contact us-------------------- -->
+
+    <section class="location">
+      <iframe
+        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12331.12186528447!2d-77.02266799253854!3d38.89836981078218!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89b7c6de5af6e45b%3A0xc2524522d4885d2a!2sWashington%2C%20DC%2C%20USA!5e0!3m2!1sen!2sin!4v1692512872290!5m2!1sen!2sin"
+        width="600"
+        height="450"
+        style="border: 0"
+        allowfullscreen=""
+        loading="lazy"
+        referrerpolicy="no-referrer-when-downgrade"
+      ></iframe>
     </section>
 
+    <section class="contact-us">
+      <div class="row">
+        <div class="contact-col">
+          <div>
+            <i class="fa fa-home"></i>
+            <span>
+              <h5>Mecheda, DCU Building</h5>
+              <p>Washington, DC, USA</p>
+            </span>
+          </div>
+
+          <div>
+            <i class="fa fa-phone"></i>
+            <span>
+              <h5>+1 8491817532</h5>
+              <p>call us for queries</p>
+            </span>
+          </div>
+
+          <div>
+            <i class="fa fa-envelope-o"></i>
+            <span>
+              <h5>[email protected]</h5>
+              <p>Email us for queries</p>
+            </span>
+          </div>
+        </div>
+
+        <div class="contact-col">
+          <form action="">
+            <input type="text" placeholder="Enter your name" required />
+            <input type="text" placeholder="Enter your email" required />
+            <input type="text" placeholder="Enter your subject" required />
+            <textarea placeholder="Message" rows="10" required></textarea>
+            <button type="submit" class="hero-btn red-btn">Send Message</button>
+          </form>
+        </div>
+      </div>
+    </section>
     <!-- ----------footer---------------- -->
 
     <section class="footer">

diff --git a/style.css b/style.css
@@ -482,16 +482,20 @@ h3 {
     height: 50vh;
     width: 100%;
     background: linear-gradient(rgba(4, 9, 30, 0.7), rgba(4, 9, 30, 0.7)),
-      url(Images/bg3.jpg) center/cover; /* Center and cover the background */
+      url(Images/bg3.jpg) center/cover;
+    /* Center and cover the background */
     text-align: center;
   }
+
   .about-col img {
     display: none;
   }
+
   .about-col {
     flex-basis: 48%;
     padding: 0px 2px;
   }
+
   .about-us {
     width: 80%;
     margin: auto;
@@ -587,6 +591,7 @@ h3 {
   .sub-header h1 {
     font-size: 24px;
   }
+
   .blog-left img {
     display: none;
   }
@@ -596,16 +601,82 @@ h3 {
     margin: auto;
     padding: 0px 0;
   }
+
   .blog-right {
     order: 1;
   }
+
   .blog-left {
     order: 2;
   }
+
   .blog-left h1 {
     color: #222;
     font-size: 30px;
     font-weight: 600;
     margin: 30px 0;
   }
 }
+
+/* ---------------------contact us-------------------- */
+
+.location {
+  width: 80%;
+  margin: auto;
+  padding: 80px 0;
+}
+
+.location iframe {
+  width: 100%;
+}
+
+.contact-us {
+  width: 80%;
+  margin: auto;
+}
+
+.contact-col {
+  flex-basis: 48%;
+  margin-bottom: 30px;
+}
+
+.contact-col div {
+  display: flex;
+  align-items: center;
+  margin-bottom: 40px;
+}
+
+.contact-col div .fa {
+  font-size: 28px;
+  color: #f44336;
+  margin: 10px;
+  margin-right: 30px;
+}
+
+.contact-col div p {
+  padding: 0;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.contact-col div h5 {
+  font-size: 20px;
+  margin-bottom: 5px;
+  color: #555;
+  font-weight: 400;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+.contact-col input,
+.contact-col textarea {
+  width: 100%;
+  padding: 15px;
+  margin-bottom: 17px;
+  outline: none;
+  border: 1px solid #ccc;
+  box-sizing: border-box;
+}
+
+.row {
+  margin-left: 10px;
+  display: flex;
+}