Notification panel using vanilla javascript and css

window.onload = function () {
document.querySelector(“.notification”).classList.add(“active”);
document.querySelector(“#main”).classList.add(“active”);
};

let notificationPanel = document.querySelector(“.notification”);
let mainPanel = document.querySelector(“#main”);
document.querySelector(“.btn-blue”).addEventListener(“click”, function () {
notificationPanel.classList.add(“hidden”);
mainPanel.classList.add(“hidden”);
});

window.onscroll = function () {
if (window.scrollY > 300) {
document.querySelector(“.newsletter-panel”).classList.add(“active”);
}
};

let newsletterPanel = document.querySelector(“.newsletter-panel”);
document.querySelector(“.close-panel”).addEventListener(“click”, function () {
newsletterPanel.classList.add(“hidden”);
});
@import url(“https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap”);

:root {
–blue: #007bc1;
–darkblue: #004a75;
–orange: #ff8000;
–darkorange: #cc6600;
–smokegrey: #e5e5e5;
–pcolor: #444646;
}

html {
scroll-behavior: smooth;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
font-family: “Roboto”, sans-serif;
}
i {
font-size: 20px;
color: gray;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
font-family: “Roboto”, sans-serif;
}

.container {
width: 95%;
margin: 0 auto;
}

.notification {
/* position: absolute;
position: -webkit-sticky; */
right: 0;
left: 0;
top: -100%;
transition: 2s linear;
z-index: 3;
width: 100%;
height: fit-content;
background-color: var(–smokegrey);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
display: flex;
justify-content: center;
}

.notification.active {
background-color: var(–smokegrey);
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 2;
}
.notification.hidden {
right: 0;
left: 0;
top: -105%;
transition: 3s linear;
}

.notification a {
text-decoration: none;
}

.notification-container {
position: relative;
display: flex;
text-align: left;
padding: 1rem;
width: 720px;
line-height: 20px;
}

.notification-text {
width: 80%;
}

.btn-notif {
word-wrap: normal;
outline-style: none;
padding: 10px 15px;
margin: 0;
cursor: pointer;
transition: 0.3s;
border-radius: 3px;
border-width: 0px;
transition: all 0.4s;
}

.btn-notif:hover {
opacity: 0.8;
}

.btn-blue {
text-align: center;
background: var(–blue);
color: #fff;
margin-left: 20px;
}

@media only screen and (max-width: 480px) {
.notification-container {
display: block;
}

.highlight-text {
width: 100%;
}

.slide-form {
position: relative;
}

.submit-subs {
margin-top: 10px;
width: 100%;
}

.btn-blue {
text-align: center;
background: var(–blue);
color: #fff;
margin-left: 0px;
}

.grid {
grid-template-columns: repeat(1, 25rem);
}
}

header {
margin-top: auto;
/* position: relative; */
width: 100%;
height: 100vh;
background-size: cover;
background-position: center;
background-image: linear-gradient(#007bc1, #004a75),
url(https://images.unsplash.com/photo-1587620962725-abab7fe55159?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1031&q=80);
background-blend-mode: multiply;
background-repeat: no-repeat;
}

.img-logo img {
margin: 50px 30px;
}

.hero-content {
color: #fff;
text-align: center;
}
.hero-content h1 {
margin-top: 75px;
margin-bottom: 20px;
color: #fff;
font-size: 32px;
font-weight: 400;
}

.hero-content h2 {
margin: -15px 10px 25px 10px;
color: #fff;
font-size: 30px;
font-weight: 600;
}

.hero-content p {
margin-top: -10px;
margin-bottom: 30px;
color: #fff;
font-size: 24px;
font-weight: 300;
}

@media (max-width: 360px) {
.hero-content h1 {
margin: 10px 10px 20px 10px;
color: #fff;
font-size: 30px;
font-weight: 400;
}

.hero-content h2 {
margin-top: -20px;
color: #fff;
font-size: 35px;
font-weight: 600;
}

.hero-content p {
margin: -5px 10px 20px 10px;
color: #fff;
font-size: 23px;
font-weight: 300;
}
}

.hero-content a {
padding: 15px 20px;
font-weight: bold;
color: white;
border: 2px solid white;
border-radius: 4px;
transition: all 0.4s;
text-decoration: none;
}
.hero-content a:hover {
color: var(–darkblue);
background-color: white;
}

.higlights {
padding-bottom: 50px;
background-color: var(–smokegrey);
}
.first-row {
width: 45%;
margin: 0 auto;
padding-top: 80px;
text-align: center;
}

.first-row h1 {
margin-bottom: 15px;
font-size: 27px;
color: var(–pcolor);
}
.first-row p {
font-size: 16px;
color: var(–pcolor);
}
.second-row {
margin-top: 35px;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.higlights-header {
margin-bottom: 7px;
display: flex;
justify-content: space-between;
align-items: center;
}
.higlights-item {
width: 31%;
padding: 20px;
margin: 15px 0;
border: 1px solid gray;
transition: all 0.4s;
}
.higlights-item:hover {
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
cursor: pointer;
}
.higlights-item p {
font-size: 15px;
font-weight: 500;
color: var(–pcolor);
}
.title > p {
font-size: 22px;
font-weight: 500;
color: rgb(49, 47, 47);
}
.newsletter-panel {
position: fixed;
bottom: -105%;
}
.newsletter-panel.active {
position: fixed;
bottom: 0;
left: 0;
width: 45%;
background-color: var(–blue);
opacity: 0.9;
transition: 1s linear;
z-index: 2;
}
.newsletter-panel.hidden {
bottom: -105%;
transition: 2s linear;
}
.news-close p {
width: 15px;
margin-left: auto;
margin-top: 8px;
margin-right: 8px;
font-size: 20px;
color: white;
font-weight: bold;
cursor: pointer;
}
.news-close p:hover {
color: black;
}
.news-content {
padding: 0 20px 20px 20px;
}
.news-title h3 {
font-size: 25px;
color: white;
}
.news-article p {
margin-top: 7px;
color: white;
font-size: 16px;
line-height: 25px;
}
.news-form {
margin-top: 15px;
}
form {
display: flex;
justify-content: space-between;
}
form input {
width: 80%;
padding: 10px 0;
font-size: 14px;
font-weight: bold;
border: none;
padding-left: 10px;
}
form input:focus {
outline: none;
}
form button {
font-size: 14px;
font-weight: bold;
padding: 10px;
color: white;
background-color: var(–orange);
border: none;
cursor: pointer;
transition: all 0.4s;
}
form button:hover {
background-color: var(–darkorange);
}
footer {
position: relative;
padding: 35px 0;
color: white;
text-align: center;
background-color: rgb(2, 2, 53);
}

@media (max-width: 960px) {
.brand {
text-align: center;
}
.notif-content {
width: 80%;
padding: 22px 0;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.notif-text {
width: 100%;
}
.notif-button {
margin-top: 10px;
}
.notif-button button {
padding: 12px 22px;
font-size: 18px;
}
.first-row {
width: 70%;
}
.higlights-item {
width: 45%;
}
.newsletter-panel.active {
width: 65%;
}
.news-close p {
text-align: end;
margin-right: 13px;
font-size: 30px;
font-weight: normal;
}
form input {
width: 75%;
}
}
@media (max-width: 480px) {
.brand {
text-align: center;
margin-bottom: 20px;
}
.notif-content {
width: 100%;
padding: 10px 0;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.notif-text {
width: 100%;
}
.notif-button {
margin-top: 5px;
}
.notif-button button {
padding: 10px 20px;
font-size: 18px;
}
.first-row {
width: 100%;
}
.higlights-item {
width: 100%;
}
.newsletter-panel.active {
width: 100%;
}
.news-close p {
font-size: 22px;
text-align: end;
margin-right: 13px;
}
.news-title h3 {
font-size: 18px;
color: white;
}
.news-article p {
margin-top: 7px;
color: white;
font-size: 16px;
line-height: 20px;
}
.news-form {
margin-top: 10px;
}
form {
display: flex;
flex-wrap: wrap;
}
form input {
width: 100%;
}
form button {
margin-top: 10px;
width: 100%;
}
}
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<title>
Front-end Developer
</title>
<script
src=”https://kit.fontawesome.com/ede5952a7d.js”
crossorigin=”anonymous”
></script>
<link rel=”stylesheet” href=”assets/styles/main.css”>
<link rel=”stylesheet” href=”assets/styles/style.css”>
</head>
<body>
<!– Notification Panel –>
<div id=”root”>
<div class=”notification”>
<div class=”notification-container”>
<p class=”notification-text”>
By accessing and using this website, you acknowledge that you have
read and understand our <a href=”#”>Cookie Policy</a>,
<a href=”#”>Privacy Policy</a> , and our
<a href=”#”>Terms of Service.</a>
</p>
<button class=”btn-notif btn-blue”>Got it</button>
</div>
</div>
<div id=”main”>
<!– Header –>
<header>
<div class=”container”>
<div class=”img-logo”>
<nav class=”navbar navbar-expand-lg navbar-light bg-light”>
<a class=”navbar-brand” href=”#”>
<img src=”assets/images/y-logo-white.png” width=”45″ height=”45″ class=”d-inline-block align-top” alt=””>
</a>
</div>
<!– Hero Content –>
<div class=”hero-content”>
<h1>Hello! I’m della</h1>
<h2>Consult, Design, and Develop Websites</h2>
<p>Have something great in mind? Feel free to contact me.
<br>
I’ll help you to make it happen.
</p>
<br>
<a href=”#higlights”>LET’S MAKE CONTACT</a>
</div>
</header>
<section class=”higlights” id=”higlights”>
<div class=”first-row”>
<h1>How Can I Help You?</h1>
<p>
Our work then targeted, best practices outcomes social inovation
synergy.
<br>
Venture philanthropy, revolutionary inclusive policymaker
relief. User-centered
<br>
program areas scale
</p>

</div>
</section>
</div>
</div>
<div class=”newsletter-panel”>
<div class=”news-close”>
<p class=”close-panel”>x</p>
</div>
<div class=”news-content”>
<div class=”news-title”>
<h3>Get latest updates in web technologies</h3>
</div>
<div class=”news-article”>
<p>
I write articles relate to web technologies, such as design trends,
development tools, UI/UX case studies and reviews, and more. Sign up
to my newsletter to get them all.
</p>
</div>
<div class=”news-form”>
<form action=””>
<input type=”text” placeholder=”Email address” />
<button type=”submit”>Count me In!</button>
</form>
</div>
</div>
</div>
</body>
</html>