A Pen by Hyejin Yi

Thumbnail
This awesome code was written by dizzydiver, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright dizzydiver ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Hyejin Yi</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1, width=device-width">
  <title>29CM</title>
  <meta property="og:title" content="29CM">
  <meta property="og:description" content="국내외 패션, 라이프스타일을 한눈에 볼 수 있는 대한민국 대표 매거진">
  <meta property="og:image" content="">
  <meta property="og:url" content="https://29cm.com">
  <link rel="icon" sizes="192x192" href="">
  <link rel="apple-touch-icon" href="">
  <meta name="format-detection" content="telephone=no">

  <!-- CSS -->
  <link href="https://necolas.github.io/normalize.css/latest/normalize.css" rel="stylesheet">
  <link href="https://github.com/necolas/normalize.css/blob/master/normalize.css" rel="stylesheet">
  <link href="htpp://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600" rel="stylesheet"> 
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
	
</head>
<body>
	<div class="wrap">
  <header class="header">
    <div class="logo-area">
      <h1 class="logo"><a href="/"></a></h1>
    </div>
    <div class="btn-area">
			<div class="btn-hamburger">
				<a href="#"><span>menu</span></a>
			</div>
<!--
			<button type="button" class="btn-hamburger">
				<span class=""><i class="material-icons">menu</i></span>
			</button>
			
			<button type="button" class="btn-hamburger btn-hamburger-rot">
				<span>menu</span>
			</button>
