diff --git a/credit_card.css b/credit_card.css
new file mode 100644
index 0000000..27ed030
--- /dev/null
+++ b/credit_card.css
@@ -0,0 +1,73 @@
+.button{
+    background-color: rgba(19, 17, 17, 0.76);
+    color: white;
+    border-radius: 12px;
+    margin-left:190px;
+}
+.details {
+    background-color: #809B1E;
+    border-style: solid;
+        border-color: white;
+        border-radius: 5px;
+}
+fieldset {
+    background:rgb(157, 196, 67);
+    border-style: solid;
+        border-color: white;
+        border-radius: 2px;
+    margin-bottom: 3px;
+}
+* {
+    box-sizing: border-box;
+  }
+  .TextWrap{
+    position: relative;
+    top: -70px;
+    }
+    .name{
+        border-style: solid;
+    border-color: white;
+    border-radius: 2px;
+    margin-left: 102px;
+}
+    .email{margin-left: 102px;
+        border-style: solid;
+        border-color: white;
+        border-radius: 2px;
+    }
+    .phone{margin-left: 102px;
+        border-style: solid;
+        border-color: white;
+        border-radius: 2px;
+    }
+    .TextWrap{margin-right: 90px;}
+    .TextWrap1{
+        border-style: solid;
+        border-color: white;
+        border-radius: 2px
+    }
+    .code{margin-left: 80px;
+        border-style: solid;
+        border-color: white;
+        border-radius: 2px;}
+    .country{margin-left: 86px;
+        border-style: solid;
+        border-color: white;
+        border-radius: 2px;}
+    .AmEx{margin-left: 50px;}
+    .master{margin-left: 50px;}
+    .card_number{margin-left: 48px;
+        border-style: solid;
+        border-color: white;
+        border-radius: 2px;
+    }
+    .sec_code{margin-left: 48px;
+        border-style: solid;
+        border-color: white;
+        border-radius: 2px;
+    }
+    .name_on_card{margin-left:45px;
+        border-style: solid;
+        border-color: white;
+        border-radius: 2px;
+    }
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..53c765e
--- /dev/null
+++ b/index.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<head>
+     <link rel="stylesheet" href="credit_card.css">
+<title> Credit card info form</title>
+</head>
+<body>
+    <form class="credit card">
+        <fieldset style="width:40%" class="details">
+        <p><b>Step 1: Your details</b></p>
+        <fieldset>
+    <label for="myName"><b>Name</b> </label>
+    <input type = "text" id = "myName" size="25" class="name" placeholder="First and last name"/>
+</fieldset>
+    <fieldset>
+        <div class="label"
+    <label for="email"><b>Email</b></label>
+    <input type="text" id="email" size="25" class="email" placeholder="example@domain.com">
+</fieldset>
+    <fieldset>
+    <label for="phone"><b>Phone</b></label>
+    <input type="text" id="phone" size="25" class="phone" placeholder="Eg. +447500000000">  
+    </fieldset>
+    <p><b>Step 2: Delivery address</b></p>
+    <fieldset>
+    <label for="Address" class="TextWrap"><b>Address</b></label>
+    <textarea rows="5" cols="24"  class="TextWrap1" name="comment"></textarea>
+    </fieldset>
+    <fieldset>
+    <label for="code" ><b>Post code</b></label>
+    <input type="text" id="code" size="25" class="code">
+    </fieldset>
+    <fieldset>
+    <label for="country" ><b>Country</b></label>
+    <input type="text" id="country" size="25" class="country">
+    </fieldset>
+    <p><b>Step 3: Card details</b></p>
+    <fieldset>
+    <p> Card type </p>
+    <label for="visa" class="visa"> <b>Visa </b></label> 
+    <input type="radio" id="visa" name="card company" value="visa">
+    <label for="AmEx" class="AmEx"> <b>AmEx</b></label> 
+    <input type="radio" id="AmEx" name="card company" value="AmEx">
+    <label for="master" class="master"> <b>Mastercard </b></label> 
+    <input type="radio" id="master" name="card company" value="mastercard"><br>
+    </fieldset>
+    <fieldset>
+    <label for="card_number"><b>Card number</b></label>
+    <input type="text" id="card_number" size="25" class="card_number">
+    </fieldset>
+    <fieldset>
+    <label for="Sec_code"><b>Security code</b></label>
+    <input type="text" id="Sec_code" size="25" class="sec_code">
+    </fieldset>
+    <fieldset>
+    <label for="name_on_card"><b>Name on card</b></label>
+    <input type="text" id="name_on_card" size="25" class="name_on_card" placeholder="Exact name as on the card">
+</fieldset><br>
+    <input type="submit" value="BUY IT!" class="button">
+</fieldset>
+</form>
+</body>
+</html>
\ No newline at end of file
