From 50252d542422d54d3494492fe2316c54cccbccee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yann=20M=C3=B6lle?= <hxcde@noreply.localhost>
Date: Mon, 29 May 2023 15:45:59 +0200
Subject: [PATCH] =?UTF-8?q?=E2=80=9Ecss/line.css=E2=80=9C=20hinzuf=C3=BCge?=
 =?UTF-8?q?n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/line.css | 94 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 94 insertions(+)
 create mode 100644 css/line.css

diff --git a/css/line.css b/css/line.css
new file mode 100644
index 0000000..ec8fee2
--- /dev/null
+++ b/css/line.css
@@ -0,0 +1,94 @@
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700");
+
+$primary: #007EA7;
+
+*, *:before, *:after {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: "Open Sans", sans-serif;
+  background-color: #001829;
+}
+
+.wrapper {
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.steps {
+  max-width: 300px;
+  margin: 0 auto;
+}
+
+.step {
+  display: flex;
+  position: relative;
+
+  &:after {
+    content: "";
+    position: absolute;
+    left: 15px;
+    top: 32px;
+    height: 0;
+    width: 2px;
+    background-color: $primary;
+  }
+
+  .info {
+    margin: 8px 0 20px;
+  }
+
+  .title {
+    font-size: 16px;
+    font-weight: 600;
+    margin: 0 0 8px;
+    color: white;
+  }
+
+  .text {
+    font-size: 12px;
+    color: rgba(white, 0.7);
+    padding-bottom: 0;
+    margin: 0;
+  }
+
+  &:not(:last-child) {
+    &:after {
+      height: 75%;
+    }
+   
+  }
+}
+
+.number {
+  width: 32px;
+  height: 32px;
+  background-color: transparent;
+  border-radius: 50%;
+  border: 2px solid $primary;
+  flex-shrink: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  font-size: 15px;
+  font-weight: 600;
+  margin-right: 14px;
+
+  &.completed {
+    background-color: $primary;
+  }
+
+  svg {
+    width: 16px;
+    height: 16px;
+    object-fit: contain;
+
+    path {
+      fill: white;
+    }
+  }
+}