<!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