Alert Bar with Icon
<style> | |
#notify-bar .alert-wrapper{ | |
padding:5px; | |
} | |
#notify-bar .icon-wrap{ | |
height: 25px; | |
display: inline-flex; | |
width: 20px; | |
margin: 5px 20px 0 0; | |
} | |
#notify-bar .notification-title{ | |
display: inline-flex; | |
color:#fff; | |
vertical-align: top; | |
margin-top: 5px; | |
} | |
#notify-bar .icon-wrap svg{ | |
width: inherit; | |
height: inherit; | |
fill:#fff; | |
padding-top:5px; | |
} | |
#notify-bar{ | |
text-align: center; | |
background: #fe5000; | |
} | |
@media only screen and (max-width: 600px) { | |
#notify-bar .icon-wrap{ | |
float:left; | |
margin: 15px 20px 0 15px; | |
} | |
#notify-bar .notification-title{ | |
display: block; | |
margin-top: 5px; | |
left: 50px; | |
top: -30px; | |
margin-right: 30px; | |
} | |
} | |
</style> |
<div id="notify-bar"> | |
<div class="alert-wrapper"> | |
<div class="icon-wrap"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224 512c35.32 0 63.97-28.65 63.97-64H160.03c0 35.35 28.65 64 63.97 64zm215.39-149.71c-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84C118.56 68.1 64.08 130.3 64.08 208c0 102.3-36.15 133.53-55.47 154.29-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h383.8c19.12 0 32-15.6 32.1-32 .05-7.55-2.61-15.27-8.61-21.71z"></path></svg></div> | |
<a href="/covid-19-essential-information-for-cvgt-australia-job-seekers/" class="notification-title"> | |
<strong>Latest News</strong> Essential Information for Job Seekers (as at March 30th 2020) | |
</a> | |
</div> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment