[CSS] 14. 실습: Catering

in Web on CSS


실습: Catering



/* ------------Catering.css------------------ */


*{font-family: "Times New Roman", Georgia, Serif;box-sizing:border-box;}
.nav{width:100%; padding:8px 16px; overflow:hidden; 
	box-shadow:0 0 5px #333;
	position:fixed;
	left:0; top:0;
	z-index:999;
	background:#fff;}
.nav h1{font-size:18px; padding:8px 16px; float:left; letter-spacing:5px;}
.nav ul{float:right; overflow:hidden;}
.nav ul li{font-size:18px; padding:8px 16px; float:left; letter-spacing:3px;}

.header{max-width:1600px; margin:auto; position:relative;}
.header>h1{position:absolute; font-size:36px; left:10px; bottom:30px;
		letter-spacing:3px;}
.wrap{max-width:1100px; margin:auto;}
.con1{padding:64px 0; overflow:hidden; }
.con1 img{width:45%; height:auto; float:left; opacity: 0.75;}
.subcon1 {width:49%; float:right;}
.subcon1 h2{font-size:36px; margin: 10px 0; text-align:center;
	letter-spacing:5px;}
.subcon1 h3{font-size:24px; margin: 10px 0; text-align:center;
	letter-spacing:5px;}
.conp1{font-size:18px; margin:10px 0;}
.conp1 span{background: #f1f1f1;}
.conp2{font-size:18px; margin:10px 0; color:#757575;}

.con2{overflow:hidden;}
.con2 img{width:45%; height:auto; opacity: 0.75; float:right;}
.subcon2{float:left; }
.subcon2 h2{font-size:36px; margin:10px 0; letter-spacing: 5px;}
.subcon2 h3{font-family:"Playfair Display"; font-size:20px; 
	letter-spacing:5px; margin:10px 0;}
.subcon2 p{ font-size:15px; margin:15px 0;color:#757575;}





/* ------------Catering.html------------------ */


<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="reset.css">
	<link rel="stylesheet" href="Catering.css">
	<title>Gourmet au Catering</title>
</head>
<body>


<div class="header">
	<div class="nav">
	<h1><a href="">Gourmet au Catering</a></h1>
	<ul>
		<li><a href="">About</a></li>
		<li><a href="">Menu</a></li>
		<li><a href="">Contact</a></li>
	</ul>
	</div>
	<img src="hamburger.jpg" alt="">
	<h1>Le Catering</h1>
</div>
<div class="wrap">
	<div class="content">
		<div class="con1">
			<img src="tablesetting2.jpg" alt="">
			<div class="subcon1">
			<h2>About Catering</h2>
			<br>
			<h3>Tradition since 1889</h3>
			<p class="conp1">
				The Catering was founded in blabla by Mr. Smith in lorem ipsum dolor sit amet, consectetur adipiscing elit 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. Duis aute iruredolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.We only use <span id="conspan">seasonal</span> ingredients.
			</p>
			<p class="conp2">
				Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod temporincididunt 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 class="con2">
			<img src="tablesetting.jpg" alt="">
			<div class="subcon2">
				<h2>Our Menu</h2>
				<br>
				<h3>Bread Basket</h3>
				<p>Assortment of fresh baked fruit breads and muffins 5.50</p>
				<br>
				<h3>Honey Almond Granola with Fruits</h3>
				<p>Natural cereal of honey toasted oats, raisins, almonds and dates 7.00</p>
				<br>
				<h3>Belgian Waffle</h3>
				<p>Vanilla flavored batter with malted flour 7.50</p>
				<br>
				<h3>Scrambled eggs</h3>
				<p>Scrambled eggs, roasted red pepper and garlic, with green onions 7.50</p>
				<br>
				<h3>Blueberry Pancakes</h3>
				<p>With syrup, butter and lots of berries 8.50</p>
			</div>
		</div>
	</div>
	<div class="footer">
		<p>Powered by <a href="">w3.css</a></p>
	</div>
</div>
</body>
</html>




실행결과