arrs.io/index_back.html at master · dalgos/arrs.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
<!DOCTYPE html>
<html lang="ko">

<head>
    <title>MUSE</title>
    <!-- META -->
    <meta charset="utf-8" />
    <meta charset="IE=edge" http-equiv="X-UA-Compatible" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1">
    <!-- //META -->
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="/css/common.css" />
    <link rel="stylesheet" type="text/css" href="/css/slick.css" />
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/js/slick.min.js"></script>
</head>

<body>
    <div class="container-fluid">
        <header>
            <div class="row">
                <div class="header col-xs-12">
                    <a class="img-a logo" href="/">

                    </a>
                    <div class="mobs hidden-xs hidden-sm">
                        <a href="#" class="mob-ios"></a>
                        <a href="#" class="mob-and"></a>
                    </div>
                </div>
            </div>
        </header>

        <section>
            <div class="area area-01 row">
                <div class="mask"></div>
                <div class="cont">
                    <img src="/imgs/logo_01.png"  data-at2x="/imgs/logo_01@2x.png" width="100%" />
                    <div class="cont-sub text-center">
                        누군가의 일상에서 영감을 얻고 교류할 수 있는 곳
                        <br/> 멋진 라이프스타일을 가진 사람들이 만드는
                        <br/> 모바일 소셜 매거진 뮤즈MUSE를 소개합니다.
                    </div>
                </div>
            </div>
        </section>

        <section>
            <div class="row">
                <div class="area area-02 area-02-01 col-md-4 col-sm-4 col-xs-12">
                    <span class="cont-01">
                        <div class="mask"></div>
                        <div class="cont-sub">
                            <dl>
                                <dt>
                                    <span>특별한 모바일 화보집</span>
                                </dt>
                                <dd>패션/뷰티/라이프스타일을 아우르는
                                    <br/>뮤즈들의 화보같은 일상을 감상하세요.
                                </dd>
                            </dl>
                        </div>
                    </span>
                </div>
                <div class="area area-02 area-02-02 col-md-4 col-sm-4 col-xs-12">
                    <span class="cont-02">
                        <div class="mask"></div>
                        <div class="cont-sub">
                            <dl>
                                <dt>
                                    <span>국내 최대 소셜
                                        <br/>셀러브리티 네트워크</span>
                                </dt>
                                <dd>국내 최대 규모 패션/뷰티/라이프스타일의
                                    <br/>뮤즈들이 활동하고 있습니다.
                                    <br/>나와 코드가 맞는 뮤즈들을 찾아보고 구독하세요.
                                </dd>
                            </dl>
                        </div>
                    </span>
                </div>
                <div class="area area-02 area-02-03 col-md-4 col-sm-4 col-xs-12">
                    <span class="cont-03">
                        <div class="mask"></div>
                        <div class="cont-sub">
                            <dl>
                                <dt>
                                    <span>다양한 미디어와 함께</span>
                                </dt>
                                <dd>옐로모바일의 다양한 미디어와
                                    <br/>스타일 브랜드와의 콜라보레이션을 통한
                                    <br/>풍부한 콘텐츠를 감상하세요.
                                </dd>
                            </dl>
                        </div>
                    </span>
                </div>
            </div>
        </section>

        <section>
            <div class="area area-03 row">
                <div class="glass"></div>
                <div class="carousel">
                    <ul>
                        <li>
                            <dl>
                                <dt>
                                    <div class="thumb thumb-01"></div>
                                </dt>
                                <dd>
                                    <p class="tit">글로벌 커뮤니케이션</p>
                                    <p>뮤즈가 등록한 글은 자동 번역되어
                                        <br/>해외 유저와의 커뮤니케이션이 가능합니다.
                                        <br/>넓어진 커뮤니케이션을 경험해보세요.
                                    </p>
                                </dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt>
                                    <div class="thumb thumb-02"></div>
                                </dt>
                                <dd>
                                    <p class="tit">글로벌 커뮤니케이션</p>
                                    <p>뮤즈가 등록한 글은 자동 번역되어
                                        <br/>해외 유저와의 커뮤니케이션이 가능합니다.
                                        <br/>넓어진 커뮤니케이션을 경험해보세요.
                                    </p>
                                </dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt>
                                    <div class="thumb thumb-03"></div>
                                </dt>
                                <dd>
                                    <p class="tit">글로벌 커뮤니케이션</p>
                                    <p>뮤즈가 등록한 글은 자동 번역되어
                                        <br/>해외 유저와의 커뮤니케이션이 가능합니다.
                                        <br/>넓어진 커뮤니케이션을 경험해보세요.</p>
                                </dd>
                            </dl>
                        </li>
                    </ul>

                </div>
                <div class="pagin">
                    <a href="#" class="ir on">슬라이드 첫번째</a>
                    <a href="#" class="ir">슬라이드 두번째</a>
                    <a href="#" class="ir">슬라이드 세번째</a>
                </div>
                <a href="#" class="contr prev ir hidden-xs hidden-sm">이전</a>
                <a href="#" class="contr next ir hidden-xs hidden-sm">다음</a>
            </div>
        </section>

        <section>
            <div class="area area-04 row">
                <div class="col-md-6 col-xs-12">
                    <dl>
                        <dt>뮤즈와 함께 춤을.</dt>
                        <dd>매력적인 제안과 질문은 언제나 환영입니다.
                            <br/>주저말고 연락주세요!</dd>
                    </dl>
                    <a href="javascript:;" class="btn btn-primary btn-lg">제휴문의</a>
                </div>
                <div class="col-md-6 col-xs-12">
                    <dl>
                        <dt>뮤즈가 되어주세요!</dt>
                        <dd class="hidden-sm hidden-xs">많은 사람들에게 영감이 되어주세요.
                            <br/>조금만 더 발을 넓혀서 저희와 함께 하실 뮤즈들을 찾습니다.</dd>
                        <dd class="hidden-md hidden-lg">조금만 더 발을 넓혀서
                            <br/>저희와 함께 하실 뮤즈들을 찾습니다.</dd>
                    </dl>
                    <form method="post" action="">
                        <div class="_valid">
                            <input type="text" class="inp-sm" name="name" placeholder="이름"></input>
                            <input type="text" class="inp-md" name="mobile" placeholder="휴대전화번호"></input>
                            <input type="text" name="email" placeholder="이메일 주소"></input>
                            <input type="text" name="area" placeholder="활동지역"></input>
                            <input type="text" name="social" placeholder="주로 사용중인 SNS계정을 모두 적어주세요."></input>
                            <button type="submit" class="btn btn-default" disabled="disabled">신청하기</button>
                        </div>
                    </form>
                </div>
            </div>
        </section>

        <footer>
            <div class="row">
                <div class="footer col-lg-12">
                    <div class="slct hidden-xs hidden-sm">
                        <button class="slct-prompt btn">한국어</button>
                        <ul class="slct-opts">
                            <li>
                                <button data-lang="eng">영어</button>
                            </li>
                            <li>
                                <button data-lang="jap">일본어</button>
                            </li>
                            <li>
                                <button data-lang="chn">중국어</button>
                            </li>
                            <li>
                                <button data-lang="kor">한국어</button>
                            </li>
                        </ul>
                        <span class="slct-flag"></span>
                    </div>
                    <span class="copyright">©2015 MUSE </span>
                </div>
            </div>
        </footer>
    </div>
