Update index.html

Author: today-coding

index.html

@@ -18,7 +18,7 @@
             <ul class="menu">
                 <li><a href="#about">소개</a></li>
                 <li><a href="#rules">규칙</a></li>
-                <li><a href="https://open.kakao.com/o/gU6ieMfi" class="btn-join">입장하기</a></li>
+                <li><a href="https://open.kakao.com/o/gU6ieMfi" class="btn-join">참여하기</a></li>
             </ul>
         </nav>
     </header>
@@ -30,8 +30,7 @@ <h1 data-aos="fade-up">
                 함께 성장하는 <span>코딩 커뮤니티</span>
             </h1>
             <p data-aos="fade-up">맛코딩 = 맛소금</p>
-            <a href="https://open.kakao.com/o/gU6ieMfi" class="cta-button" data-aos="slide-up" data-aos-delay="100">오픈채팅
-                참여</a>
+            <a href="https://open.kakao.com/o/gU6ieMfi" class="cta-button" data-aos="flip-up" data-aos-delay="100">오픈채팅 참여</a>
         </div>
     </section>
     <section id="about">
@@ -72,8 +71,38 @@ <h2>방 운영 수칙</h2>
     </section>
     <section id="people">
         <div class="container">
-            <h2>대표자들</h2>
-
+            <h2>운영자 소개</h2>
+            <div class="people-grid">
+                <div class="person-card" data-aos="fade-up">
+                    <img src="img/맛코딩.jpg" alt="맛코딩" class="img">
+                    <h3>맛코딩</h3>
+                    <p class="role">방장</p>
+                    <p class="desc">
+                        코딩 커뮤니티 ‘오늘도, 코딩’을 운영하며
+                        지식 공유와 프로젝트 문화를 만들어가는 방장입니다.
+                    </p>
+                    <img src="img/대표자소개/맛코딩소개.png" alt="맛코딩 소개" class="intro-img">
+                </div>
+                <div class="person-card" data-aos="fade-up" data-aos-delay="100">
+                    <img src="img/엠티.jpg" alt="엠티" class="img">
+                    <h3>엠티</h3>
+                    <p class="role">부방장</p>
+                    <p class="desc">
+                        맛코딩님과 함께 ‘오늘도, 코딩’을 운영하며
+                        부방장을 맡고있는 개발자입니다.
+                    </p>
+                    <img src="img/대표자소개/엠티소개.png" alt="엠티 소개" class="intro-img">
+                </div>
+                <div class="person-card" data-aos="fade-up" data-aos-delay="200">
+                    <img src="img/서울민트초코.png" alt="서울민트초코" class="img">
+                    <h3>서울민트초코</h3>
+                    <p class="role">부방장</p>
+                    <p class="desc">
+                        부방장으로써 최선을 다하고 웹 부서에서 열심히 활동하고 있는 프론트엔드 개발자입니다.
+                    </p>
+                    <img src="img/대표자소개/서울민트초코소개.jpg" alt="서울민트초코 소개" class="intro-img">
+                </div>
+            </div>
         </div>
     </section>
     <footer>
@@ -91,4 +120,4 @@ <h2>대표자들</h2>
     <script src="script.js"></script>
 </body>
 
-</html>
+</html>