1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109
| *{ margin:0; border:0; list-style: none; } body { background-image: url('https://i.imgur.com/B7wsgw4.jpeg'); background-size: cover; background-position: center; background-repeat: no-repeat; } .container{
position: relative; height: 100vh; background-color: rgba(157, 17, 17, 0.09); } .img_bkg{
position: absolute; left: 0; right: 0; display: flex; justify-content: center; align-items: center;
} .img_bkg img{ display: none; max-width: 100%; max-height: 100%; } .alert_wrap{ position: absolute; top: 0; left: 0; right: 0; display:flex; height: 100vh; justify-content: center; align-items: center;
}
.alert { display: none; width: 600px; height: 500px; background-color: #202124; color: #cb3744; padding: 30px; border-radius: 8px; border: 1px solid #2c2f33;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 6px 12px rgba(0, 0, 0, 0.2), 0 12px 24px rgba(0, 0, 0, 0.3);
z-index: 3; }
.alert_txt { display: flex; justify-content: center; align-items: center; line-height: 1.8rem;
white-space: pre-wrap; } .btn_group{ display:flex; justify-content: center; gap: 30px; } .btn_group button{ font-size: 20px ; padding: 5px 10px; cursor:pointer; border-radius: 5px; transition: transform 0.1s ease; } .btn_group :active { transform: scale(0.95);
} .exit_btn:hover{ color:#daeaf9; background-color: #11579d; border:1px solid #11579d;
}
.yes_btn:hover{ color: #d9f7d9ed; background-color: #079a07; border:1px solid #079a07;
} @media (min-width: 1200px) { .alert_txt { line-height: 2.2rem; } }
|