<!-- success alert -->
         <div class="alert-des-success">
             <i class="fas fa-check-circle alert-icon"></i>
             <div>
                 <p>Success</p>
                 <p class="p-md">
                     This is a success alert -
                     <a href=""><button class="btn secondary-text-btn-sm">
                             check it out!
                         </button></a>
                 </p>
             </div>
         </div>

         <!-- info alert -->
         <div class="alert-des-info">
             <i class="fas fa-info-circle alert-icon"></i>
             <div>
                 <p>Info</p>
                 <p class="p-md">
                     This is a info alert -
                     <a href=""><button class="btn secondary-text-btn-sm">check it out!
                         </button></a>
                 </p>
             </div>
         </div>

         <!-- warning alert -->
         <div class="alert-des-warning">
             <i class="fas fa-exclamation-triangle alert-icon"></i>
             <div>
                 <p>Warning</p>
                 <p class="p-md">
                     This is a warning alert -
                     <a href=""><button class="btn secondary-text-btn-sm">check it out!
                         </button></a>
                 </p>
             </div>
         </div>

         <!-- error alert -->
         <div class="alert-des-error">
             <i class="fas fa-exclamation-circle alert-icon"></i>
             <div class="alert-w-btn-text">
                 <p>Error</p>
                 <p class="p-md">
                     This is a error alert - <button class="btn secondary-text-btn-sm">
                         check it out!
                     </button>
                 </p>
             </div>
         </div>