<script type="text/javascript">
    $(function(win) {
        var _header = $('div.header'),
            _areas = $('div.area'),
            _slct = $('.slct'),
            _carousel = $('.carousel'), _carouselWidth = _carousel.find('li:first-child').width(),
            _carouselCount = _carousel.find('li').length, _carouselPage = 1, isRolling = false,
            _pagination = $('.pagin').find('a'), _contrs = $('.contr');

        $(window).on('scroll', function(evt) {
            //_header.css('top', document.body.scrollTop);
        });

        _slct.on('click focusout mouseleave', function(evt){
            var _this = $(this);
            if(evt.type === 'focusout' || evt.type === 'mouseleave'){
                _this.removeClass('on');
                return false;
            }
            (_this.hasClass('on')) ? _this.removeClass('on') : _this.addClass('on');
        });

        _slct.find('.slct-opts').on('click', function(evt){
            var _this = $(this), _lang = _this.attr('data-lang');
            location.href = location.href + '#' + _lang;
        });

        //resizeHandler
        $(window).on('resize', function(evt) {
            heightHandler();
        }).trigger('resize');

        _contrs.on('click', function(evt){
            evt.preventDefault();
            if(!isRolling){
                var _this = $(this);
                if(_this.hasClass('next')){
                    _carouselPage++;
                }else{
                    _carouselPage--;
                }
                _pagination.eq(_carouselPage-1).addClass('on').siblings().removeClass('on');
                carouselHandler(_carouselPage);
            }
        });

        carouselInit();

        function heightHandler() {
            var toHeight = parseInt(window.innerHeight) - _header.height();
            (_areas.innerHeight() < toHeight) && _areas.height(toHeight);
        }

        function carouselInit(){
            var _carouselConatiner = _carousel.find('>ul').css('margin-left', _carouselWidth*-1);
            _carouselConatiner.find('li:first-child').clone().appendTo(_carouselConatiner);
            _carouselConatiner.prepend(_carouselConatiner.find('li:last-child').clone());
            _carouselConatiner.width(_carouselWidth*_carousel.find('li').length);

            _pagination.each(function(idx){
                $(this).on('click', function(evt){
                    var _self = $(this);
                    evt.preventDefault();
                    if(!isRolling){
                        carouselHandler(idx+1);
                        _self.removeClass('on');
                        _self.addClass('on').siblings().removeClass('on');
                    }
                });
            });


        }

        function carouselHandler(count){
            isRolling = true;
            var _tar = _carousel.find('>ul');
            _tar.animate({'margin-left' : _carouselWidth * count * -1}, 'fast', function(){
                if(count === 0){
                    _carouselPage = _carouselCount;
                    _tar.css('margin-left', _carouselWidth * _carouselCount * -1);
                    _pagination.eq(_carouselPage-1).addClass('on').siblings().removeClass('on');
                }else if(count === _carouselCount + 1){
                    _carouselPage = 1;
                    _tar.css('margin-left', _carouselWidth * -1);
                    _pagination.eq(_carouselPage-1).addClass('on').siblings().removeClass('on');
                }else{
                    _carouselPage = count;
                }

                isRolling = false;
            });

        }

        function validForm() {

        }

    }(window));
</script>
<script type="text/javascript" src="/js/retina.min.js"></script>
</body>
</html>