From 3e70ed304e011d37b3e38f23a1d41476c8ab9606 Mon Sep 17 00:00:00 2001
From: TreetopFlyer <seth111@gmail.com>
Date: Mon, 13 Sep 2021 17:15:41 -0400
Subject: [PATCH] giving form

---
 index.html | 74 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 73 insertions(+), 1 deletion(-)
diff --git a/index.html b/index.html
index 5c43586..e697d6f 100644
--- a/index.html
+++ b/index.html
@@ -22,7 +22,6 @@
         {
             padding-right: 10px;
         }
-
         .block__hit-area
         {
             width:100%;
@@ -230,6 +229,79 @@
 </head>
 <body>
 
+    <style>
+        .giving
+        {
+            display:inline-block;
+            font-size:0;
+        }
+        .giving label, .giving *
+        {   
+            display:inline-block;
+            position:relative;
+            box-sizing: border-box;
+            height:44px;
+            line-height:44px;
+            padding: 0 15px 0 15px;
+            font-size: 14px;
+            vertical-align:top;
+        }
+        .giving label
+        {
+            margin:0;
+            border: 1px solid #DBDCD4;
+            border-right:0;
+            border-top-left-radius: 5px;
+            border-bottom-left-radius: 5px;
+
+            background: #F1F1EE;
+
+            color:black;
+            content:"$";
+            font-weight:900;
+            text-align:center;
+        }
+        .giving *
+        {
+            margin: 0;
+            border: 0;
+            border-right: 1px solid #4B6451;
+            border-radius: 0;
+            background: #5E7D65;
+            color: white;
+            font-weight: 900; 
+        }
+        .giving input
+        {
+            margin: 0;
+            border: 1px solid #DBDCD4;
+            padding:0 10px 0 10px;
+            background: white;
+            color: black;
+            font-weight: lighter;
+        }
+        .giving *:last-child
+        {
+            border-top-right-radius: 5px;
+            border-bottom-right-radius: 5px;
+        }
+    </style>
+    <div class="giving">
+        <label for="amount">$</label>
+        <input id="amount" type="number" value="100"/>
+        <button>$20 </button>
+        <button>$30 </button>
+        <button>$50 </button>
+        <button>$100</button>
+    </div>
+
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+
     <ul class="progress progress--stage-2">
         <li class="txt--wgt-normal txt--size-copy">Shopping Cart</li>
         <li class="txt--wgt-normal txt--size-copy">Payment Options</li>
