2nd home

by zunme

HTML

<link rel="stylesheet" href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.carousel.min.css">
<script src="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/owl.carousel.js"></script>
	<div class="navBox">
		<nav>
			<ul class="nav">
				<li><a href="appmain_premium.html">프리미엄 웹툰</a></li>
				<li><a href="appmain_comics.html">만화</a></li>
				<li><a href="appmain_story.html">소설</a></li>
				<li class="on"><a href="appmain_webtoon.html">웹툰</a></li>
			</ul>
		</nav>
	</div>

	<div class="container">
           
<div id="owl-demo" class="owl-carousel owl-theme">
    <div class="item">
        <a href="#ntoon?bsno=345" data-transition="flow"><img src="http://crayondata.cyworld.com/upload/segment/201411/15024741800000.jpg" /></a></div>
    <div class="item"><a href="#ntoon?bsno=345"><img src="http://crayondata.cyworld.com/upload/segment/201411/14704464440006.jpg" /></a></div>
    <div class="item"><a href="#ntoon?bsno=345"><img src="http://crayondata.cyworld.com/upload/segment/201411/10526161000003.jpg" /></a></div>
    <div class="item"><a href="#ntoon?bsno=345"><img src="http://crayondata.cyworld.com/upload/segment/201411/20589133160002.jpg" /></a></div>
    <div class="item"><a href="#ntoon?bsno=345"><img src="http://crayondata.cyworld.com/upload/segment/201411/14972192050004.jpg" /></a></div>
</div>

		<section>
			<div class="section">
				<div class="titBox">
					<div class="tit">오늘의 추천</div>
				</div>

				<div class="pwCnt">
					<ul class="mpt1">
						<li class="pt1">
							<a href="#">
								<span class="iBox"><img src="http://crayondata.cyworld.com/img_appdetail/65341_ad_M.jpg" width="100%" alt="" /></span>
								<span class="tBox">
									<span class="tit">처음은 아픈거야</span>
									<span class="desc">스튜디오 배순박</span>
								</span>
							</a>
						</li>
						<li class="pt1">
							<a href="#">
								<span class="iBox"><img src="http://crayondata.cyworld.com/img_appdetail/65341_ad_M.jpg" width="100%" alt=""...

CSS

@charset "utf-8";

body { font-size:15px; line-height:1; -webkit-text-size-adjust:none; font-family:'맑은 고딕',Malgun Gothic,'돋움',Dotum,'굴림',Gulim,Helvetica,sans-serif; }
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,button,p,blockquote,th,td { margin:0; padding:0; }
body,input,textarea,select,button,table,h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
img,fieldset{border:0}
ul,ol,li{list-style:none;}
a {color:inherit;text-decoration:none;color:#222;}
em,i,address {font-style:normal; font-weight:normal;}
legend,caption {clear:both;display:none;} 
input,textarea,select,button,table{ font-size:inherit;font-family:inherit;line-height:inherit; }
table{border-collapse:collapse}
textarea { resize:none; }
button,label { cursor:pointer; }
a:visited, a:hover, a:active { color:#222; }

input, textarea, button, select { outline:none; }
input,textarea,button { -webkit-border-radius:0; border-radius:0; }
.a11y {position:absolute;display:block;width:1px;height:1px;overflow:hidden;font-size:1px;text-indent:-9999em;}

.tit, .desc { white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }

.bnBox { position:relative; padding-top:48px; border-bottom:1px solid #ccc; }
    
/* snb navigation */
.navBox { position:relative; }
.navBox .nav { position:fixed; top:0; left:0; width:100%; height:48px; border-bottom:1px solid #ccc; background-color:#fff; z-index:9; }
.navBox .nav:after { content:''; clear:both; display:block; }
.navBox .nav li { position:relative; float:left; width:21%; font-size:1.067em; }
.navBox .nav li:first-child { width:37%; }
.navBox .nav li.on:before { content:''; position:absolute; bottom:-1px; width:100%; height:4px; border-bottom:4px solid #f22100; }
.navBox .nav li a { display:block; text-align:center; line-height:48px; font-weight:bold; color:#757575; }
.navBox .nav li.on a { color:#f22100 }

.titBox { position:relative; padding:16px 0 14px 8px; }
.titBox .tit { font-size:0.933em; font-weight:bold;...

JavaScript

$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1,user-scalable=0" />');

var owl = $('#owl-demo').owlCarousel({
    loop:true,
    margin:0,
    responsiveClass:true,
    autoplay:true,
    autoplayTimeout:1000,
    autoplayHoverPause:true,
    lazyLoad : true,
    responsive:{
        0:{ items:1,nav:false },
        800:{ items:2, nav:false },
        1400:{ items:3, nav:false}
    }
});