<!-- jQuery library --> <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script> <!-- Popper JS --> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script> <div class="d-flex justify-content-center align-items-center p-1"> <div> <i class="icon bi bi-bell" id="bell"></i> <div class="notifications " id="box"> <h2>Notifications - <span>2</span></h2> <div class="notifications-item"> <div class="text"> <p>Samso Nagaro Like your home work</p> </div> </div> <div class="notifications-item"> <div class="text"> <p>+20 vista badge earned</p> </div> </div> </div> </div> <script> $(document).ready(function(){ var down = false; $('#bell').click(function(e){ var color = $(this).text(); if(down){ $('#box').css('height','0px'); $('#box').css('opacity','0'); down = false; }else{ $('#box').css('height','auto'); $('#box').css('opacity','1'); down = true; } }); }); </script> <style> .icon { cursor: pointer; margin-right: 5px; /* line-height: 60px; */ } .icon span { background: #f00; padding: 7px; border-radius: 50%; color: #fff; vertical-align: top; /* margin-left: -25px; */ } .icon img { display: inline-block; width: 26px; margin-top: 4px; } .icon:hover { opacity: 0.7; } .logo { flex: 1; margin-left: 50px; color: #eee; font-size: 20px; font-family: monospace; } .notifications { width: 300px; height: 0px; opacity: 0; position: absolute; top: 63px; right: 62px; border-radius: 5px 0px 5px 5px; background-color: #fff; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .notifications h2 { font-size: 14px; padding: 10px; border-bottom: 1px solid #eee; color: #999; } .notifications h2 span { color: #f00; } .notifications-item { display: flex; border-bottom: 1px solid #eee; padding: 6px 9px; margin-bottom: 0px; cursor: pointer; } .notifications-item:hover { background-color: #eee; } .notifications-item img { display: block; width: 50px; height: 50px; margin-right: 9px; border-radius: 50%; margin-top: 2px; } .notifications-item .text h4 { color: #777; font-size: 16px; margin-top: 3px; } .notifications-item .text p { color: #aaa; font-size: 12px; } </style> <div> <span class="text-white fs-small p-0">Diane Ward</span> </div> <div class="p-3"> <img src="./asset/Ellipse 461.svg" alt="user-icon" style="width: 2.5rem" /> </div> </div>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter