210902開発ログ

국내외 사이트 카피캣 네이버 모바일

> 네이버 모바일 2편

<div id="talk">
			

<ul>
<li class="left-list">
<a href="#">
<i class="icon-arrow icon-arrow-left"></i>
<div class="content-wrap">
<div class="txt-wrap">
<h3>패션뷰티판</h3>
<p>
동해물과 백두산이<br>
마루고 닳도록
</p>
</div>
<img src="https://via.placeholder.com/52">	
</div>
</a>
</li>
<li class="left-list">
<a href="#">
<i class="icon-arrow icon-arrow-left"></i>
<div class="content-wrap">
<div class="txt-wrap">
<h3>패션뷰티판</h3>
<p>
동해물과 백두산이<br>
마루고 닳도록
</p>
</div>
<img src="https://via.placeholder.com/52">	
</div>
</a>
</li>

<li class="right-list">
<a href="#">
<div class="content-wrap">
<img src="https://via.placeholder.com/52">
<div class="txt-wrap">
<h3>패션뷰티판</h3>
<p>
동해물과 백두산이<br>
마루고 닳도록
</p>
</div>
</div>

<i class="icon-arrow icon-arrow-right"></i>
</a>
</li>
<li class="right-list">
<a href="#">
<div class="content-wrap">
<img src="https://via.placeholder.com/52">	
<div class="txt-wrap">
<h3>패션뷰티판</h3>
<p>
동해물과 백두산이<br>
마루고 닳도록
</p>
</div>
</div>

<i class="icon-arrow icon-arrow-right"></i>
</a>
</li>
</ul>

</div>

#talk 
	{padding: 20px 0;}

#talk ul 
	{overflow: hidden;}

#talk ul li 
	{position: relative;
	width: 277px;
	background-color: #ffffff;
	padding: 15px 0 15px;
	box-shadow: 0 1px 6px 0 rgb(0 0 0 / 6%), 0 1px 0 0 rgb(0 0 0 / 2%);

	margin-bottom: 12px;}

#talk ul li:last-child 
	{margin-bottom: 0;}

#talk ul li .icon-arrow 
	{display: inline-block;
	width: 20px;
	height: 16px;}

#talk ul li img 
	{width: 52px;
	height: 52px;
	border-radius: 50%;}

#talk ul li a 
	{display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	align-content: center;

	padding: 0 20px;

	color: #000000;}

#talk ul .content-wrap .txt-wrap h3 
	{font-size: 14px;
	font-weight: 600;}

#talk ul .content-wrap .txt-wrap p 
	{font-size: 13px;
	line-height: 16px;
	margin-top: 3px;}

#talk ul .left-list 
	{float: left;

	border-top-right-radius: 40px;
	border-bottom-right-radius: 40px;}	

#talk ul .left-list .icon-arrow-left {	background-color: purple;}

#talk ul .left-list .content-wrap 
	{display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;}

#talk ul .left-list .content-wrap h3 
	{color: purple;}
    
#talk ul .left-list .content-wrap img 
	{margin-left: 8px;}

#talk ul .right-list 
	{float: right;
	
	border-top-left-radius: 40px;
	border-bottom-left-radius: 40px;}	

#talk ul .right-list .icon-arrow-right 
	{background-color: #0ac666;}

#talk ul .right-list .content-wrap 
	{display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;}

#talk ul .right-list .content-wrap h3 
	{color: #0ac666;}

#talk ul .right-list .content-wrap img 
	{margin-right: 8px;}

<div id="today">
<div class="container">
				
<div class="content-header">
					
<h2>오늘의 네이버</h2>
<a href="#">더보기</a>

</div>

<div class="content-body">
					
<img class= "banner" src="https://via.placeholder.com/345x140">

<div class="bottom-wrap">
<i class="icon"></i>
<div class="txt-wrap">
<h3>클로바 램프 최대 42% 혜택</h3>
<p> 
동해물과 백두산이 마르고 닳도록<br>
하나님이 보우하사
</p>
</div>
</div>
</div>

</div>
</div>

#today 
	{padding: 50px 0;}

#today .container 
	{padding: 0 20px;}

#today .content-header 
	{display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	align-content: center;

	border-top: solid 1px #e0e4ea;

	padding-top: 24px;
	margin-bottom: 10px;}

#today .content-header h2 
	{font-size: 18px;
	font-weight: bold;}

#today .content-header a 
	{color: $767678;
	font-size: 14px;
	font-weight: 400;}

#today .content-body 
	{width: 100%;
	background-color: #ffffff;
	border-radius: 8px;

	overflow: hidden;

	box-shadow: 0 1px 6px 0 rgb(0 0 0 / 6%), 0 1px 0 0 rgb(0 0 0 / 2%);}

#today .content-body .banner 
	{width: 100%;}

#today .content-body .bottom-wrap 
	{display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;

	padding: 14px 13px 12px 15px;}

#today .content-body .bottom-wrap .icon 
	{display: block;
	width: 52px;
	height: 52px;
	background-color: purple;
	border-radius: 50%;

	margin-right: 8px;}

#today .content-body .bottom-wrap .txt-wrap {}

#today .content-body .bottom-wrap .txt-wrap h3 
	{font-size: 15px;
	font-weight: 600;}

#today .content-body .bottom-wrap .txt-wrap p 
	{font-size: 13px;
	font-weight: 400;
	line-height: 16px;
	color: #929294;}

<footer id="footer">
<div class="txt-wrap">
<div class="link">
<a href="#">로그인</a>
<a href="#">전체서비스</a>
<a href="#">PC버전</a>
</div>
<div class="link">
<a href="#">이용약관</a>
<a href="#">개인정보처리방침</a>
<a href="#">고객센터</a>
</div>
</div>

<h1>
<a href="#">
<img src="https://via.placeholder.com/74x14">
</a>
</h1>
</footer>

#footer 
	{padding: 35px 0 80px;}

#footer .txt-wrap 
	{text-align: center;}

#footer .txt-wrap a 
	{position: relative;
	display: inline-block;
	padding: 3px 9px;
	color: #929294;
	font-size: 13px;
	font-weight: 400;

	letter-spacing: -0.5px;}

#footer .txt-wrap a:before 
	{content: "";
	display: block;
	position: absolute;

	top: 7px;
	left: 0;

	width: 1px;
	height: 10px;
	background-color: #d7dfe7;}

#footer .txt-wrap a:nth-child(1):before,
#footer .txt-wrap a:nth-child(4):before 
	{content: none;}

#footer .txt-wrap .link a:first-child:before 
	{content: none;}

#footer h1 
	{text-align: center;}

#footer h1 img 
	{width: 74px;}