[CSS] 18. 실습: Ferris_Buller

in Web on CSS


실습: Ferris_Buller



/*------------- Ferris_Buller.css --------------*/


body{background:url(bg_body.jpg);     font-family: "MS Sans Serif";}

.head-bg{background: url(bg_header.jpg);}
.header{width:900px; height:185px; margin:auto;}
.header p{width:700px; font-size:14px; color:#fff; padding-top:20px; 
	font-style:italic; font-family:"Times New Roman";}
.header h1{height:53px; margin:50px 0px 0px 200px; background: url(img_ferris.png) no-repeat; text-indent:-9999px;}
.one p{font-size:14px; color:#5f5e59; margin-bottom:15px;}
.two{column-count:2; margin-bottom:15px;}
.two p{margin-bottom:15px; font-size: 18px; color:#5f5e59;}
#in{width:350px; padding:10px; margin-bottom:10px;}

.contentwrap{width:900px; margin:auto; overflow:hidden; }
.content{width:400px; float:left;}
.content h2{color:#9496ab; font-size:18px; padding:15px 0;}
.photo{width:400px; float:right;}

.sns ul{overflow:hidden;}
.sns li{width:60px; height:43px; background: url(social_icons.png);
			transition:all .5s; float:left;}
		
.sns li:nth-child(1){background-position: 0 0;} 
.sns li:nth-child(2){background-position: -61px 0;} 
.sns li:nth-child(3){background-position:-121px 0;}

.sns li:nth-child(1):hover{background-position: 0 bottom;}
.sns li:nth-child(2):hover{background-position: -61px bottom;}
.sns li:nth-child(3):hover{background-position: -121px bottom;}

figure{width: 200px;clear:both;}
figure li{opacity:0.7; cursor:pointer; transition: all .5s; transform-origin:right center;}
figure li:hover {opacity:1; transform:rotate(-15deg)}

.footer{width:900px; margin:auto; clear:both; font-size: 15px;}





/*------------- Ferris_Buller.html.html --------------*/


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="reset.css">
	<link rel="stylesheet" href="Ferris_Buller.css">
	<title>Ferris Bueller</title>
</head>
<body>
	<div class="head-bg">
	<div class="header">
		<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate. 21 minutes ago via Twitter</p>
		<h1>Ferris Bueller</h1>
	</div>
	</div>
	<div class="contentwrap">
		<div class="content">
			<article class="one">
				<h2>Hey guys,</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
				<br>
				<br>
				Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</article>
			<article class="two">
				<p>	Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est culpa qui officia deserunt mollit anim id estmollit anim id est enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.</p>
				<ul class="sns">
					<li class="twitter"></li>
					<li class="facebook"></li>
					<li class="likedin"></li>
				</ul>
			</article>
			<article class="one">
				<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</article>	
			<form action="">
					<input type="text" id="in"placeholder="이름입력">
					<input type="text" id="in" placeholder="이메일입력">
					<textarea type="textarea" id="in" placeholder="메시지를 입력하세요">
					</textarea>
					<input type="submit"  value="입력">
			</form>
		</div>
		<div class="photo">
			<figure>
				<ul>
					<li><img src="thumb-1.png" alt=""></li>
					<li><img src="thumb-2.png" alt=""></li>
					<li><img src="thumb-3.png" alt=""></li>
					<li><img src="thumb-4.png" alt=""></li>
					<li><img src="thumb-5.png" alt=""></li>
	</ul>
	</figure>
			<video control="380" height="210" poster="placeholder.jpg" src="http://heopoint.dothome.co.kr/CSS/Ferris%20Buller/video/video-1.mp4"></video>
		</div>
	</div>
	
	<div class="footer">
		<p>Design by Fabiano Meneghetti<br>
		2011 - Oficina Campus Party</p>
	</div>
</body>
</html>




실행결과