From c00c4b5ec78c8c50bacd09a6d984beaa16463ce6 Mon Sep 17 00:00:00 2001
From: TreetopFlyer <seth111@gmail.com>
Date: Fri, 10 Sep 2021 17:16:18 -0400
Subject: [PATCH] progress bar

---
 index.html | 72 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 72 insertions(+)
diff --git a/index.html b/index.html
index 185993d..5c43586 100644
--- a/index.html
+++ b/index.html
@@ -136,7 +136,69 @@
             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>
@@ -164,8 +226,18 @@
         .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"/>
