palnetworks
/
pal-home-front
7
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

.

master
geun1416 3 years ago
parent
70900223b9
commit
00c7a29fd9
10 changed files with 301 additions and 19 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 49
      html/css/common.css
  2. BIN
      html/images/news01.jpg
  3. BIN
      html/images/news02.jpg
  4. BIN
      html/images/news03.jpg
  5. BIN
      html/images/news04.jpg
  6. BIN
      html/images/pal_icon02_2.png
  7. 19
      html/include/footer.html
  8. 13
      html/include/header.html
  9. 205
      html/index.html
  10. 28
      html/js/common.js

49
html/css/common.css
Unescape View File

@ -9,7 +9,7 @@ body,html{
#skip_to_container a:focus, #skip_to_container a:active {width:100%;height:75px;background:#21272e;color:#fff;font-size:2em;font-weight:bold;text-align:center;text-decoration:none;line-height:3.3em} #skip_to_container a:focus, #skip_to_container a:active {width:100%;height:75px;background:#21272e;color:#fff;font-size:2em;font-weight:bold;text-align:center;text-decoration:none;line-height:3.3em}
/*header*/ /*header*/
#hd {z-index:1000;position:fixed;width:100%; top:0;overflow:hidden; transition:0.6s ease; -webkit-transition:0.6s ease;} #hd {background:rgba(0, 0, 0, 0);z-index:1000;position:fixed;width:100%; top:0;overflow:hidden; transition:0.6s ease; -webkit-transition:0.6s ease;}
#hd:hover{background:#fff; border-bottom:1px solid rgba(0, 0, 0, 0.5);} #hd:hover{background:#fff; border-bottom:1px solid rgba(0, 0, 0, 0.5);}
#hd_h1 {position:absolute;font-size:0;line-height:0;overflow:hidden} #hd_h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#logo a{display:block;padding:20px;} #logo a{display:block;padding:20px;}
@ -28,6 +28,7 @@ body,html{
.gnb_1da {width:100%;display:inline-block;font-weight:500;color:#fff;text-decoration:none; font-size:20px;} .gnb_1da {width:100%;display:inline-block;font-weight:500;color:#fff;text-decoration:none; font-size:20px;}
.gnb_2dli{line-height:36px; padding:0 0 10px; font-size:18px; font-weight:400;} .gnb_2dli{line-height:36px; padding:0 0 10px; font-size:18px; font-weight:400;}
.gnb_2dli:first-child{border:0} .gnb_2dli:first-child{border:0}
.gnb_2dli a:hover{text-decoration: underline;}
.gnb_2dul {display:block;padding: 0; height:0; overflow:hidden;} .gnb_2dul {display:block;padding: 0; height:0; overflow:hidden;}
.gnb_2da {color:rgba(255,255,255,0.7);text-align:left;text-decoration:none} .gnb_2da {color:rgba(255,255,255,0.7);text-align:left;text-decoration:none}
@ -39,6 +40,8 @@ body,html{
.inner div b{color:#fff;} .inner div b{color:#fff;}
.main-bn{position: relative;} .main-bn{position: relative;}
.main-bn h2{font-size:3rem;font-weight:500;color:rgba(255,255,255,0.8);} .main-bn h2{font-size:3rem;font-weight:500;color:rgba(255,255,255,0.8);}
.main-bn h2.main-ti{color:#000;text-align:center;font-weight:600;}
.main-bn h4{font-size:1.5rem;font-weight:600;color:rgba(0,0,0,0.8);text-align:center;line-height:1.8;}
.main-bn .big{display:block;font-size:6rem;color:#fff;font-weight:bold;} .main-bn .big{display:block;font-size:6rem;color:#fff;font-weight:bold;}
.main-bn .sm{display:block;font-size:1.25rem;color:rgba(255,255,255,0.8);margin:10px 0 0 10px;} .main-bn .sm{display:block;font-size:1.25rem;color:rgba(255,255,255,0.8);margin:10px 0 0 10px;}
.txt-box{font-size:1.25rem;font-weight:300;color:rgba(255,255,255,0.8);line-height:1.5;} .txt-box{font-size:1.25rem;font-weight:300;color:rgba(255,255,255,0.8);line-height:1.5;}
@ -47,8 +50,41 @@ body,html{
.bg-square{display:block;border:20px solid rgba(255,255,255,0.2);width:250px;height:250px;position:absolute;top:-160px;} .bg-square{display:block;border:20px solid rgba(255,255,255,0.2);width:250px;height:250px;position:absolute;top:-160px;}
.bg01{background:url('../images/bg01.jpg');} .bg01{background:url('../images/bg01.jpg');}
.bg02{background:url('../images/bg02.jpg');} .bg02{background:url('../images/bg02.jpg');}
.bg03{background:url('../images/bg03.jpg')#21272e no-repeat 80% 50%;} .bg03{background:url('../images/bg03.jpg') no-repeat 80% 50%;}
.bg04{background:url('../images/pal_icon02_2.png') #f4f4f4 no-repeat 95% 20%;background-size:400px;}
.bg02 .txt-box, .bg03 .txt-box{padding-left:134px;} .bg02 .txt-box, .bg03 .txt-box{padding-left:134px;}
.bg04 .inner{padding-top:80px;}
.bg04 ul{width:100%;display:flex;flex-wrap:wrap;}
.bg05 .main-ti{margin-top:-100px;}
.box{position:relative;display:flex;flex:0 0 33.333%;;margin-top:40px;}
.box > a{width:300px;height:300px;display:block;}
.box:hover .list-box{ opacity: 0; }
.box:hover .line-box{ opacity: 1; }
.box:hover .line::before { width: 80%; }
.box:hover .line::after { width: 80%; }
.box:hover .line span::before { height: 80%; }
.box:hover .line span::after { height: 80.5%; }
.list-box{position: relative;width:300px;height:300px;display:flex;flex-direction: column;justify-content:center;align-items:center;background:#fff;border-radius:4px;
box-shadow: 4px 4px 4px #ddd;}
.list-box .icon img{width:120px;}
.list-box .ti{font-weight:500;font-size:1.125rem;margin-top:20px;}
.line-box{position:absolute;width:300px; height:300px;background:rgba(0,0,0,0.7);opacity:0;transition: all 0.5s;top:0;}
.line-box .line{display:flex;width:100%;height:100%;justify-content: center;align-items:center;}
.line-box span{display:block;color:#fff; font-weight:500; font-size:1.125rem; text-align:center; line-height:26px;}
.line-box span.more{text-decoration: underline;margin-top:10px;font-weight:400;font-size:0.875rem}
.line::before {content: "";position: absolute;background: rgba(255, 255, 255, 0.7);display: inline-block;transition: all 0.5s;left: 10%;top: 10%;width: 0%;height: 2px; }
.line::after {content: "";position: absolute;background: rgba(230, 230, 230, 0.7);display: inline-block;transition: all 0.5s;left: 10%;top: 90%;width: 0%;height: 2px; }
.line span::before {content: "";position: absolute;background: rgba(230, 230, 230, 0.7);display: inline-block;transition: all 0.5s;left: 10%;top: 10%;width: 2px;height: 0%; }
.line span::after {content: "";position: absolute;background: rgba(230, 230, 230, 0.7);display: inline-block;transition: all 0.5s;left: 90%;top: 10%;width: 2px;height: 0%; }
.swiper-container.news-wrap{padding:60px 0;}
.news-box img{width:100%;}
.news-box a{display: -webkit-box; -webkit-box-orient: vertical;-webkit-line-clamp:3; text-overflow: ellipsis; overflow: hidden;line-height:1.6;font-size:0.875rem;}
.news-box a:hover{text-decoration: underline;}
.news-box b{display:block;font-size:1rem;margin:10px 0 4px 0;}
.news-wrap .swiper-button-prev,.news-wrap .swiper-rtl .swiper-button-next {left: 50px;right: auto;}
.news-wrap .swiper-button-next,.news-wrap .swiper-rtl .swiper-button-prev {right: 50px; left: auto;}
.news-wrap .swiper-button-prev, .news-wrap .swiper-button-next{z-index:99;display:flex;width:50px;height:50px;border:3px solid #fff;background:rgba(255,255,255,0.4);border-radius:100%;}
.news-wrap .swiper-button-prev:after, .news-wrap .swiper-button-next:after{color:#fff;font-size:20px;font-weight:bold;}
.scroll-animation {position:absolute;left:50%;transform: translateX(-50%);bottom:40px;} .scroll-animation {position:absolute;left:50%;transform: translateX(-50%);bottom:40px;}
.scroll-box span{display:block;text-align:center;color:rgba(255,255,255,0.8);font-size:0.875rem;font-weight:300;animation: updown 1s ease-in-out 0.3s infinite normal;} .scroll-box span{display:block;text-align:center;color:rgba(255,255,255,0.8);font-size:0.875rem;font-weight:300;animation: updown 1s ease-in-out 0.3s infinite normal;}
.scroll-box span.scroll-icon{margin:10px auto;fill:#fff;width:30px;} .scroll-box span.scroll-icon{margin:10px auto;fill:#fff;width:30px;}
@ -58,3 +94,12 @@ body,html{
50% { transform: translateY(-5px); } 50% { transform: translateY(-5px); }
100% { transform: translateY(0px); } 100% { transform: translateY(0px); }
} }
.topBtn{color:#fff;font-weight:500;position:fixed;right:20px;bottom:20px;z-index:999;}
#footer{background:#21272e;position:absolute;bottom:0;width:100%;height:160px;}
.footer-box{display:flex;}
.ft-logo{padding-right:80px;}
.ft-logo img{width:200px;}
.ft-info span{display: inline-block;position: relative;color:rgba(255,255,255,0.8);font-size:0.875rem;font-weight:300;}
.ft-info span::before {content: '';width: 1px;height: 12px;background-color:rgba(255,255,255,0.8);display: inline-block;margin: 0 10px;}
.ft-info span.no-line::before{display:none;}
.test{color:#000;background:#000;}

BIN
html/images/news01.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
html/images/news02.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

BIN
html/images/news03.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
html/images/news04.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
html/images/pal_icon02_2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 153 KiB

19
html/include/footer.html
Unescape View File

@ -1,3 +1,18 @@
<div class="footer"> <div class="inner">
푸터123 <div class="footer-box">
<div class="ft-logo">
<img src="images/pal_logo_wh.png">
</div>
<div class="ft-info">
<span class="no-line">(주) PALNETWORKStest</span>
<span>대표. 최현식</span>
<span>인천광역시 서구 로봇랜드로 155-11로봇랜드 14층 1401~2호</span>
<span>사업자등록번호. 393-81-00110</span>
<br/>
<span class="no-line">TEL. 032-727-5908</span>
<span>FAX. 032-727-5909</span>
<span>E-mail. [email protected]</span>
<span>Copyright © (주) PALNETWORKS. All rights reserved.</span>
</div>
</div>
</div> </div>

13
html/include/header.html
Unescape View File

@ -5,16 +5,23 @@
$('#hd').css('background', 'rgba(0, 0, 0, 0.4)'); $('#hd').css('background', 'rgba(0, 0, 0, 0.4)');
$('.gnb_2dul').stop().animate({ 'height': '220px' }, 250); $('.gnb_2dul').stop().animate({ 'height': '220px' }, 250);
$('.gnb_1da').css('color', '#fff'); $('.gnb_1da').css('color', '#fff');
// $('.color_logo').css('display', 'block'); // $('.color_logo').css('display', 'block');
// $('.wh_logo').css('display', 'none'); // $('.wh_logo').css('display', 'none');
}); });
$('#hd').on('mouseleave', function () { $('#hd').on('mouseleave', function () {
let anchor = window.location.hash.replace("#", '');
$('#hd').css('background', 'rgba(0, 0, 0, 0)'); $('#hd').css('background', 'rgba(0, 0, 0, 0)');
$('.gnb_2dul').stop().animate({ 'height': '-100px' }, 250); $('.gnb_2dul').stop().animate({ 'height': '-100px' }, 250);
$('.gnb_1da').css('color', '#fff'); $('.gnb_1da').css('color', '#fff');
// $('.wh_logo').css('display', 'block'); if(anchor === 'skills' || anchor === 'news') {
// $('.color_logo').css('display', 'none'); $('.gnb_1da').css('color', '#000');
}else {
$('.gnb_1da').css('color', '#fff');
}
}); });
}); });
</script> </script>
@ -29,7 +36,7 @@
<div id="logo"> <div id="logo">
<a href="index.html"> <a href="index.html">
<img src="images/pal_logo_wh.png" class="wh_logo" style="display: block;"> <img src="images/pal_logo_wh.png" class="wh_logo" style="display: block;">
<!-- <img src="images/pal_logo.png" class="color_logo" style="display: none;"> --> <img src="images/pal_logo.png" class="color_logo" style="display: none;">
</a> </a>
</div> </div>

205
html/index.html
Unescape View File

@ -39,7 +39,7 @@
</head> </head>
<script type="text/javascript"> <script type="text/javascript">
$(document).ready( function() { $(document).ready(function() {
$("#header").load("include/header.html"); $("#header").load("include/header.html");
$("#footer").load("include/footer.html"); $("#footer").load("include/footer.html");
@ -54,6 +54,9 @@
<!--main--> <!--main-->
<div id="container"> <div id="container">
<a class="topBtn" href="#home">
상단으로
</a>
<div id="fullpage"> <div id="fullpage">
<div class="section main-bn bg01"> <div class="section main-bn bg01">
<canvas id="canvas" class="bg-canvas"></canvas> <canvas id="canvas" class="bg-canvas"></canvas>
@ -91,7 +94,7 @@
<span class="wow fadeInLeft bg-square"></span> <span class="wow fadeInLeft bg-square"></span>
<p class="wow fadeInUp txt-box" data-wow-duration="2s"> <p class="wow fadeInUp txt-box" data-wow-duration="2s">
<b>미래 항공산업과 지상의 이동수단</b>을 연결하는<br/> <b>미래 항공산업과 지상의 이동수단</b>을 연결하는<br/>
<b>미래 모빌리티</b>를 준비합니다.test <b>미래 모빌리티</b>를 준비합니다.
</p> </p>
</div> </div>
<div class="wow fadeIn scroll-animation" data-wow-duration="4s"> <div class="wow fadeIn scroll-animation" data-wow-duration="4s">
@ -101,8 +104,202 @@
</a> </a>
</div> </div>
</div> </div>
<div class="section">Section 4</div>
<footer id="footer" class="section fp-auto-height"></footer> <div class="section main-bn bg04">
<div class="inner">
<h4 class="wow fadeInDown">
팔네트웍스는 현재의 항공 플랫폼을 제공하고<br/>
미래의 항공플랫폼인 UAM/PAV를 준비합니다.
</h4>
<ul class="wow fadeInUp">
<li class="box">
<a href="#none">
<div class="list-box">
<span class="icon"><img src="images/mainicon02.png"></span>
<span class="ti">항공예약 플랫폼</span>
</div>
<div class="line-box">
<div class="line">
<span>
<span class="txt">
인터넷 부킹 엔진 기반<br/>
항공예약 서비스
</span>
<span class="more">
자세히보기
</span>
</span>
</div>
</div>
</a>
</li>
<li class="box">
<a href="#none">
<div class="list-box">
<span class="icon"><img src="images/mainicon01.png"></span>
<span class="ti">스마트 관광 예약 플랫폼</span>
</div>
<div class="line-box">
<div class="line">
<span>
<span class="txt">
항공권, 먹거리, 공연 등<br/>
통합 발권 서비스
</span>
<span class="more">
자세히보기
</span>
</span>
</div>
</div>
</a>
</li>
<li class="box">
<a href="#none">
<div class="list-box">
<span class="icon"><img src="images/mainicon04.png"></span>
<span class="ti">VR/AR 시뮬레이터</span>
</div>
<div class="line-box">
<div class="line">
<span>
<span class="txt">
예비 조종사를 위한<br/>
항공 시뮬레이터
</span>
<span class="more">
자세히보기
</span>
</span>
</div>
</div>
</a>
</li>
<li class="box">
<a href="#none">
<div class="list-box">
<span class="icon"><img src="images/mainicon05.png"></span>
<span class="ti">상황관제 시스템</span>
</div>
<div class="line-box">
<div class="line">
<span>
<span class="txt">
환경/상황관제/안티드론 등<br/>
PAV/UAM/DRONE<br/>
제어 솔루션
</span>
<span class="more">
자세히보기
</span>
</span>
</div>
</div>
</a>
</li>
<li class="box">
<a href="#none">
<div class="list-box">
<span class="icon"><img src="images/mainicon03.png"></span>
<span class="ti">클라우드</span>
</div>
<div class="line-box">
<div class="line">
<span>
<span class="txt">
고객사에 맞는 다양한<br/>
클라우드 서비스 제공
</span>
<span class="more">
자세히보기
</span>
</span>
</div>
</div>
</a>
</li>
<li class="box">
<a href="#none">
<div class="list-box">
<span class="icon"><img src="images/mainicon06.png"></span>
<span class="ti">드론 3D 촬영</span>
</div>
<div class="line-box">
<div class="line">
<span>
<span class="txt">
드론을 활용한<br/>
3D 촬영
</span>
<span class="more">
자세히보기
</span>
</span>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="section main-bn bg05">
<div class="">
<h2 class="wow fadeInDown main-ti">
NEWS
</h2>
<div class="swiper swiper-container news-wrap">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="news-box">
<span class="img"><img src="images/news01.jpg"></span>
<b>강원도 드론택시(UAM)사업을 위하여 뭉쳤다</b>
<a href="http://www.mirae.news/news/articleView.html?idxno=5158" target="_blank">
㈜아세따(대표 김형준)과 (주)팔네트워크(대표 최현식),
㈜파이온시스템즈(대표 이한석)는 '2022 드론쇼코리아'가 개최되는 부산 벡스코 VIP룸에서
드론실증을 위한 업무협약(MOU)을 체결했다고 2월 24일 밝혔다.
</a>
</div>
</div>
<div class="swiper-slide">
<div class="news-box">
<span class="img"><img src="images/news02.jpg"></span>
<b>인천시, 개인용 비행체(PAV) 시제기 ADEX에서 공개</b>
<a href="https://www.hankyung.com/society/article/202110196455h" target="_blank">
인천시가 관내 항공우주산업 중소기업들과 함께 '서울국제항공우주·방위산업 전시회'에
참가한다고 19일 밝혔다. 국내 지자체에서 처음으로 개발에 참여해
제작한 PAV(개인용 비행체) 시제기도 선보인다.
</a>
</div>
</div>
<div class="swiper-slide">
<div class="news-box">
<span class="img"><img src="images/news03.jpg"></span>
<b>팔네트웍스, 소형항공사 하이에어 정보시스템 개발 구축</b>
<a href="https://www.imsn.kr/news/articleView.html?idxno=14938" target="_blank">
항공 전문 정보시스템 솔루션 업체인 팔네트웍스(대표 최현식)는
신생 소형항공사 하이에어(대표 윤형관)에 홈페이지, 모바일앱등을 개발하고 부킹엔진,
안전보안, 무게배분시스템(weight balance)등의 솔루션을 구축해 테스트와 운항증명(AOC)를 마치고,
지난해 12월 11일 정식 오픈했다고 30일 밝혔다.
</a>
</div>
</div>
<div class="swiper-slide">
<div class="news-box">
<span class="img"><img src="images/news04.jpg"></span>
<b>인천시, ‘인천 항공산업 선도기업, 유망기업’ 14개 선정</b>
<a href="http://press.incheon.go.kr/citynet/jsp/sap/SAPNewsBizProcess.do?command=searchDetailSvp&sido=&matOfYmd=20181217&matSno=5&flag=&viFlag=in" target="_blank">
인천에 소재하고 있는 기업 중에서 휴니드테크놀러지스, 와이지-원처럼 이미
항공산업에 진출하여 있거나, 에스피지와 같이 새로이 진출하고자 하는 기업 중
항공 관련 기술적 역량이 우수한 기업을 선정하는 제도이다.
</a>
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
<footer id="footer" class=""></footer>
</div> </div>
</div> </div>
<!--//main--> <!--//main-->

28
html/js/common.js
Unescape View File

@ -1,7 +1,7 @@
$(function(){ $(function(){
new WOW().init(); new WOW().init();
AOS.init(); AOS.init();
$('[data-aos]').each(function(){ $(this).addClass("aos-init"); }); //$('[data-aos]').each(function(){ $(this).addClass("aos-init"); });
new fullpage('#fullpage', { new fullpage('#fullpage', {
licenseKey: '13F1F552-6ACE43B7-95262729-9E0B4778', licenseKey: '13F1F552-6ACE43B7-95262729-9E0B4778',
//options here //options here
@ -11,9 +11,26 @@ $(function(){
navigation:true, navigation:true,
navigationPosition:'right', navigationPosition:'right',
scrollBar: true, scrollBar: true,
onLeave: function(){ afterLoad: function(origin, destination) {
if(destination.anchor === 'skills' || destination.anchor === 'news') {
$('.gnb_1da').css('color', '#000');
$('.wh_logo').css('display', 'none');
$('.color_logo').css('display', 'block');
} else {
$('.gnb_1da').css('color', '#fff');
$('.wh_logo').css('display', 'block');
$('.color_logo').css('display', 'none');
}
},
onLeave: function(origin, destination){
new WOW().init(); new WOW().init();
} console.log(destination)
if(destination.anchor === 'skills' || destination.anchor === 'news') {
$('.gnb_1da').css('color', '#000');
} else {
$('.gnb_1da').css('color', '#fff');
}
},
}); });
//methods //methods
@ -28,9 +45,9 @@ $(function(){
//방향 셋팅 vertical 수직, horizontal 수평 설정이 없으면 수평 //방향 셋팅 vertical 수직, horizontal 수평 설정이 없으면 수평
direction: 'horizontal', direction: 'horizontal',
//한번에 보여지는 페이지 숫자 //한번에 보여지는 페이지 숫자
slidesPerView: 1, slidesPerView: 4,
//페이지와 페이지 사이의 간격 //페이지와 페이지 사이의 간격
spaceBetween: 30, spaceBetween: 100,
//드레그 기능 true 사용가능 false 사용불가 //드레그 기능 true 사용가능 false 사용불가
debugger: true, debugger: true,
//마우스 휠기능 true 사용가능 false 사용불가 //마우스 휠기능 true 사용가능 false 사용불가
@ -173,6 +190,7 @@ $(function(){
}); });
$(function(){ $(function(){
}); });
Write Preview
Loading…
Cancel
Save