From 27ca03eb4deb5fb91abb0bb86374d16bfea65c45 Mon Sep 17 00:00:00 2001 From: StephanieCzetli Date: Sun, 13 Dec 2020 20:37:44 -0500 Subject: [PATCH 1/2] 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 @@ + + + + + + + + BuyIt!Form + + + + +
+ +
+

Step 1: Your details

 +
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+
+ +
+

Step 2: Delivery Address

 +
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+
+ +
+

Step 3: Card details

 +
    +
  • +
    + + + + + + + + +
    • + +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+ + + +
+ +
+ + + + + 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%; + + } + + + + + + + From 02c2487afa61ccf47511e6cf71e14234699719a1 Mon Sep 17 00:00:00 2001 From: Genya Vedensky Date: Tue, 15 Dec 2020 21:18:12 -0500 Subject: [PATCH 2/2] some thoughts --- form.html | 202 ++++++++++++++++++++++++++++++++--------------------- style.css | 205 +++++++++++++++++++++++++++++------------------------- 2 files changed, 234 insertions(+), 173 deletions(-) diff --git a/form.html b/form.html index 6d02dbb..a7cfcd9 100644 --- a/form.html +++ b/form.html @@ -1,89 +1,131 @@ - - - - - - BuyIt!Form - - - - -
- -
-

Step 1: Your details

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

Step 2: Delivery Address

 -
    -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
-
+ + + + + BuyIt!Form + -
-

Step 3: Card details

 -
    -
  • -
    - - + + +
    +

    Step 1: Your details

     +
      +
    • + + +
      • +
    • + + +
      • +
    • + + +
      • +
    +
    - - +
    + +

    Step 2: Delivery Address

    +     +
      +
    • + + +
      • +
    • + + + +
      • +
    • + + +
      • +
    +
    - - -
    • - -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
+
+

Step 3: Card details

 +
    +
  • +
    + + - - -
+ + - - - - + + + +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • + + +
    + + + diff --git a/style.css b/style.css index a970c6f..911b773 100644 --- a/style.css +++ b/style.css @@ -1,96 +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: .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; - } - +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: .5em; - margin-bottom: .75em; - margin-left: 33%; - - } - - - - - - - +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; +}