sourcecode for the lines we use in the jobs part

9 years ago · 350fdd2818
1 changed files with 77 additions and 0 deletions
--- a/verticaltimeline.html
+++ b/verticaltimeline.html
@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Notification Bar</title>
+    <link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
+    <style type="text/css">
+        .container {
+            padding: 20px;
+        }
+        .notificationBar {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+            position: relative;
+        }
+        .notificationBar li {
+            margin-top: 60px;
+        }
+        .notificationBar li div{
+            margin-left: 50px;
+            margin-top: -30px;
+            border: 1px solid #ddd;
+            padding: 10px;
+            background-color: white;
+
+        }
+        .notificationBar li i {
+            width: 30px;
+            height: 30px;
+            display: block;
+            text-align: center;
+            line-height: 30px;
+            border: 1px solid #ddd;
+            border-radius: 50%;
+            background-color: white;
+        }
+        .notificationBar li i:after {
+            content: '';
+            width: 40px;
+            height: 1px;
+            position: absolute;
+            background-color: #ddd;
+            margin-top: 15px;
+            z-index: -1;
+        }
+        .notificationBar:after {
+            content: '';
+            width: 1px;
+            height: 100%;
+            background-color: #ddd;
+            position: absolute;
+            top: 4px;
+            left: 15px;
+            z-index: -1;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <ul class="notificationBar">
+            <li>
+                <i class="ion-checkmark"></i>
+                <div>Third notification</div>
+            </li>
+            <li>
+                <i class="ion-paper-airplane"></i>
+                <div>Second notification</div>
+            </li>
+            <li>
+                <i class="ion-plus"></i>
+                <div>First notification</div>
+            </li>
+        </ul>
+    </div>
+
+</body>
+</html>