commit 1953d8b0f75c10b1b1fb736275b66f40270aa5f0 Author: leejimin Date: Tue Aug 9 17:56:45 2022 +0900 first commit diff --git a/css/fishing.css b/css/fishing.css new file mode 100644 index 0000000..35e1cf9 --- /dev/null +++ b/css/fishing.css @@ -0,0 +1,527 @@ +@charset "utf-8"; +@import url(//font.elice.io/EliceDigitalBaeum.css); +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap'); +@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.5/dist/web/static/pretendard.css"); + +*{ + padding: 0; + margin: 0; + box-sizing: border-box; + letter-spacing: -0.7px; + /* outline: 1px solid pink; */ +} + +html, +body { + position: relative; + height: 100%; +} +ul, li{ list-style: none; } +a{ text-decoration: none; } +img{ display: block; } +table{ border-spacing: 0; } +.inner{ + width: 1280px; + height: 100%; + margin: 0 auto; + display: flex; +} + +header{ + width: 100%; + height: 80px; + position: fixed; + top: 0; + left: 0; + z-index: 100; +} +header .hinner{ + width: 1800px; + height: 100%; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: center; +} +nav{ margin: 0 300px; } +.gnb{ display: flex; } +.gnb > li{ + margin: 0 65px 0 0; + position: relative; +} +.gnb > li:last-child{ margin: 0; } +.gnb > li > a{ + display: block; + height: 80px; + text-align: center; + font-size: 18px; + color: #fff; + font: 600 18px 'pretendard', 'sans-serif'; + line-height: 80px; + text-shadow: 1px 1px 1px #333333; +} +.lnb{ + padding: 0; + opacity: 0; + margin: 4px 0 0; + position: absolute; + overflow: hidden; + transition: all 0.5s; + background-color: rgba(255,255,255,0.8); + border-radius: 0 0 5px 5px; + border: 2px solid #fff; + box-shadow: 0px 4px 30px rgba(0,0,0,0.1); +} +.lnb > li{ + padding: 0; + width: 0; + transition: all 0.5s; +} +.lnb > li > a{ + display: block; + overflow: hidden; + white-space: nowrap; + transition: all 0.5s; + font: 600 15px 'pretendard', 'sans-serif'; + color: #111; +} +.gnb > li::after{ + display: block; + content: ""; + height: 4px; + width: 0; + background-color: #0047FF; + box-shadow: 0 4px 10px rgb(0, 60, 255, 0.3); + transition: all 0.5s; + position: relative; + z-index: 200; +} +.gnb > li:hover::after{ + width: 100%; +} +.gnb > li:hover > .lnb{ + display: block; + opacity: 1; + padding: 20px; +} +.gnb > li:hover > .lnb > li{ + width: 200px; + padding: 10px 0; +} +.question p{ + font: 400 14px 'pretendard', 'sans-serif'; + color: #fff; +} + +/*풀페이지 슬라이더*/ +.fullslider{ height: 100%; } +.wrap > .swiper-wrapper{ + display: flex; + flex-direction: column; +} +.wrap .swiper-wrapper .swiper-slide{ + width: 100%; +} + +/*sec01*/ +.sec01 .swiper { + width: 100%; + height: 100%; + position: relative; +} +.sec01 .swiper-wrapper{ display: flex; } +.sec01 .swiper-slide{ + width: 100%; + height: 100%; + position: relative; +} +.sec01 .swiper-slide img:first-child{ + position: absolute; + top: calc(42% - (500px / 2)); + left: calc(50% - (694px / 2)); + opacity: 0.8; +} +.sec01 .swiper-slide img:nth-child(2){ + position: absolute; + top: calc(42% - (214px / 2)); + left: calc(50% - (438px / 2)); +} +.sec01 .swiper-slide h1{ + position: absolute; + top: calc(48% + 155px); + left: calc(50% - (366px / 2)); + color: #fff; + font: 400 21px 'pretendard', 'sans-serif'; + text-align: center; + line-height: 40px; +} +.sec01 video{ + width: 100%; + height: 100%; + object-fit: fill; +} +.sec01 .swiper .scroll{ + position: absolute; + bottom: 80px; + left: calc(50% - (47px / 2)); + z-index: 1000; +} + +.sec01 .swiper-horizontal > .sec01 .swiper-pagination-bullets, +.sec01 .swiper-pagination-bullets.swiper-pagination-horizontal, +.sec01 .swiper-pagination-custom, +.sec01 .swiper-pagination-fraction{ + bottom: 50px; +} +.sec01 .swiper-pagination-bullet{ + width: 16px; + height: 16px; + background: #fff; + opacity: 1; +} +.sec01 .swiper-pagination-bullet-active{ + background: #12B9FF; +} + +/*sec02*/ +.sec02{ background: url(../images/main/main-background2.png) no-repeat center / cover; } +.sec02 .inner{ + align-items: center; + justify-content: space-between; + align-items: center; +} +.sec02 .left{ + width: 620px; + height: 540px; + background-color: #fff; + position: relative; + border-radius: 5px; + box-shadow: 0px 2px 20px #4882c1; +} +.sec02 .left .top{ + display: flex; + align-items: center; + justify-content: center; + width: 620px; + height: 80px; + padding: 10px 0 0; + position: absolute; + top: 0; + left: 0; + border-radius: 5px; + box-shadow: 0px 1px 5px #9db7d4; +} +.sec02 h3{ + width: 120px; + padding: 7px 0; + text-align: center; + font-size: 18px; + background-color: #12B9FF; + border: 1px solid #fff; + border-radius: 20px; + margin: 0 30px 0 0; + color: #fff; + font-family: 'Elice Digital Baeum', 'sans-serif'; +} +.sec02 .left .top > .tap{ + width: 140px; + height: 25px; + border-radius: 5px; + display: flex; + border: 1px solid #12B9FF; +} +.sec02 .left .top > .tap > span:nth-child(1), +.sec02 .left .top > .tap > span:nth-child(2){ + width: 50%; + height: 100%; + display: block; + border-radius: 5px; + text-align: center; + font: 700 14px 'pretendard', 'sans-serif'; + line-height: 25px; + color: #12B9FF; +} +.sec02 .left .top > .tap > span:nth-child(1).on{ + background-color: #12B9FF; + color: #fff; +} +.sec02 .left .top > span{ + font-size: 14px; + color: #999999; + margin: 0 40px; + font-family: 'pretendard', 'sans-serif'; +} +.sec02 .left .top > a{ + color: #12B9FF; + font: 700 14px 'pretendard', 'sans-serif'; +} +.sec02 .left .top > a:hover{ color: #999999; } +.sec02 .contents{ + width: 100%; + height: 540px; +} +.sec02 .contents table{ + width: 100%; + margin: 80px 0 0; + font-family: 'pretendard', 'sans-serif'; + color: #111111; +} +.sec02 .contents table th{ background-color: #FBFCFD; } +.sec02 .contents table th:nth-child(1){ width: 20%; text-align: right; padding: 0 30px 0 0} +.sec02 .contents table th:nth-child(2){ width: 30%; color: #666666;} +.sec02 .contents table th:nth-child(3){ width: 20%; text-align: right; padding: 0 35px 0 0; color: #666666;} +.sec02 .contents table th:nth-child(4){ width: 30%; text-align: right;padding: 0 50px 0 0;} +.sec02 .contents table td:nth-child(3){ color: #0047FF; } +.sec02 .contents table td:nth-child(1), +.sec02 .contents table td:nth-child(3){ + text-align: right; + padding: 0 35px 0 0; +} +.sec02 .contents table td:nth-child(4){ + text-align: right; + padding: 0 50px 0 0; +} +.sec02 .contents table th, +.sec02 .contents table td{ + height: 40px; + text-align: center; + font-size: 14px; +} +.sec02 .right .event, +.sec02 .right .notice{ + position: relative; + box-shadow: 0px 2px 20px #4882c1; + border-radius: 5px;} +.sec02 .right .event > h3, +.sec02 .right .notice > h3{ + position: absolute; + top: 25px; + left: 30px; +} +.sec02 .right .event > a, +.sec02 .right .notice > a{ + position: absolute; + top: calc(50% - 30px); + right: 35px; +} +.sec02 .right .notice > img{ + position: absolute; + top: 70px; + left: 30px; +} + +.sec02 .right .notice{ + width: 620px; + height: 200px; + margin: 40px 0 0; + background-color: #fff; + display: flex; + align-items: center; + justify-content: center; +} +.sec02 .right .notice > ul{ padding: 0 0 0 40px; } +.sec02 .right .notice > ul > li > a{ + display: block; + width: 305px; + color: #999999; + overflow:hidden; + text-overflow:ellipsis; + white-space:nowrap; + font: 600 18px 'pretendard', 'sans-serif'; +} +.sec02 .right .notice > ul > li > a:hover{ + color: #12B9FF; +} +.sec02 .right .notice > ul > li{ + padding: 15px 0; +} + +/*sec03*/ +.sec03{ background: url(../images/main/main-background3.png) no-repeat center / cover; } +.sec03 .inner { + flex-direction: column; + justify-content: center; +} +.sec03 .inner > div > p:first-child{ + font-size: 25px; + color: #fff; + font: 700 25px 'Poppins', 'sans-serif'; + text-shadow: 0px 0px 5px rgba(0,0,0,0.8); +} +.sec03 .inner > div > h1{ + font-size: 62px; + color: #fff; + font-family: 'Elice Digital Baeum', 'sans-serif'; + text-shadow: 0px 0px 5px rgba(0,0,0,0.8); +} +.sec03 .inner > div > p:nth-child(3){ + font-size: 19px; + color: #fff; + margin: 15px 0 40px; + font-family: 'pretendard', 'sans-serif'; + line-height: 35px; +} +.sec03 .inner > div > button{ + width: 190px; + height: 55px; + font-size: 15px; + color: #fff; + background-color: transparent; + line-height: 55px; + display: flex; + align-items: center; + justify-content: flex-end; + border-radius: 45px; + border: 1.5px solid #fff; + font-family: 'pretendard', 'sans-serif'; +} +.sec03 .inner > div > button > span{ padding: 0 20px; } +.sec03 .inner > div > button > .material-symbols-outlined { + font-variation-settings: + 'FILL' 0, + 'wght' 400, + 'GRAD' 0, + 'opsz' 48 +} + +/*sec04*/ +.sec04{ + background: url(../images/main/main-background4.png) no-repeat center / cover; + position: relative; +} +.sec04 .inner{ + flex-direction: column; + justify-content: center; +} +.sec04 .top .business{ position: relative; } +.sec04 .top .business > h1{ + font: 700 62px 'Elice Digital Baeum', 'sans-serif'; + color: #111111; + margin: 0 0 20px; +} +.sec04 .top .business > p{ + font: 400 19px 'pretendard', 'sans-serif'; + line-height: 35px; +} +.sec04 .top .business > p::after{ + content: ""; + display: block; + height: 1px; + width: 100%; + margin: 30px 0 50px; + background-color: #efefef; +} +.sec04 .top .business > img{ + position: absolute; + top: 70px; + right: 40px; +} +.sec04 .top .contents{ + display: flex; + justify-content: space-between; + margin: 0 0 220px; +} +.sec04 .top .contents .box > a{ + position: relative; + display: flex; + align-items: center; + justify-content: center; +} +.sec04 .top .contents .box > a > p{ + position: absolute; + font: 700 28px 'Elice Digital Baeum', 'sans-serif'; + color: #fff; + text-shadow: 0px 0px 5px rgba(0,0,0,0.8); +} +.sec04 .top .contents .box > p{ + font: 400 16px 'pretendard', 'sans-serif'; + color: #666666; + margin: 10px; +} +.sec04 .bottom{ + background: url(../images/main/main-4-sub-background.png) no-repeat center / cover; + width: 100%; + height: 270px; + position: absolute; + bottom: 0; +} +.sec04 .bottom .inner{ + flex-direction: row; + align-items: center; + justify-content: space-between; +} +.sec04 .bottom .inner > p{ + font: 400 25px 'Elice Digital Baeum', 'sans-serif'; + color: #fff; +} +.sec04 .bottom .news{ + position: relative; + width: 640px; + height: 70px; + background-color: rgba(255,255,255,0.3); + border-radius: 5px; + display: flex; + align-items: center; +} +.sec04 .bottom .news > .newstit{ + width: 150px; + font: 600 16px 'pretendard', 'sans-serif'; + color: #fff; + text-align: center; +} +.sec04 .bottom .news > .list{ + width: 250px; + font: 400 16px 'pretendard', 'sans-serif'; + color: #fff; + text-align: left; + overflow:hidden; + text-overflow:ellipsis; + white-space:nowrap; +} +.sec04 .bottom .news > a:last-child{ + position: absolute; + right: 0; + top: 0; + width: 80px; + height: 100%; + color: #fff; + border-radius: 0 5px 5px 0; + display: flex; + align-items: center; + justify-content: center; + background-color: rgba(255,255,255,0.2); +} +.sec04 .bottom .news > a:last-child > .material-symbols-outlined { + font-variation-settings: + 'FILL' 0, + 'wght' 400, + 'GRAD' 0, + 'opsz' 48; + font-size: 35px; +} + +/*footer*/ +footer{ + background-color: #111827; + width: 100%; + height: 160px; +} +footer .inner{ + align-items: center; + position: relative; +} +footer p{ + font: 400 14px 'pretendard', 'sans-serif'; + color: #fff; +} +footer p:first-child{ + font-weight: 700; + font-size: 18px; +} +footer div{ margin: 40px; } +footer div > p{ margin: 5px 0; } +footer .copyright{ + position: absolute; + right: 0; + top: 90px; +} \ No newline at end of file diff --git a/images/icon/btn_gotop.png b/images/icon/btn_gotop.png new file mode 100644 index 0000000..dce83b4 Binary files /dev/null and b/images/icon/btn_gotop.png differ diff --git a/images/icon/chevron-back-outline.svg b/images/icon/chevron-back-outline.svg new file mode 100644 index 0000000..ef35551 --- /dev/null +++ b/images/icon/chevron-back-outline.svg @@ -0,0 +1 @@ +Chevron Back \ No newline at end of file diff --git a/images/icon/chevron-bback-outline.svg b/images/icon/chevron-bback-outline.svg new file mode 100644 index 0000000..7ad8691 --- /dev/null +++ b/images/icon/chevron-bback-outline.svg @@ -0,0 +1,12 @@ + + + + + + + + + diff --git a/images/icon/chevron-down-outline.svg b/images/icon/chevron-down-outline.svg new file mode 100644 index 0000000..e4991bb --- /dev/null +++ b/images/icon/chevron-down-outline.svg @@ -0,0 +1 @@ +Chevron Down \ No newline at end of file diff --git a/images/icon/chevron-fforward-outline.svg b/images/icon/chevron-fforward-outline.svg new file mode 100644 index 0000000..78613b5 --- /dev/null +++ b/images/icon/chevron-fforward-outline.svg @@ -0,0 +1,12 @@ + + + + + + + + + diff --git a/images/icon/chevron-forward-outline.svg b/images/icon/chevron-forward-outline.svg new file mode 100644 index 0000000..931da0c --- /dev/null +++ b/images/icon/chevron-forward-outline.svg @@ -0,0 +1 @@ +Chevron Forward \ No newline at end of file diff --git a/images/icon/main-2-area_more2.png b/images/icon/main-2-area_more2.png new file mode 100644 index 0000000..a3f598c Binary files /dev/null and b/images/icon/main-2-area_more2.png differ diff --git a/images/icon/main-2-area_more3.png b/images/icon/main-2-area_more3.png new file mode 100644 index 0000000..775f2bb Binary files /dev/null and b/images/icon/main-2-area_more3.png differ diff --git a/images/icon/sub-1-item-icon01.png b/images/icon/sub-1-item-icon01.png new file mode 100644 index 0000000..4c14c47 Binary files /dev/null and b/images/icon/sub-1-item-icon01.png differ diff --git a/images/icon/sub-1-item-icon02.png b/images/icon/sub-1-item-icon02.png new file mode 100644 index 0000000..2292103 Binary files /dev/null and b/images/icon/sub-1-item-icon02.png differ diff --git a/images/icon/sub-1-item-icon03.png b/images/icon/sub-1-item-icon03.png new file mode 100644 index 0000000..01e9529 Binary files /dev/null and b/images/icon/sub-1-item-icon03.png differ diff --git a/images/icon/sub-1-item-icon04.png b/images/icon/sub-1-item-icon04.png new file mode 100644 index 0000000..9dd7d2c Binary files /dev/null and b/images/icon/sub-1-item-icon04.png differ diff --git a/images/icon/sub-1-item-icon05.png b/images/icon/sub-1-item-icon05.png new file mode 100644 index 0000000..e4d2912 Binary files /dev/null and b/images/icon/sub-1-item-icon05.png differ diff --git a/images/icon/sub-1-item-icon06.png b/images/icon/sub-1-item-icon06.png new file mode 100644 index 0000000..1622173 Binary files /dev/null and b/images/icon/sub-1-item-icon06.png differ diff --git a/images/icon/sub-1-item-icon07.png b/images/icon/sub-1-item-icon07.png new file mode 100644 index 0000000..f7bf6af Binary files /dev/null and b/images/icon/sub-1-item-icon07.png differ diff --git a/images/icon/sub-1-item-icon08.png b/images/icon/sub-1-item-icon08.png new file mode 100644 index 0000000..4c4e672 Binary files /dev/null and b/images/icon/sub-1-item-icon08.png differ diff --git a/images/icon/sub-1-item-icon09.png b/images/icon/sub-1-item-icon09.png new file mode 100644 index 0000000..899bb58 Binary files /dev/null and b/images/icon/sub-1-item-icon09.png differ diff --git a/images/logo/logo-head_black.png b/images/logo/logo-head_black.png new file mode 100644 index 0000000..ebad87f Binary files /dev/null and b/images/logo/logo-head_black.png differ diff --git a/images/logo/logo-head_white.png b/images/logo/logo-head_white.png new file mode 100644 index 0000000..5483054 Binary files /dev/null and b/images/logo/logo-head_white.png differ diff --git a/images/logo/logo-main_white.png b/images/logo/logo-main_white.png new file mode 100644 index 0000000..4edf81e Binary files /dev/null and b/images/logo/logo-main_white.png differ diff --git a/images/logo/main-5-footer_logo-bx.png b/images/logo/main-5-footer_logo-bx.png new file mode 100644 index 0000000..9a72e11 Binary files /dev/null and b/images/logo/main-5-footer_logo-bx.png differ diff --git a/images/main/Asset_2.png b/images/main/Asset_2.png new file mode 100644 index 0000000..356944b Binary files /dev/null and b/images/main/Asset_2.png differ diff --git a/images/main/GettyImages-1156439313.png b/images/main/GettyImages-1156439313.png new file mode 100644 index 0000000..9c62a1c Binary files /dev/null and b/images/main/GettyImages-1156439313.png differ diff --git a/images/main/main-2-area_box-left_1.png b/images/main/main-2-area_box-left_1.png new file mode 100644 index 0000000..fd79656 Binary files /dev/null and b/images/main/main-2-area_box-left_1.png differ diff --git a/images/main/main-2__notice-icon.png b/images/main/main-2__notice-icon.png new file mode 100644 index 0000000..b63e1dc Binary files /dev/null and b/images/main/main-2__notice-icon.png differ diff --git a/images/main/main-4-button_01.png b/images/main/main-4-button_01.png new file mode 100644 index 0000000..9dcd537 Binary files /dev/null and b/images/main/main-4-button_01.png differ diff --git a/images/main/main-4-button_02.png b/images/main/main-4-button_02.png new file mode 100644 index 0000000..d298930 Binary files /dev/null and b/images/main/main-4-button_02.png differ diff --git a/images/main/main-4-button_03.png b/images/main/main-4-button_03.png new file mode 100644 index 0000000..f273137 Binary files /dev/null and b/images/main/main-4-button_03.png differ diff --git a/images/main/main-4-sub-background.png b/images/main/main-4-sub-background.png new file mode 100644 index 0000000..7ae3fc7 Binary files /dev/null and b/images/main/main-4-sub-background.png differ diff --git a/images/main/main-background1.png b/images/main/main-background1.png new file mode 100644 index 0000000..27a528a Binary files /dev/null and b/images/main/main-background1.png differ diff --git a/images/main/main-background2.png b/images/main/main-background2.png new file mode 100644 index 0000000..22c85c1 Binary files /dev/null and b/images/main/main-background2.png differ diff --git a/images/main/main-background3.png b/images/main/main-background3.png new file mode 100644 index 0000000..104169a Binary files /dev/null and b/images/main/main-background3.png differ diff --git a/images/main/main-background4.png b/images/main/main-background4.png new file mode 100644 index 0000000..e044a85 Binary files /dev/null and b/images/main/main-background4.png differ diff --git a/images/main/mainvisual원본.png b/images/main/mainvisual원본.png new file mode 100644 index 0000000..9c49c72 Binary files /dev/null and b/images/main/mainvisual원본.png differ diff --git a/images/main/스크롤유도.png b/images/main/스크롤유도.png new file mode 100644 index 0000000..8d82af5 Binary files /dev/null and b/images/main/스크롤유도.png differ diff --git a/images/video/main-video1.mp4 b/images/video/main-video1.mp4 new file mode 100644 index 0000000..d48020d Binary files /dev/null and b/images/video/main-video1.mp4 differ diff --git a/legendaryFishing.html b/legendaryFishing.html new file mode 100644 index 0000000..0da2369 --- /dev/null +++ b/legendaryFishing.html @@ -0,0 +1,346 @@ + + + + + + + + + + Legend Fishing + + +
+
+ + 헤더로고 + + +
+ +

문의사항

+ +
+
+
+
+
+ +
+ +
+ +
+
+
+
+

랭킹

+
+ 주간 + 월간 +
+ 주간랭킹 2022. 03. 1주차 + 더보기→ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
순위닉네임적립포인트총 적립포인트
1전설의 낚시3,70052,300
2김전설3,20012,200
3초코나무2,40038,600
4하트연어2,20022,500
5스포츠매니아1,8002,300
6낚시의신1,7008,300
7캡틴아메리카1,3001,300
8세월을낚는사람1,1006,300
9루어루어9003,800
10피싱마스터8604,900
+
+
+
+
+

이벤트

+ 이벤트배너 + + 바로가기버튼 + +
+
+

공지사항

+ + 공지사항아이콘 + + 더보기버튼 + +
+
+
+
+ +
+
+
+

FISHING OF LEGEND

+

전설의 낚시 소개

+

+ 스크린 낚시? 더 이상 비교대상이 아닙니다!
+ 세계최초, 바다낚시의 짜릿하고 통쾌한 현장감을 생생히 느낄 수 있는
+ 혁신적인 낚시 레포츠의 세계로 여러분을 초대합니다. +

+ +
+
+
+ +
+
+
+
+

사업소개

+

+ 차세대 레포츠 시장을 선도하는 혁신적인 창업 아이템
+ 단순 게임이 아닌 낚시 레저 인구들을 위한 VR 레포츠가 새롭게 선보입니다! +

+ 낚시꾼 +
+
+
+ +

사업경쟁력

+ 사업경쟁력 + +

가상현실의 한계를 넘어, 놀랍도록 생생한 사투의 현장 재현

+
+
+ +

기술력

+ 기술력 + +

현존하는 가장 완벽한 기술의 융합

+
+
+ +

프랜차이즈

+ 프랜차이즈 + +

차세대 레포츠 시장을 선도하는 혁신적인 창업 아이템

+
+
+
+
+
+
+

+ 전설의 낚시는 고객의 가장 가까운 곳에서
+ 최고의 VR 레포츠로 성장할 것입니다! +

+
+ 보도자료 + (주)레전드 VR 기술, 메타버스 낚시게임개발 + + add + +
+
+
+
+
+
+ + + + + + + + + \ No newline at end of file diff --git a/script/fishing.js b/script/fishing.js new file mode 100644 index 0000000..e69de29