From 9ccf05418ae37baef77d40719821a25464e4b0ff Mon Sep 17 00:00:00 2001 From: Crackncode Date: Wed, 2 Dec 2020 23:18:39 -0500 Subject: [PATCH 1/8] 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/8] 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/8] 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/8] 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/8] 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/8] 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/8] 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; From 69243a5d2835923e78211a6bab95becebf19f26d Mon Sep 17 00:00:00 2001 From: Crackncode Date: Fri, 4 Dec 2020 00:50:40 -0500 Subject: [PATCH 8/8] button fixed and a few other things like background and border etc. see notes! --- index.html | 21 ++++++++++++++------- main.css | 52 ++++++++++++++++++++++++++++++++++++++++++++++------ 2 files changed, 60 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index a41eebc..25cb52c 100644 --- a/index.html +++ b/index.html @@ -33,12 +33,15 @@
    + Step 2: Delivery Address +
    • - + +
    • @@ -60,17 +63,21 @@ -
        + + +
        • - +
        • - +
        • - +
        @@ -86,12 +93,12 @@
      • - +
      - +
    diff --git a/main.css b/main.css index c8c6565..396837d 100644 --- a/main.css +++ b/main.css @@ -1,6 +1,7 @@ .container { max-width: 500px; margin: auto; + } #cardOptions { @@ -8,19 +9,38 @@ padding: 0; } +/*-- Added white border,, still cannot figure out how to get some radius on the green form corners +Also just changed the color a bit --*/ + form { - background-color: rgba(125, 197, 92, 0.849); + background-color: rgba(141, 173, 81, 0.993); + border: 10px solid #ffffff; + border-width: 20px 20px ; + +} + +/*-- Added body to get the remainder of the page colored black --*/ + +body { + + background-color: #000000; } fieldset { border: none; + } +/*-- Added some padding to all the ul's to streatch the list boxes closer +to the sides and somehow it worked--*/ + ul { list-style-type: none; /* display: flex; flex-direction: column; */ + padding-right: 10px; + padding-left: 10px; } @@ -28,27 +48,45 @@ ul { li { border: 1px white solid; padding: 10px; - background-color: rgba(166, 245, 129, 0.849); + background-color: rgb(176, 196, 87); + border-radius: 8px; + } legend { font-weight: bold; + padding-left: 10px; /*-- this padding left pulled step 1, 2, and 3 over to the start of the boxes--*/ + + /* padding-top: 20px; --- we need to somehow apply padding to top legend only, + this is making to much space between all the lists,, + font also is looking a bit small.. possibly change to h2,3?? + kinda like you had it before we changed back to legend ---*/ } .centerAlign { - margin: 0 50%; + margin: 0 35%; display: inline-block; width: max-content; /* border: solid black 1px; */ } + +/*-- I just did some tweaking on the button, the margin is moving the button horizontally, +the padding left and right is stretching the button, height is the thickness,, +also can not figure out how to decrease the padding on the top of the button if you look at +the form-final it has a smaller gap at the top of the button --*/ button { + color: white; + text-align: center; background-color: rgba(18, 53, 2, 0.849); - display: inline-block; - vertical-align: middle; + /* display: inline-block; */ + vertical-align: 15px; border-radius: 50px ; - padding: 10px; + /* padding: 10px; */ + padding-left: 33px; + padding-right: 33px; + height: 30px; } #cardType { @@ -65,3 +103,5 @@ button { + +