Css Modalbox

by Jhim Preston

HTML

<style>
   .modal {
       font-family:Roboto;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transform: scale(1.1);
        transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
    }
    .modal-content {
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: white;
        padding: 1rem 1.5rem;
        width: 24rem;
        border-radius: 0.5rem;
    }
    .close-button {
        font-size:1.0625em;
        color:#fff;
        padding:0.56em;
        text-align: center;
        cursor: pointer;
        border-radius: 7px;
        background-color: rgb(48, 133, 214);
        border: 3px solid #def;
    }

.alert{
height:100px;
background-position: -50% 0%;
background-repeat:no-repeat;
background-image:...