Notifications

Developer
Cory Schadt
Size
5,304 Kb
Views
28,336
  1. Notifications Previews
  2. Notifications HTML Codes
  3. Notifications CSS Codes

How do I make an notifications?

What is a notifications? How do you make a notifications? This script and codes were developed by Cory Schadt on 19 October 2022, Wednesday.

Notifications Previews
IQ Test

Notifications - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Notifications</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="notifications"> <div class="notification alert"> <p>We have updated the Terms &amp; Conditions. <a href="#">Read new T&amp;C</a></p> <div class="actions"> <a href="#" class="btn primary">Accept</a> <a href="#" class="btn del ">Decline</a> </div> </div> <!--/notification--> <div class="notification info"> <p>Check out our New Arrivals</p> <div class="actions"> <a href="#" class="btn primary">View</a> </div> </div> <!--/notification--> <div class="notification alert"> <p>We have updated the Terms &amp; Conditions. <a href="#">Read new T&amp;C</a></p> <div class="actions"> <a href="#" class="btn primary">Accept</a> <a href="#" class="btn del ">Decline</a> </div> </div> <!--/notification--> <div class="notification info"> <p>Check out our New Arrivals</p> <div class="actions"> <a href="#" class="btn primary">View</a> </div> </div> <!--/notification--> <div class="notification alert"> <p>We have updated the Terms &amp; Conditions. <a href="#">Read new T&amp;C</a></p> <div class="actions"> <a href="#" class="btn primary">Accept</a> <a href="#" class="btn del ">Decline</a> </div> </div> <!--/notification--> <div class="notification info"> <p>Check out our New Arrivals</p> <div class="actions"> <a href="#" class="btn primary">View</a> </div> </div> <!--/notification-->
</div>
</body>
</html>

Notifications - Script Codes CSS Codes

