diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..f16292a
Binary files /dev/null and b/.DS_Store differ
diff --git a/css/stylesheet.css b/css/stylesheet.css
new file mode 100644
index 0000000..30a56af
--- /dev/null
+++ b/css/stylesheet.css
@@ -0,0 +1,75 @@
+.centerForm {
+    margin: auto;
+    Width: fit-content;
+    border: 1px solid gainsboro;
+    padding: 10px;
+    font-family: serif;
+}
+
+form {
+    background-color: rgba(161, 204, 82, 0.884);
+    border-radius: 5px;
+    padding: 20px;
+    color: rgba(63, 57, 57, 0.795);
+}
+
+h4 {
+    margin: 10px 0 10px;
+}
+
+label {
+    font-size: .9em;
+    display:inline-block;
+    width: 100px;
+}
+
+.label {
+    margin-bottom: 10px;
+}
+
+.borders {
+    border: 1px solid whitesmoke;
+    padding: 5px;
+    border-radius: 5px;
+    background-color:  rgba(198, 226, 147, 0.884);
+    margin-bottom: 3px;
+}
+
+button {
+    background-color: rgba(63, 57, 57, 0.795);
+    color: white;
+    border-radius: 15px;
+    padding: 5px 20px;
+    font-size: 1.1em;
+    font-family: none;
+    margin-top: 8px;
+}
+
+.centerDiv {
+    text-align: center;
+}
+
+input[type="text"],
+input[type="tel"],
+input[type="email"] {
+   width: 220px;
+   border: none;
+   border-radius: 2px;
+   height: 25px;
+}
+
+textarea {
+    height: 90px;
+    width: 220px;
+    border-radius: 2px;
+    border: none;
+}
+
+.topleft {
+    float: left;
+    margin-right: 4px;
+}
+
+::placeholder {
+    font-style: italic;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..a7cdf04
--- /dev/null
+++ b/index.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="stylesheet" href="css/stylesheet.css">
+        <title>Week 3 Lab 2</title>
+    </head>
+
+    <body>
+        <div class="centerForm">
+            <form>
+                <h4>Step 1: Your details</h4>
+                <div class="borders">
+                    <label for="name">Name</label>
+                    <input type="text" id="name" name="full_name" placeholder="First and last name"> <br>
+                </div>
+                <div class="borders">
+                    <label for="email">Email</label>
+                    <input type="email" id="email" name="email_address" placeholder="example@email.com"> <br>
+                </div>
+                <div class="borders">
+                    <label for="phone">Phone</label>
+                    <input type="tel" id="phone" name="phone_number" placeholder="Eg. +447500000000">
+                </div>
+                <h4>Step 2: Delivery address</h4>
+                <div class="borders">
+                    <label for="address" class="topleft">Address</label>
+                    <textarea id="address" name="address"></textarea> <br>
+                </div>
+                <div class="borders">
+                    <label for="pcode">Post code</label>
+                    <input type="text" id="pcode" name="post_code"> <br>
+                </div>
+                <div class="borders">
+                    <label for="country">Country</label>
+                    <input type="text" id="country" name="location"> <br>
+                </div>
+                <h4>Step 3: Card details</h4>
+                <div class="borders">
+                    <label class="label">Card type</label> <br>
+                    <input type="radio" id="visa" value="visa" name="card_type"><label for="visa">Visa</label>
+                    <input type="radio" id="amex" value="amex" name="card_type"><label for="amex">AmEx</label>
+                    <input type="radio" id="mcard" value="mcard" name="card_type"><label for="mcard">Mastercard</label> <br>
+                </div>
+                <div class="borders">
+                    <label for="cnum">Card number</label>
+                    <input type="text" id="cardnum" name="card_number"> <br>
+                </div>
+                <div class="borders">
+                    <label for="scode">Security code</label>
+                    <input type="text" id="scode" name="security_code"> <br>
+                </div>
+                <div class="borders">
+                    <label for="ncard">Name on card</label>
+                    <input type="text" id="ncard" name="name_on_card" placeholder="Exact name as on the card"> <br>
+                    </div>
+                <div class="centerDiv">
+                    <button type="submit">BUY IT!</button> <br>
+                </div>
+            </form>
+        </div>        
+    </body>
+</html>
\ No newline at end of file
