<!DOCTYPE html> <html> <head> <style> .block { position:relative; display: flex; align-items: flex-start; margin: 0; padding: 12px 20px; border: 0; border-radius: 5px; } .block > * { padding:10px 0 10px 10px; } .block > *:last-child { padding-right: 10px; } .block__hit-area { width:100%; } .block--bordered { border:1px solid #ddd; } input[type='radio'] { appearance: none; display:block; position:relative; margin:0; padding:0; border:0; width:0; height:0; } input[type='radio'] + * label { position: relative; padding-left:50px; } input[type='radio'] + * label::before, input[type='radio'] + * label::after { content: " "; display: block; position: absolute; top: 10px; left: 10px; width: 17px; height: 17px; border: 2px solid #D2D2D1; border-radius: 20px; } input[type='radio']:checked + * label::before { border:2px solid #1565C0; } input[type='radio'] + * label::after { background:#1565C0; border:2px solid #1565C0; opacity:0; transform:scale(1); transition: opacity 0.4s, transform 0.4s; } input[type='radio']:checked + * label::after { opacity:1; transform:scale(0.65); } input[type='radio']:checked + * { background: #F8F8F6; } input[type='checkbox'] { appearance: none; display:block; position: relative; margin:0; padding:0; border:0; width:0; height:0; } input[type='checkbox'] + label { padding-left:30px; } input[type='checkbox']::before { content:" "; display:block; box-sizing: border-box; width:22px; height:22px; border:2px solid #aaa; border-radius:3px; background:#ccc; } input[type='checkbox']:checked::before { border:2px solid #0A58B2; background:#1565C0; } input[type='checkbox']::after { content: " "; display: block; position: absolute; width: 10px; height: 5px; border-bottom: 3px solid #fff; border-left: 3px solid #fff; transform: rotate(-45deg); left: 5px; top: 10px; opacity:0; transition:opacity 0.4s, top 0.4s; } input[type='checkbox']:checked::after { opacity:1; top: 5px; } </style> <!-- progress bar --> <style> .progress { position:relative; display:block; margin:0; padding:0; border:0; font-size:0; } .progress::before, .progress::after { content:" "; display: block; position:absolute; top:0; left:0; width:100%; height:12px; border-radius:20px; background:tan; } .progress::after { background:green; } .progress > * { position:relative; display:inline-block; width:20%; padding:40px 0 0 0; margin:6px 0 0 0; list-style-type: none; font-size:13px; text-align:center; } .progress--stage-1::after{ width:10%; } .progress--stage-2::after{ width:30%; } .progress--stage-3::after{ width:50%; } .progress--stage-4::after{ width:70%; } .progress--stage-5::after{ width:100%; } .progress--stage-1 > *:nth-child(1)::before, .progress--stage-2 > *:nth-child(2)::before, .progress--stage-3 > *:nth-child(3)::before, .progress--stage-4 > *:nth-child(4)::before, .progress--stage-5 > *:nth-child(5)::before { content:" "; display: block; position:absolute; top:0; left:50%; width:30px; height:30px; border-radius:50px; background:green; transform:translate(-50%, -50%); } .progress--stage-1 > *:nth-child(1), .progress--stage-2 > *:nth-child(2), .progress--stage-3 > *:nth-child(3), .progress--stage-4 > *:nth-child(4), .progress--stage-5 > *:nth-child(5) { font-weight:900; } </style> <style> @import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;300;600;900&display=swap'); .txt--size-micro{ font-size: 12px; line-height:24px; } .txt--size-small{ font-size: 14px; line-height:24px; } .txt--size-copy{ font-size:16px; line-height:24px; } .txt--size-h2{ font-size:24px; line-height:28px; } .txt--size-h1{ font-size:32px; line-height:48px; } .txt--green-darken-01{ color: #4B6451; } .txt--wgt-light{ font-family:"Nunito Sans"; font-weight:100; } .txt--wgt-normal{ font-family:"Nunito Sans"; font-weight:300; } .txt--wgt-bold{ font-family:"Nunito Sans"; font-weight:600; } .txt--wgt-black{ font-family:"Nunito Sans"; font-weight:900; } .txt--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; } </style> </head> <body> <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> <li class="txt--wgt-normal txt--size-copy">Shipping Method</li> <li class="txt--wgt-normal txt--size-copy">Confirmation</li> <li class="txt--wgt-normal txt--size-copy">Print Receipt</li> </ul> <form> <input type="checkbox" id="bool-1"/> <label for="bool-1"> Please send me the daily devotional and program link from Truth For Life with Alistair Begg. </label> <div class="txt--size-h2 txt--wgt-black gap--lg">Review Your Order</div> <div class="txt--size-copy txt--wgt-black txt--uppercase gap--sm">Payment Method</div> <div class="block block--bordered gap--xs"> <div class="txt--size-copy txt--wgt-bold">Credit Card</div> <a class="txt--green-darken-01" href="/">Change</a> </div> <input id="check-1" type="radio" name="slot-1" value="option-1"/> <div class="block"> <label class="block__hit-area" for="check-1"> <span class="txt--size-copy txt--wgt-bold">Credit Card</strong><br> <span class="txt--size-copy txt--wgt-normal">Credit Card</span><br> <span class="txt--size-copy txt--wgt-normal">Credit Card</span><br> <span class="txt--size-copy txt--wgt-normal">Credit Card</span><br> <span class="txt--size-copy txt--wgt-normal">Credit Card</span> </label> <a class="block__auxillary" href="/">Change</a> </div> <input id="check-2" type="radio" name="slot-1" value="option-2"/> <div class="block"> <label class="block__hit-area" for="check-2"> <strong>Paypal</strong><br> <span>also good</span> </label> <a class="block__auxillary" href="/">Change</a> </div> <div class="txt--size-h2 txt--wgt-black">Shipping Information</div> <div class="txt--size-copy txt--wgt-black txt--uppercase">Shipping Information</div> <div class="block block--bordered"> <div class="block__hit-area"> <div class="txt--size-copy txt--wgt-bold">Shell Long TP Check</div> <div class="txt--size-copy txt--wgt-normal"> 8759 Cardinal Court<br> Windmere, FL 34786<br> US </div> <div class="txt--size-copy txt--wgt-normal"> 8759 Cardinal Court<br> Windmere, FL 34786<br> US </div> </div> <a class="block__auxillary" href="">Change</a> </div> </form> </body> </html>