[CSS] 19. 실습: jane&john

in Web on CSS


실습: jane&john



/*------------- jane&john.css --------------*/


html,body{height: 100%;}
*{box-sizing:border-box;}
body{background: #ffdddd; font-family: "Raleway", sans-serif;}
h1{font-size:4vw;} /* 글자크기가 화면에 맞춰서 변경 */
h2{font-size:2vw;}
img{width:100%;}
.header{height:100%;}
.bgbackground{background-position:center;
	background-size:cover;}
.nav{background-color:#fff; color:#000;
	padding:8px 16px; opacity:0.75; 
	font-size:15px; width:100%;
	position: fixed; z-index:999;
	bottom:0; vertical-align:middle;
	text-align: center;}
.m-h{min-height:100%;}
.filter{filter: grayscale(50%);}

.nav ul li{width: 25%; float:left; }
.nav ul li a{display:block; padding:8px 16px; text-decoration:none;}
.nav ul li a:hover{background: #ddd;}
section{position:relative; text-align:center;}

#section1{background-image: url(wedding_couple.jpg);
	 color:#fff; letter-spacing:5px; }

#art1{position:absolute; text-align:center; top:50%; left:50%;
	transform:translate(-50%,-50%)} /* 화면에 맞춰서 중앙에 맞춤 */


#section2{ max-width:980px; margin:auto;padding:16px 24px;}
#art2 h2{font-size: 3vw; color:#757575; margin:10px 0;}
#art2 img{margin:32px 0;}
#art2 p{margin:15px 0; font-size:15px; font-style:italic; 
	line-height:30px;}
#art2 .button{margin:15px 0;}
#art2 .button a{ color:#fff; 
	text-decoration:none;
	font-size:18px; padding:12px 24px;
	background-color:#000;	border-radius:4px;}
#art2 .button a:hover{background-color:#ddd; }
#sub{height:100%;  background-image: url(flowers.jpg); color:#fff; 
	position:relative;}
#sub .con{position:absolute; text-align:center; top:50%; left:50%;
	transform:translate(-50%,-50%);}

#section3{max-width:980px; margin:auto; 
	padding:64px 16px; overflow:hidden;}
#section3 h1{font-size:36px; color:#757575; margin:10px 0;}
#section3 img{margin:64px 0;}
#section3 div{width:49.999%; float:left;}
#section3 h2{margin:10px 0; font-size:30px;}
#section3 p{margin:15px 0; font-size:15px;}

#section4 {padding:64px 16px; background-color:pink;}
#section4 h1{font-size:36px;}
#section4 p{font-size:18px; margin:18px 0;}
#section4 button{display:inline-block; padding: 8px 60px; 		
		background-color: #f44336;
	color: #fff; opacity: 0.60; border-radius: 4px;
	font-size:24px;}
#section4 button:hover{background: #ddd;}

.footer{background: #000; color:#fff; font-size:16px; text-align:center;
	padding:16px 0;}
.footer p{margin:15px;}

.small{margin-bottom:52px; background: #000;}





<!------------- Ferris_Buller.html -------------->


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="reset.css">
	<link rel="stylesheet" href="jane&john.css">
	<title>jane&john</title>
</head>
<body>		
	<div class="nav">
		<ul>
			<li><a href="#section1">Home</a></li>
			<li><a href="#section2">Jane & John</a></li>
			<li><a href="#section3">Wedding</a></li>
			<li><a href="#section4">RSVP</a></li>
		</ul>
	</div>
	<div class="header">
		<section id="section1" class="m-h filter bgbackground">
			<article id="art1">
				<h1>Jane & John</h1>
				<h2>Are getting married</h2>
				<h2>17.07.2017</h2>
			</article>
	
		</section>	
		
	</div>

	<section id="section2" class="m-h">
		<article id="art2">
			<h2>Jane & John</h2>
			<img src="wedding_couple2.jpg" alt="" class="filter">
			<p id="conp">You all know us. And we all know you. We are getting married lorem ipsum dolor sit amet, consectetur adipiscing 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur
			adipiscing 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.</p>
				
			<br>
				
			<p class="button"><a href="">Wedding Details</a></p>
		</article>	
	</section>
	<div id="sub" class="bgbackground m-h">
		<div class="con">
			<h1>You Are Invited</h1>
			<h2>Of course..</h2>
		</div>
	</div>
		
	<section id="section3" class="m-h">
		<article>
			<h1>THE WEDDING</h1>
			<img src="wedding_location.jpg" alt="" class="filter">
			<div class="sub1">
				<h2>When</h2>
				<p>Wedding Ceremony - 2:00pm</p>
				<p>Reception & Dinner - 5:00pm</p>
			</div>
			<div class="sub2">
				<h2>Where</h2>
				<p>Some place, an address</p>
				<p>Some where, some address</p>
			</div>
		</article>
	</section>
	<section id="section4">
		<article>
			<h1>HOPE YOU CAN MAKE IT!</h1>
				<p>Kindly Respond By January, 2017</p>
			<button>RSVP</button>
		</article>
	</section>
	
	<div class="footer">
		<p>Powered by w3.css</p>
	</div>
	<div class="small">
		&nbsp;
	</div>
</body>
</html>




실행결과