RWP Notifications

Developer
Adam Lowenthal
Size
2,999 Kb
Views
16,192
  1. RWP Notifications Previews
  2. RWP Notifications HTML Codes
  3. RWP Notifications CSS Codes

How do I make an rwp notifications?

What is a rwp notifications? How do you make a rwp notifications? This script and codes were developed by Adam Lowenthal on 12 October 2022, Wednesday.

RWP Notifications Previews
IQ Test

RWP Notifications - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>RWP Notifications</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="notification"> <div class="notification--child notification--error"> <div class="notification__icon"> <i class="fa fa-times"></i> </div> <div class="notification__text"> <span class="notification__type">Error: </span>You need to enter info... </div> <div class="notification--close"> <a href="#"> <i class="fa fa-times-circle"></i> </a> </div> </div> <div class="notification--child notification--warning"> <div class="notification__icon"> <i class="fa fa-exclamation"></i> </div> <div class="notification__text"> <span class="notification__type">Warning: </span>You need to enter this is a need to enter this is a test... </div> <div class="notification--close"> <a href="#"> <i class="fa fa-times-circle"></i> </a> </div> </div> <div class="notification--child notification--success"> <div class="notification__icon"> <i class="fa fa-check"></i> </div> <div class="notification__text"> <span class="notification__type">Success: </span>You did something right! </div> <div class="notification--close"> <a href="#"> <i class="fa fa-times-circle"></i> </a> </div> </div> <div class="notification--child notification--info"> <div class="notification__icon"> <i class="fa fa-info"></i> </div> <div class="notification__text"> <span class="notification__type">Info: </span> Just in case you didn't know </div> <div class="notification--close"> <a href="#"> <i class="fa fa-times-circle"></i> </a> </div> </div> </div> <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
</body>
</html>

RWP Notifications - Script Codes CSS Codes

/* ====== REMOVE BELOW ====== */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800);
body { font-family: 'Open Sans', sans-serif;
}
/* ====== REMOVE ABOVE ====== */
.notification { position: fixed; width: 600px; padding: 1em; top: 0; right: 0; color: white; letter-spacing: .5px; font-size: 12px; list-style: none; padding: 0; margin: 1em;
}
.notification__type { text-transform: uppercase; font-weight: 700;
}
.notification--error .notification__icon { background: #b52b27;
}
.notification--error .notification__text { background: #d9534f;
}
.notification--warning .notification__icon { background: #df8a13;
}
.notification--warning .notification__text { background: #f0ad4e;
}
.notification--warning :hover .notification--close { display: block;
}
.notification--success .notification__icon { background: #3d8b3d;
}
.notification--success .notification__text { background: #5cb85c;
}
.notification--info .notification__icon { background: #28a1c5;
}
.notification--info .notification__text { background: #5bc0de;
}
.notification .notification--child { margin: 1em 0;
}
.notification .notification--child:first-child { margin: 0;
}
.notification .notification--child .notification--close { display: none;
}
.notification .notification--child:hover .notification--close { display: block;
}
.notification__icon { padding: 1em; float: left; margin-right: 1em; text-align: center; width: 40px;
}
.notification__text { padding: 1em;
}
.notification--close a { color: white; opacity: .4; font-size: 16px; float: right; margin-top: -33px; margin-right: 5px;
}
.notification--close a:hover { opacity: 1;
}
RWP Notifications - Script Codes
RWP Notifications - Script Codes
Home Page Home
Developer Adam Lowenthal
Username alowenthal
Uploaded October 12, 2022
Rating 4.5
Size 2,999 Kb
Views 16,192
Do you need developer help for RWP Notifications?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Adam Lowenthal (alowenthal) Script Codes
Name
Mobile First Menu
Slider
Flexbox Responsive Grid Tiles
Google Maps Directions Sidebar
Spinning Animated Vinyl Record
Sticky Footer
Blog List -- BnC
Month Shows
Responsive Flexbox Table
Webster Hall Show Tickets
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!