diff --git a/form.html b/form.html
new file mode 100644
index 0000000..a7cfcd9
--- /dev/null
+++ b/form.html
@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <title>BuyIt!Form</title>
+  </head>
+
+  <body>
+    <form action="formData.html" method="post">
+      <fieldset class="your_details">
+        <legend><h3>Step 1: Your details</h3></legend>
+        <ul>
+          <li>
+            <label for="name">Name</label>
+            <input
+              id="name"
+              name="user_name"
+              type="text"
+              size="30"
+              placeholder="First and last name"
+            />
+          </li>
+          <li>
+            <label for="email">Email</label>
+            <input
+              id="email"
+              name="user_email"
+              type="email"
+              size="30"
+              placeholder="youremail@domain.com"
+            />
+          </li>
+          <li>
+            <label for="phone">Phone</label>
+            <input
+              id="phone"
+              name="user_phone"
+              type="tel"
+              size="30"
+              placeholder="Eg. 302-555-1212"
+            />
+          </li>
+        </ul>
+      </fieldset>
+
+      <fieldset>
+        <legend class="delivery_address">
+          <h3>Step 2: Delivery Address</h3>
+        </legend>
+        <ul class="deliver_inputs">
+          <li>
+            <label for="address">Address</label>
+            <textarea id="address" name="deliv_address" rows="6" cols="30">
+            </textarea>
+          </li>
+          <li>
+            <label for="zip">Post code</label>
+            <!--https://css-tricks.com/html-for-zip-codes/-->
+            <input
+              id="zip"
+              name="zip"
+              type="text"
+              size="30"
+              inputmode="numeric"
+              pattern="^(?(^00000(|-0000))|(\d{5}(|-\d{4})))$"
+            />
+          </li>
+          <li>
+            <label for="country">Country</label>
+            <input id="country" name="user_phone" type="phone" size="30" />
+          </li>
+        </ul>
+      </fieldset>
+
+      <fieldset class="card_details">
+        <legend><h3>Step 3: Card details</h3></legend>
+        <ul>
+          <li class="card-select">
+            <label>Card type</label><br />
+            <input
+              id="radio_visa"
+              name="card_type"
+              type="radio"
+              value="radio_visa"
+            />
+            <label class="radio_label">VISA</label>
+
+            <input
+              id="radio_amex"
+              name="card_type"
+              type="radio"
+              value="radio_amex"
+            />
+            <label class="radio_label">AmEx</label>
+
+            <input
+              id="radio_mastercard"
+              name="card_type"
+              type="radio"
+              value="radio_mastercard"
+            />
+            <label class="radio_label">Mastercard</label>
+          </li>
+
+          <li>
+            <label for="card_number">Card number</label>
+            <input id="card_number" name="card_number" type="text" size="30" />
+          </li>
+          <li>
+            <label for="cvv_number">Security code</label>
+            <input id="cvv_number" name="security_code" type="text" size="30" />
+          </li>
+          <li>
+            <label for="cardName">Name on card</label>
+            <input
+              id="cardName"
+              name="cardName"
+              type="text"
+              size="30"
+              placeholder="Exact name as on the card"
+            />
+          </li>
+        </ul>
+
+        <button type="submit">BUY IT!</button>
+      </fieldset>
+    </form>
+  </body>
+</html>
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..911b773
--- /dev/null
+++ b/style.css
@@ -0,0 +1,115 @@
+form {
+  /* Centers form on the page */
+  margin: 0 auto;
+  width: 500px;
+  background-color: #9cbc2c;
+  /* Form outline */
+  margin: 2em;
+  border: 1px solid #ccc;
+  border-radius: 0.5em;
+}
+
+fieldset {
+  /*remove default border from fieldsets*/
+  border: none;
+}
+
+legend {
+  height: 3em; /*space between between legend w h3 and first input*/
+  border: 0;
+  padding: 0;
+}
+
+ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+li {
+  background-color: #b9cf6a;
+  border: 2px solid #e2ebc2;
+  border-radius: 0.5em;
+  padding: 0.75em;
+  margin-bottom: 0.25em;
+}
+
+label {
+  /*space between label & input field*/
+  margin-top: 0.25em; /*spacing between "card type" and li border*/
+  margin-bottom: 0;
+  padding-top: 0;
+}
+
+::placeholder {
+  /*styles the placeholder text inside the input fields*/
+  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
+  font-style: italic;
+  color: #b3b3b3;
+  padding-left: 0.5em;
+}
+
+input,
+textarea {
+  height: 2em;
+  border: none;
+  border-radius: 0.3em;
+}
+
+#radio_visa,
+#radio_amex,
+#radio_mastercard {
+  /*styles the radio button input fields*/
+  margin-left: 1em;
+  vertical-align: middle;
+}
+
+#address {
+  /*aligns the address label text with top of address input field*/
+  vertical-align: text-top;
+}
+
+.radio_label {
+  /*center aligns radio buttons with label text*/
+  vertical-align: middle;
+}
+
+/* Styling for submit button */
+
+button {
+  height: 50px;
+  width: 150px;
+  border-radius: 25px;
+  background-color: #000000;
+  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
+  font-size: 1.25em;
+  color: #ffffff;
+  font-weight: bold;
+  text-align: center;
+  margin-top: 0.5em;
+  margin-bottom: 0.75em;
+  margin-left: 33%;
+}
+
+label {
+  display: inline-block;
+  width: 75px;
+}
+input[type="text"],
+input[type="email"],
+input[type="phone"],
+input[type="tel"],
+textarea {
+  display: block;
+  margin: auto;
+  width: 50%;
+}
+
+li {
+  display: flex;
+  justify-content: flex-start;
+}
+
+.card-select label:first-child {
+  margin-bottom: 2rem;
+}
