commit
1953d8b0f7
39 changed files with 900 additions and 0 deletions
@ -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; |
||||
} |
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 7.4 KiB |
|
After Width: | Height: | Size: 5.3 KiB |
|
After Width: | Height: | Size: 5.6 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 110 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 83 KiB |
|
After Width: | Height: | Size: 6.9 KiB |
|
After Width: | Height: | Size: 281 KiB |
|
After Width: | Height: | Size: 9.9 KiB |
|
After Width: | Height: | Size: 114 KiB |
|
After Width: | Height: | Size: 152 KiB |
|
After Width: | Height: | Size: 112 KiB |
|
After Width: | Height: | Size: 818 KiB |
|
After Width: | Height: | Size: 1.1 MiB |
|
After Width: | Height: | Size: 556 KiB |
|
After Width: | Height: | Size: 2.7 MiB |
|
After Width: | Height: | Size: 994 KiB |
|
After Width: | Height: | Size: 2.3 MiB |
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
@ -0,0 +1,346 @@
|
||||
<!DOCTYPE html> |
||||
<html lang="ko"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/> |
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" /> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> |
||||
<link href="//font.elice.io/EliceDigitalBaeum.css" rel="stylesheet"> |
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"> |
||||
<link rel="stylesheet" type="text/css" href="./css/fishing.css"> |
||||
<title>Legend Fishing</title> |
||||
</head> |
||||
<body> |
||||
<header> |
||||
<div class="hinner"> |
||||
<a href="./legendaryFishing.html"> |
||||
<img src="./images/logo/logo-head_white.png" alt="헤더로고"> |
||||
</a> |
||||
<nav> |
||||
<ul class="gnb"> |
||||
<li> |
||||
<a href="#">전설의 낚시 소개</a> |
||||
</li> |
||||
<li> |
||||
<a href="#">사업경쟁력</a> |
||||
|
||||
</li> |
||||
<li> |
||||
<a href="#">기술력</a> |
||||
<ul class="lnb"> |
||||
<li> |
||||
<a href="#">Hardware Technology</a> |
||||
</li> |
||||
<li> |
||||
<a href="#">AI Motion Tracking</a> |
||||
</li> |
||||
</ul> |
||||
</li> |
||||
<li> |
||||
<a href="#">전설의 낚시 창업</a> |
||||
<ul class="lnb"> |
||||
<li> |
||||
<a href="#">창업경쟁력</a> |
||||
</li> |
||||
<li> |
||||
<a href="#">창업안내</a> |
||||
</li> |
||||
</ul> |
||||
</li> |
||||
<li> |
||||
<a href="#">커뮤니티</a> |
||||
<ul class="lnb"> |
||||
<li> |
||||
<a href="#">공지사항</a> |
||||
</li> |
||||
<li> |
||||
<a href="#">보도자료</a> |
||||
</li> |
||||
<li> |
||||
<a href="#">문의사항</a> |
||||
</li> |
||||
</ul> |
||||
</li> |
||||
<li> |
||||
<a href="#">회사소개</a> |
||||
</li> |
||||
<li> |
||||
<a href="#">경품스토어</a> |
||||
</li> |
||||
</ul> |
||||
</nav> |
||||
<div class="question"> |
||||
<a href="#"> |
||||
<p>문의사항</p> |
||||
</a> |
||||
</div> |
||||
</div> |
||||
</header> |
||||
<div class="wrap swiper fullslider"> |
||||
<div class="swiper-wrapper"> |
||||
<!-- 메인 --> |
||||
<section class="swiper-slide sec01"> |
||||
<div class="swiper banner"> |
||||
<div class="swiper-wrapper"> |
||||
<div class="swiper-slide slide01"> |
||||
<img src="./images/main/Asset_2.png" alt="낚시대"> |
||||
<img src="./images/logo/logo-main_white.png" alt="메인로고"> |
||||
<h1> |
||||
낚시 레포츠의 혁명, 세계최초 리얼리티 낚시<br> |
||||
낚시 레저 인구들을 위한 VR레포츠 전설의 낚시 |
||||
</h1> |
||||
<video muted autoplay loop> |
||||
<source src="./images/video/main-video1.mp4" type="video/mp4"> |
||||
</video> |
||||
</div> |
||||
<div class="swiper-slide slide02"> |
||||
<img src="./images/main/Asset_2.png" alt="낚시대"> |
||||
<img src="./images/logo/logo-main_white.png" alt="메인로고"> |
||||
<h1> |
||||
낚시 레포츠의 혁명, 세계최초 리얼리티 낚시<br> |
||||
낚시 레저 인구들을 위한 VR레포츠 전설의 낚시 |
||||
</h1> |
||||
<video muted autoplay loop> |
||||
<source src="./images/video/main-video1.mp4" type="video/mp4"> |
||||
</video> |
||||
</div> |
||||
<div class="swiper-slide slide03"> |
||||
<img src="./images/main/Asset_2.png" alt="낚시대"> |
||||
<img src="./images/logo/logo-main_white.png" alt="메인로고"> |
||||
<h1> |
||||
낚시 레포츠의 혁명, 세계최초 리얼리티 낚시<br> |
||||
낚시 레저 인구들을 위한 VR레포츠 전설의 낚시 |
||||
</h1> |
||||
<video muted autoplay loop> |
||||
<source src="./images/video/main-video1.mp4" type="video/mp4"> |
||||
</video> |
||||
</div> |
||||
</div> |
||||
<div class="swiper-pagination"></div> |
||||
<img class="scroll" src="./images/main/스크롤유도.png" alt="스크롤"> |
||||
</div> |
||||
</section> |
||||
<!-- 순위/이벤트/공지 --> |
||||
<section class="swiper-slide sec02"> |
||||
<div class="inner"> |
||||
<div class="left"> |
||||
<div class="top"> |
||||
<h3>랭킹</h3> |
||||
<div class="tap"> |
||||
<span class="on">주간</span> |
||||
<span>월간</span> |
||||
</div> |
||||
<span>주간랭킹 2022. 03. 1주차</span> |
||||
<a href="#">더보기→</a> |
||||
</div> |
||||
<div class="contents"> |
||||
<table> |
||||
<tr> |
||||
<th>순위</th> |
||||
<th>닉네임</th> |
||||
<th>적립포인트</th> |
||||
<th>총 적립포인트</th> |
||||
</tr> |
||||
<tr> |
||||
<td>1</td> |
||||
<td>전설의 낚시</td> |
||||
<td>3,700</td> |
||||
<td>52,300</td> |
||||
</tr> |
||||
<tr> |
||||
<td>2</td> |
||||
<td>김전설</td> |
||||
<td>3,200</td> |
||||
<td>12,200</td> |
||||
</tr> |
||||
<tr> |
||||
<td>3</td> |
||||
<td>초코나무</td> |
||||
<td>2,400</td> |
||||
<td>38,600</td> |
||||
</tr> |
||||
<tr> |
||||
<td>4</td> |
||||
<td>하트연어</td> |
||||
<td>2,200</td> |
||||
<td>22,500</td> |
||||
</tr> |
||||
<tr> |
||||
<td>5</td> |
||||
<td>스포츠매니아</td> |
||||
<td>1,800</td> |
||||
<td>2,300</td> |
||||
</tr> |
||||
<tr> |
||||
<td>6</td> |
||||
<td>낚시의신</td> |
||||
<td>1,700</td> |
||||
<td>8,300</td> |
||||
</tr> |
||||
<tr> |
||||
<td>7</td> |
||||
<td>캡틴아메리카</td> |
||||
<td>1,300</td> |
||||
<td>1,300</td> |
||||
</tr> |
||||
<tr> |
||||
<td>8</td> |
||||
<td>세월을낚는사람</td> |
||||
<td>1,100</td> |
||||
<td>6,300</td> |
||||
</tr> |
||||
<tr> |
||||
<td>9</td> |
||||
<td>루어루어</td> |
||||
<td>900</td> |
||||
<td>3,800</td> |
||||
</tr> |
||||
<tr> |
||||
<td>10</td> |
||||
<td>피싱마스터</td> |
||||
<td>860</td> |
||||
<td>4,900</td> |
||||
</tr> |
||||
</table> |
||||
</div> |
||||
</div> |
||||
<div class="right"> |
||||
<div class="event"> |
||||
<h3>이벤트</h3> |
||||
<img src="./images/main/main-2-area_box-left_1.png" alt="이벤트배너"> |
||||
<a href="#"> |
||||
<img src="./images/icon/main-2-area_more2.png" alt="바로가기버튼"> |
||||
</a> |
||||
</div> |
||||
<div class="notice"> |
||||
<h3>공지사항</h3> |
||||
<ul> |
||||
<li> |
||||
<a href="#">(주)레전드 VR 기술, 메타버스 낚시게임개발중</a> |
||||
</li> |
||||
<li> |
||||
<a href="#">(주)레전드 VR 기술, 메타버스 낚시게임개발중</a> |
||||
</li> |
||||
<li> |
||||
<a href="#">(주)레전드 VR 기술, 메타버스 낚시게임개발중</a> |
||||
</li> |
||||
</ul> |
||||
<img src="./images/main/main-2__notice-icon.png" alt="공지사항아이콘"> |
||||
<a href="#"> |
||||
<img src="./images/icon/main-2-area_more3.png" alt="더보기버튼"> |
||||
</a> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
<!-- 전설의 낚시 소개 --> |
||||
<section class="swiper-slide sec03"> |
||||
<div class="inner"> |
||||
<div> |
||||
<p>FISHING OF LEGEND</p> |
||||
<h1>전설의 낚시 소개</h1> |
||||
<p> |
||||
스크린 낚시? 더 이상 비교대상이 아닙니다!<br> |
||||
세계최초, 바다낚시의 짜릿하고 통쾌한 현장감을 생생히 느낄 수 있는<br> |
||||
혁신적인 낚시 레포츠의 세계로 여러분을 초대합니다. |
||||
</p> |
||||
<button> |
||||
자세히보기 |
||||
<span class="material-symbols-outlined"> |
||||
arrow_forward |
||||
</span> |
||||
</button> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
<!-- 사업소개 --> |
||||
<section class="swiper-slide sec04"> |
||||
<div class="inner"> |
||||
<div class="top"> |
||||
<div class="business"> |
||||
<h1>사업소개</h1> |
||||
<p> |
||||
차세대 레포츠 시장을 선도하는 혁신적인 창업 아이템<br> |
||||
단순 게임이 아닌 낚시 레저 인구들을 위한 VR 레포츠가 새롭게 선보입니다! |
||||
</p> |
||||
<img src="./images/main/GettyImages-1156439313.png" alt="낚시꾼"> |
||||
</div> |
||||
<div class="contents"> |
||||
<div class="box"> |
||||
<a href="#"> |
||||
<p>사업경쟁력</p> |
||||
<img src="./images/main/main-4-button_01.png" alt="사업경쟁력"> |
||||
</a> |
||||
<p>가상현실의 한계를 넘어, 놀랍도록 생생한 사투의 현장 재현</p> |
||||
</div> |
||||
<div class="box"> |
||||
<a href="#"> |
||||
<p>기술력</p> |
||||
<img src="./images/main/main-4-button_02.png" alt="기술력"> |
||||
</a> |
||||
<p>현존하는 가장 완벽한 기술의 융합</p> |
||||
</div> |
||||
<div class="box"> |
||||
<a href="#"> |
||||
<p>프랜차이즈</p> |
||||
<img src="./images/main/main-4-button_03.png" alt="프랜차이즈"> |
||||
</a> |
||||
<p>차세대 레포츠 시장을 선도하는 혁신적인 창업 아이템</p> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="bottom"> |
||||
<div class="inner"> |
||||
<p> |
||||
<strong>전설의 낚시</strong>는 고객의 가장 가까운 곳에서<br> |
||||
<strong>최고의 VR 레포츠</strong>로 성장할 것입니다! |
||||
</p> |
||||
<div class="news"> |
||||
<span class="newstit">보도자료</span> |
||||
<a class= "list" href="#">(주)레전드 VR 기술, 메타버스 낚시게임개발</a> |
||||
<a href="#"> |
||||
<span class="material-symbols-outlined">add</span> |
||||
</a> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
</div> |
||||
</div> |
||||
<footer> |
||||
<div class="inner"> |
||||
<a href="./legendaryFishing.html"> |
||||
<img src="./images/logo/main-5-footer_logo-bx.png" alt="푸터로고"> |
||||
</a> |
||||
<div> |
||||
<p>주식회사 레전드</p> |
||||
<p>주소 : 경기도 성남시 분당구 황새울로315, 대현BD 204호</p> |
||||
<p>TEL 1533-3858 | FAX 031-701-3858</p> |
||||
</div> |
||||
<p class="copyright">Copyrights2022 ⓒ 전설의 낚시, All rights Reserved</p> |
||||
</div> |
||||
</footer> |
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script> |
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> |
||||
|
||||
<script> |
||||
//sec01 슬라이더 |
||||
var sec01Swiper = new Swiper(".banner", { |
||||
loop: true, |
||||
pagination: { |
||||
el: ".swiper-pagination", |
||||
} |
||||
}); |
||||
//풀페이지 슬라이더 |
||||
var fullPageSwiper = new Swiper(".fullslider", { |
||||
direction: "vertical", |
||||
slidesPerView: 1, |
||||
mousewheel: true, |
||||
speed: 500, |
||||
}); |
||||
|
||||
</script> |
||||
<script src="./script/fishing.js"></script> |
||||
</body> |
||||
</html> |
||||
Loading…
Reference in new issue