Alerts Style 1
Info: Lorem ipsum dolor sit amet, consectetur adipisicing elit
Warning: Lorem ipsum dolor sit amet, consectetur adipisicing elit
Success: Lorem ipsum dolor sit amet, consectetur adipisicing elit
<section class="alerts element-page dt-section">
<div class="container">
<div class="alerts-block elements-block">
<div class="alert4 alert-wrap">
<div class="alert-area">
<h5>Info: Lorem ipsum dolor sit amet, consectetur adipisicing elit</h5>
<button type="button" class="close">
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
<g data-name="Group 41003" transform="translate(19110.938 21387.938)">
<rect id="Rectangle_18467" data-name="Rectangle 18467" width="150" height="150" rx="75" transform="translate(-19110.938 -21387.938)" fill="#ed485b"/>
<path id="XMLID_732_" d="M73.344,66.655a4.708,4.708,0,0,1,0,6.74,4.824,4.824,0,0,1-6.733,0L47.357,54.123,28.1,73.395a4.824,4.824,0,0,1-6.733,0,4.708,4.708,0,0,1,0-6.74L40.624,47.383,21.37,28.112a4.764,4.764,0,0,1,6.733-6.74L47.357,40.643,66.61,21.372a4.764,4.764,0,0,1,6.733,6.74L54.09,47.383Z" transform="translate(-19083.281 -21360.281)" fill="#fff"/>
</g>
</svg>
</button>
</div>
<div class="alert-area">
<h5>Warning: Lorem ipsum dolor sit amet, consectetur adipisicing elit</h5>
<button type="button" class="close">
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
<g data-name="Group 41003" transform="translate(19110.938 21387.938)">
<rect id="Rectangle_18467" data-name="Rectangle 18467" width="150" height="150" rx="75" transform="translate(-19110.938 -21387.938)" fill="#ed485b"/>
<path id="XMLID_732_" d="M73.344,66.655a4.708,4.708,0,0,1,0,6.74,4.824,4.824,0,0,1-6.733,0L47.357,54.123,28.1,73.395a4.824,4.824,0,0,1-6.733,0,4.708,4.708,0,0,1,0-6.74L40.624,47.383,21.37,28.112a4.764,4.764,0,0,1,6.733-6.74L47.357,40.643,66.61,21.372a4.764,4.764,0,0,1,6.733,6.74L54.09,47.383Z" transform="translate(-19083.281 -21360.281)" fill="#fff"/>
</g>
</svg>
</button>
</div>
<div class="alert-area">
<h5>Success: Lorem ipsum dolor sit amet, consectetur adipisicing elit</h5>
<button type="button" class="close">
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
<g data-name="Group 41003" transform="translate(19110.938 21387.938)">
<rect id="Rectangle_18467" data-name="Rectangle 18467" width="150" height="150" rx="75" transform="translate(-19110.938 -21387.938)" fill="#ed485b"/>
<path id="XMLID_732_" d="M73.344,66.655a4.708,4.708,0,0,1,0,6.74,4.824,4.824,0,0,1-6.733,0L47.357,54.123,28.1,73.395a4.824,4.824,0,0,1-6.733,0,4.708,4.708,0,0,1,0-6.74L40.624,47.383,21.37,28.112a4.764,4.764,0,0,1,6.733-6.74L47.357,40.643,66.61,21.372a4.764,4.764,0,0,1,6.733,6.74L54.09,47.383Z" transform="translate(-19083.281 -21360.281)" fill="#fff"/>
</g>
</svg>
</button>
</div>
</div>
</div>
</div>
</section>
Alerts Style 2
Info: Lorem ipsum dolor sit amet, consectetur adipisicing elit
Warning: Lorem ipsum dolor sit amet, consectetur adipisicing elit
Success: Lorem ipsum dolor sit amet, consectetur adipisicing elit
<section class="alerts element-page dt-section">
<div class="container">
<div class="alerts-block elements-block">
<div class="alert1 alert-wrap">
<div class="alert-area">
<h4><i class="fas fa-info"></i> Info: Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
<button type="button" class="close">
<svg class="svg-close" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
<path d="M12.412,9l5.117-5.117a1.609,1.609,0,0,0,0-2.275L16.392.471a1.609,1.609,0,0,0-2.275,0L9,5.588,3.883.471a1.609,1.609,0,0,0-2.275,0L.471,1.608a1.609,1.609,0,0,0,0,2.275L5.588,9,.471,14.117a1.609,1.609,0,0,0,0,2.275l1.137,1.137a1.609,1.609,0,0,0,2.275,0L9,12.412l5.117,5.117a1.609,1.609,0,0,0,2.275,0l1.137-1.137a1.609,1.609,0,0,0,0-2.275Z" fill="#111"></path>
</svg>
</button>
</div>
<div class="alert-area">
<h4><i class="fas fa-exclamation-triangle"></i> Warning: Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
<button type="button" class="close">
<svg class="svg-close" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
<path d="M12.412,9l5.117-5.117a1.609,1.609,0,0,0,0-2.275L16.392.471a1.609,1.609,0,0,0-2.275,0L9,5.588,3.883.471a1.609,1.609,0,0,0-2.275,0L.471,1.608a1.609,1.609,0,0,0,0,2.275L5.588,9,.471,14.117a1.609,1.609,0,0,0,0,2.275l1.137,1.137a1.609,1.609,0,0,0,2.275,0L9,12.412l5.117,5.117a1.609,1.609,0,0,0,2.275,0l1.137-1.137a1.609,1.609,0,0,0,0-2.275Z" fill="#111"></path>
</svg>
</button>
</div>
<div class="alert-area">
<h4><i class="fas fa-check"></i> Success: Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
<button type="button" class="close">
<svg class="svg-close" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
<path d="M12.412,9l5.117-5.117a1.609,1.609,0,0,0,0-2.275L16.392.471a1.609,1.609,0,0,0-2.275,0L9,5.588,3.883.471a1.609,1.609,0,0,0-2.275,0L.471,1.608a1.609,1.609,0,0,0,0,2.275L5.588,9,.471,14.117a1.609,1.609,0,0,0,0,2.275l1.137,1.137a1.609,1.609,0,0,0,2.275,0L9,12.412l5.117,5.117a1.609,1.609,0,0,0,2.275,0l1.137-1.137a1.609,1.609,0,0,0,0-2.275Z" fill="#111"></path>
</svg>
</button>
</div>
</div>
</div>
</div>
</section>
Alerts Style 3
Info: Lorem ipsum dolor sit amet, consectetur adipisicing elit
Warning: Lorem ipsum dolor sit amet, consectetur adipisicing elit
Success: Lorem ipsum dolor sit amet, consectetur adipisicing elit
<section class="alerts element-page dt-section">
<div class="container">
<div class="alerts-block elements-block">
<div class="alert2 alert-wrap">
<div class="alert-area">
<h4><i class="fas fa-info"></i> Info: Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
<button type="button" class="close">
<svg class="svg-close" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
<path d="M12.412,9l5.117-5.117a1.609,1.609,0,0,0,0-2.275L16.392.471a1.609,1.609,0,0,0-2.275,0L9,5.588,3.883.471a1.609,1.609,0,0,0-2.275,0L.471,1.608a1.609,1.609,0,0,0,0,2.275L5.588,9,.471,14.117a1.609,1.609,0,0,0,0,2.275l1.137,1.137a1.609,1.609,0,0,0,2.275,0L9,12.412l5.117,5.117a1.609,1.609,0,0,0,2.275,0l1.137-1.137a1.609,1.609,0,0,0,0-2.275Z" fill="#111"></path>
</svg>
</button>
</div>
<div class="alert-area">
<h4><i class="fas fa-exclamation-triangle"></i> Warning: Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
<button type="button" class="close">
<svg class="svg-close" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
<path d="M12.412,9l5.117-5.117a1.609,1.609,0,0,0,0-2.275L16.392.471a1.609,1.609,0,0,0-2.275,0L9,5.588,3.883.471a1.609,1.609,0,0,0-2.275,0L.471,1.608a1.609,1.609,0,0,0,0,2.275L5.588,9,.471,14.117a1.609,1.609,0,0,0,0,2.275l1.137,1.137a1.609,1.609,0,0,0,2.275,0L9,12.412l5.117,5.117a1.609,1.609,0,0,0,2.275,0l1.137-1.137a1.609,1.609,0,0,0,0-2.275Z" fill="#111"></path>
</svg>
</button>
</div>
<div class="alert-area">
<h4><i class="fas fa-check"></i> Success: Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
<button type="button" class="close">
<svg class="svg-close" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
<path d="M12.412,9l5.117-5.117a1.609,1.609,0,0,0,0-2.275L16.392.471a1.609,1.609,0,0,0-2.275,0L9,5.588,3.883.471a1.609,1.609,0,0,0-2.275,0L.471,1.608a1.609,1.609,0,0,0,0,2.275L5.588,9,.471,14.117a1.609,1.609,0,0,0,0,2.275l1.137,1.137a1.609,1.609,0,0,0,2.275,0L9,12.412l5.117,5.117a1.609,1.609,0,0,0,2.275,0l1.137-1.137a1.609,1.609,0,0,0,0-2.275Z" fill="#111"></path>
</svg>
</button>
</div>
</div>
</div>
</div>
</section>
Alerts Style 4
Info: Lorem ipsum dolor sit amet, consectetur adipisicing elit
Warning: Lorem ipsum dolor sit amet, consectetur adipisicing elit
Success: Lorem ipsum dolor sit amet, consectetur adipisicing elit
<section class="alerts element-page dt-section">
<div class="container">
<div class="alerts-block elements-block">
<div class="alert3 alert-wrap">
<div class="alert-area">
<h4><i class="fas fa-info"></i> Info: Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
<button type="button" class="close">
<svg class="svg-close" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
<path d="M12.412,9l5.117-5.117a1.609,1.609,0,0,0,0-2.275L16.392.471a1.609,1.609,0,0,0-2.275,0L9,5.588,3.883.471a1.609,1.609,0,0,0-2.275,0L.471,1.608a1.609,1.609,0,0,0,0,2.275L5.588,9,.471,14.117a1.609,1.609,0,0,0,0,2.275l1.137,1.137a1.609,1.609,0,0,0,2.275,0L9,12.412l5.117,5.117a1.609,1.609,0,0,0,2.275,0l1.137-1.137a1.609,1.609,0,0,0,0-2.275Z" fill="#111"></path>
</svg>
</button>
</div>
<div class="alert-area">
<h4><i class="fas fa-exclamation-triangle"></i> Warning: Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
<button type="button" class="close">
<svg class="svg-close" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
<path d="M12.412,9l5.117-5.117a1.609,1.609,0,0,0,0-2.275L16.392.471a1.609,1.609,0,0,0-2.275,0L9,5.588,3.883.471a1.609,1.609,0,0,0-2.275,0L.471,1.608a1.609,1.609,0,0,0,0,2.275L5.588,9,.471,14.117a1.609,1.609,0,0,0,0,2.275l1.137,1.137a1.609,1.609,0,0,0,2.275,0L9,12.412l5.117,5.117a1.609,1.609,0,0,0,2.275,0l1.137-1.137a1.609,1.609,0,0,0,0-2.275Z" fill="#111"></path>
</svg>
</button>
</div>
<div class="alert-area">
<h4><i class="fas fa-check"></i> Success: Lorem ipsum dolor sit amet, consectetur adipisicing elit</h4>
<button type="button" class="close">
<svg class="svg-close" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
<path d="M12.412,9l5.117-5.117a1.609,1.609,0,0,0,0-2.275L16.392.471a1.609,1.609,0,0,0-2.275,0L9,5.588,3.883.471a1.609,1.609,0,0,0-2.275,0L.471,1.608a1.609,1.609,0,0,0,0,2.275L5.588,9,.471,14.117a1.609,1.609,0,0,0,0,2.275l1.137,1.137a1.609,1.609,0,0,0,2.275,0L9,12.412l5.117,5.117a1.609,1.609,0,0,0,2.275,0l1.137-1.137a1.609,1.609,0,0,0,0-2.275Z" fill="#111"></path>
</svg>
</button>
</div>
</div>
</div>
</div>
</section>