changed contact section

Author: shankha013k267

css/index.css

@@ -371,19 +371,54 @@
 }
 
 #contact{
+  border-style: solid;
+  border-color: #fff;
+  border-radius: 100px / 70px;  /* chosen different vertical and horizontal radius for smooth border */
   overflow: hidden;
+  display: flex;
+  justify-content: space-between;
+  gap: 20px;
+  padding: 60px 30px;
+  margin: 100px 20px;
 }
-#contactMap{
-  display: block;
-  width: 60%;
-  float: left;
+
+.contactLeftSection{
+  align-items: center;
+  justify-content: center;
+  flex: 40%;
+  padding: 20px;
+}
+
+.contactRightSection{
+  align-items: top;
+  justify-content: right;
+  flex: 60%;
+  padding: 20px;
 }
+
+#titleContact{
+  font-family: "Montserrat", sans-serif;
+  text-transform: uppercase;
+  font-weight: 200;
+  font-size: 60px;
+  text-align: center;
+}
+
+.mailText{
+  font-family: "Lucida Console", "Courier New", monospace;
+  padding-bottom: 15px;
+  text-align: right;
+}
+
+.email{
+  font-style: italic;
+}
+
 #contactDetails{
   display: block;
   width: calc(40% - 10px);
   float: left;
   box-sizing: border-box;
-  background-color: rgba(255, 255, 255, 0.8);
   margin: 0 0 0 10px;
   color: #000;
 }
@@ -412,9 +447,10 @@
 #contactDetails .socials{
   display: flex;
   flex-direction: row;
+  justify-content: right;
 }
 #contactDetails .socials a{
-  width: calc(100% / 4);
+  width: 120px;
   height: 50px;
   display: flex;
   justify-content: center;

index.html

@@ -139,28 +139,15 @@
       </div> -->
 
       <div id="contact">
-        <div class="title">Contact</div>
+        <div id="titleContact" class="contactLeftSection">Contacts</div>
 
-        <iframe
-          id="contactMap"
-          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15549.279425908911!2d77.56144658387726!3d13.01529185395299!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bae17d3b5a43863%3A0xe4240a4d6bc7a0da!2sDepartment%20Of%20Computer%20Science%20And%20Automation!5e0!3m2!1sen!2sin!4v1679229205647!5m2!1sen!2sin"
-          width="600"
-          height="450"
-          style="border: 0"
-          allowfullscreen=""
-          loading="lazy"
-          referrerpolicy="no-referrer-when-downgrade"
-          title="Map to CSA"
-        ></iframe>
-        <div id="contactDetails">
-          <a class="email" href="mailto:[email protected]">
-            <span class="material-symbols-outlined"> mail </span>
-            <span>[email protected]</span>
-          </a>
-          <a class="phone" href="tel:+918825063816">
-            <span class="material-symbols-outlined"> call </span>
-            <span>+91 88250 63816</span>
-          </a>
+        <div id="contactDetails" class="contactRightSection">
+          <div class="mailText">
+            Mail us at 
+            <a class="email" href="mailto:[email protected]">
+              <span>[email protected]</span>
+            </a>
+          </div>
           <div class="socials">
             <a href="https://www.facebook.com/people/Databased/100091411453016/" class="facebook" target="_blank">
               <img src="./img/social/facebook.png" alt="facebook link image"/>
@@ -177,20 +164,6 @@
           </div>
         </div>
       </div>
-      <div class="hubspot-form">
-        <div id="hubspot-form-title">Subscribe for our latest updates</div>
-        <div id="hubspot-form-description">
-          Stay updated with events and opportunities from Databased.
-        </div>
-        <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
-        <script>
-          hbspt.forms.create({
-            region: "na1",
-            portalId: "39764363",
-            formId: "f99d2fa5-85a2-4e3e-8bcc-1a9b7fa2c075"
-          });
-        </script>
-      </div>
     </main>
 
     <div id="eventModal">