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"> <div class="container"> <div class="alerts-block"> <h2>Alerts Title</h2> <div class="alert1"> <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 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"> <div class="container"> <div class="alerts-block"> <h2>Alerts Title</h2> <div class="alert2"> <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"> <div class="container"> <div class="alerts-block"> <h2>Alerts Title</h2> <div class="alert3"> <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>