body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
@-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; }
}
@keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; }
}
.notification:nth-child(8n + 1) { -webkit-animation-delay: 400ms; animation-delay: 400ms;
}
.notification:nth-child(8n + 2) { -webkit-animation-delay: 500ms; animation-delay: 500ms;
}
.notification:nth-child(8n + 3) { -webkit-animation-delay: 600ms; animation-delay: 600ms;
}
.notification:nth-child(8n + 4) { -webkit-animation-delay: 700ms; animation-delay: 700ms;
}
.notification:nth-child(8n + 5) { -webkit-animation-delay: 800ms; animation-delay: 800ms;
}
.notification:nth-child(8n + 6) { -webkit-animation-delay: 900ms; animation-delay: 900ms;
}
.notification:nth-child(8n + 7) { -webkit-animation-delay: 100ms; animation-delay: 100ms;
}
.notification:nth-child(8n + 8) { -webkit-animation-delay: 1100ms; animation-delay: 1100ms;
}
.notifications { margin: 0 0 2em 0;
}
.notification { padding: .75em .75em .75em 3.25em; display: flexbox; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-repeat: no-repeat; background-position: .75em 1em; background-size: 1.5em 1.5em; margin: 0 0 .75em 0; opacity: 0; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: fadeInUp; animation-name: fadeInUp;
}
.notification.info { background-color: #E5F0F1; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQyICgzNjc4MSkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+U2hhcGU8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8cGF0aCBkPSJNMTIsMiBDMTcuNTE0LDIgMjIsNi40ODYgMjIsMTIgQzIyLDE3LjUxNCAxNy41MTQsMjIgMTIsMjIgQzYuNDg2LDIyIDIsMTcuNTE0IDIsMTIgQzIsNi40ODYgNi40ODYsMiAxMiwyIFogTTEyLDAgQzUuMzczLDAgMCw1LjM3MyAwLDEyIEMwLDE4LjYyNyA1LjM3MywyNCAxMiwyNCBDMTguNjI3LDI0IDI0LDE4LjYyNyAyNCwxMiBDMjQsNS4zNzMgMTguNjI3LDAgMTIsMCBaIE05Ljk2NywxNi4wMSBDMTAuNTMxLDE0LjIyMSAxMS41OTksMTIuMDc4IDExLjc4OCwxMS41MzYgQzEyLjA2MSwxMC43NDkgMTEuNTc3LDEwLjQgMTAuMDQ4LDExLjc0NSBMOS43MDgsMTEuMTA1IEMxMS40NTIsOS4yMDggMTUuMDQzLDguNzc5IDEzLjgyMSwxMS43MTggQzEzLjA1OCwxMy41NTMgMTIuNTEyLDE0Ljc5MiAxMi4yLDE1Ljc0OCBDMTEuNzQ1LDE3LjE0MSAxMi44OTQsMTYuNTc2IDE0LjAxOSwxNS41MzcgQzE0LjE3MiwxNS43ODcgMTQuMjIyLDE1Ljg2OCAxNC4zNzUsMTYuMTU2IEMxMS44NzcsMTguNTM0IDkuMTA0LDE4Ljc0NCA5Ljk2NywxNi4wMSBMOS45NjcsMTYuMDEgWiBNMTQuNzA5LDcuODQxIEMxNC4xNzcsOC4yOTQgMTMuMzg5LDguMjg0IDEyLjk0OCw3LjgxOSBDMTIuNTA3LDcuMzU0IDEyLjU4MSw2LjYxMSAxMy4xMTIsNi4xNTggQzEzLjY0NCw1LjcwNSAxNC40MzIsNS43MTYgMTQuODczLDYuMTggQzE1LjMxMiw2LjY0NiAxNS4yNCw3LjM4OSAxNC43MDksNy44NDEgWiIgaWQ9IlNoYXBlIiBmaWxsPSIjNUZBM0EzIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4KICAgIDwvZz4KPC9zdmc+");
}
.notification.alert { background-color: #FD797B; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQyICgzNjc4MSkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+U2hhcGU8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8cGF0aCBkPSJNMTIsMiBDMTcuNTE0LDIgMjIsNi40ODYgMjIsMTIgQzIyLDE3LjUxNCAxNy41MTQsMjIgMTIsMjIgQzYuNDg2LDIyIDIsMTcuNTE0IDIsMTIgQzIsNi40ODYgNi40ODYsMiAxMiwyIFogTTEyLDAgQzUuMzczLDAgMCw1LjM3MyAwLDEyIEMwLDE4LjYyNyA1LjM3MywyNCAxMiwyNCBDMTguNjI3LDI0IDI0LDE4LjYyNyAyNCwxMiBDMjQsNS4zNzMgMTguNjI3LDAgMTIsMCBaIE0xMC41LDYgTDEzLjUsNiBMMTIuNSwxNCBMMTEuNSwxNCBMMTAuNSw2IFogTTEyLDE4LjI1IEMxMS4zMSwxOC4yNSAxMC43NSwxNy42OSAxMC43NSwxNyBDMTAuNzUsMTYuMzEgMTEuMzEsMTUuNzUgMTIsMTUuNzUgQzEyLjY5LDE1Ljc1IDEzLjI1LDE2LjMxIDEzLjI1LDE3IEMxMy4yNSwxNy42OSAxMi42OSwxOC4yNSAxMiwxOC4yNSBaIiBpZD0iU2hhcGUiIGZpbGw9IiNGRkZGRkYiIGZpbGwtcnVsZT0ibm9uemVybyI+PC9wYXRoPgogICAgPC9nPgo8L3N2Zz4="); color: #fff;
}
.notification.alert a { color: currentColor;
}
.notification p { margin: 0; font-size: .82em; -ms-flex-preferred-size: 30em; flex-basis: 30em;
}
.notification .actions { font-size: 72%; margin: .75em 0;
}
Notifications - Script Codes
Notifications - Script Codes
Home Page Home
Developer Cory Schadt
Username coryschadt
Uploaded October 19, 2022
Rating 3
Size 5,304 Kb
Views 28,336
Do you need developer help for 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!

Cory Schadt (coryschadt) Script Codes
Name
FlexBox Mixin
Vertical Slick Slider
MacBook Pro
Chair Animation
Checkbox
A Pen by Cory Schadt
Menu
Wordpress - Force publish future event
Keyframe Testing
FLEXY
Create amazing love letters 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!