Commit e52d4ce5 authored by kim bo min's avatar kim bo min

first commit

parent b7b35c37
var concat = require('gulp-concat');
var sass = require("gulp-sass");
var stripDebug = require('gulp-strip-debug');
var uglify = require('gulp-uglify');
var dest = require('gulp-dest');
var webserver = require('gulp-webserver');
var fileinclude = require('gulp-file-include');
var gulp = require('gulp');
var src = 'public/src';
var dist = 'public/dist';
var paths = {
html : src + '/html/*.html',
js : src + '/js/*.js',
scss : src + '/sass/*.scss',
assets : src + '/assets/**/*'
};
//include
gulp.task('fileinclude:public', function() {
gulp.src(paths.html)
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
.pipe(gulp.dest(src+'/pub'));
});
gulp.task('fileinclude:dev', function() {
gulp.src(paths.html)
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
.pipe(gulp.dest(dist+'/html'));
});
gulp.task('js:dev', function () {
gulp.src(paths.js)
.pipe(stripDebug())
.pipe(concat('script.js'))
.pipe(gulp.dest(dist+'/js'));
});
gulp.task('sass:public', function () {
gulp.src(paths.scss)
.pipe(sass.sync({outputStyle:'compact'}).on('error', sass.logError))
.pipe(concat('style.css'))
.pipe(gulp.dest(src + '/css'))
});
gulp.task('sass:dev', function () {
gulp.src(paths.scss)
.pipe(sass.sync({outputStyle:'compact'}).on('error', sass.logError))
.pipe(concat('style.css'))
.pipe(gulp.dest(dist + '/css'))
});
gulp.task('copy', function () {
gulp.src(paths.assets)
.pipe(gulp.dest(dist+'/assets'));
});
gulp.task('webserver', function() {
gulp.src('public/')
.pipe(webserver({
livereload: true,
open: false,
port: 8009
}));
});
// gulp.watch
gulp.task('watch', function () {
gulp.watch(paths.scss, ['sass:public']);
gulp.watch(paths.html, ['fileinclude:public']);
});
gulp.task('dev', ['webserver']);
gulp.task('build', ['copy', 'fileinclude:dev', 'js:dev', 'sass:dev'])
This diff is collapsed.
{
"name": "opalio",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "http://freeive.iptime.org/kimbomm/opalio.git"
},
"author": "kimbomm",
"license": "ISC",
"devDependencies": {
"gulp": "^3.9.1",
"gulp-concat": "^2.6.1",
"gulp-dest": "^0.2.3",
"gulp-file-include": "^2.0.1",
"gulp-sass": "^4.0.2",
"gulp-scss": "^1.4.0",
"gulp-sourcemaps": "^2.6.5",
"gulp-strip-debug": "^3.0.0",
"gulp-uglify": "^3.0.2",
"gulp-webserver": "^0.9.1"
},
"dependencies": {}
}
This diff is collapsed.
html, body { min-width: 1200px; max-width: 1920px; height: 100%; margin: 0 auto; position: relative; font-size: 0; line-height: 1; font-weight: 400; }
div, li, nav { box-sizing: border-box; }
ul, li { list-style: none; padding: 0; }
img { vertical-align: middle; }
a { text-decoration: none; color: inherit; }
.vm:before { content: ""; display: inline-block; vertical-align: middle; height: 100%; }
.vm > div { display: inline-block; vertical-align: middle; }
header { position: fixed; z-index: 9; top: 0; left: 0; width: 100%; height: 80px; border-bottom: 1px #dfdfdf solid; }
header .head-inner { width: 1200px; margin: 0 auto; }
header .logo { float: left; line-height: 80px; }
header .navBtn { float: right; line-height: 80px; }
.bk-bg { position: absolute; display: none; background-color: rgba(0, 0, 0, 0.5); top: 0; right: 0; bottom: 0; left: 0; z-index: 9; }
.bk-bg.on { display: block; }
nav { z-index: 10; transition: 1s; position: absolute; top: 0; right: -290px; width: 290px; background-color: #000; padding: 30px; color: #fff; }
nav.on { right: 0; }
nav .closeBtn { text-align: right; }
nav ul { margin-top: 70px; margin-bottom: 290px; padding: 0; }
nav li { font-size: 20px; }
nav li a { padding: 9px 0; display: inline-block; }
nav .btn input[type="button"] { border: 3px rgba(151, 151, 151, 0.77) solid; width: 230px; height: 70px; box-sizing: border-box; padding: 0; margin: 0; outline: 0; cursor: pointer; background-color: transparent; font-size: 20px; color: #fff; background-repeat: no-repeat; text-align: left; text-indent: 75px; }
nav .btn input[type="button"].registBtn { background-image: url("../img/main/icon/icon_customer.png"); background-position: 22px 15px; }
nav .btn input[type="button"].mapBtn { background-image: url("../img/main/icon/icon_map.png"); background-position: 20px 16px; }
nav .btn .inner div:first-child { margin-bottom: 10px; }
footer { text-align: center; }
footer .inner { width: 1200px; margin: 0 auto; }
footer .info { padding: 40px 0; background-color: #fff; color: #4a4a4a; }
footer .info span { display: inline-block; vertical-align: middle; padding: 0 10px; border-right: 1px #4a4a4a solid; }
footer .info span:last-child { border-right: 0; }
footer .info p { font-size: 14px; margin-bottom: 15px; }
footer .info p:last-child { margin-bottom: 0px; }
footer .warning { padding: 48px 0; background-color: #000; }
footer .warning p { font-size: 14px; color: #fff; line-height: 1.2; }
footer .warning p:before { content: "* "; }
section { height: 100%; min-height: 900px; position: relative; }
section .inner { width: 1200px; margin: 0 auto; height: 100%; }
section .title { padding-top: 90px; text-align: center; color: #fff; }
section .title .main { font-size: 48px; margin-bottom: 30px; position: relative; }
section .title .main:after { content: ""; display: inline-block; width: 60px; height: 2px; background-color: #9D9A96; position: absolute; left: 50%; margin-left: -30px; top: calc(100% + 10px); }
section .title .sub { font-size: 18px; }
i.scroll { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
.ad { background-color: #1b1b1b; height: 80px; }
.ad .inner { width: 1200px; margin: 0 auto; height: 100%; }
.ad .inner > div { width: 100%; }
.ad .regist { display: inline-block; }
.ad .tel { float: right; margin-top: 8px; }
.ad .tel span { display: inline-block; vertical-align: middle; color: #fff; }
.ad .tel span:first-child { font-size: 16px; margin-right: 30px; }
.ad .tel span:last-child { font-size: 28px; font-weight: 700; }
a.registBtn { display: inline-block; font-size: 18px; color: #fff; font-weight: 800; padding: 12px 30px; border: 1px #979797 solid; }
#main { position: relative; }
#main .slide { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
#main .slide > div { width: 100%; height: 100%; background-position: center; background-size: cover; }
#main .slide > div:first-child { background-image: url("../img/main/content/visual_01.jpg"); }
#main .slide .slide_inner { width: 1200px; height: 100%; margin: 0 auto; }
#premium { background-color: #38332a; }
#premium .list { margin-top: 100px; }
#premium .list li { display: inline-block; vertical-align: top; margin-right: 20px; width: calc((100% - 75px) / 4); }
#premium .list li:last-child { margin-right: 0; }
#premium .list .cont { padding: 15px 12px; font-size: 16px; line-height: 1.3; color: #fff; word-break: keep-all; }
#system .bar { margin: 64px 0; }
#system .bar div { display: inline-block; vertical-align: top; width: 50%; font-size: 18px; font-weight: 700; color: #fff; padding: 21px 0; }
#system .bar div:first-child { background-color: #406a8e; }
#system .bar div:last-child { background-color: #b5e4ff; }
#system .bar + div { padding-left: 55px; }
#system .slogan { margin-bottom: 42px; }
#system .slogan p { display: inline-block; font-size: 24px; color: #aaa; line-height: 1.3; border-bottom: 1px #9D9A96 solid; }
#system .slogan p span { font-size: 36px; color: #fff; display: block; }
#system .list li { display: inline-block; vertical-align: middle; width: 50%; }
#system .list li > div { display: inline-block; vertical-align: middle; }
#system .list li .img { margin-right: 36px; }
#system .list li .desp { font-size: 16px; color: #fff; line-height: 1.4; }
#system .list li .desp b { font-size: 24px; }
#detail .list { margin: 114px 0 132px; }
#detail li { text-align: center; margin-bottom: 20px; }
#detail li > div { display: inline-block; vertical-align: middle; }
#detail li .cl, #detail li .cr { width: 40%; }
#detail li .cl { text-align: right; }
#detail li .cl .type { margin-right: 20px; background-color: #850e4f; }
#detail li .cr { text-align: left; }
#detail li .cr .type { margin-left: 20px; background-color: #71bdff; }
#detail li .cc { width: 30px; margin: 0 25px; position: relative; }
#detail li .cc:after { content: ""; display: inline-block; width: 2px; height: 38px; background-color: #989898; position: absolute; top: 100%; left: 50%; margin-left: -1px; }
#detail li .cc .circle { display: inline-block; box-sizing: border-box; width: 27px; height: 27px; border-radius: 50%; border: 5px #989898 solid; background-color: #fff; }
#detail li .cc .circle:hover { border-color: #2cebff; }
#detail li .type, #detail li .num { display: inline-block; vertical-align: middle; text-align: center; }
#detail li .type { font-size: 20px; padding: 5px 0px; width: 150px; color: #fff; }
#detail li .num { font-size: 44px; width: 90px; }
#detail li:last-child .cc:after { display: none; }
@@include('../include/header.html', {
"title":"동대문 오펠리오"
})
<section id="main">
<div class="inner">
<div class="slide">
<div>
<div class="slide_inner">
</div>
</div>
</div>
<i class="scroll"><img src="../img/main/icon/scroll-icon.png" alt="스크롤아이 "></i>
</div>
</section>
<div class="ad">
<div class="inner vm">
<div>
<div class="regist">
<a href="javascript:void(0)" class="registBtn">관심고객 등록</a>
</div>
<div class="tel">
<p>
<span>분양안내 / 문의</span>
<span>02.2278.8889</span>
</p>
</div>
</div>
</div>
</div>
<section id="premium">
<div class="inner">
<div class="title">
<p class="main"><span>4대 프리미엄</span></p>
<p class="sub"><span>서울 중심부의 프리미엄 클래스</span></p>
</div>
<div class="list">
<ul>
<li>
<div class="img">
<img src="../img/main/content/premium_01.png" alt="">
</div>
<div class="cont">
<p>동대문역사문화공원역 보도3분 을지로 4가 보도 7분 종로5가역 보도 10분의 트리플 역세권</p>
</div>
</li>
<li>
<div class="img">
<img src="../img/main/content/premium_02.png" alt="">
</div>
<div class="cont">
<p>단지 500M 이내 청계천, 훈련원공원, 묵정공원등근린 공원 이용 편리</p>
</div>
</li>
<li>
<div class="img">
<img src="../img/main/content/premium_03.png" alt="">
</div>
<div class="cont">
<p>CJ제일제당 본사 및 대우 건설 본사 이전(예정)으로 대기업 배후 임대수요 증가세</p>
</div>
</li>
<li>
<div class="img">
<img src="../img/main/content/premium_04.png" alt="">
</div>
<div class="cont">
<p>동대문 디자인 프라자, 중구청, 국립중앙 의료원, 서울대 병원등 다양한 문화 & 편의시설 인접</p>
</div>
</li>
</ul>
</div>
</div>
</section>
<section id="system">
<div class="inner">
<div class="title">
<p class="main"><span>특화 시스템</span></p>
<p class="sub"><span>스마트하고 세련된 당신의 라이프가 만들어 집니다.</span></p>
</div>
<div class="contents">
<div class="bar">
<div><span>SMART Built-In</span></div>
<div><span>SMART Intelligent</span></div>
</div>
<div>
<div class="slogan">
<p>
수납은 충분하게! 동선은 효율적으로
<span>인테리어에 공간 미학을 강조하다.</span>
</p>
</div>
<div class="list">
<ul>
<li>
<div class="img">
<img src="" alt="">
</div>
<div class="desp">
<p>
시원한 바람과 맑은 공기를 제공하는<br/>
<b>천장형 에어컨</b>
</p>
</div>
</li>
<li>
<div class="img">
<img src="" alt="">
</div>
<div class="desp">
<p>
리모콘과 환기구가 설치 되어있어 편리한<br/>
<b>전동형 빨래건조대</b>
</p>
</div>
</li>
<li>
<div class="img">
<img src="" alt="">
</div>
<div class="desp">
<p>
집안의 분위기까지 깔끔하게 만드는<br/>
<b>드레스 룸</b>
</p>
</div>
</li>
<li>
<div class="img">
<img src="" alt="">
</div>
<div class="desp">
<p>
전자레인지 와 오븐기능이 함께 있는<br/>
<b>광파 오븐</b>
</p>
</div>
</li>
<li>
<div class="img">
<img src="" alt="">
</div>
<div class="desp">
<p>
대량의 의류를 넉넉하게 수납 할 수 있는<br/>
<b>와이드 붙박이장</b>
</p>
</div>
</li>
<li>
<div class="img">
<img src="" alt="">
</div>
<div class="desp">
<p>
전기 쿡탑과 인덕션을 함께 사용할 수 있는<br/>
<b>하이브리드 쿡탑</b>
</p>
</div>
</li>
<li>
<div class="img">
<img src="" alt="">
</div>
<div class="desp">
<p>
아늑한 인테리어 효과와 난방까지 가능한<br/>
<b>중문설치</b>
</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section id="detail">
<div class="inner">
<div class="title">
<p class="main"><span>디테일 구조</span></p>
<p class="sub"><span>오피스텔 / 도시형 생활주택의 디테일한 설계</span></p>
</div>
<div class="list">
<ul>
<li>
<div class="cl">
<span class="tt">오피스텔</span>
</div>
<div class="cc">
<a href="javascript:void(0)" class="circle"></a>
</div>
<div class="cr">
<span class="tt">도시형 생활주택</span>
</div>
</li>
<li>
<div class="cl">
<div>
<span class="type">18실 복층형</span>
<b class="num">18A</b>
</div>
</div>
<div class="cc">
<a href="javascript:void(0)" class="circle"></a>
</div>
<div class="cr"></div>
</li>
<li>
<div class="cl">
<div>
<span class="type">18실 단층형</span>
<b class="num">18A</b>
</div>
</div>
<div class="cc">
<a href="javascript:void(0)" class="circle"></a>
</div>
<div class="cr"></div>
</li>
<li>
<div class="cl">
<div>
<span class="type">3실 복층형</span>
<b class="num">22B</b>
</div>
</div>
<div class="cc">
<a href="javascript:void(0)" class="circle"></a>
</div>
<div class="cr"></div>
</li>
<li>
<div class="cl">
<div>
<span class="type">3실 단층형</span>
<b class="num">22B</b>
</div>
</div>
<div class="cc">
<a href="javascript:void(0)" class="circle"></a>
</div>
<div class="cr"></div>
</li>
<li>
<div class="cl">
<div>
<span class="type">3실 복층형</span>
<b class="num">22C</b>
</div>
</div>
<div class="cc">
<a href="javascript:void(0)" class="circle"></a>
</div>
<div class="cr"></div>
</li>
<li>
<div class="cl">
<div>
<span class="type">3실 단층형</span>
<b class="num">22C</b>
</div>
</div>
<div class="cc">
<a href="javascript:void(0)" class="circle"></a>
</div>
<div class="cr"></div>
</li>
<li>
<div class="cl"></div>
<div class="cc">
<a href="javascript:void(0)" class="circle"></a>
</div>
<div class="cr">
<div>
<b class="num">29A</b>
<span class="type">12실 확장형</span>
</div>
</div>
</li>
<li>
<div class="cl"></div>
<div class="cc">
<a href="javascript:void(0)" class="circle"></a>
</div>
<div class="cr">
<div>
<b class="num">39D</b>
<span class="type">6실 확장형</span>
</div>
</div>
</li>
<li>
<div class="cl"></div>
<div class="cc">
<a href="javascript:void(0)" class="circle"></a>
</div>
<div class="cr">
<div>
<b class="num">22C</b>
<span class="type">6실 확장형</span>
</div>
</div>
</li>
<li>
<div class="cl"></div>
<div class="cc">
<a href="javascript:void(0)" class="circle"></a>
</div>
<div class="cr">
<div>
<b class="num">19B</b>
<span class="type">3실 확장형</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</section>
<section id="interior">
<div class="inner">
<div class="title">
<p class="main"><span>인테리어</span></p>
<p class="sub"><span>합리적인 공간을 만들어낸 공간</span></p>
</div>
.interior_ta
</div>
</section>
@@include('../include/footer.html')
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
<footer class="footer">
<div class="info">
<div class="inner">
<p>동대문 오팰리오</p>
<p>
<span>현장 : 서울시 중구 오장동 139-7번지</span>
<span>홍보관 : 서울시 중구 을지로 6가 18-131</span>
<span>사업자등록번호 : 123-45-45698</span>
<span>qnsdidansdml : 02)2272-8889</span>
</p>
<p>Copyright © 동대문 오팰리오. All rights reserved.</p>
</div>
</div>
<div class="warning">
<div class="inner">
<p>상기 CG, 이미지 및 내용은 소비자의 이해를 돕기위한 것으로 실제와 다를 수 있습니다. </p>
<p>건물 외부의 색채등은 색채심의 등 관련 절차에 따라 시공시 변경될 수 있습니다 </p>
<p>하자 등에 따른 소비자 피해 보상은 관계법령의 규정에 따라 적용됩니다. </p>
<p>상기 기재된 내용은 편집 및 인쇄과정상 오탈자가 있을 수 있으니 문의하시어 확인하시기 바랍니다.</p>
</div>
</div>
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900&amp;subset=korean" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" href="../css/animate.css">
<link rel="stylesheet" href="../css/style.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script src="../js/script.js"></script>
<title>@@title</title>
</head>
<body>
<header class="head">
<div class="head-inner">
<h1 class="logo"><img src="../img/main/logo.png" alt="동대문 오팰리오 로고 이미지"></h1>
<div class="navBtn"><a href="javascript:void(0)"><img src="../img/main/icon/gnb_button.png" alt="메뉴 열림 버튼 이미지"></a></div>
</div>
<div class="bk-bg"></div>
<nav class="animated">
<div class="closeBtn"><img src="../img/main/icon/btn_x.png" alt="메뉴 닫기 버튼 이미지"></div>
<ul>
<li><a href="#">기업정보</a></li>
<li><a href="#">입지환경</a></li>
<li><a href="#">4대 프리미엄</a></li>
<li><a href="#">특화시스템</a></li>
<li><a href="#">오피스텔</a></li>
<li><a href="#">도시형생활주택</a></li>