1 files changed, 88 insertions, 0 deletions
diff --git a/assets/scss/components/_experience.scss b/assets/scss/components/_experience.scss
new file mode 100644
index 0000000..8071cec
--- /dev/null
+++ b/assets/scss/components/_experience.scss
@@ -0,0 +1,88 @@
+.experience {
+    &__item {
+        display: block;
+        @include avoid-break;
+        &:not(:first-child) {
+            padding-top: 1.5rem;
+        }
+    }
+
+    &__header,
+    &__subheader {
+        display: block;
+        width: 100%;
+        height: 2.4rem;
+    }
+
+    &__job {
+        position: relative;
+        transition: transform 0.2s cubic-bezier($cubic);
+
+        &:hover {
+            transform: translateX(0.5rem);
+        }
+    }
+
+    &__company,
+    &__position {
+        text-align: left;
+        width: 70%;
+        float: left;
+    }
+
+    &__company {
+        color: $color-grey-dark;
+    }
+
+    &__position {
+        text-transform: uppercase;
+        font-size: 1.3rem;
+        color: $color-grey-dark;
+    }
+
+    &__date,
+    &__place {
+        float: right;
+        text-align: right;
+        width: 30%;
+        color: $color-secondary;
+    }
+
+    &__date {
+        font-weight: 400;
+    }
+
+    &__place {
+        &::before {
+            font-family: 'Material Icons';
+            color: $color-primary;
+            font-size: 1.4rem;
+            content: 'place';
+            display: inline-block;
+            padding-right: 3px;
+            vertical-align: middle;
+            font-weight: 900;
+        }
+    }
+
+    &__bullet {
+        list-style-position: inside;
+    }
+
+    &__badges {
+        display: block;
+        text-align: right;
+        margin-top: 0.5rem;
+        margin-bottom: 0.5rem;
+    }
+
+    &__badge {
+        font-size: 0.9rem;
+        font-weight: 400;
+        display: inline-block;
+        background-color: $color-primary;
+        color: $color-primary-text;
+        border-radius: 1rem;
+        padding: 0.1rem 0.6rem;
+    }
+}