From 9ccf05418ae37baef77d40719821a25464e4b0ff Mon Sep 17 00:00:00 2001 From: Crackncode Date: Wed, 2 Dec 2020 23:18:39 -0500 Subject: [PATCH 1/7] html for form --- index.html | 57 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 index.html diff --git a/index.html b/index.html new file mode 100644 index 0000000..ae4597c --- /dev/null +++ b/index.html @@ -0,0 +1,57 @@ + + + + + + Form-Final + + + + + +
+
+ + Step 1: Your Details + + +
+ +
+ +
+ +
+
+ + Step 2: Delivery Address + + +
+ +
+ +
+ +
+
+ + step 3: Card Details + + + + + + + + + +
+ + + + +
+ + + \ No newline at end of file From 9b87a508227df0e3d2afe69bcbca3e74b08efb8a Mon Sep 17 00:00:00 2001 From: Nick Satinover Date: Thu, 3 Dec 2020 20:33:01 -0500 Subject: [PATCH 2/7] initial commit with ul li added --- index.html | 89 +++++++++++++++++++++++++++++++++++++++--------------- main.css | 11 +++++++ 2 files changed, 76 insertions(+), 24 deletions(-) create mode 100644 main.css diff --git a/index.html b/index.html index ae4597c..31aef26 100644 --- a/index.html +++ b/index.html @@ -1,50 +1,90 @@ + Form-Final - +
- Step 1: Your Details +

Step 1: Your Details

+
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+ + - -
- -
- -
- Step 2: Delivery Address +

Step 2: Delivery Address

+ +
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
- -
- -
- -
+ + +
- step 3: Card Details +

Step 3: Card Details

+ +
    +
  • + + + + + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+ - - - - - - -
@@ -52,6 +92,7 @@
- + + \ No newline at end of file diff --git a/main.css b/main.css new file mode 100644 index 0000000..2cb3bb0 --- /dev/null +++ b/main.css @@ -0,0 +1,11 @@ +form { + background-color: rgba(125, 197, 92, 0.849); +} + +fieldset { + border: none; +} + +ul { + list-style-type: none; +} \ No newline at end of file From 87f1059fbecc2d4eec4b1e2cbdc360c425aaee9d Mon Sep 17 00:00:00 2001 From: Nick Satinover Date: Thu, 3 Dec 2020 22:15:52 -0500 Subject: [PATCH 3/7] button out of place, input to be align center --- index.html | 173 ++++++++++++++++++++++++++++------------------------- main.css | 60 ++++++++++++++++++- 2 files changed, 148 insertions(+), 85 deletions(-) diff --git a/index.html b/index.html index 31aef26..a41eebc 100644 --- a/index.html +++ b/index.html @@ -10,89 +10,96 @@ -
-
- -

Step 1: Your Details

-
    -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
- - - - -
-
- -

Step 2: Delivery Address

- -
    -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
- - - - - -
-
- -

Step 3: Card Details

- -
    -
  • - - - - - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
- - - -
- - - - -
- +
+
+
+ + Step 1: Your Details +
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+ +
+
+ + Step 2: Delivery Address + +
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+ +
+
+ + Step 3: Card Details + +
    +
  • + + + +
      +
    • + + +
      • +
    • + + +
      • +
    • + + +
      • +
    + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+ +
