Alert Bar with Icon

css-notifiy-bar

<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>

html-notify-bar

<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>