Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div class="notification">
- <img src="" alt="">
- <div class="message">
- </div>
- <div class="buttons">
- </div>
- </div>
- <div class="notification">
- <img src="http://cl.ly/J49B/3951818241085781941.png" alt="Calendar icon">
- <div class="message">
- <h2>Follow the white rabbit</h2>
- <p>90 Minutes Ago</p>
- </div>
- <div class="buttons">
- <a href="#">Close</a>
- <a href="#">Snooze</a>
- </div>
- </div>
- * {
- padding: 0;
- margin: 0;
- }
- body {
- background:#222 url(http://cl.ly/J3q4/universe.jpg);
- }
- .notification {
- height: 100px;
- width: 410px;
- margin: 20px;
- border-radius: 10px;
- position: relative;
- }
- .notification {
- height: 100px;
- width: 410px;
- margin: 20px;
- border-radius: 10px;
- position: relative;
- color: #4d4d4d;
- font-family: Helvetica, Arial, sans-serif;
- }
- .notification {
- height: 100px;
- width: 410px;
- margin: 20px;
- border-radius: 10px;
- position: relative;
- color: #4d4d4d;
- font-family: Helvetica, Arial, sans-serif;
- @include background-image(linear-gradient(rgba(255,255,255,0.9), rgba(235,235,235,0.9)));
- -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
- box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
- }
- .notification img {
- float: left;
- padding: 10px 15px 0 15px;
- width: 60px;
- }
- .notification h2 {
- padding: 20px 0 0 0px;
- font: bold 18px Myriad, Helvetica, Arial, sans-serif;
- text-shadow: 0px 2px 1px #fff;
- }
- .notification p {
- font: bold 13px Myriad, Helvetica, Arial, sans-serif;
- text-shadow: 0px 1px 1px #fff;
- }
- .buttons a {
- display: block;
- width: 60px;
- margin: 5px;
- padding: 8px;
- position: absolute;
- border: 1px solid #999;
- border-radius: 5px;
- color: #222;
- font: 13px Helvetica, Arial, sans-serif;
- text-align: center;
- text-decoration: none;
- -webkit-box-shadow: 0px 1px 1px #fff;
- box-shadow: 0px 1px 1px #fff;
- @include background-image(linear-gradient(rgba(255,255,255,0.5), rgba(235,235,235,0.5)));
- }
- .buttons a:hover {
- @include background-image(linear-gradient(rgba(255,255,255,1), rgba(235,235,235,1)));
- }
- .buttons a:nth-child(1) {
- right: 10px;
- top: 8px;
- }
- .buttons a:nth-child(2) {
- right: 10px;
- top: 50px;
- }
- $(function() {
- $( ".notification" ).draggable();
- });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement