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

.

master
geun1416 2 years ago
parent
33ea18a413
commit
6be1e85dac
4 changed files with 345 additions and 27 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 54
      html/css/common.css
  2. 83
      html/include/header.html
  3. 186
      html/index.html
  4. 45
      html/js/common.js

54
html/css/common.css
Unescape View File

@ -11,7 +11,7 @@ body,html{overflow-x: hidden;}
.pal-icon{vertical-align: middle;}
/*header*/
#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);} */
.color_logo{display:none;}
.wh_logo{display:block;}
#hd_h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
@ -116,7 +116,7 @@ position:fixed;right:50px;bottom:20px;z-index:999;display:flex;justify-content:c
.topBtn i{font-size:20px;color:#fff;}
/*footer*/
#footer{min-width:1280px;background:#21272e;position:absolute;bottom:0;width:100%;height:200px;}
#footer{background:#21272e;position:absolute;bottom:0;width:100%;height:200px;}
.footer-box{display:flex;}
.ft-logo{padding-right:80px;}
.ft-logo img{width:200px;}
@ -325,3 +325,53 @@ position: absolute;top:-25px;left:50%;transform: translateX(-50%);box-shadow:2px
.example-box-txt li span{display:block;width:250px;min-height:58px;background:#fff;border-radius:30px;border:1px solid #2290c9;
padding:18px 20px 15px 20px;font-weight:500;margin: 0px auto;font-size:1rem;box-shadow:3px 6px 5px #ddd;}
.example-info + .example-info .example-box-ti{border-top:0;}
.mg_box{display:none;}
.mg_box{width:100%; overflow:hidden;top:0; right:0; z-index:9;}
.mg_box.on{z-index:9999;}
.m_gnb{position:absolute; top:0; right:-100%; width:100%; z-index:9; transition:0.3s ease; -webkit-transition:0.3s ease;}
.m_gnb.on{z-index:9999; right:0;}
div.mg_btn{position:absolute; top:15px; right:10px; z-index:99999;
transition:0.5s ease; -webkit-transition:0.5s ease; -o-transition:0.5s ease;
transition-delay:0.3s; -webkit-transition-delay:0.3s; -o-transition-delay:0.3s;
}
div.mg_btn span{display:block; width:42px; height:2px; margin:10px; background:#fff; transition:0.5s ease; -webkit-transition:0.5s ease;}
div.mg_btn.on{transform:rotate(45deg);}
div.mg_btn.on span{width:0px; height:2px; background:#000;}
div.mg_btn.on span:first-child{width:42px; transform:translateY(12px)}
div.mg_btn.on span:last-child{width:42px; transform:translateY(-12px) rotate(90deg);}
.m_gnb div.mg_wrap{width:500px; background:#fff;}
.m_gnb div.mg_wrap.on{position:Absolute; right:0; z-index:999;}
.m_gnb div.mg_wrap>ul{padding:100px;}
.m_gnb div.mg_wrap>ul>li{padding:5px 0;}
.m_gnb div.mg_wrap>ul>li>a{font-size:26px; font-weight:900; color:#444!important;}
.m_gnb div.mg_wrap>ul>li>ul{display:none;padding:10px 0;}
.m_gnb div.mg_wrap>ul>li>ul>li{padding:5px 0;}
.m_gnb div.mg_wrap>ul>li>ul>li>a{font-size:20px;color:#444;}
.m_gnb div.mg_bk{display:none; width:100%; height:100%; background:#222; opacity:0; transition:0.5s ease; -webkit-transition:0.5s ease;}
.m_gnb div.mg_bk.on{display:block; opacity:0.9;}
/*1024이하 메인*/
#mo-main .swiper-button-next:after, #mo-main .swiper-rtl .swiper-button-prev:after{color:#fff;font-size:25px;}
#mo-main .swiper-button-prev:after, #mo-main .swiper-rtl .swiper-button-next:after{color:#fff;font-size:25px;}
@media screen and (max-width:1024px){
#fullpage{display:none}
.pc-hd{display:none}
html,body{height:100%!important;}
#hd:hover{background:inherit!important;}
#mo-main .main-bn{height:520px;background-size:cover;}
#container{height:100%;}
.inner{width:100%;padding:0 20px;}
.bg-square{width:200px;height:200px;top:-50px}
.main-txt-box{padding:0 40px;}
.main-bn .inner{padding-top:60px;}
.bg01 .inner{padding:0 60px;}
.bg02 .main-txt-box, .bg03 .main-txt-box{padding-left:40px;}
.mg_btn{display:block;}
.main-bn h2{font-size:2rem}
.main-bn .big{font-size:4rem}
.main-txt-box b{font-size:2.5rem;}
.main-txt-box{font-size:1.25rem;word-break: keep-all;}
}

83
html/include/header.html
Unescape View File

@ -19,7 +19,36 @@
// $('.hd-sub .wh_logo').css('display', 'none');
});
$('html.on #hd_wrapper').css('height', '100vh');
//햄버거메뉴 X버튼 활성화 및 메뉴바 슬라이딩
$('.mg_btn').click(function(){
$('.mg_box').toggleClass('on');
$('.m_gnb').toggleClass('on');
$('.mg_btn').toggleClass('on');
$('.mg_wrap').toggleClass('on');
$('.mg_bk').toggleClass('on');
$('html').toggleClass('on');
$('#logo').toggleClass('on');
$('.mg_wrap>ul>li>ul').slideUp(100);
});
//메뉴바 FULL HEIGHT
$('.mg_box').css('height', $(window).height());
$('.m_gnb').css('height', $(window).height());
$('.mg_wrap').css('height', $(window).height());
$(window).resize(function(){
$('.mg_box').css('height', $(window).height());
$('.m_gnb').css('height', $(window).height());
$('.mg_wrap').css('height', $(window).height());
});
//리스트제목 클릭시 리스트 노출
$('.mg_wrap>ul>li').click(function(){
$(this).children('ul:not(:animated)').slideToggle(500);
});
});
</script>
<div id="hd">
@ -36,7 +65,7 @@
</a>
</div>
<nav id="gnb">
<nav id="gnb" class="pc-hd">
<h2>메인메뉴</h2>
<div class="gnb_wrap">
<ul id="gnb_1dul">
@ -82,4 +111,56 @@
</nav>
</div>
<div class="mg_btn">
<span></span>
<span></span>
<span></span>
</div>
<div class="mg_box">
<nav class="m_gnb">
<div class="mg_wrap">
<ul>
<li class="gnb_1dli">
<a href="#" target="_self" class="gnb_1da">COMPANY</a>
<span class="bg">하위분류</span>
<ul class="gnb_2dul">
<li class="gnb_2dli"><a href="company.html" target="_self" class="gnb_2da">기업정보</a></li>
<li class="gnb_2dli"><a href="history.html" target="_self" class="gnb_2da">연혁</a></li>
<li class="gnb_2dli"><a href="partner.html" target="_self" class="gnb_2da">고객 및 협력사</a></li>
<li class="gnb_2dli"><a href="map.html" target="_self" class="gnb_2da">찾아오시는 길</a></li>
</ul>
</li>
<li class="gnb_1dli">
<a href="#l" target="_self" class="gnb_1da">BUSINESS</a>
<span class="bg">하위분류</span>
<ul class="gnb_2dul">
<li class="gnb_2dli"><a href="business01.html" target="_self" class="gnb_2da">System Integration</a></li>
<li class="gnb_2dli"><a href="business02.html" target="_self" class="gnb_2da">R&D</a></li>
<!-- <li class="gnb_2dli"><a href="business03.html" target="_self" class="gnb_2da">구축사례</a></li> -->
</ul>
</li>
<li class="gnb_1dli">
<a href="#" target="_self" class="gnb_1da">SOLUTION</a>
<span class="bg">하위분류</span>
<ul class="gnb_2dul">
<li class="gnb_2dli"><a href="solution01.html" target="_self" class="gnb_2da">비행상황관리 시스템</a></li>
<li class="gnb_2dli"><a href="solution02.html" target="_self" class="gnb_2da">IBE(Internet Booking Engine)</a></li>
<li class="gnb_2dli"><a href="solution03.html" target="_self" class="gnb_2da">스마트 관광 예약 플랫폼</a></li>
<li class="gnb_2dli"><a href="solution04.html" target="_self" class="gnb_2da">KT G-cloud 인천총판</a></li>
</ul>
</li>
<li class="gnb_1dli">
<a href="#" target="_self" class="gnb_1da">CONTACT US</a>
<span class="bg">하위분류</span>
<ul class="gnb_2dul">
<li class="gnb_2dli"><a href="message.html" target="_self" class="gnb_2da">문의하기</a></li>
<li class="gnb_2dli"><a href="employ.html" target="_self" class="gnb_2da">채용정보</a></li>
</ul>
</li>
</ul>
</div>
<div class="mg_bk"></div>
</nav>
</div>
</div>

186
html/index.html
Unescape View File

@ -51,6 +51,9 @@ body,html{
overflow-y: hidden !important;
position: relative;
}
@media screen and(max-width:1024px) {
body,html{overflow-y:auto!important;}
}
</style>
<body>
<!--header-->
@ -465,6 +468,189 @@ body,html{
</div>
</div>
</div>
<div id="mo-main">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide slide-box">
<div class="section main-bn bg01">
<div class="inner">
<h2 class="wow fadeInUp" data-wow-duration="2s">가치를 존중하며 신뢰를 바탕으로 실천하는 기업</h2>
<span class="wow fadeInUp big" data-wow-duration="3s">PAL Networks</span>
<span class="wow fadeInUp sm" data-wow-duration="4s">항공·전문 IT산업분야의 소프트웨어 개발 전문 기업</span>
</div>
</div>
</div>
<div class="swiper-slide slide-box">
<div class="section main-bn bg02">
<div class="inner">
<span class="wow fadeInLeft bg-square"></span>
<p class="wow fadeInUp main-txt-box" data-wow-duration="2s">
<b>팔네트웍스</b> 는<br/>
<b>‘인천 항공 산업 선도기업’</b> 유망기업으로 선정된 항공 소프트웨어 전문 기업입니다.
</p>
</div>
</div>
</div>
<div class="swiper-slide slide-box">
<div class="section main-bn bg03">
<div class="inner">
<span class="wow fadeInLeft bg-square"></span>
<p class="wow fadeInUp main-txt-box" data-wow-duration="2s">
<b>미래 항공산업과 지상의 이동수단</b> 을 연결하는<br/>
<b>미래 모빌리티</b>를 준비합니다.
</p>
</div>
</div>
</div>
</div>
<!-- <div class="swiper-pagination"></div> -->
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div><!--//슬라이드 끝-->
<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>
</div>
</div>
<!--//main-->

45
html/js/common.js
Unescape View File

@ -8,6 +8,7 @@ $(function(){
licenseKey: '13F1F552-6ACE43B7-95262729-9E0B4778',
//options here
anchors:['home', 'works', 'mobility','skills', 'news'],
// responsiveWidth: 1024,
autoScrolling:true,
scrollHorizontally: true,
navigation:true,
@ -19,39 +20,39 @@ $(function(){
}
if(destination.anchor === 'skills' || destination.anchor === 'news') {
$('.gnb_1da').css('color', '#000');
$('.wh_logo').css('display', 'none');
$('.color_logo').css('display', 'block');
$('.pc-hd .gnb_1da').css('color', '#000');
$('.pc-hd .wh_logo').css('display', 'none');
$('.pc-hd .color_logo').css('display', 'block');
$('#hd').on('mouseenter', function () {
$('.wh_logo').css('display', 'block');
$('.color_logo').css('display', 'none');
$('.pc-hd .wh_logo').css('display', 'block');
$('.pc-hd .color_logo').css('display', 'none');
});
$('#hd').on('mouseleave', function () {
$('.wh_logo').css('display', 'none');
$('.color_logo').css('display', 'block');
$('.gnb_1da').css('color', '#000');
$('.pc-hd .wh_logo').css('display', 'none');
$('.pc-hd .color_logo').css('display', 'block');
$('.pc-hd .gnb_1da').css('color', '#000');
});
} else {
$('.gnb_1da').css('color', '#fff');
$('.pc-hd .gnb_1da').css('color', '#fff');
}
},
onLeave: function(origin, destination){
new WOW().init();
console.log(destination)
if(destination.anchor === 'skills' || destination.anchor === 'news') {
$('.gnb_1da').css('color', '#fff');
$('.pc-hd .gnb_1da').css('color', '#fff');
} else {
$('.gnb_1da').css('color', '#fff');
$('.wh_logo').css('display', 'block');
$('.color_logo').css('display', 'none');
$('.pc-hd .gnb_1da').css('color', '#fff');
$('.pc-hd .wh_logo').css('display', 'block');
$('.pc-hd .color_logo').css('display', 'none');
$('#hd').on('mouseenter', function () {
$('.wh_logo').css('display', 'block');
$('.color_logo').css('display', 'none');
$('.pc-hd .wh_logo').css('display', 'block');
$('.pc-hd .color_logo').css('display', 'none');
});
$('#hd').on('mouseleave', function () {
$('.wh_logo').css('display', 'block');
$('.color_logo').css('display', 'none');
$('.gnb_1da').css('color', '#fff');
$('.pc-hd .wh_logo').css('display', 'block');
$('.pc-hd .color_logo').css('display', 'none');
$('.pc-hd .gnb_1da').css('color', '#fff');
});
}
},
@ -63,15 +64,15 @@ $(function(){
$(function(){
new Swiper('.swiper-container');
const swiper = new Swiper('.swiper-container', {
new Swiper('#mo-main .swiper-container');
const swiper = new Swiper('#mo-main .swiper-container', {
//기본 셋팅
//방향 셋팅 vertical 수직, horizontal 수평 설정이 없으면 수평
direction: 'horizontal',
//한번에 보여지는 페이지 숫자
slidesPerView: 4,
slidesPerView: 1,
//페이지와 페이지 사이의 간격
spaceBetween: 100,
spaceBetween: 0,
//드레그 기능 true 사용가능 false 사용불가
debugger: true,
//마우스 휠기능 true 사용가능 false 사용불가

Write Preview
Loading…
Cancel
Save