Created
February 4, 2021 21:32
-
-
Save amattu2/75a93d72ac9376ff9695c5d621f99a5d to your computer and use it in GitHub Desktop.
This is a small HTML snippet of a notification-style actionable popup.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <!-- Alec M., 2021 --> | |
| <html lang="en" dir="ltr"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Upcoming Notification</title> | |
| <style> | |
| body, HTML { | |
| background: #f2f5f7; | |
| margin: 0; | |
| font-family: sans-serif; | |
| } | |
| .prompt-container { | |
| position: fixed; | |
| right: 0; | |
| bottom: 0; | |
| padding: 25px; | |
| z-index: 10001; | |
| } | |
| .prompt { | |
| width: 375px; | |
| box-shadow: -5px 0 20px 0 rgba(66, 66, 66, .2); | |
| background: #fff; | |
| margin: 10px 0; | |
| } | |
| .prompt-title { | |
| padding: 10px 15px; | |
| background: #4285f4; | |
| color: #fff; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .prompt-title-text { | |
| font-size: 19px; | |
| } | |
| .prompt .prompt-close { | |
| margin-left: auto; | |
| font-size: 30px; | |
| cursor: pointer; | |
| } | |
| .prompt-subtitle { | |
| background: #3b3b3b; | |
| color: #fff; | |
| padding: 30px 25px; | |
| text-align: center; | |
| padding-bottom: 40px; | |
| margin-bottom: -20px; | |
| } | |
| .prompt-tags { | |
| margin: 5px auto; | |
| padding: 5px; | |
| background: rgba(255, 255, 255, 0.3); | |
| border-radius: 4px; | |
| max-width: 58%; | |
| font-size: 14px; | |
| color: rgba(255, 255, 255, 0.8); | |
| text-transform: uppercase; | |
| } | |
| .prompt-body { | |
| padding: 0 15px; | |
| padding-bottom: 15px; | |
| } | |
| .prompt-card { | |
| border-radius: 2px; | |
| border: 1px solid rgba(0, 0, 0, 0.1); | |
| background: #fff; | |
| padding: 7px 10px; | |
| } | |
| .prompt-card-title { | |
| font-size: 16px; | |
| font-variant: all-petite-caps; | |
| font-weight: 600; | |
| color: #767676; | |
| } | |
| .prompt-card-body { | |
| padding: 10px 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class='prompt-container'> | |
| <div class='prompt'> | |
| <div class='prompt-header'> | |
| <div class='prompt-title'> | |
| <span class='prompt-title-text'>Upcoming Appointment</span> | |
| <span class='prompt-close'>×</span> | |
| </div> | |
| <div class='prompt-subtitle'> | |
| <div class='prompt-tags'>Appointment reminder</div> | |
| </div> | |
| </div> | |
| <div class='prompt-body'> | |
| <div class='prompt-card'> | |
| <div class='prompt-card-title'>Tuesday, Dec 26th, 2021 | 9:00AM</div> | |
| <div class='prompt-card-body'>Your appointment at <b>9:00am</b> with <b>Bob Smith</b> is <b>4 minutes</b> away.</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Preview: