Merge pull request #80 from LikeLionHGU/footer

Footer
LikeLionHGU · Jan 14, 2025 · 561ff4b · 561ff4b
2 parents eda01b4 + 921f70a
commit 561ff4b
Show file tree

Hide file tree

Showing 10 changed files with 143 additions and 180 deletions.
diff --git a/assets/img/email.png → assets/img/footer/email.png b/assets/img/email.png → assets/img/footer/email.png
diff --git a/assets/img/footer/github.png b/assets/img/footer/github.png
diff --git a/assets/img/footer/insta.png b/assets/img/footer/insta.png
diff --git a/assets/img/instagram.png → assets/img/footer/instagram.png b/assets/img/instagram.png → assets/img/footer/instagram.png
diff --git a/assets/img/footer/likelion-header.jpg b/assets/img/footer/likelion-header.jpg
diff --git a/assets/img/footer/likelion1.png b/assets/img/footer/likelion1.png
diff --git a/assets/img/footer/link.png b/assets/img/footer/link.png
diff --git a/index.html b/index.html
@@ -18,12 +18,11 @@
     <link rel="stylesheet" href="./styles/modal.css" />
   </head>
   <body>
-    <!-- Header 영역 -->
-    <div id="likelion-header">
+
       <span id="header-padding">
         <span id="header_logo">
           <a href="index.html"
-            ><img src="./assets/img/likelion-header.png" alt="LikeLion-Logo"
+            ><img src="./assets/img/footer/ikelion-header.png" alt="LikeLion-Logo"
           /></a>
           <span id="header-text"
             >I
@@ -48,6 +47,7 @@
           <button class="header-contact">CONTACT</button>
         </span>
       </span>
+
     </div>
     <div class="header-mobile-nav">
       <div id="header-mob_top">
@@ -66,7 +66,9 @@
         />
       </div>
     </div>
+
 
+  <script src="./js/grid.js"></script>
     <!-- Grid 영역 -->
     <div id="likelion_grid"></div>
 
@@ -114,83 +116,46 @@ <h5 id="modal_profile_motto">한줄 좌우명</h5>
         </div>
       </div>
     </div>
-
     <!-- Footer 영역 -->
-    <div id="footer"></div>
-    <div class="top-circle"></div>
-    <div class="container">
-      <img
-        src="./assets/img/likelion-header.png"
-        alt="likelion-header"
-        class="likelion-logo"
-      />
-      <div class="branding">
-        <h1>멋쟁이사자처럼</h1>
-        <p>한동대 멋사 13기 프론트엔드 컨셉: "깔끔함"</p>
-        <p>
-          이번 프로젝트는 한동대 멋사 프론트엔드의 활기찬 현재와 창창한 미래를
-          보여주는 것을 목표로 합니다.
-        </p>
-        <p>
-          단순한 서비스 제공을 넘어, 사용자가 더 나은 일상을 경험할 수 있도록
-          돕는 데 초점을 맞췄습니다.
-        </p>
-        <p>
-          프론트엔드 팀은 깔끔하고 간결적인 화면을 통해 프로젝트의 핵심 메시지를
-          사용자에게 명확히 전달하려고 합니다.
-        </p>
-      </div>
-
-      <div class="links">
-        <div class="learn-more">
-          <h3>Learn more</h3>
-          <ul>
-            <li>
-              <a href="https://hgulikelion.web.app" target="_blank"
-                >https://hgulikelion.web.app</a
-              >
-            </li>
-            <li>
-              <a href="https://likelion.net" target="_blank"
-                >https://likelion.net</a
-              >
-            </li>
-            <li>
-              <a
-                href="https://www.youtube.com/@likelion.official"
-                target="_blank"
-                >https://www.youtube.com/@likelion.official</a
-              >
-            </li>
-          </ul>
+    <footer id="footer">
+      <div class="footer-container">
+        <div class="footer-content">
+          <img src="./assets/img/footer/likelion1.png" alt="LikeLion Logo" width="200" height="200" />
+          <p>이번 프로젝트는 한동대 멋사 프론트엔드의 활기찬 현재와 창창한 미래를 보여주는 것을 목표로 합니다.</p>
+          <p>한동대 멋사 13기 프론트엔드 컨셉: "깔끔함"</p>
+          <p>프론트엔드 팀은 깔끔하고 간결한 화면을 통해 프로젝트의 핵심 메시지를 사용자에게 명확히 전달하려고 합니다.</p>
         </div>
