Browse Source

컨텐츠 레이아웃

master
geun1416 3 years ago
parent
commit
56559d1082
  1. 27
      html/css/common.css
  2. BIN
      html/images/solution01.png
  3. 2
      html/include/header.html
  4. 51
      html/js/common.js
  5. 141
      html/solution.html

27
html/css/common.css

@ -148,7 +148,7 @@ position:fixed;right:50px;bottom:20px;z-index:999;display:flex;justify-content:c
.design-line.horizontal{width:100%;margin:60px 0;} .design-line.horizontal{width:100%;margin:60px 0;}
.design-line.horizontal::before{content:'';display:block;width:30%;height:2px;background:#333;} .design-line.horizontal::before{content:'';display:block;width:30%;height:2px;background:#333;}
.design-line.horizontal::after{content:'';display:block;width:100%;height:1px;background:#999;} .design-line.horizontal::after{content:'';display:block;width:100%;height:1px;background:#999;}
.point-txt{color:#2290c9} .point-txt{color:#2290c9!important;}
.list-txt{margin-top:18px;color: #333;font-size: 1rem;line-height:1.5;} .list-txt{margin-top:18px;color: #333;font-size: 1rem;line-height:1.5;}
.list-txt > li {position: relative;} .list-txt > li {position: relative;}
.list-txt > li + li{margin-top:14px;} .list-txt > li + li{margin-top:14px;}
@ -156,7 +156,9 @@ position:fixed;right:50px;bottom:20px;z-index:999;display:flex;justify-content:c
.list-txt > li b{margin-right:10px;font-size:1.125rem;} .list-txt > li b{margin-right:10px;font-size:1.125rem;}
.wh_txt{color:#fff;} .wh_txt{color:#fff;}
.border-gray{width:100%;height:1px;background:#ddd;margin:60px 0;} .border-gray{width:100%;height:1px;background:#ddd;margin:60px 0;}
.wh-full{width:100%;}
.wh-1280{width:1280px;margin:0px auto;}
.bg-gray{background:#f4f4f4;}
/*회사소개*/ /*회사소개*/
.company .img{margin-right:60px;} .company .img{margin-right:60px;}
.company .img img{width:500px;} .company .img img{width:500px;}
@ -259,3 +261,24 @@ font-size:40px; speak: none;font-style: normal; font-weight:normal;font-variant:
.table_st02 tr td{padding:14px 20px;font-weight:300;vertical-align: middle;} .table_st02 tr td{padding:14px 20px;font-weight:300;vertical-align: middle;}
.sub-p{margin-bottom:80px;line-height: 1.8;text-align: center;} .sub-p{margin-bottom:80px;line-height: 1.8;text-align: center;}
.sub-p b{display:block;font-size:1.8rem;font-weight:600;margin-bottom:10px;} .sub-p b{display:block;font-size:1.8rem;font-weight:600;margin-bottom:10px;}
/*tab*/
ul.tabs{margin: 0px auto;padding: 0px;list-style: none;display:flex;width:100%;max-width:1280px;}
ul.tabs li{width:25%;background: none;color: #222;display:block;padding: 10px 15px;cursor: pointer;text-align:center;font-size:1.125rem;}
ul.tabs li.current{color: #222;font-weight:600;}
ul.tabs li.current span{border-bottom:2px solid #222;}
.tab-content{display: none;padding:40px 0 0 0;flex-direction: column;}
.tab-content.current{display: inherit;}
/*솔루션+비즈니스*/
.sub-cont.work{flex-direction: column;padding:40px 0;}
.solution-box{display:flex;align-items: center;border-top:1px solid #ddd;padding:40px 0;}
.solution-box + .solution-box{border-top:0;padding:80px 0;}
.solution-box .txt{padding-right:80px;}
.solution-box p{padding:40px 0;font-size:1.125rem;word-break: keep-all;line-height: 1.8;}
.work-slide{width:1280px;margin:0px auto;position:relative;overflow: hidden;}
.swiper-container-work{padding-top:60px;}
.work-slide .swiper-slide{display:flex;justify-content: center;align-items: center;flex-direction: column;}
.work-slide .work-icon{display:flex;justify-content: center;align-items: center;width:150px;height:150px;background:#fff;border:1px solid #ddd;border-radius:100%;}
.work-slide .work-txt{margin-top:20px;}
.work-slide .swiper-button-prev:after, .work-slide .swiper-rtl .swiper-button-next:after{color:#2290c9;font-size:25px;}
.work-slide .swiper-button-next:after, .work-slide.swiper-rtl .swiper-button-prev:after{color:#2290c9;font-size:25px;}
.solution-skill{width:100%;}

BIN
html/images/solution01.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 160 KiB

2
html/include/header.html

@ -63,7 +63,7 @@
<a href="#none" target="_self" class="gnb_1da">SOLUTION</a> <a href="#none" target="_self" class="gnb_1da">SOLUTION</a>
<span class="bg">하위분류</span> <span class="bg">하위분류</span>
<ul class="gnb_2dul"> <ul class="gnb_2dul">
<li class="gnb_2dli"><a href="#none" target="_self" class="gnb_2da">드론 비행관제 시스템</a></li> <li class="gnb_2dli"><a href="solution.html" target="_self" class="gnb_2da">드론 비행관제 시스템</a></li>
<li class="gnb_2dli"><a href="#none" target="_self" class="gnb_2da">IBE(Internet Booking Engine)</a></li> <li class="gnb_2dli"><a href="#none" target="_self" class="gnb_2da">IBE(Internet Booking Engine)</a></li>
<li class="gnb_2dli"><a href="#none" target="_self" class="gnb_2da">KT G-cloud-인천총판</a></li> <li class="gnb_2dli"><a href="#none" target="_self" class="gnb_2da">KT G-cloud-인천총판</a></li>
</ul> </ul>

51
html/js/common.js

@ -252,3 +252,54 @@ $(function(){
}); });
}); });
$(function(){
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
})
});
$(function(){
new Swiper('.swiper-container-work');
const swiper = new Swiper('.swiper-container-work', {
//기본 셋팅
//방향 셋팅 vertical 수직, horizontal 수평 설정이 없으면 수평
direction: 'horizontal',
//한번에 보여지는 페이지 숫자
slidesPerView: 3,
//페이지와 페이지 사이의 간격
spaceBetween: 10,
//드레그 기능 true 사용가능 false 사용불가
debugger: true,
//마우스 휠기능 true 사용가능 false 사용불가
mousewheel: false,
//반복 기능 true 사용가능 false 사용불가
loop: true,
//선택된 슬라이드를 중심으로 true 사용가능 false 사용불가
centeredSlides: true,
// 페이지 전환효과 slidesPerView효과와 같이 사용 불가
// effect: 'fade',
//자동 스크를링
speed : 1000, // 슬라이드 속도 2초
autoplay: {
//시간 1000 이 1초
delay: 3000,
disableOnInteraction: false,
},
//방향표
navigation: {
//다음페이지 설정
nextEl: '.swiper-button-next',
//이전페이지 설정
prevEl: '.swiper-button-prev',
},
});
});

141
html/solution.html

@ -0,0 +1,141 @@
<!doctype html>
<html lang="ko" xml:lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="팔네트웍스, 소프트웨어 개발 등 응용소프트웨어 개발 및 공급업체">
<meta name="keywords" content="팔, 필네트웍스, 소프트웨어, 응용소프트웨어, 개발, IT, 항공솔루션, 솔루션개발, 솔루션구축, 네트워크, SI, 항공산업">
<meta property="og:description" content="팔네트웍스 - 항공산업의 기술혁신 선도를 통한 파트너">
<meta property="og:title" content="팔네트웍스">
<!-- <meta property="og:image" content=""> -->
<meta property="og:type" content="website">
<!-- 파비콘 -->
<link rel="shortcut icon" href="images/favicon.png">
<!-- css -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/fullpage.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/aos.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/swiper.css">
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/swiper-bundle.css">
<link rel="stylesheet" href="css/xeicon.min.css">
<!-- js -->
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/fullpage.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/aos.js"></script>
<script src="js/common.js"></script>
<script src="js/swiper.js"></script>
<script src="js/swiper.min.js"></script>
<script src="js/swiper-bundle.js"></script>
<title>PAL Networks</title>
</head>
<script type="text/javascript">
$(document).ready(function() {
$("#header").load("include/header.html");
$("#footer").load("include/footer.html");
});
</script>
<body>
<!--header-->
<header id="header" class="hd-sub"></header>
<!--//header-->
<!--main-->
<div id="container" class="sub-con">
<a class="topBtn" href="#home">
<i class="xi-arrow-up"></i>
</a>
<div class="sub-inner wh-full">
<div class="sub-ti wh-1280">
<div class="breadcrumbs">
<ul>
<li><a href="index.html"><i class="xi-home"></i>Home</a></li>
<li class="on"><a href="solution.html">SOLUTION</a></li>
</ul>
</div>
<h4 data-aos="fade-down" data-aos-duration="1000">SOLUTION</h4>
</div>
<div class="design-line-ti"></div>
<div class="sub-cont work">
<div class="tabs-box">
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1"><span>비행상황관리 시스템</span></li>
<li class="tab-link" data-tab="tab-2"><span>IBE(Internet Booking Engine)</span></li>
<li class="tab-link" data-tab="tab-3"><span>스마트 관광 예약 플랫폼</span></li>
<li class="tab-link" data-tab="tab-4"><span>KT G-cloud 인천총판</span></li>
</ul>
</div>
<div id="tab-1" class="tab-content current">
<div class="solution-box wh-1280">
<div class="txt" data-aos="fade-right" data-aos-duration="1000">
<h6 class="point-txt">비행상황 관리 시스템</h6>
<p>
항공기, 무인기, 선박 등 실시간 식별정보를 통하여 모니터링 및 상황관리를 할 수 있는 시스템
<br/><br/>
각종 드론 상황관제, 환경측정, 미래산업인 드론/PAV/UAM을 활용한 사업들을 지원하기 위한
환경/물류/안티 드론 등의 상황관제 시스템을 연구하고 솔루션을 제공합니다.
</p>
</div>
<div class="img" data-aos="fade-left" data-aos-duration="1000">
<img src="images/solution01.png">
</div>
</div>
<div class="solution-box bg-gray">
<div class="work-slide">
<h6 class="point-txt" data-aos="fade-right" data-aos-duration="1000">비행상황 관리 시스템 특징</h6>
<div class="swiper-container-work" data-aos="fade-in" data-aos-duration="1000">
<div class="swiper-wrapper">
<div class="swiper-slide slide-box"><span class="work-icon"><i class="xi-arrow-up"></i></span><span class="work-txt">실시간 모니터링</span></div>
<div class="swiper-slide slide-box"><span class="work-icon"><i class="xi-arrow-up"></i></span><span class="work-txt">222222</span></div>
<div class="swiper-slide slide-box"><span class="work-icon"><i class="xi-arrow-up"></i></span><span class="work-txt">333333</span></div>
</div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev" data-aos="fade-in" data-aos-duration="1000"></div>
<div class="swiper-button-next" data-aos="fade-in" data-aos-duration="1000"></div>
</div>
</div>
</div>
<div class="solution-box wh-1280">
<div class="solution-skill">
<h6 class="point-txt" data-aos="fade-right" data-aos-duration="1000">비행상황관리 시스템 주요기능</h6>
<ul>
<li>
<div class="">
<span class="skill-img">이미지</span>
<span class="skill-txt">비행가능 지역 및 공역표출</span>
</div>
</li>
</ul>
</div>
</div>
</div>
<div id="tab-2" class="tab-content">
---- ---- ★------ ---- ---- ---- ---- ---- ---- -------- ---- ---- ---- ---- ---- ---- -------- ---- ---- ---- ★-- ---- ---- ------★ ---- ---- ---- ---- ---- ---- -------- ---- ---- ---- ---- ---- ---- ★------ ---- ---- ---- ----
</div>
<div id="tab-3" class="tab-content">
---- ★-- -------- ---- ---- ---- -★- ---- ---- -------- ---- -★- ---- ---- ---- ---- -------- ---- ---- ---- ---- ---- --★ -------- ★-- ---- ---- ---- ---- ---- -------- ---- ---- --★ ---- ---- ---- -------- ---- ---- ---- --★
</div>
<div id="tab-4" class="tab-content">
---- ★-- -------- ---- ---- ---- -★- ---- ---- -------- ---- -★- ---- ---- ---- ---- -------- ---- ---- ---- ---- ---- --★ -------- ★-- ---- ---- ---- ---- ---- -------- ---- ---- --★ ---- ---- ---- -------- ---- ---- ---- --★
</div>
</div>
</div>
</div>
<!--//main-->
<footer id="footer" class="ft-sub"></footer>
</body>
</html>
Loading…
Cancel
Save