[CSS] 15. 실습: Start

in Web on CSS


실습: Start



/*------------- START.css --------------*/


*{box-sizing:border-box; font-family:"Montserrat", sans-serif}
.main-bg{background: #f44336;}
.nav{border-bottom:1px solid #fff; overflow:hidden;position:fixed;width:100%;background: #f44336;}
.nav li:nth-child(1){background: #fff; }
#home a{color:#000}
.nav li{list-style:none; float:left; font-size:18px; }
.nav li a{color:#fff; text-decoration:none; padding: 24px 12px; display:block}
.nav ul li:hover a{background: #fff; color:#000}

.header{text-align: center; padding: 128px 16px}
.header h1{font-size:64px; color:#fff; margin:16px}
.header h2{font-size:24px; color:#fff; margin:24px 0px}
.header button{background-color:#000; color:#fff; padding:12px 24px;
	font-size:18px; border:none; margin-top:16px}

.con1,.con2,.con3{padding: 64px 16px;overflow:hidden}
.content h1{font-size:36px}
.con1,.con2,.con3,.footer{width:60%; margin:auto}
.p1{font-size:18px; padding:32px 0; margin:10px 0}
.p2{font-size:15px; color:#757575; padding:15px 0}
.con1 i{width:25%;float:right; padding:64px 0}
.con2 i{width:25%;float:left; padding:64px 0}
.con1bd{width:65%;float:left}
.con2bd{width:65%;float:right}
.con2-bg{background: #f1f1f1;}

.con3{text-align: center}
.con3-bg{background: #000; color:#fff; }
.con3 h2{font-size: 24px; margin:16px}
.content i{color:#f44336; font-size:200px}

.footer{padding:32px 0; font-size:24px; text-align:center}
.footer p{font-size:15px}
.footer i:hover {color: #ddd}






/*------------- start.html --------------*/


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
	<link rel="stylesheet" href="START.css">
	<link rel="stylesheet" href="reset.css">
	
	<title>START PAGE</title>
</head>
<body>
<div class="wrap">
	<div class="main-bg">
	<div class="nav">
		<ul>
			<li id="home"><a href="">Home</a></li>
			<li><a href="">Link1</a></li>
			<li><a href="">Link2</a></li>
			<li><a href="">Link3</a></li>
			<li><a href="">Link4</a></li>
		</ul>
	</div>
	<div class="header">
		<h1>START PAGE</h1>
		<h2>Template by w3.css</h2>
		<button>Get Start</button>
	</div>
	</div>
	<div class="content">
		
		<div class="con1">
			<div class="con1bd">
			<h1>Lorem Ipsum</h1>
			<p class="p1">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.</p>
			<p class="p2">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>
			</div>
			<i class="fa fa-anchor w3-padding-64 w3-text-red"></i>

		</div>
		<div class="con2-bg">
		<div class="con2">
			<i class="fa fa-coffee w3-padding-64 w3-text-red w3-margin-right"></i>
			<div class="con2bd">
			<h1>Lorem Ipsum</h1>
			<p class="p1">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.</p>
			<p class="p2">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>
			</div>
		</div>
		</div>
		<div class="con3-bg">
		<div class="con3">
			<h2>Quote of the day: live life</h2>
		</div>
		</div>
	</div>
	<div class="footer">
		<i class="fa fa-facebook-official w3-hover-opacity"></i>
		<i class="fa fa-instagram w3-hover-opacity"></i>
		<i class="fa fa-snapchat w3-hover-opacity"></i>
		<i class="fa fa-pinterest-p w3-hover-opacity"></i>
		<i class="fa fa-twitter w3-hover-opacity"></i>
		<i class="fa fa-linkedin w3-hover-opacity"></i>
		<p>Powered by w3.css</p>
	</div>
</div>
</body>
</html>




실행결과