-
-        <div class="join-us">
-          <h3>Join us</h3>
-          <ul>
-            <li>
-              <a href="https://github.com/LikeLionHGU" target="_blank">
-                <img src="./assets/img/github.png" alt="GitHub" />
-              </a>
-            </li>
-            <li>
-              <a href="mailto:[email protected]" target="_blank">
-                <img src="./assets/img/email.png" alt="Email" />
-              </a>
-            </li>
-            <li>
-              <a href="https://instagram.com/likelion_hgu" target="_blank">
-                <img src="./assets/img/instagram.png" alt="Instagram" />
-              </a>
-            </li>
-          </ul>
+        <div class="footer-links-wrapper">
+          <div class="footer-links">
+            <h3>Learn More</h3>
+            <ul>
+              <li><a href="https://hgulikelion.web.app" target="_blank">멋사 공식 웹사이트</a></li>
+              <li><a href="https://likelion.net" target="_blank">LikeLion 네트워크</a></li>
+              <li><a href="https://www.youtube.com/@likelion.official" target="_blank">YouTube</a></li>
+            </ul>
+          </div>
+
+          <div class="footer-links">
+            <h3>Join Us</h3>
+            <ul class="social-links">
+              <li><a href="https://github.com/LikeLionHGU" target="_blank">
+                <img src="./assets/img/footer/github.png" alt="Github" />
+              </a></li>
+              <li><a href="mailto:[email protected]" target="_blank">
+                <img src="./assets/img/footer/email.png" alt="Email" />
+              </a></li>
+              <li><a href="https://instagram.com/likelion_hgu" target="_blank">
+                <img src="./assets/img/footer/instagram.png" alt="Instagram" />
+              </a></li>
+            </ul>
+          </div>
         </div>
       </div>
-    </div>
+    </footer>
 
     <script src="./js/grid.js"></script>
     <script src="./js/ScreenMove.js"></script>
     <script src="./js/heartAnimation.js"></script>
     <script src="./js/modal.js"></script>
   </body>
-</html>
+</html>  
diff --git a/styles/footer.css b/styles/footer.css
@@ -1,106 +1,119 @@
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-body {
-  font-face {
-    font-family: 'GmarketSansMedium';
-    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/[email protected]/GmarketSansMedium.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
-  }
+#footer {
   background-color: #0f1b2b;
   color: #e7c986;
+  font-family: "GmarketSansMedium", sans-serif; /* 폰트 통일 */
+  padding: 40px 20px;
+  text-align: center;
 }
 
-.banner {
-  width: 100%;
-  padding: 30px;
-  position: relative;
-}
-
-.top-circle {
-  position: absolute;
-  top: -40px; 
-  left: 0;
-  width: 100%; 
-  height: 120px; 
-  background-color: #f4cb69;
-  clip-path: path("M0,120 Q50%,0 100%,120 L100%,0 L0,0 Z");
-  border-bottom-right-radius: 500px;
-}
-
-.container {
-  max-width: 1200px;
-  margin: 0 auto; 
+.footer-container {
   display: flex;
-  justify-content: space-between;
+  flex-wrap: wrap;
+  justify-content: space-around;
   align-items: flex-start;
-  gap: 20px; 
+  gap: 20px;
+  max-width: 1200px;
+  margin: 0 auto;
 }
 
+.footer-logo {
+  flex-shrink: 0;
+}
 
-.branding {
-  flex: 2; 
-  padding: 20px;
+.footer-logo img {
+  width: 200px;
+  height: auto;
+  margin-bottom: 20px;
 }
 
-.branding h1 {
-  font-size: 24px;
-  margin-bottom: 10px;
+.footer-content {
+  flex: 1;
+  min-width: 250px;
+  text-align: left;
+  margin-right: 30px; 
 }
 
-.branding p {
+.footer-content p,
+.footer-content p1,
+.footer-content p2 {
   margin-bottom: 10px;
-  line-height: 1.5;
+  font-size: 16px;
+  line-height: 1.6;
 }
 
+.footer-links-wrapper {
+  display: flex;
+  justify-content: space-between; 
+  gap: 30px; 
+  flex: 1;
+  min-width: 500px;
+}
 
-.links {
-  flex: 1; 
-  padding: 10px;
+.footer-links {
+  flex: 1;
+  text-align: left;
 }
 
-.learn-more h3 {
+.footer-links h3 {
   font-size: 18px;
   margin-bottom: 10px;
   color: #f4cb69;
 }
 
-a {
-  color: #e7c986;
-  text-decoration: none;
-  transition: color 0.2s ease;
+.footer-links ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
 }
 
-a:hover {
-  color: #ffffff;
+.footer-links ul li {
+  margin-bottom: 10px;
 }
 
-
-.join-us ul {
-  list-style: none;
-  display: flex; 
-  gap: 15px; 
-  justify-content: center;
+.social-links {
+  display: flex;
+  gap: 15px;
 }
 
-.join-us li img {
-  width: 40px;
-  height: 40px;
-  transition: transform 0.3s ease;
+.social-links li img {
+  width: 30px;
+  height: 30px;
+  transition: transform 0.2s ease;
 }
 
-.join-us li img:hover {
-  transform: scale(1.1);
+.social-links li img:hover {
+  transform: scale(1.2);
 }
 
+@media (max-width: 768px) {
+  .footer-container {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
 
-.likelion-logo {
-  width: 50px; 
-  height: auto;
-  margin-top: 20px;
+  .footer-content {
+    text-align: center;
+    margin-right: 0;
+  }
+
+  .footer-links-wrapper {
+    flex-direction: column; 
+    gap: 20px;
+    align-items: center;
+  }
+
+  .footer-links {
+    text-align: center;
+  }
+
+  .social-links {
+    justify-content: center;
+  }
+
+  .footer-content p,
+  .footer-content p1,
+  .footer-content p2 {
+  display:none;
+}
 }