Created
September 20, 2018 19:44
-
-
Save KustomDeveloper/2b7788823b6d3733a77e0c4a06805772 to your computer and use it in GitHub Desktop.
Notification Bar
This file contains hidden or 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> | |
| <head> | |
| <title>Notification Bar</title> | |
| </head> | |
| <body> | |
| <div id="notificationBar"> | |
| <i class="fa fa-times close-btn"></i> | |
| <div class="container"> | |
| <p>October 18, 2018: Rock Concert - Revival 2018 - Tickets are only $20! Band Name 1, Band Name 2, Band Name 3 | |
| <a href="#event-url-goes-here"><button>Click Here For Tickets</button></a> | |
| </p> | |
| </div> | |
| </div> | |
| <script> | |
| var xyz = jQuery.noConflict(); | |
| xyz(function() { | |
| xyz('#notificationBar .close-btn').on('click',function() { | |
| xyz('#notificationBar').slideUp(); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or 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
| /*Notification Bar*/ | |
| #notificationBar { | |
| background:#000; | |
| position:relative; | |
| } | |
| #notificationBar p { | |
| color:#fff; | |
| text-align:center; | |
| font-size:14px; | |
| } | |
| #notificationBar button { | |
| background:#EEA708 !important; | |
| color:#fff; | |
| border-radius:5px; | |
| border:none; | |
| padding:10px 20px; | |
| font-size:12px; | |
| margin-left:15px; | |
| text-shadow:none; | |
| box-shadow:none; | |
| } | |
| #notificationBar .close-btn { | |
| color:#fff; | |
| position:absolute; | |
| cursor:pointer; | |
| right:15px; | |
| top:15px; | |
| } | |
| /*Responsive Styles*/ | |
| @media screen and (max-width: 480px) { | |
| #notificationBar p { | |
| padding: 0 15px; | |
| line-height: 1.5; | |
| display: block; | |
| margin: 10px 10px 10px 0; | |
| } | |
| #notificationBar button { | |
| margin: 10px 10px 10px 0; | |
| display: block; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment