From 27ca03eb4deb5fb91abb0bb86374d16bfea65c45 Mon Sep 17 00:00:00 2001
From: StephanieCzetli <stephanieczetli@gmail.com>
Date: Sun, 13 Dec 2020 20:37:44 -0500
Subject: [PATCH] first commit for Lab 2

---
 form.html | 89 +++++++++++++++++++++++++++++++++++++++++++++++++++
 style.css | 96 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 185 insertions(+)
 create mode 100644 form.html
 create mode 100644 style.css
diff --git a/form.html b/form.html
new file mode 100644
index 0000000..6d02dbb
--- /dev/null
+++ b/form.html
@@ -0,0 +1,89 @@
+
+<!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>
+               <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..a970c6f
--- /dev/null
+++ b/style.css
@@ -0,0 +1,96 @@
+
+
+
+form { /* Centers form on the page */
+   margin: 0 auto;
+   width: 500px;
+   background-color: #9cbc2c;
+   /* Form outline */
+   margin: 2em;
+   border: 1px solid #CCC;
+   border-radius: .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: .5em;
+      padding: .75em;
+      margin-bottom: .25em;
+         
+   }
+
+   label {
+      padding-right: 3.5em; /*space between label & input field*/
+      margin-top: .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: .5em;
+   }
+
+   input, textarea {
+      height: 2em;
+      border: none;
+      border-radius: .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: .5em;
+      margin-bottom: .75em;
+      margin-left: 33%;
+      
+   }
+
+
+
+
+
+
+
