<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<div class="notifications">
<div class="notify gr">
<div class="circle">
<i class="icon-ok"></i>
</div>
<div class="info">
<span>Download Complete</span>
<span>165MB <a href="#">Codepen.io</a> 1:41 PM</span>
</div>
</div>
<div class="notify rd">
<div class="circle">
<i class="icon-ok"></i>
</div>
<div class="info">
<span>Download Complete</span>
<span>165MB <a href="#">Codepen.io</a> 1:41 PM</span>
</div>
</div>
<div class="notify or">
<div class="circle">
<i class="icon-ok"></i>
</div>
<div class="info">
<span>Download Complete</span>
<span>165MB <a href="#">Codepen.io</a> 1:41 PM</span>
</div>
</div>
<div class="notify bl">
<div class="circle">
<i class="icon-ok"></i>
</div>
<div class="info">
<span>Download Complete</span>
<span>165MB <a href="#">Codepen.io</a> 1:41 PM</span>
</div>
</div>
</div>
@import "compass/css3";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600);
$dblue: hsl(202, 56%, 30%);
$green: hsl(143, 51%, 45%);
$white: hsl(0, 0%, 96%);
$red: hsl(12, 85%, 47%);
$orange: hsl(24, 54%, 53%);
body {
background-color: $dblue;
font-family: 'Open Sans', sans-serif;
}
.notifications {
position: absolute;
right: 10px;
top: 10px;
}
.notify {
width: 300px;
height: 70px;
background-color: $white;
border-radius: 7px;
box-shadow: 0 1px 4px darken($dblue, 5%);
overflow: hidden;
cursor: pointer;
margin: 10px 0;
}
.notify:first-child {
margin: 0 0 10px 0;
}
.circle {
width: 28px;
height: 20px;
display: block;
border-radius: 100%;
transform: translate(17px, 17px);
color: $white;
padding: 10px 0 10px 13px;
}
.gr > .circle { background-color: $green; }
.gr > .info span:first-child { color: $green; }
.rd > .circle { background-color: $red; }
.rd > .info span:first-child { color: $red; }
.or > .circle { background-color: $orange; }
.or > .info span:first-child { color: $orange; }
.bl > .circle { background-color: $dblue; }
.bl > .info span:first-child { color: $dblue; }
.info {
width: 230px;
height: 70px;
transform: translate(70px, -35px);
padding: 10px;
}
.info span:first-child {
display: block;
color: $green;
font-weight: 600;
font-size: 15px;
}
.info span:last-child {
color: hsl(0, 0%, 57%);
font-size: 13px;
}
.info span a {
color: hsl(0, 0%, 33%);
text-decoration: none;
font-weight: 600;
}
View Compiled
$('.notify').click( function() {
$(this).fadeOut();
});
This Pen doesn't use any external CSS resources.