Merge branch 'main' into header

LikeLionHGU · Jan 14, 2025 · 612f599 · 612f599
2 parents fa3977a + 561ff4b
commit 612f599
Show file tree

Hide file tree

Showing 64 changed files with 1,209 additions and 596 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/assets/.DS_Store b/assets/.DS_Store
diff --git a/assets/img/.DS_Store b/assets/img/.DS_Store
diff --git a/assets/img/footer/email.png b/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/footer/instagram.png b/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/assets/img/grid/.DS_Store b/assets/img/grid/.DS_Store
diff --git a/assets/img/grid/memoji/.DS_Store b/assets/img/grid/memoji/.DS_Store
diff --git a/assets/img/grid/memoji/1.png b/assets/img/grid/memoji/1.png
diff --git a/assets/img/grid/memoji/2.png b/assets/img/grid/memoji/2.png
diff --git a/assets/img/grid/memoji/3.png b/assets/img/grid/memoji/3.png
diff --git a/assets/img/grid/memoji/4.png b/assets/img/grid/memoji/4.png
diff --git a/assets/img/grid/memoji/5.png b/assets/img/grid/memoji/5.png
diff --git a/assets/img/grid/memoji/6.png b/assets/img/grid/memoji/6.png
diff --git a/assets/img/grid/memoji/7.png b/assets/img/grid/memoji/7.png
diff --git a/assets/img/grid/memoji/8.png b/assets/img/grid/memoji/8.png
diff --git a/assets/img/grid/memoji/9.png b/assets/img/grid/memoji/9.png
diff --git a/assets/img/grid/memoji/memoji1.png b/assets/img/grid/memoji/memoji1.png
diff --git a/assets/img/grid/memoji/memoji2.png b/assets/img/grid/memoji/memoji2.png
diff --git a/assets/img/grid/memoji/memoji3.png b/assets/img/grid/memoji/memoji3.png
diff --git a/assets/img/grid/memoji/memoji4.png b/assets/img/grid/memoji/memoji4.png
diff --git a/assets/img/grid/memoji/memoji5.png b/assets/img/grid/memoji/memoji5.png
diff --git a/assets/img/grid/memoji/memoji6.png b/assets/img/grid/memoji/memoji6.png
diff --git a/assets/img/grid/memoji/memoji7.png b/assets/img/grid/memoji/memoji7.png
diff --git a/assets/img/grid/memoji/memoji8.png b/assets/img/grid/memoji/memoji8.png
diff --git a/assets/img/grid/memoji/memoji9.png b/assets/img/grid/memoji/memoji9.png
diff --git a/assets/img/modal/.DS_Store b/assets/img/modal/.DS_Store
diff --git a/assets/img/modal/backgroundImage/.DS_Store b/assets/img/modal/backgroundImage/.DS_Store
diff --git a/assets/img/modal/backgroundImage/1.JPEG b/assets/img/modal/backgroundImage/1.JPEG
diff --git a/assets/img/modal/backgroundImage/2.JPG b/assets/img/modal/backgroundImage/2.JPG
diff --git a/assets/img/modal/backgroundImage/3.JPG b/assets/img/modal/backgroundImage/3.JPG
diff --git a/assets/img/modal/backgroundImage/4.JPG b/assets/img/modal/backgroundImage/4.JPG
diff --git a/assets/img/modal/backgroundImage/5.PNG b/assets/img/modal/backgroundImage/5.PNG
diff --git a/assets/img/modal/backgroundImage/6.JPEG b/assets/img/modal/backgroundImage/6.JPEG
diff --git a/assets/img/modal/backgroundImage/7.JPEG b/assets/img/modal/backgroundImage/7.JPEG
diff --git a/assets/img/modal/backgroundImage/8.PNG b/assets/img/modal/backgroundImage/8.PNG
diff --git a/assets/img/modal/backgroundImage/9.JPG b/assets/img/modal/backgroundImage/9.JPG
diff --git a/assets/img/modal/github.png b/assets/img/modal/github.png
diff --git a/assets/img/modal/memoji/.DS_Store b/assets/img/modal/memoji/.DS_Store
diff --git a/assets/img/modal/memoji/1.jpg b/assets/img/modal/memoji/1.jpg
diff --git a/assets/img/modal/memoji/3.jpg b/assets/img/modal/memoji/3.jpg
diff --git a/assets/img/modal/memoji/4.jpg b/assets/img/modal/memoji/4.jpg
diff --git a/assets/img/modal/memoji/5.jpg b/assets/img/modal/memoji/5.jpg
diff --git a/assets/img/modal/memoji/6.jpg b/assets/img/modal/memoji/6.jpg
diff --git a/assets/img/modal/memoji/7.jpg b/assets/img/modal/memoji/7.jpg
diff --git a/assets/img/modal/memoji/8.jpg b/assets/img/modal/memoji/8.jpg
diff --git a/image/.DS_Store b/image/.DS_Store
diff --git a/image/bgImage/김원진.jpeg b/image/bgImage/김원진.jpeg
diff --git a/image/img/김원진.jpg b/image/img/김원진.jpg
diff --git a/index.html b/index.html
@@ -13,16 +13,16 @@
     <link rel="stylesheet" href="./styles/header.css/hd.css" />
     <link rel="stylesheet" href="./styles/index.css" />
     <link rel="stylesheet" href="./styles/grid.css" />
