Hi,
I want to add a notification message at the bottom of the screen when a button is clicked. My HTML/CSS code is as follow:
Please help me.
I want to add a notification message at the bottom of the screen when a button is clicked. My HTML/CSS code is as follow:
CSS:
<style>
#main-image{
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%;
max-height: auto;
}
h1{
color: white;
text-align:right;
}
label{
color: black;
text-align: right;
}
.container{
float:none;
text-align: right;
padding: 5%;
}
input[type=text]{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #b3b3b3;
border-radius: 4px;
box-sizing: border-box;
text-align: right;
}
input[type=text]:focus{
outline: none;
border:1px solid #ff15b1;
box-shadow: 0 0 10px #719ECE;
}
.border{
background-color: whitesmoke;
width: 300px;
height: 400px;
border-radius: 20px;
float: right;
}
.btn01{
background-color: #4CAF50;
border:none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 30px;
}
.notification{
padding: 20px;
background-color: #24da00;
color: white;
position: relative;
float: right;
}
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.closebtn:hover {
color: black;
}
</style>
HTML:
<body bgcolor="black">
<img id="main-image" src="Images/IT.jpg" width="1600" alt="Intro">
<div class="heading">
<h1>اطلاعات خرابی و علت خرابی</h1>
</div>
<div class="border">
<div class="container">
<label>کد تجهیز:</label>
<br>
<input type="text" maxlength="8">
<br>
<label>نام تجهیز:</label>
<br>
<input type="text">
<br>
<label>عنوان خرابی:</label>
<br>
<input type="text">
<br>
<label>عنوان علت خرابی:</label>
<br>
<input type="text">
<br>
<button class="btn01">ذخیره</button>
</div>
</div>
<div class="notification">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<strong>ثبت موفق</strong>
</div>
</body>