<div class="alert">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<b>Breaking News:</b> Because of COVID 19 Pandemic, Please don't come out of your home. We deliver your needs at your doorstep. Order now from your favorite stores. " STAY SAFE " Your Safety is our First Priority!
</div>

CUSTOM CSS
———————

/* The alert message box /
.alert {
padding: 20px;
background-color: #f44336; / Red */
color: white;
margin-bottom: 15px;
}

/* The close button /
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
/ When moving the mouse over the close button */
.closebtn:hover {
color: black;
}

9 days later

Thanks for sharing, it works. I have only one problem, the background does not appear, I have checked that everything is OK in the code, any idea?

    NiltonRF /* The alert message box /
    .alert {
    padding: 20px;
    background-color: #f44336; /     Red */
    color: white;
    margin-bottom: 15px;
    }

    /* The close button /
    .closebtn {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
    }
    /     When moving the mouse over the close button */
    .closebtn:hover {
    color: black;
    }

        NiltonRF Because the comments are not terminated properly. Here in discussion form the comment code doesn't paste properly.

          soodomaa I managed to remove the errors, but I still have no background that appears only the text and the ability to close the box

              soodomaa Great it works now 🙂 THANK YOU <3 ! It misses characters in the code available here

                Gradient Alert Box

                /* The alert message box */
                .alert {
                padding: 20px;
                background: linear-gradient(90deg, rgba(249,128,119,1) 0%, rgba(255,99,87,1) 27%, rgba(249,17,0,1) 100%);
                color: white;
                margin-bottom: 15px;
                }

                /* The close button /
                .closebtn {
                margin-left: 15px;
                color: white;
                font-weight: bold;
                float: right;
                font-size: 22px;
                line-height: 20px;
                cursor: pointer;
                transition: 0.3s;
                }
                /                 When moving the mouse over the close button */
                .closebtn:hover {
                color: black;
                }

                8 months later

                Hello Team,
                Can you pl someone help to create a coupon popup similar to this or better than this with copy option of the code?.

                  Write a Reply...