Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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>&nbsp;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
You can’t perform that action at this time.