diff --git a/02cup/css/style.css b/02cup/css/style.css
new file mode 100644
index 0000000..b1f6ef9
--- /dev/null
+++ b/02cup/css/style.css
@@ -0,0 +1,61 @@
+body {
+	//background: url(../images/page-mock.png);
+	background-size: 1024px 885px;
+	background-repeat: no-repeat;
+	font-family: Verdana, sans-serif;
+	font-color: #f07c17;
+}
+h1 {
+	text-align: center;
+	color: #666666;
+    font-size: 49px;
+    font-weight: normal;
+    margin-bottom: 27px;
+    margin-top: 42px;
+    margin-left: -10px;
+    letter-spacing: -0.6px;
+}
+#main {
+	margin-left: 8px;
+    margin-top: -2px;
+}
+ul {
+	color: #666666;
+    line-height: 31px;
+    margin-top: 30px;
+    margin-left: 9px;
+    border: 1px;
+}
+.para {
+	line-height: 30px;
+	margin-top: 30px;
+	color:#666666;
+    margin-left: 22px;
+}
+h2 {    
+	color: #f07c17;
+    margin-top: 0px;
+    margin-left: 23px;}
+
+.container {
+	width: 970px;
+	margin: 26px 27px;
+}
+.left {
+	width: 40%;
+	float: left;
+}
+.right {
+	width: 60%;
+	float: left;
+}
+.box {
+	border: 1px;
+	width: 319px;
+	margin-top: 28px;
+	padding: 10px 30px 30px;
+}
+img {
+	width: 374px;
+	margin: 10px;
+}
diff --git a/02cup/images/mug.png b/02cup/images/mug.png
new file mode 100644
index 0000000..4f04546
Binary files /dev/null and b/02cup/images/mug.png differ
diff --git a/02cup/images/page-mock.png b/02cup/images/page-mock.png
new file mode 100644
index 0000000..ca90a72
Binary files /dev/null and b/02cup/images/page-mock.png differ
diff --git a/02cup/index.html b/02cup/index.html
new file mode 100644
index 0000000..6649338
--- /dev/null
+++ b/02cup/index.html
@@ -0,0 +1,48 @@
+<!doctype html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<link rel="stylesheet" type="text/css" href="css/style.css">
+		<title>Mockup</title>
+	</head>
+	<body>
+		<div class="container">
+		<div>
+			<h1>Orange Udacity Mug</h1>
+		</div>
+		<div class="left">			
+			<img src="images/mug.png" alt="Mug Cup">
+			<div class="box">
+				<h2 id="main">Main Features</h2>
+				<ul>
+					<li>Holds your favorite drink</li>
+					<li>Energizing color</li>
+					<li>Reminds you to learn</li>
+				</ul>				
+			</div>
+		</div>
+		<div class="right">
+			<h2>A Good Way to Start a Day</h2>
+			<div class="para">
+				<p>
+				Bacon ipsum dolor sit amet shoulder drumstick spare ribs shank, magna in sirloin. Turducken dolore tempor irure tenderloin pork belly shankle. Excepteur in strip steak pork chop voluptate tongue, hamburger nostrud kevin enim nulla ut cow incididunt. Do pancetta swine hamburger incididunt in excepteur irure pig labore est venison dolor ex adipisicing. Labore capicola veniam, commodo corned beef ut non rump swine pork chop exercitation ball tip ham deserunt.
+			</p>
+			<p>
+				Ad tri-tip short loin anim beef ribs eu ball tip velit deserunt frankfurter sunt nisi filet mignon. Pork loin quis ham hock mollit cupidatat. Id ground round chuck jerky meatball laborum frankfurter short loin in biltong t-bone doner ea irure. Culpa ex ut id. Nostrud t-bone bresaola pariatur qui tri-tip pork chop, ribeye irure velit pork et in dolore.
+
+			</p>
+			<p>
+				Bacon in sunt dolor fatback excepteur turkey chuck velit proident frankfurter quis. Nisi shank sirloin sed tenderloin. Magna short ribs kielbasa biltong minim. In esse t- bone est tail kielbasa dolor ullamco tongue mollit sint sirloin chuck venison anim. Short ribs dolore adipisicing, bresaola venison cupidatat short loin turducken biltong leberkas andouille elit ad in occaecat. Ground round pariatur cupidatat ham hock magna tempor ea jowl duis.
+			</p>
+			</div>
+			
+		</div>
+		</div>
+		
+		
+
+
+	</body>
+
+
+</html>
\ No newline at end of file
