디하클 크리에이터 전용 이벤트
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>디지털 노마드 하이클래스 전용 이벤트</title> <!-- Pretendard 폰트 추가 --> <link href="https://fonts.googleapis.com/css2?family=Pretendard:wght@300;400;500;600&display=swap" rel="stylesheet"> <!-- xeicon 아이콘 폰트 추가 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css"> <style> /* 기본 스타일 */ body { font-family: 'Pretendard', sans-serif; margin: 0; padding: 0; } /* 네비게이션 바 기본 스타일 */ .navbar { display: flex; justify-content: center; /* 가운데 정렬 */ align-items: center; height: 55px; background-color: white; color: black; border-bottom: 1px solid #ddd; position: fixed; top: 0; left: 0; width: 100%; z-index: 100; padding: 0 20px; } /* 네비게이션 링크 스타일 */ .navbar a { position: relative; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; flex-basis: 420px; /* 기본 가로 크기 */ max-width: 420px; /* 최대 가로 크기 */ color: black; text-decoration: none; padding: 10px; margin: 0 10px; transition: color 0.3s ease; } /* 밑줄 */ .navbar a div { position: absolute; width: 100%; bottom: 0; height: 2px; background-color: transparent; transition: background-color 0.3s ease; } /* 호버 효과 */ .navbar a:hover { color: #007bff; } .navbar a:hover div { background-color: #007bff; } /* 햄버거 메뉴 아이콘 */ .hamburger { display: none; font-size: 24px; cursor: pointer; position: absolute; right: 20px; } /* 닫기 버튼 (xi-close) */ .close-icon { font-size: 24px; /* 크기 1.5배 키움 */ cursor: pointer; position: absolute; right: 20px; top: 12px; display: none; } /* 사이드 메뉴 */ .sidebar { position: fixed; top: 0; right: -100%; width: 250px; height: 100%; background-color: white; color: black; box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1); padding-top: 60px; z-index: 99; transition: right 0.3s ease; } .sidebar.open { right: 0; } /* 사이드바 링크 스타일 */ .sidebar a { display: flex; align-items: center; font-weight: 700; text-decoration: none; color: black; padding: 15px; font-size: 18px; transition: background-color 0.3s, color 0.3s; } .sidebar a:hover { background-color: #f0f0f0; color: #007bff; } /* 아이콘 추가 */ .sidebar a i { margin-left: 8px; font-size: 14px; transition: transform 0.3s; } /* 미디어 쿼리 */ @media (max-width: 780px) { .navbar a { display: none; } .hamburger { display: block; } .sidebar { display: block; } } @media (min-width: 781px) and (max-width: 1024px) { .navbar a { flex-basis: 203px; /* 최소 가로 크기 */ } } /* CTA 버튼 스타일 */ .cta { position: fixed; bottom: 24px; left: 0; right: 0; margin: 0 auto; display: flex; align-self: center; align-items: center; justify-content: center; width: 60%; max-width: 470px; height: 72px; background-color: #1270FF; color: white; z-index: 999999999; text-decoration: none; border-radius: 12px; font-weight: 700; font-size: 24px; transition: background-color 300ms ease, box-shadow 300ms ease, color 300ms ease; font-family: 'Pretendard', sans-serif; cursor: pointer; box-shadow: 5px 5px 0px 0px rgba(0, 50, 150, 0.9); } .cta:hover { background-color: #F4BF0D; color: black; box-shadow: 5px 5px 0px 0px rgba(244, 153, 0, 0.9); transform: translate(2px, 2px); } .cta:active { transform: translate(4px, 4px); box-shadow: 1px 1px 0px 0px rgba(244, 153, 0, 0.9); } </style> </head> <body> <!-- 상단 네비게이션 바 --> <div class="navbar"> <!-- 네비게이션 링크 --> <a href="https://tally.so/r/wL5kM1"> 디하클 특전 우대 수익률 신청하기 <div></div> </a> <a href="https://info.mewpot.com/event/musicflex/stepup"> 디하클 전용 이벤트 참여하기 <div></div> </a> <!-- 햄버거 메뉴 아이콘 --> <div role="button" class="hamburger" id="hamburger-icon"> <i class="xi-bars"></i> </div> <!-- 닫기 버튼 (우상단에 위치) --> <div role="button" class="close-icon" id="close-icon"> <i class="xi-close"></i> </div> </div> <!-- 오른쪽 사이드 메뉴 --> <div class="sidebar" id="sidebar"> <a href="https://tally.so/r/wL5kM1"> <span>디하클 특전 우대 수익률 신청하기</span> <i class="xi-angle-right"></i> </a> <a href="https://info.mewpot.com/event/musicflex/stepup"> <span>디하클 전용 이벤트 참여하기</span> <i class="xi-angle-right"></i> </a> </div> <!-- CTA 버튼 --> <div class="cta" onclick='handleClick()'>쇼츠 제작하고 혜택 받기🔥</div> <script> const hamburgerIcon = document.getElementById('hamburger-icon'); const closeIcon = document.getElementById('close-icon'); const sidebar = document.getElementById('sidebar'); // 햄버거 아이콘 클릭 시 hamburgerIcon.addEventListener('click', () => { sidebar.classList.add('open'); // 사이드 메뉴 열기 hamburgerIcon.style.display = 'none'; // 햄버거 아이콘 숨기기 closeIcon.style.display = 'block'; // 닫기 아이콘 표시 }); // 닫기 아이콘 클릭 시 closeIcon.addEventListener('click', () => { sidebar.classList.remove('open'); // 사이드 메뉴 닫기 hamburgerIcon.style.display = 'block'; // 햄버거 아이콘 표시 closeIcon.style.display = 'none'; // 닫기 아이콘 숨기기 }); var OOPYctaQueryParams = new URLSearchParams(window.location.search).toString(); function handleClick() { window.open("https://tally.so/r/wd2PGy?" + OOPYctaQueryParams, "_blank"); } </script> </body> </html>