-->
    </div>
  </header>

  <div class="main">
		<div class="banner-area">
			<a href="#"><img src="https://unsplash.it/1000/420/?random" alt=""></a>
		</div>

		<!-- 캐러셀 배너 -->
		<div class="carousel">
			<div class="carousel-mask">
				<ul>
					<li><a href="#"><img src="https://unsplash.it/800/800/?random" alt=""></a></li>
					<li><a href="#"><img src="https://unsplash.it/800/800/?random" alt=""></a></li>
					<li><a href="#"><img src="https://unsplash.it/800/800/?random" alt=""></a></li>
					<li><a href="#"><img src="https://unsplash.it/800/800/?random" alt=""></a></li>
					<li><a href="#"><img src="https://unsplash.it/800/800/?random" alt=""></a></li>
					<li><a href="#"><img src="https://unsplash.it/800/800/?random" alt=""></a></li>
					<li><a href="#"><img src="https://unsplash.it/800/800/?random" alt=""></a></li>
					<li><a href="#"><img src="https://unsplash.it/800/800/?random" alt=""></a></li>
				</ul>
			</div>
			<ol class="carousel-nav">
				<li class="nav-on"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ol>
			<div class="carousel-control">
				<a href="#" class="btn-left"><i class="material-icons">keyboard_arrow_left</i></a>
				<a href="#" class="btn-right"><i class="material-icons"><i class="material-icons">navigate_next</i></i></a>
			</div>
		</div>
		<!-- // 캐러셀 배너 -->

		<!-- 이벤트 배너 -->
		<div class="banner">
			<a href="#"><img src="https://image.29cm.co.kr/contents/site/201703/20170317180550.jpg?cmd=thumb&width=800" alt=""></a>
			<a href="#"><img src="https://image.29cm.co.kr/contents/site/201703/20170316182246.jpg?cmd=thumb&width=800" alt=""></a>
		</div>
		<!-- // 이벤트 배너 -->

		<!-- 제품목록 -->
		<div class="product-area">
			<ul class="product-list">
				<li>
					<div class="">
						<a href="#"><img src="https://unsplash.it/480/288/?random" alt=""></a>
					</div>
					<dl>
						<dt>EVENT / 안경의 인상</dt>
						<dd>이번주 추천 안경의 특별한 할인 혜택</dd>
					</dl>
				</li>
				<li>
					<div class="">
						<a href="#"><img src="https://unsplash.it/480/288/?random" alt=""></a>
					</div>
					<dl>
						<dt>EVENT / 안경의 인상</dt>
						<dd>이번주 추천 안경의 특별한 할인 혜택</dd>
					</dl>
				</li>
				<li>
					<div class="">
						<a href="#"><img src="https://unsplash.it/480/288/?random" alt=""></a>
					</div>
					<dl>
						<dt>EVENT / 안경의 인상</dt>
						<dd>이번주 추천 안경의 특별한 할인 혜택</dd>
					</dl>
				</li>
				<li>
					<div class="">
						<a href="#"><img src="https://unsplash.it/480/288/?random" alt=""></a>
					</div>
					<dl>
						<dt>EVENT / 안경의 인상</dt>
						<dd>이번주 추천 안경의 특별한 할인 혜택</dd>
					</dl>
				</li>
				<li>
					<div class="">
						<a href="#"><img src="https://unsplash.it/480/288/?random" alt=""></a>
					</div>
					<dl>
						<dt>EVENT / 안경의 인상</dt>
						<dd>이번주 추천 안경의 특별한 할인 혜택</dd>
					</dl>
				</li>
				<li>
					<div class="">
						<a href="#"><img src="https://unsplash.it/480/288/?random" alt=""></a>
					</div>
					<dl>
						<dt>EVENT / 안경의 인상</dt>
						<dd>이번주 추천 안경의 특별한 할인 혜택</dd>
					</dl>
				</li>
			</ul>
		</div>
		<!-- // 제품목록 -->
		
		<!-- 메인 아티클 -->
		<div class="main-article">
			
			<div class="article-list">
				<a href="#"><img src="https://image.29cm.co.kr/contents/site/201703/20170317194025.jpg" alt=""></a>
				<div class="cnt">
					<h3>29CM 앱 첫구매 10% 할인쿠폰</h3>
					<p>29CM 앱으로 구매해 보신 적이 없으시다면, 이 쿠폰을 사용하실 수 있습니다. 3월 30일 목요일 23시 59분까지! 쿠폰 번호는 2017-0000-0000-0004 입니다.</p>
				</div>
			</div>
			<div class="article-list">
				<a href="#"><img src="https://image.29cm.co.kr/contents/site/201703/20170320095728.jpg" alt=""></a>
				<div class="cnt">
					<h3>그대의 비전이 보이는 비젼, 오늘이 마지막</h3>
					<p>유리의 특성상 세척이 쉽고 음식 냄새나 색이 배지 않아 위생적인 비젼 냄비를 최대 20% 할인으로 만나는 마지막 날입니다. 상품을 구매하셨지만 아직 후기를 남기지 않으셨다면 비젼의 인기 상품인 플레어 1.2L를 10분에게 드리는 이벤트를 놓치지 마세요.</p>
				</div>
			</div>
			<div class="article-list">
				<a href="#"><img src="https://image.29cm.co.kr/contents/site/201703/20170313122924.jpg?cmd=thumb&width=640" alt=""></a>
				<div class="cnt">
					<h3>내가 받고 싶은 시그니처 세트</h3>
					<p>핸드크림과 립밤과 캔들 그리고 향초를 한 번에 만날 수 있는 컨템포러리 뷰티 브랜드 헉슬리의 시그니처 컬렉션 세트입니다. 선물하기 좋은 세트 구성으로 한 개는 내가 쓰고 또 다른 한 개는 소중한 지인에게 선물로 줄 수 있는 기회를 놓치지 마세요. 특히 선인장 시드 오일이 함유된 핸드크림과 상쾌한 향기를 머금은 캔들은 누구나가 사용하기 좋은 아이템입니다.</p>
				</div>
				<div class="article-items">
					<ul>
						<li>
							<img src="https://image.29cm.co.kr/contents/itemIcon/201703/20170316174705.jpg?cmd=thumb&height=150" alt="">
							<dl>
							<img>
								<dt>헉슬리 시그니춰 콜렉션 1+1</dt>
								<dd><span class="sale">20%</span> 68,000</dd>
							</dl>
							<a href="#"><i class="material-icons">favorite_border</i></a>
						</li>
						<li>
							<img src="https://image.29cm.co.kr/contents/itemIcon/201703/20170316181639.jpg?cmd=thumb&height=150" alt="">
							<dl>
							<img>
								<dt>헉슬리 시그니춰 콜렉션 1+1</dt>
								<dd><span class="sale">20%</span> 68,000</dd>
							</dl>
							<a href="#"><i class="material-icons">favorite_border</i></a>
						</li>
					</ul>
				</div>
			</div>
			<div class="article-list">
				<a href="#"><img src="https://image.29cm.co.kr/contents/site/201703/20170313122924.jpg?cmd=thumb&width=640" alt=""></a>
				<div class="cnt">
					<h3>reborn</h3>
					<p>리본으로 다시 태어난 셔츠 원피스. 허리부터 허벅지를 자연스레 감싸 안 듯 묶어주어 더욱 날씬하게 보입니다. 기본적인 셔츠부터 차이나 카라 셔츠까지 취향에 따라 고를 수 있습니다. 색도 다양해요. 깊은 남색, 청명한 하늘색, 은은한 베이지색 무슨 색 좋아하세요?</p>
				</div>
				<div class="article-items">
					<ul>
						<li>
							<img src="https://image.29cm.co.kr/contents/itemIcon/201703/20170320121949.jpg?cmd=thumb&height=150" alt="">
							<dl>
							<img>
								<dt>Short sleeve ribbon round one-piece-lightblue</dt>
								<dd><span class="sale">9%</span> 80,322</dd>
							</dl>
							<a href="#"><i class="material-icons">favorite_border</i></a>
						</li>
						<li>
							<img src="https://image.29cm.co.kr/contents/itemIcon/201703/20170320134226.jpg?cmd=thumb&height=150" alt="">
							<dl>
							<img>
								<dt>Shirts ribbon one-piece-blue</dt>
								<dd><span class="sale">9%</span> 102,885</dd>
							</dl>
							<a href="#"><i class="material-icons">favorite_border</i></a>
						</li>
						<li>
							<img src="https://image.29cm.co.kr/contents/itemIcon/201703/20170320134226.jpg?cmd=thumb&height=150" alt="">
							<dl>
							<img>
								<dt>Shirts ribbon one-piece-blue</dt>
								<dd><span class="sale">9%</span> 102,885</dd>
							</dl>
							<a href="#"><i class="material-icons">favorite_border</i></a>
						</li>
					</ul>
				</div>	
			</div>
			<div class="btn-wrap">
				<a class="btn-more" href="#">MORE</a>
			</div>
		</div>
		<!-- // 메인 아티클 -->	
	</div>
		
		
	<footer class="footer">
		<div class="company-info">
			<ul>
				<li><a href="#">ABOUT 29CM</a></li>
				<li><a href="#">개인정보취급방침</a></li>
				<li><a href="#">이용약관</a></li>
			</ul>
		</div>
		<dl>
			<dt>상호명</dt>
			<dd>(주)에이플러스비</dd>
			<dt>사업장소재지</dt>
			<dd>서울특별시 마포구 양화로10길 45 (서교동)</dd>
			<dt>팩스</dt>
			<dd>070-8622-7737</dd>
			<dt>사업자등록번호</dt>
			<dd>101-86-64617</dd>
			<dt>통신판매업신고</dt>
			<dd>2015-서울마포-1415 사업자정보확인</dd>
			<dt>고객센터</dt>
			<dd><a href="tel:1644-0560">1644-0560</a> 평일 10:00 ~ 17:00 / Off-time 12:00 ~ 14:00 (토/일/공휴일 휴무)</dd>
			<dt>이메일</dt>
			<dd><a href="mailto:customer@29cm.co.kr">customer@29cm.co.kr</a></dd>
			<dt>대표이사</dt>
			<dd>이창우</dd>
			<dt>개인정보책임자</dt>
			<dd>주영상</dd>
			<dt>호스팅서비스</dt>
			<dd>(주)에이플러스비</dd>
		</dl>
	</footer>
	<div class="wrap-dimd"></div>
	</div>

	<!-- -->
	<div class="side-navigation">
		<div class="tool-area">
			<a href="#"><i class="material-icons">search</i></a>
			<a href="#"><i class="material-icons">favorite_border</i></a>
			<a href="#"><i class="material-icons">card_travel</i></a>
		</div>
		<nav class="nav-area">
			<ul>
				<li><a href="#">special order</a></li>
				<li><a href="#">pt</a></li>
			</ul>
			<ul>
				<li><a href="#">new / best</a></li>
				<li><a href="#">event</a></li>
				<li><a href="#">brand</a></li>
			</ul>
			<ul>
				<li><a href="#">woman</a></li>
				<li><a href="#">men</a></li>
				<li><a href="#">unisex</a></li>
				<li><a href="#">home</a></li>
				<li><a href="#">food</a></li>
				<li><a href="#">life</a></li>
				<li><a href="#">catalog</a></li>
			</ul>
			<ul>
				<li><a href="#">my Page</a></li>
				<li><a href="#">help</a></li>
			</ul>
		</nav>
		<div class="member-area">
			<a href="#">login</a>
			<a href="#">sign up</a>
		</div>
	</div>
	
	
  <!-- JavaScript -->
  <script>
    var btn = document.querySelector('.btn-area div'),
        dimd = document.querySelector('.wrap-dimd');

    btn.addEventListener('click', function() {
      document.body.className = "side-navigation-on";	
    }, false)
		

    dimd.addEventListener('click', function() {
      document.body.className = "";
    }, false)	
  </script>

	<script>
		var button = document.querySelector('.btn-hamburger'),
        dimd = document.querySelector('.wrap-dimd');
		
			button.addEventListener('click', function () {
			button.classList.toggle('btn-hamburger-open');
		}, false);
		
		  dimd.addEventListener('click', function() {
			button.classList.toggle('btn-hamburger-open');
    }, false)	
	</script>

	<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.min.js" ></script>

