diff --git a/index.html b/index.html index ab75a16..b0661c0 100644 --- a/index.html +++ b/index.html @@ -6,13 +6,12 @@ { position:relative; display: flex; - align-items: stretch; + align-items: flex-start; margin: 0; padding: 0; border: 0; - background:lightgrey; border-radius: 5px; } .block > * @@ -24,28 +23,43 @@ padding-right: 10px; } - .block label + .block__hit-area { width:100%; } - .block input[type='radio'] + .block--bordered { - display: block; - position: relative; - margin: 0; - appearance: none; + border:1px solid #ddd; } - .block input[type='radio']::before + + input[type='radio'] + { + appearance: none; + display:block; + margin:0; + padding:0; + border:0; + width:0; + height:0; + } + input[type='radio'] + .block label + { + position: relative; + padding-left:50px; + } + input[type='radio'] + .block label::before { content: " "; display: block; - position: relative; + position: absolute; + top: 10px; + left: 10px; width: 17px; height: 17px; border: 2px solid #000; border-radius: 20px; } - .block input[type='radio']:checked::after + input[type='radio']:checked + .block label::after { content: " "; display: block; @@ -57,6 +71,10 @@ border-radius: 20px; background: #000; } + input[type='radio']:checked + .block + { + background:yellow; + } @@ -79,37 +97,62 @@ .text--uppercase{ text-transform: uppercase; } + .gap--lg { margin:72px 0 0 0; } + .gap--md { margin:47px 0 0 0; } + .gap--sm { margin:24px 0 0 0; } + .gap--xs { margin:12px 0 0 0; } +
-
Review Your Order
-
Payment Method
-
+
Review Your Order
+
Payment Method
+ +
Credit Card
Change
+
- -
+
- -
+ +
Shipping Information
+
Shipping Information
+
+
+
Shell Long TP Check
+
+ 8759 Cardinal Court
+ Windmere, FL 34786
+ US +
+
+ 8759 Cardinal Court
+ Windmere, FL 34786
+ US +
+
+ Change