| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment