init'

assets/sass/components/_timeline.scss

@@ -0,0 +1,133 @@
+/* Timeline */
+
+.timeline {
+  position: relative;
+  max-width: 1200px;
+  margin: 100px auto;
+
+  &::after {
+    content: "";
+    position: absolute;
+    width: 6px;
+    height: 100%;
+    background: #4f5d73;
+    top: 0;
+    left: 50%;
+    margin-left: -3px;
+    z-index: 1;
+  }
+}
+
+.container {
+  padding: 10px 50px;
+  position: relative;
+  width: 50%;
+
+  .timeline-img {
+    width: 100%;
+  }
+
+  .timeline-icon {
+    position: absolute;
+    width: 10%;
+    border-radius: 50%;
+    top: 61.5%;
+    z-index: 10;
+  }
+
+  &:nth-child(odd) {
+    left: 0;
+
+    .timeline-icon {
+      right: -5%;
+    }
+  }
+
+  &:nth-child(even) {
+    left: 50%;
+
+    .timeline-icon {
+      left: -5%;
+    }
+  }
+}
+
+.text-box {
+  padding: 20px;
+  border: #4f5d73 solid 3px;
+  position: relative;
+  border-radius: 6px;
+
+  h2 {
+    font-weight: 600;
+    margin-bottom: 0;
+  }
+
+  small {
+    display: inline-block;
+    margin-bottom: 15px;
+  }
+}
+
+.arrow {
+  height: 0;
+  width: 0;
+  position: absolute;
+  top: 28px;
+  z-index: 1;
+  border-top: 15px solid transparent;
+  border-bottom: 15px solid transparent;
+
+  &.left-arrow {
+    border-left: 15px solid #4f5d73;
+    right: -15px;
+  }
+
+  &.right-arrow {
+    border-right: 15px solid #4f5d73;
+    left: -15px;
+  }
+}
+
+@include breakpoint("<=small") {
+  .timeline {
+    margin: 50px auto;
+
+    &::after {
+      left: 31px;
+    }
+  }
+
+  .container {
+    width: 100%;
+    padding-left: 80px;
+    padding-right: 25px;
+
+    &:nth-child(even) {
+      left: 0;
+    }
+
+    &:nth-child(odd) .timeline-icon,
+    &:nth-child(even) .timeline-icon {
+      left: 16px;
+      top: 51.5%;
+    }
+  }
+
+  .text-box {
+    font-size: 13px;
+
+    small {
+      margin-bottom: 10px;
+    }
+
+    .arrow {
+      &.left-arrow,
+      &.right-arrow {
+        border-right: 15px solid #4f5d73;
+        border-left: 0;
+        left: -17px;
+      }
+    }
+  }
+}