[CSS] 21. 실습: pedal

in Web on CSS


실습: pedal



/*------------- pedal.css --------------*/


body{background: #413f3b;}
.headbg{width:100%; background: url(bg-header.jpg); position:fixed; top:0;
	z-index:999;}
.head-wrap{width:960px; margin: auto; overflow:hidden;}
.header{width:380px; margin:0 10px; float:left;}

#m {margin-right:21px; margin-bottom:20px;}
.nav{width:540px; margin:0 10px; padding-top:45px; float:right; 
	text-align:right; }
.nav ul li{display:inline-block; color:#fff; font-size:15px;}
.nav ul li a{color:#b5c1ad; text-decoration:none;}
.nav ul li a:hover{color:#fff;}

.wrap{width:960px; margin:auto; border-bottom:2px solid #fff;
	background-image: url(bg-triangle.png); 
	background-repeat: no-repeat; background-position: 0px 0px;}

.content{ height:570px; background-image: url(triangles.png); 
	background-repeat: no-repeat; background-position: 122px 142px;
	 position:relative;}

.main{position:absolute; width:460px; left:480px;}
.main h2{font-size:35px; 
	font-family: QuicksandBook, Helvetica, Arial, sans-serif;
	margin-top:140px;}
.main a{color:#b5c1ad; text-decoration:none;}

.summary{width:220px; position:absolute; left:720px; top:200px;}
.summary span{font-size:75%; color:#b5c1ad;}
.summary p{line-height: 1.4em; color:#fff;}

.wrap2{width:960px; margin:auto; overflow:hidden; padding:10px;}
.wrap2 a{color:#b5c1ad; text-decoration:none;}
.wrap2 h2{margin: 18px 10px;}
.con{width:22%; float:left; margin:0 10px;}
.con ul li{padding: 5px 0px 15px 0px; border-bottom:1px solid #807c72;}
.con ul li:last-child{border:none;}
.con li a:hover{color:#fff;}
.foot-bg{background: #000;}
.footer{width:960px; margin:auto; text-align:right; color:#fff;
	overflow:hidden;}
.footer ul{margin:10px;}
.footer li{display:inline-block;}
.footer a{color:#807c72; text-decoration:none;}






<!------------- pedal.html -------------->


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="reset.css">
	<link rel="stylesheet" href="pedal.css">
	<title>Pedal</title>
</head>
<body>
	<div class="headbg">
		<div class="head-wrap">
			<div class="header">
				<img src="logo.png" alt="" id="m">
				<img src="header-triangle.png" alt="">
			</div>
			<div class="nav">
				<ul>
					<li><a href="">홈</a>/</li>
					<li><a href="">뉴스</a>/</li>
					<li><a href="">아카이브</a>/</li>
					<li><a href="">소개</a>/</li>
					<li><a href="">연락처</a>/</li>
				</ul>
			</div>
			
		</div>
	</div>
	<!----------------------------------------------------------->
	<div class="wrap">
		<div class="content">
			<div class="main">
				<h2><a href="">FIXED GEAR FOREVER</a></h2>
			</div>
			<div class="summary">
				<p><span>2011년 4월 16일</span></p>
				<br>
				<p>벨로헬드(veloheld)는 미니멀한 디자인과 최상의 품질이 조화를 이룬다. 과도한 그래픽과 기어 시프트 컴포넌트를 제거하였으며, 벨로헬드 제품들은 그 아름다움과 단순함으로 사용자들을 매혹시킨다. 검은색과 흰색의 자전거는 짧은 차축 거리, 단일 기어, 좁은 핸들의 특징이 있으며 도시 거리를 이동하는 데 필요한 모든 기능을 갖추고 있다.</p>
				<br>
				<p>직접 자전거를 제작하고자 하는 사람들을 위해 벨로헬드 프레임은 세 가지 크기와 두 가지 색상을 제공하며, 작업에 필요한 모든 사항을 제공한다<span class="a">계속...</span></p>
			</div>
		</div>
	</div>
	<div class="wrap2">
		<div class="content2">
			<h2><a href="">상세내용</a></h2>
			<div class="con">
				<img src="more1.jpg" alt="">
				<ul>
					<li><a href="">길 위에서_On the Road: 고정 기어 매나아의 관점</a></li>
					<li><a href="">브랜드 역사_Brand History: 파슐리 사이클(Pashley Cycles) - 영국 제조사</a></li>
					<li><a href="">프레임 전쟁_Frame Wars: 사이클 제조와 수리에서의 혁신</a></li>
				</ul>
				
			</div>
			<div class="con">
				<img src="more2.jpg" alt="">
				<ul>
					<li><a href="">여행 일기_Touring Diary: 바구니 속의 스케치북</a></li>
					<li><a href="">2012년 10대 신상품_Top Ten Newcomers for 2012: 신상품 엿보기</a></li>
					<li><a href="">이너튜브_InnerTube: 웹에서 최고의 사이클 비디오</a></li>
				</ul>
			</div>
			<div class="con">
				<img src="more3.jpg" alt="">
				<ul>
					<li><a href="">상품 리뷰_Product Review: 모든 바구니는 동일하게 만들어지지 않았다.</a></li>
					<li><a href="">기업 공개_Going Public: 공공재단의 설립자에 대한 모든 것</a></li>
					<li><a href="">자전거 도로 지키기_Cycle Lane Defence: 당신의 권리를 알라</a></li>
				</ul>
			</div>
			<div class="con">
				<img src="more4.jpg" alt="">
				<ul>
					<li><a href="">자전거 명예의 전당_Bicycle Hall of Fame: Schwinn Spitfire(1958)</a></li>
					<li><a href="">독자 설문조사_Reader Survey : 우리 함께 생각을 나눠요!</a></li>
					<li><a href="">체인 도둑_Chain Gang: 형편없던 자전거 체인의 진화</a></li>
				</ul>
			</div>
		</div>
	</div>
	<div class="foot-bg">
	<div class="footer">
		<ul>
			<li><a href="">법률 정보</a>/</li>
			<li><a href="">개인정보보호정책</a>/</li>
			<li><a href=""> Copyright © Pedal Faster 2011</a></li>
		</ul>
	</div>
	</div>
</body>
</html>




실행결과