footer

notS0LD13R · Mar 21, 2023 · de3fe5c · de3fe5c
1 parent 4649796
commit de3fe5c
Show file tree

Hide file tree

Showing 5 changed files with 169 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -17,10 +17,10 @@
             <img src="src\images\logo.svg" alt="logo" height="65">
             <div class="menu">
               <a href="#" class="is-active">HOME</a>
-              <a href="#">ABOUT</a>
-              <a href="#">GALLERY</a>
-              <a href="#">EVENTS</a>
-              <a href="#">CONTACT</a>
+              <a href="#about">ABOUT</a>
+              <a href="#events">EVENTS</a>
+              <a href="#gallery">GALLERY</a>
+              <a href="#footer">CONTACT</a>
             </div>
             <button class="hamburger ">
                 <span></span>
@@ -56,7 +56,7 @@ <h1>
     </section>
 
     <section class="Frame-1">
-      <div class="About-Us">
+      <div class="About-Us" id="about">
         <h1>ABOUT <span class="grad-heading">US</span> </h1>
         <p>Aerospace Interested Students Association(AISA) is the space club of 
           Mar Athanasius College Of Engineering, Kothamangalam.The club
@@ -329,8 +329,8 @@ <h2>Space <span class="grad-heading grad-dark">Events</span></h1>
         </div>
       </div>
     </section>
-    <section class="Frame-1 Frame-2">
-      <div class="carousel-section">
+    <section class="Frame-1 Frame-2" style="padding-bottom: 0px;">
+      <div class="carousel-section" id="events">
         <h1 class="head-center">UPCOMING <span class="grad-heading">EVENTS</span></h1>
         <div class="carousel-container">
           <div class="carousel-item i1">
@@ -424,8 +424,38 @@ <h1>GALLERY OF <span class="grad-heading">MEMORIES</span></h1>
         </div>
       </div>
 
-
+      <div id="footer">
+        <div class="curve">
+          <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
+            <path d="M985.66,92.83C906.67,72,823.78,31,743.84,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V95.8C1132.19,118.92,1055.71,111.31,985.66,92.83Z" class="shape-fill"></path>
+        </svg>
+        </div>
+        <div class="footer-content">
+          <div class="left">
+            <img src="src\images\logo.svg" alt="logo" >
+            <p>Aersopace Intereseted <br>Students Association</p>
+          </div>
+
+          <div class="right">
+            <div class="idk">
+              <p>Social</p>
+              <div class="footer-link"><img src="src\images\instagram.svg" alt=""><a href="https://instagram.com/aisa.mace?igshid=YmMyMTA2M2Y=">aisa.mace</a></div>
+              <div class="footer-link"><img src="src\images\linkedin.svg" alt=""><a href="https://www.linkedin.com/company/aisa-mace/">aisa-mace</a></div>
+            </div>
+            <div class="idk">
+              <p>Contact Us</p>
+              <div class="footer-link"><img src="src\images\whatsapp.svg" alt="logo" ><a href="http://wa.me/918078788157">Thomas J Kumbalath</a></div>
+              <div class="footer-link"><img src="src\images\whatsapp.svg" alt=""><a href="http://wa.me/918590507525">Harsha Anand</a></div>
+
+            </div>
+          </div>
+
+        </div>
+        <div class="created"><p>Ⓒ Copyright 2023</p> </div>
+        <div class="created"> <p>Designed and Developed by &nbsp;</p><a href="https://www.linkedin.com/in/joeljgeorge/">Joel</a><p>&nbsp;and&nbsp;</p><a href="https://www.linkedin.com/in/joeltv11111/">Joel</a></div>
+      </div>
     </section>
+
 
 
     <script type="module" src="/src/main.ts"></script>

diff --git a/src/Styles/styles.scss b/src/Styles/styles.scss
@@ -829,7 +829,108 @@ $galeryprime: rgb(5,183,144,0.29) ;
         }
     }
 }
+//footer start
+#footer{
+    position: relative;
+    display: block;
+    width: 100vw;
+    height: 100%;
+    background-color: $teal-neutral;
 
+    padding-top: 10rem;
+    .created{
+        display: flex;
+        justify-content: center;
+        margin: 1rem;
+        margin-top: 2rem;
+        p{
+            display: inline;
+            font-size: medium;
+            font-weight: 200;
+            font-family:sans-serif;
+        }
+        a{
+            display: inline;
+            font-size: medium;
+            font-weight: 200;
+            font-family:sans-serif;
+            color: $teal-dark;
+        }
+    }
+    .footer-content{
+        width: 100vw;
+        display: flex;
+        p{
+            font-size: 25px;
+            font-family: $major-font;
+            text-align: center;
+        }
+
+        .left{
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            align-content: center;
+            width: 50%;
+            margin-left: 2rem;
+            img{
+                width: 250px;
+            }
+            p{
+                text-align: left;
+            }
+
+        }
+
+        .right{
+            display: flex;
+            width: 50%;
+            padding-left: 7%;
+            align-items:end;
+
+            .idk{
+                width: 50%;
+                margin: 1rem;
+
+            }
+            p{
+                text-align: left;
+            }
+            a{
+                font-size: 23px;
+                font-family: $major-font;
+
+            }
+            .footer-link{
+                display: flex;
+                align-items:center;
+                margin-top: 10px;
+            }
+        }
+    }
+    .curve{
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        overflow: hidden;
+        line-height: 0;
+        transform: rotate(180deg);
+
+        svg {
+            position: relative;
+            display: block;
+            width: calc(100% + 1.3px);
+            height: 158px;
+        }
+        .shape-fill {
+            fill:$teal-neutral-lighter ;
+        }
+
+    }
+}
+
+//footer end
 
 @media (max-width:600px) {
     :root{
@@ -843,8 +944,28 @@ $galeryprime: rgb(5,183,144,0.29) ;
     .carousel-section{
         transform: scale(0.65);
     }
+
 }
+@media (max-width:900px){
+    .footer-content{
+        flex-direction: column;
+        justify-items: center;
+        justify-content: space-between;
+        .left{
+            align-items: center;
+            p{
+                text-align: center;
+            }
+        }
+        .right{
+            flex-direction: column;
+            .idk{
+                width:100%;
+            }
+        }
+    }
 
+}
 @media (min-width: 600px ) {
     .container .menu{
         display:flex;
@@ -858,6 +979,7 @@ $galeryprime: rgb(5,183,144,0.29) ;
     .menu-mobile{
         display:none;
     }
+
 }
 
 

diff --git a/src/images/instagram.svg b/src/images/instagram.svg
diff --git a/src/images/linkedin.svg b/src/images/linkedin.svg
diff --git a/src/images/whatsapp.svg b/src/images/whatsapp.svg