+ +
+ +
+ + + +
+
\ No newline at end of file diff --git a/main.css b/main.css index 2cb3bb0..c8c6565 100644 --- a/main.css +++ b/main.css @@ -1,3 +1,13 @@ +.container { + max-width: 500px; + margin: auto; +} + +#cardOptions { + margin: 0; + padding: 0; +} + form { background-color: rgba(125, 197, 92, 0.849); } @@ -7,5 +17,51 @@ fieldset { } ul { - list-style-type: none; -} \ No newline at end of file + list-style-type: none; + /* display: flex; + flex-direction: column; + */ +} + + + +li { + border: 1px white solid; + padding: 10px; + background-color: rgba(166, 245, 129, 0.849); + +} + +legend { + font-weight: bold; +} + +.centerAlign { + margin: 0 50%; + display: inline-block; + width: max-content; + /* border: solid black 1px; */ +} + +button { + background-color: rgba(18, 53, 2, 0.849); + display: inline-block; + vertical-align: middle; + border-radius: 50px ; + padding: 10px; + } + +#cardType { + display: block; + margin: 5px 0; +} + +.creditCards { + border: none; + display: inline; + justify-content: left; + margin: 0 20px 0 0; +} + + + From 7fab4682b8a70e1b7bc5a7ad863bec5a7c8f0619 Mon Sep 17 00:00:00 2001 From: Nick Satinover Date: Thu, 3 Dec 2020 22:37:24 -0500 Subject: [PATCH 4/7] added placeholder to nameOnCard --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index a41eebc..dc51a86 100644 --- a/index.html +++ b/index.html @@ -86,7 +86,7 @@
  • - +
    • From 29549b874550a9f52e217f5019c10995dd1b678a Mon Sep 17 00:00:00 2001 From: Nick Satinover Date: Fri, 4 Dec 2020 00:05:14 -0500 Subject: [PATCH 5/7] completed --- index.html | 2 +- main.css | 63 +++++++++++++++++++++++++++++++++++++++--------------- 2 files changed, 47 insertions(+), 18 deletions(-) diff --git a/index.html b/index.html index dc51a86..cbd71df 100644 --- a/index.html +++ b/index.html @@ -86,7 +86,7 @@
  • - +
    • diff --git a/main.css b/main.css index c8c6565..f38cc2e 100644 --- a/main.css +++ b/main.css @@ -3,10 +3,7 @@ margin: auto; } -#cardOptions { - margin: 0; - padding: 0; -} + form { background-color: rgba(125, 197, 92, 0.849); @@ -17,43 +14,71 @@ fieldset { } ul { + padding: 0; list-style-type: none; - /* display: flex; - flex-direction: column; - */ + display: flex; + flex-direction: column; } - - li { border: 1px white solid; + border-radius: 5px; + margin: 2px 0; padding: 10px; background-color: rgba(166, 245, 129, 0.849); - + text-align: center; } legend { font-weight: bold; + font-family: Georgia, 'Times New Roman', Times, serif +} + +li label { + float: left; +} + +input[type="text"], +input[type="number"] { + width: 150px; + float: right; + margin-right: 30%; +} + +#user_address { + height: 4em; } .centerAlign { - margin: 0 50%; - display: inline-block; + margin: 0 auto; + display: block; width: max-content; + text-align: center; /* border: solid black 1px; */ } + button { background-color: rgba(18, 53, 2, 0.849); - display: inline-block; - vertical-align: middle; border-radius: 50px ; padding: 10px; + color: white; + width: 150%; + border: none; } - + + #cardOptions { + margin: 0; + padding: 0; + display: flexbox; + flex-direction: row; +} + #cardType { - display: block; - margin: 5px 0; + display: block; + padding: 10px 0; + float: none; + text-align: left; } .creditCards { @@ -63,5 +88,9 @@ button { margin: 0 20px 0 0; } +.creditCards label { + float: none; +} + From d6babe1230d0b729c017aed49b6f5081c220944a Mon Sep 17 00:00:00 2001 From: Nick Satinover Date: Fri, 4 Dec 2020 00:08:05 -0500 Subject: [PATCH 6/7] completed2 --- main.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/main.css b/main.css index f38cc2e..917a0dd 100644 --- a/main.css +++ b/main.css @@ -40,9 +40,10 @@ li label { input[type="text"], input[type="number"] { - width: 150px; + width: 200px; + max-width: 100%; float: right; - margin-right: 30%; + margin-right: 25%; } #user_address { From 7b87058ca120aa2b205d9f978f569fec6db115aa Mon Sep 17 00:00:00 2001 From: Nick Satinover Date: Fri, 4 Dec 2020 00:12:08 -0500 Subject: [PATCH 7/7] completed3 --- main.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/main.css b/main.css index 917a0dd..b2188a3 100644 --- a/main.css +++ b/main.css @@ -29,6 +29,12 @@ li { text-align: center; } + +input { + border-radius: 2px; + border: none; +} + legend { font-weight: bold; font-family: Georgia, 'Times New Roman', Times, serif @@ -38,6 +44,7 @@ li label { float: left; } + input[type="text"], input[type="number"] { width: 200px;