add contact section

Home/index.html

@@ -52,7 +52,7 @@
       <ul class="nav-items">
         <li><a href="#">Home</a></li>
         <li><a href="#careerSection">Careers</a></li>
-        <li><a href="#">Contact Us</a></li>
+        <li><a href="#contactUS">Contact Us</a></li>
       </ul>
     </nav>
     <!-- NavBar Ends Here-->
@@ -319,6 +319,78 @@
         </div>
       </div>
       <!-- Career Section Ends here -->
+
+      <!-- Contact Section Starts here -->
+
+      <div id="contactUS" class="contactContainer">
+        <div><h1>Contact Us</h1></div>
+        <h4>
+          Our success is ultimately based on the medically indicated quality
+        </h4>
+        <h4 style="margin-top: -13px">
+          diagnostic practices that have remained true to the ethical principles
+          of the medical.
+        </h4>
+        <div class="contactSection">
+          <div class="contactleftSection">
+            <h1>Send us a message</h1>
+            <form class="contactBookAppointmentForm">
+              <div class="contactInputContainer">
+                <input
+                  type="text"
+                  placeholder="Full Name"
+                  class="input-field"
+                />
+
+                <input
+                  type="email"
+                  placeholder="Email Id"
+                  class="input-field"
+                />
+                <input type="text" placeholder="Message" class="input-field" />
+              </div>
+              <div class="contactInputContainer">
+                <input
+                  type="tel"
+                  placeholder="Phone Number"
+                  class="input-field"
+                />
+                <input type="text" placeholder="Subject" class="input-field" />
+                <button class="form_btn1">Book an Appointment</button>
+              </div>
+            </form>
+          </div>
+          <div class="contactRightSection">
+            <div class="ggdetails">
+              <div>
+                <h2>Where to find us</h2>
+              </div>
+              <div>
+                <h2>Address</h2>
+                <h3>
+                  G G Hospital,Paragon Hospital Kerala Pvt. Ltd. Murinjapalam
+                  Junction,Medical College P.O Trivandrum – 695 011
+                </h3>
+              </div>
+              <div>
+                <h3>Emergency No</h3>
+                <h3>0471 2779101 | 0471 2779100 | 0471 4299299</h3>
+              </div>
+              <div>
+                <h3>Email Id</h3>
+                <h3>gghospitalphkpl@gmail.com | mdoffice@gg-hospital.com</h3>
+              </div>
+            </div>
+            <div class="imagediv">
+              <img
+                src="../images/contactusmapimage.png"
+                alt="Description of the image"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- Contact section Ends here -->
     </div>
     <!-- footer starts here-->
     <footer class="footer">
@@ -336,22 +408,22 @@
           <h3>About GG</h3>
           <div class="subItem">
             <div class="column">
-              <p>About</p>
-              <p>Hospital</p>
+              <p><a class="contactLink" href="#">About</a></p>
+              <p><a class="contactLink" href="#">Hospital</a></p>
             </div>
             <div class="column">
-              <p>Academic</p>
-              <p>Department</p>
+              <p><a class="contactLink" href="#">Academic</a></p>
+              <p><a class="contactLink" href="#">Department</a></p>
             </div>
           </div>
         </div>
         <div class="section1Col">
           <h3>Legal</h3>
           <div class="subItem">
-            <p>Privacy Policy</p>
-            <p>Documentation</p>
-            <p>Terms of Services</p>
-            <p>Site Map</p>
+            <p><a class="contactLink" href="#">Privacy Policy</a></p>
+            <p><a class="contactLink" href="#">Documentation</a></p>
+            <p><a class="contactLink" href="#">Terms of Services</a></p>
+            <p><a class="contactLink" href="#">Site Map</a></p>
           </div>
         </div>
       </div>
@@ -389,10 +461,18 @@
           <h3>We are on Social Media</h3>
           <div class="subItem">
             <div>
-              <img src="../images/in.png" alt="" />
-              <img src="../images/yt.png" alt="" />
-              <img src="../images/ig.png" alt="" />
-              <img src="../images/fb.png" alt="" />
+              <a class="contactLink" href="#"
+                ><img src="../images/in.png" alt=""
+              /></a>
+              <a class="contactLink" href="#"
+                ><img src="../images/yt.png" alt=""
+              /></a>
+              <a class="contactLink" href="#"
+                ><img src="../images/ig.png" alt=""
+              /></a>
+              <a class="contactLink" href="#"
+                ><img src="../images/fb.png" alt=""
+              /></a>
             </div>
           </div>
         </div>

Home/style.css

@@ -338,10 +338,60 @@ body {
 
 /* contact section */
 
+.contactContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-top: 200px;
+}
+.contactBookAppointmentForm {
+  width: 838px;
+  display: flex;
+  height: 332px;
+  background-color: white;
+  /* border-radius: 10px;
+  box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.2); */
+  padding: 20px;
+  /* flex-direction: column; */
+  justify-content: space-evenly;
+}
+.contactInputContainer {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.contactSection {
+  display: flex;
+  flex-direction: row;
+  margin-top: 50px;
+}
+.contactRightSection {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.ggdetails {
+  width: 450px;
+  height: 361px;
+  padding: 20px;
+  z-index: 10000;
+  background-color: white;
+  border-radius: 10px;
+  box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.2);
+}
+.imagediv {
+  margin-top: -275px;
+  height: 300px;
+}
+
 /* footer */
 
 .footer {
-  margin-top: 100px;
+  margin-top: 120px;
   background-color: #f6f6f6;
 
   padding: 100px;