diff --git a/bad_pizza_site.png b/bad_pizza_site.png
new file mode 100644
index 0000000..d9361e1
Binary files /dev/null and b/bad_pizza_site.png differ
diff --git a/good_pizza_site.png b/good_pizza_site.png
new file mode 100644
index 0000000..38248a7
Binary files /dev/null and b/good_pizza_site.png differ
diff --git a/web-pages/css/order-feedback.css b/web-pages/css/order-feedback.css
new file mode 100644
index 0000000..5f53d46
--- /dev/null
+++ b/web-pages/css/order-feedback.css
@@ -0,0 +1,90 @@
+header {
+  float: left;
+}
+header nav {
+  font-size: 110%;
+  margin-top: 2em;
+  margin-left: 2em;
+}
+header nav ul {
+  width: 10em;
+}
+header nav ul li {
+  padding: 0.2em 1em;
+  border: 1px solid #666;
+}
+
+h1 {
+  border-bottom: none;
+  text-transform: none;
+  color: #333;
+  margin-bottom: 0;
+  margin-left: 9em;
+  padding-top: 1em;
+}
+
+main {
+  color: #333;
+  margin-left: 21em;
+  padding-top: 1em;
+}
+
+h2 {
+  color: #333;
+  margin-top: 0;
+}
+
+.order-details {
+  display: flex;
+}
+.order-details .product {
+  width: 70%;
+  font-size: 140%;
+  padding-right: 2em;
+}
+.product img {
+  float: left;
+  margin-right: 1em;
+}
+.product .reference {
+  font-size: 70%;
+}
+.order-details .shipping {
+  width: 30%;
+}
+
+.questions {
+  font-size: 105%;
+}
+.questions .radio legend {
+  float: left;
+  width: 19%;
+}
+.questions .radio label {
+  display: block;
+  margin-left: 20%;
+  margin-bottom: 0.2em;
+  width: 80%;
+}
+.questions .form-row label {
+  width: 19%;
+  margin-right: 0;
+}
+.questions textarea {
+  width: 80%;
+  height: 6em;
+}
+.questions button {
+  margin-left: 20%;
+}
+
+footer {
+  margin-left: 21em;
+  margin-top: 4em;
+}
+footer .links {
+  display: flex;
+}
+footer .links div {
+  width: 25%;
+}
\ No newline at end of file
diff --git a/web-pages/img/cockoo-clock.jpg b/web-pages/img/cockoo-clock.jpg
new file mode 100644
index 0000000..965eb44
Binary files /dev/null and b/web-pages/img/cockoo-clock.jpg differ
diff --git a/web-pages/img/time-logo.png b/web-pages/img/time-logo.png
new file mode 100644
index 0000000..e4cb1b1
Binary files /dev/null and b/web-pages/img/time-logo.png differ
diff --git a/web-pages/order-feedback.html b/web-pages/order-feedback.html
new file mode 100644
index 0000000..43b7116
--- /dev/null
+++ b/web-pages/order-feedback.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>Time Goes order details</title>
+	<link rel="stylesheet" href="css/normalization.css" />
+	<link rel="stylesheet" href="css/base.css" />
+	<link rel="stylesheet" href="css/order-feedback.css">
+</head>
+<body>
+	<div class="container">
+		<div class="page-wrapper">
+			<header>
+				<div class="logo">
+					<img src="img/time-logo.png" width="250" height="148" alt="As Time Goes Buy">
+				</div>
+				<nav>
+					<ul>
+						<li>Home</li>
+						<li>Products</li>
+						<li>Repairs</li>
+						<li>Your account</li>
+					</ul>
+				</nav>
+			</header>
+
+			<h1>Your order</h1>
+			<main>
+				<section class="order-details">
+					<div class="product">
+						<h2>Details</h2>
+						<img src="img/cockoo-clock.jpg" width="200" height="200" alt="Cockoo Clock">
+						<p class="link"><a href="#">Designer Cuckoo Clock by Emilé Colluceo</a></p>
+						<p class="price">&pound;599.00</p>
+						<p class="reference"><span>Reference</span> 872634726423</p>
+					</div>
+					<div class="shipping">
+						<h2>Shipping</h2>
+						<p class="name">Moray Gregor</p>
+						<p>13 Abbotsford Cres<br>Edinburgh<br>EH8 5PG</p>
+						<p class="tracking"><span>Tracking</span> <a href="#">HFF7127GYR19I</a></p>
+					</div>
+				</section>
+				
+				<section class="questions">
+					<h2>Questions</h2>
+					
+					<p>Please use the form below if you have any questions regarding your order.</p>
+					<form action="#" onsubmit="$('main').remove();">
+						<fieldset class="radio">
+							<legend>Topic</legend>
+							<label><input type="radio" name="topic" value="topic-1"> When will my item be delivered?</label>
+							<label><input type="radio" name="topic" value="topic-2"> I need to return this item</label>
+							<label><input type="radio" name="topic" value="topic-3"> Cancel order</label>
+							<label><input type="radio" name="topic" value="topic-4"> Other</label>
+						</fieldset>
+						<div class="form-row">
+							<label for="message">Message</label>
+							<textarea name="messsage" id="mesage" cols="30" rows="10"></textarea>
+						</div>
+						<button type="submit" class="btn btn-primary">Submit</button>
+					</form>
+			</main>
+			
+			<footer>
+				<div class="links">
+					<div>
+						<h3>Information</h3>
+						<ul>
+							<li><a href="#">About us</a></li>
+							<li><a href="#">Delivery</a></li>
+							<li><a href="#">Terms and conditions</a></li>
+						</ul>
+					</div>
+					<div>
+						<h3>Customer service</h3>
+						<ul>
+							<li><a href="#">Contact us</a></li>
+							<li><a href="#">How to find us</a></li>
+							<li><a href="#">Accessibility</a></li>
+						</ul>
+					</div>
+				</div>
+				<p>Copyright &copy; As time goes buy</p>
+			</footer>
+		</div>
+	</div>
+	<div>Clock image: https://en.wikipedia.org/wiki/File:Cuckoo_clock_by_Pascal_Tarabay.jpg</div>
+	<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
+</body>
+</html>
\ No newline at end of file