+    <link rel="icon" href="data:;base64,iVBORw0KGgo=" />
+    <link rel="stylesheet" href="./styles/footer.css" />
+    <link rel="stylesheet" href="./styles/modal.css" />
   </head>
-  <link rel="icon" href="data:;base64,iVBORw0KGgo=" />
-
   <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
@@ -38,30 +38,124 @@
                 d="M21.19 12.683c-2.5 5.41-8.62 8.2-8.88 8.32a.85.85 0 0 1-.62 0c-.25-.12-6.38-2.91-8.88-8.32c-1.55-3.37-.69-7 1-8.56a4.93 4.93 0 0 1 4.36-1.05a6.16 6.16 0 0 1 3.78 2.62a6.15 6.15 0 0 1 3.79-2.62a4.93 4.93 0 0 1 4.36 1.05c1.78 1.56 2.65 5.19 1.09 8.56"
               />
             </svg>
-            FRONTEND</span>
+            FRONTEND</span
+          >
         </span>
         <span id="header_navigation">
           <button class="header-home">HOME</button>
           <button class="header-about">ABOUT</button>
           <button class="header-contact">CONTACT</button>
         </span>
       </span>
+
     </div>
     <div class="header-mobile-nav">
-      <div id="header-mob_top"><img src="./assets/img/mob_nav_top.png" alt="mobile navigation top"/></div>
-      <div id="header-mob_about"><img src="./assets/img/mob_nav_about.png" alt="mobile navigation about"/></div>
-      <div id="header-mob_bot"><img src="./assets/img/mob_nav_bot.png" alt="mobile navigation bottom"/></div>
+      <div id="header-mob_top">
+        <img src="./assets/img/mob_nav_top.png" alt="mobile navigation top" />
+      </div>
+      <div id="header-mob_about">
+        <img
+          src="./assets/img/mob_nav_about.png"
+          alt="mobile navigation about"
+        />
+      </div>
+      <div id="header-mob_bot">
+        <img
+          src="./assets/img/mob_nav_bot.png"
+          alt="mobile navigation bottom"
+        />
+      </div>
     </div>
 
+
+  <script src="./js/grid.js"></script>
     <!-- Grid 영역 -->
     <div id="likelion_grid"></div>
-    <!-- Footer 영역 -->
-    <div id="footer">
-      <div style="color: #0d1c3c">This is Footer</div>
-    </div>
 
+    <!-- Modal 영역 -->
+    <div class="modal">
+      <div class="modal_body">
+        <div id="modal_button_style">
+          <button class="modal_close_btn">
+            <img
+              id="modal_button_style_img"
+              src="./assets/img/modal/close.png"
+            />
+          </button>
+        </div>
+
+        <div class="modal_music">
+          <p class="modal_p" id="modal_music_name">첫 만남은 너무 어려워</p>
+          <p class="modal_p" id="modal_music_singer">tws</p>
+        </div>
+        <div class="modal_profile_picture">
+          <img class="modal_profile_pic" src="#" alt="modal_profile_pic" />
+        </div>
+        <h3 id="modal_profile_name">이하린</h3>
+        <h5 id="modal_profile_motto">한줄 좌우명</h5>
+
+        <div class="modal_link_box_row">
+          <div class="modal_link_box_col">
+            <a id="github" href="#" target="_blank"
+              ><img src="./assets/img/modal/github.png" class="modal_link_pic"
+            /></a>
+            <p class="modal_p">github</p>
+          </div>
+          <div class="modal_link_box_col">
+            <a id="introduce" href="#" target="_blank"
+              ><img src="./assets/img/modal/link.png" class="modal_link_pic"
+            /></a>
+            <p class="modal_p">introduce</p>
+          </div>
+          <div class="modal_link_box_col">
+            <a id="instagram" href="#" target="_blank"
+              ><img src="./assets/img/modal/insta.png" class="modal_link_pic"
+            /></a>
+            <p class="modal_p">instagram</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- Footer 영역 -->
+    <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="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>
+    </footer>
 
-    <script src="./Js/heartAnimation.js"></script>
-    <script src="./Js/ScreenMove.js"></script>
+    <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/Js/ScreenMove.js → js/ScreenMove.js b/Js/ScreenMove.js → js/ScreenMove.js
@@ -40,4 +40,4 @@ document.getElementById("heart").addEventListener("click", function () {
   const randomColor = getRandomColor();
   const path = this.querySelector("path");
   path.setAttribute("fill", randomColor); 
-});
+});