Friday, June 9, 2017

How to create Alert Messages in HTML with CSS

How to create Alert Messages in HTML with CSS

How to Create: Alert Messages

x Danger! It is an suspicious activity warning.

Sample Code: Create Alert Message


<!DOCTYPE html>
<html>
<head>
<style>
    .myalert { padding: 20px; background-color: orange; color: white; width:50%;}
    .close
    {
        margin-left: 15px;
        color: white;
        float: right;
        cursor: pointer;
        font-size: 18px;
        line-height: 16px;
        transition: 0.4s;
    }
    .close:hover { color: black; }
</style>
</head>
<body oncontextmenu="return false;">
    <h2>How to Create: Alert Messages</h2>
    <div class="myalert">
        <span class="close" onclick="this.parentElement.style.display='none';">x</span>
        <a style="font-weight:bold; color:red;">Danger!</a> It is an suspicious activity warning.
    </div>
</body>
</html>

No comments:

Post a Comment