keep moving forward

Tduncan14 · Tduncan14 · commit 3b3f8225b8af · 2024-02-29T13:34:10.000-08:00
diff --git a/steps/index.html b/steps/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="./style.css" />
+</head>
+
+<body>
+
+    <div class="container">
+        <div class="progress-container">
+            <div class="progress" id="progress">
+
+            </div>
+            <div class="circle active">1</div>
+            <div class="circle ">2</div>
+            <div class="circle ">3</div>
+            <div class="circle ">4</div>
+        </div>
+    </div>
+
+    <button class="btn" id="prev" disabled></button>
+    <button class="btn" id="next"></button>
+
+    <script src="./script.js"></script>
+</body>
+
+</html>
diff --git a/steps/script.js b/steps/script.js
diff --git a/steps/style.css b/steps/style.css
@@ -0,0 +1,72 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+
+
+body {
+    display: flex;
+    background-color: #f6f7fb;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+}
+
+.container {
+    text-align: center;
+}
+
+
+.progress-container {
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+    margin-bottom: 30px;
+    max-width: 100%;
+    width: 350px;
+}
+
+.progress-container::before {
+    content: '';
+    background-color: #e0e0e0;
+    position: absolute;
+    top: 50%;
+    left: 0;
+    height: 4px;
+    width: 100%;
+    z-index: -1;
+    transform: translateY(-50%);
+}
+
+
+.progress {
+    background-color: #3498db;
+    position: absolute;
+    top: 50%;
+    left: 0;
+    height: 4px;
+    width: 0%;
+    z-index: -1;
+    transform: translateY(-50%);
+    transition: 0.4s ease;
+}
+
+.circle {
+    background-color: #fff;
+    color: #999;
+    border-radius: 50%;
+    height: 30px;
+    width: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 3px solid #303030;
+    transition: .4s ease;
+}
+
+.circle.active {
+    border-color: #3498db;
+}