</body>
</html>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/dizzydiver/a-pen-by-hyejin-yi-qrYpEL */
/* https://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* common */
body {
  font-size: 14px;
  font-family: 'Montserrat', 'Spoqa Han Sans', sans-serif;
	overflow-x: hidden;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  font: inherit;
}
img {
  max-width: 100%;
}
.blind {position: absolute; left:-100%;}
.blind a:focus {}
.wrap {
  position: relative;
  min-height:100vh;
  background: white;
  z-index: 1000;
  transition: 0.7s all ease;
}

.header {
  position: fixed;
  top: 0;
  left:0;
  display: flex;
  justify-content: space-between;
  width: 100%;
	height: 50px;
  background: rgba(255, 255, 255, 0.95);
  z-index: 100;
}
.header a {
	margin: 0;
  display: block;
  padding: 15px;
}
.header button {
  padding: 14px 12px;
}
.header .logo-area {
	margin: 0 14px;
	width: 60px;
	background: url(https://image.29cm.co.kr/mall/svg/29cm_bi.svg) center center no-repeat;
}
.header .btn-area {
	display: block;
	padding: 4px 13px;
	cursor: pointer;
}

/*
.btn-hamburger {
    display: block;
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0;
    width: 50px;
    height: 50px;
    cursor: pointer;
}
*/
.btn-hamburger {
	display: block;
  position: relative;
  width: 24px;
	height: 30px;
	cursor: pointer;
}
.btn-hamburger a {
	display: block;
	padding: 20px;
}
.btn-hamburger span {
	display: block;
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #000;
	text-indent: -9999px;
	transition: all 0.3s ease;
}
.btn-hamburger span:after,
.btn-hamburger span:before {
	position: absolute;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	content: '';
	transition: transform 0.3s;
}
.btn-hamburger span:before {
	transform: translateY(-0.5em);
}
.btn-hamburger span:after {
	transform: translateY(0.5em);
}
.btn-hamburger.btn-hamburger-open span {
	transform: rotate(90deg) ;
	transition: all 0.3s ease;
}
.btn-hamburger.btn-hamburger-open span:before
.btn-hamburger.btn-hamburger-open span:after {
	transform: rotate(90deg) ;
}

.side-navigation {
  position: fixed;
  right: 0;
  top: 0;
  width: 280px;
  height: 100%;
  padding-bottom: 41px;
  background: #1f1f1f;
  box-sizing: border-box;
  color: white;
	text-transform: uppercase;	
  z-index: 999;
}
.side-navigation .tool-area {
  padding: 10px;
  text-align: right;
  box-sizing: border-box;
}
.side-navigation .tool-area a {
  display: inline-block;
  padding: 10px;
	color:#777;
}	
.side-navigation .nav-area {
  position: absolute;
  left: 0;
  right: 0;
  top: 50px;
  bottom: 41px;
  font-size:1.3em;
  font-weight:500;
  line-height: 1.3;
	letter-spacing: 0.04em;
  overflow-y: auto;
}
.side-navigation .nav-area a {
  transition: all 0.2s ease;
}
.side-navigation .nav-area a:hover {
	color:#999;
  transition: all 0.2s ease;
}
.side-navigation .nav-area ul {
  margin: 30px 0;
}
.side-navigation .nav-area a {
  display: block;
  padding: 4px 30px;
}
.side-navigation .member-area {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  width: 100%;
	color: #777;
  font-size: 0.7em;
  border-top: 1px solid #444;
}
.side-navigation .member-area a {
  flex: 1;
  text-align: center;
  padding: 20px;
  background: inherit;
}
.side-navigation .member-area a + a {
  border-left: 1px solid #444;
}
.wrap-dimd {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #000;
  opacity: 0;
  z-index: 200;
  transform: translate(-100%, 0);
  transition: 0.5s opacity ease;
}
.side-navigation-on .wrap {
  transform: translate(-280px, 0);
  transition: all 0.2s ease;
}
.side-navigation-on .wrap-dimd {
  opacity: 0.6;
  transform: translate(0, 0);
}


.main {}
.banner-area {
	position: relative;
	margin: 0;
}
.banner-area img {
  left:0;
  top:0;
	margin-top: 50px;
  width:100%;
}

.carousel {
	position: relative;
	width: 100%;
	margin: 8px 0;	
  background:#e0e0e0;
}
.carousel-mask {
	overflow:hidden;
}
.carousel-mask ul {
	display: flex;
}
.carousel-mask li {
  min-width:100%;
}
.carousel-mask img {
	width: 100%;
  vertical-align:top;
}
.carousel-nav {
  position:absolute;
  left:50%;
  bottom:12px;
  display:flex;
  justify-content:center;
  transform:translate(-50%, 0);
	z-index: 10;
}
.carousel-nav li {
  width:8px;
  height:8px;
  margin-right:5px;
  border:1px solid #000;
	cursor: pointer;
}
.carousel-nav .nav-on {
	background: #000;
}
.carousel-control {
  position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #fff;
}
.carousel-control a {
	display: block;
	padding: 20px;
	opacity: 0.75;
}
.carousel-control .btn-left {
}
.carousel-control .btn-right {
}

.banner {
  position:relative;
	width: 100%;
}
.banner img {
  width:100%;
}
.product-area {
	position: relative;
	width: 100%;
}
.product-area::after {
	content: '';
  display: block;
  clear: both;
}
.product-list {
	margin: 0;
  margin: 20px 15px;
}
.product-list img {
  width:100%;
}
.product-list li {
	float: left;
	padding-bottom: 30px;
  width:50%;
}
/* 짝수 */
.product-list li:nth-of-type(even) {
  padding-left:10px;
	box-sizing: border-box;
}
/* 홀수 */
.product-list li:nth-of-type(odd) {
  padding-right:10px;
	box-sizing: border-box;
}
.product-list a {
  display:block;
  width:100%;
}
.product-list dl {
  padding-top: 8px;
}
.product-area .product-list dt {
  font-size: 0.85em;
}
.product-list dd {
  font-size: 0.65em;
  margin-top: 6px;
  color:#aaa;
}
.main-article {
	position: relative;
	width: 100%;
}
.main-article .btn-wrap {
	position: relative;
	margin: 25px 0;
	text-align: center;
}
.main-article .btn-more {
  display: inline-block;
	padding: 17px 37px;
  border:2px solid #333;
	text-transform: uppercase;
	font-size: 0.75em;
}
.main-article .btn-more::after {
	content: "";
	display: inline-block;
	margin-left:7px;
	width: 11px;
	height: 11px;
	background: url(https://image.29cm.co.kr/mall/svg/arrow_weight-300.svg) 50% 50% no-repeat;
	transform: rotate(90deg);
}


.article-list {
	margin: 0;
}
.article-list img {
  width:100%;
}
.article-list .cnt {
	padding: 25px 20px;
}
.article-list .cnt h3 {
	font-size: 1.35em;
	font-weight: 600;
}
.article-list .cnt p {
	color: #666;
	font-size: 0.9em;
	line-height: 1.7em;
	padding:14px 0;
}
.article-list .article-items {
	width: 100%;
	padding: 5px 20px;
	box-sizing: border-box;
}
.article-list .article-items img {
	width: 50px;
}
.article-list .article-items li {
	display: flex;
	align-items: center;
	justify-content:space-between;
  padding-bottom:15px;
}
.article-list .article-items dl {
	flex: auto;
	padding-left:15px;
	font-size: 0.8em;
	align-items: center;
  padding-bottom: 6px;
}
.article-list .article-items dl dt {
	padding-bottom: 6px;
}
.article-list .article-items .sale {
  color:#ff6600;
}



.footer {
	width: 100%;
	padding: 35px 15px;
	background: #E9E9E9;
	font-size: 0.75em;
	color: #444;
	box-sizing: border-box;
}
.footer .company-info {
	margin-bottom: 12px;
}
.footer .company-info ul {
	display: flex;
	font-size: 1.1em;
}
.footer .company-info li {
	padding-right: 15px;
}
.footer dl {
	display: block;
	line-height: 2;
}
.footer dl dt {
	float: left;
	display: block;
	color:#666;
	font-weight: 400;
	padding-right:8px;
}
.footer dl dd {
	display: block;
	color: #999;
}

Comments