Very simple notification demo

Developer
Carlin Scuderi
Size
3,340 Kb
Views
48,576
  1. Very simple notification demo Previews
  2. Very simple notification demo HTML Codes
  3. Very simple notification demo CSS Codes
  4. Very simple notification demo JS Codes

How do I make an very simple notification demo?

What is a very simple notification demo? How do you make a very simple notification demo? This script and codes were developed by Carlin Scuderi on 12 August 2022, Friday.

Very simple notification demo Previews
IQ Test

Very simple notification demo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Very simple notification demo</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>	<header>	<h1>Simple notification demo</h1>	<p>Click the button below to show the notification.</p>	</header>	<div class="body">	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate dolorem blanditiis tempore. Repudiandae commodi quia, facere excepturi sed dolorem enim sapiente, nam consectetur aliquid ullam deserunt animi qui ducimus deleniti. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate dolorem blanditiis tempore. Repudiandae commodi quia, facere excepturi sed dolorem enim sapiente, nam consectetur aliquid ullam deserunt animi qui ducimus deleniti?</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate dolorem blanditiis tempore. Repudiandae commodi quia, facere excepturi sed dolorem enim sapiente, nam consectetur aliquid ullam deserunt animi qui ducimus deleniti?</p>	<button class="js-notify">Notify!</button>	</div>
<div class="notification">	<h2>Hey, look at this!</h2>	<button>&times;</button>
</div> <script src="js/index.js"></script>
</body>
</html>

Very simple notification demo - Script Codes CSS Codes

html { background: #512da8; line-height: 1.4;
}
header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; text-align: center; color: white; padding: 20px 0; font-size: 120%; text-shadow: 0 2px 0 black;
}
.body { background: white; padding: 30px; max-width: 800px; margin: 0 auto; box-shadow: 10px 10px 0px #030207;
}
.body p:last-child { margin-bottom: 0;
}
h1 { margin: 0;
}
button { position: relative; top: -5px; left: -5px; text-align: center; display: block; margin: 0 auto; background: #CDDC39; padding: 15px; font-size: 120%; border: none; box-shadow: 5px 5px 0 #030207; -webkit-transition: .1s; transition: .1s;
}
button:active { top: 0px; left: 0px; box-shadow: 0 0 0 #030207;
}
.notification { position: fixed; bottom: 15px; left: 15px; background: rgba(0, 0, 0, 0.3); color: white; padding: 30px; text-align: center; -webkit-transition: .5s; transition: .5s; opacity: 0; -webkit-transform: translateY(100%); transform: translateY(100%);
}
.notification button { position: absolute; top: 0; left: auto; right: 0; background: transparent; box-shadow: none; color: white; -webkit-transition: none; transition: none;
}
.notification a { color: white;
}
.notification.visible { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);
}

Very simple notification demo - Script Codes JS Codes

"use strict";
var notifyBtn = document.querySelector(".js-notify");
var notification = document.querySelector(".notification");
var notifyClose = document.querySelector(".notification button");
notifyBtn.addEventListener("click", function () {	notification.classList.add("visible");
});
notifyClose.addEventListener("click", function () {	notification.classList.remove("visible");
});
Very simple notification demo - Script Codes
Very simple notification demo - Script Codes
Home Page Home
Developer Carlin Scuderi
Username carlinscuderi
Uploaded August 12, 2022
Rating 3
Size 3,340 Kb
Views 48,576
Do you need developer help for Very simple notification demo?

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!

Carlin Scuderi (carlinscuderi) Script Codes
Name
Team Canada World Cup of Hockey
Accessible floating labels
Greensock tests
Handy project delta
Client software demo 2
Simple share buttons, no iframes
SVG clipping mask test
Fork and fix 01
Input form with progress bar
CSS mixed blending modes playground
Create amazing blog posts 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!