@extends('layouts.master')

@section('content')
   
<div id="content-page" class="content-page">
    <div class="container-fluid">
       <div class="row">
          <div class="col-sm-12 col-lg-6">
             <div class="iq-card">
                <div class="iq-card-header d-flex justify-content-between">
                   <div class="iq-header-title">
                      <h4 class="card-title">Basic Alerts</h4>
                   </div>
                </div>
                <div class="iq-card-body">
                   <p class="mb-4">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                      Lorem Ipsum has been the industry's standard dummy text ever
                   </p>
                   <div class="alert alert-primary" role="alert">
                      <div class="iq-alert-text">A simple <b>primary</b> alert—check it out!</div>
                   </div>
                   <div class="alert alert-secondary" role="alert">
                      <div class="iq-alert-text">A simple <b>secondary</b> alert—check it out!</div>
                   </div>
                   <div class="alert alert-success" role="alert">
                      <div class="iq-alert-text">A simple <b>success</b> alert—check it out!</div>
                   </div>
                   <div class="alert alert-danger" role="alert">
                      <div class="iq-alert-text">A simple <b>danger</b> alert—check it out!</div>
                   </div>
                   <div class="alert alert-warning" role="alert">
                      <div class="iq-alert-text">A simple <b>warning</b> alert—check it out!</div>
                   </div>
                   <div class="alert alert-info" role="alert">
                      <div class="iq-alert-text">A simple <b>info</b> alert—check it out!</div>
                   </div>
                   <div class="alert alert-light" role="alert">
                      <div class="iq-alert-text">A simple <b>light</b> alert—check it out!</div>
                   </div>
                   <div class="alert alert-dark" role="alert">
                      <div class="iq-alert-text">A simple <b>light</b> alert—check it out!</div>
                   </div>
                </div>
             </div>
          </div>
          <div class="col-sm-12 col-lg-6">
             <div class="iq-card">
                <div class="iq-card-header d-flex justify-content-between">
                   <div class="iq-header-title">
                      <h4 class="card-title">Basic Alerts With Icons</h4>
                   </div>
                </div>
                <div class="iq-card-body">
                   <p class="mb-4">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                      Lorem Ipsum has been the industry's standard dummy text ever
                   </p>
                   <div class="alert alert-primary" role="alert">
                      <div class="iq-alert-icon">
                         <i class="ri-alert-line"></i>
                      </div>
                      <div class="iq-alert-text">A simple <b>primary</b> alert—check it out!</div>
                   </div>
                   <div class="alert alert-secondary" role="alert">
                      <div class="iq-alert-icon">
                         <i class="ri-information-line"></i>
                      </div>
                      <div class="iq-alert-text">A simple <b>secondary</b> alert—check it out!</div>
                   </div>
                   <div class="alert alert-success" role="alert">
                      <div class="iq-alert-icon">
                         <i class="ri-alert-line"></i>
                      </div>
                      <div class="iq-alert-text">A simple <b>success</b> alert—check it out!</div>
                   </div>
                   <div class="alert alert-danger" role="alert">
                      <div class="iq-alert-icon">
                         <i class="ri-information-line"></i>
                      </div>
                      <div class="iq-alert-text">A simple <b>danger</b> alert—check it out!</div>
                   </div>
                   <div class="alert alert-warning" role="alert">
                      <div class="iq-alert-icon">
                         <i class="ri-alert-line"></i>
                      </div>
                      <div class="iq-alert-text">A simple <b>warning</b> alert—check it out!</div>
                   </div>
                   <div class="alert alert-info" role="alert">
                      <div class="iq-alert-icon">
                         <i class="ri-information-line"></i>
                      </div>
                      <div class="iq-alert-text">A simple <b>info</b> alert—check it out!</div>
                   </div>
                   <div class="alert alert-light" role="alert">
                      <div class="iq-alert-icon">
                         <i class="ri-alert-line"></i>
                      </div>
                      <div class="iq-alert-text">A simple <b>light</b> alert—check it out!</div>
                   </div>
                </div>
             </div>
          </div>
       </div>
       <div class="row">
          <div class="col-sm-12 col-lg-6">
             <div class="iq-card">
                <div class="iq-card-header d-flex justify-content-between">
                   <div class="iq-header-title">
                      <h4 class="card-title">Basic Line Alerts</h4>
                   </div>
                </div>
                <div class="iq-card-body">
                   <p class="mb-4">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                      Lorem Ipsum has been the industry's standard dummy text ever
                   </p>
                   <div class="alert bg-white alert-primary" role="alert">
                      <div class="iq-alert-text">A simple <b>primary</b> alert—check it out!</div>
                   </div>
                   <div class="alert bg-white alert-secondary" role="alert">
                      <div class="iq-alert-text">A simple <b>secondary</b> alert—check it out!</div>
                   </div>
                   <div class="alert bg-white alert-success" role="alert">
                      <div class="iq-alert-text">A simple <b>success</b> alert—check it out!</div>
                   </div>
                   <div class="alert bg-white alert-danger" role="alert">
                      <div class="iq-alert-text">A simple <b>danger</b> alert—check it out!</div>
                   </div>
                   <div class="alert bg-white alert-warning" role="alert">
                      <div class="iq-alert-text">A simple <b>warning</b> alert—check it out!</div>
                   </div>
                   <div class="alert bg-white alert-info" role="alert">
                      <div class="iq-alert-text">A simple <b>info</b> alert—check it out!</div>
                   </div>
                   <div class="alert bg-white alert-light" role="alert">
                      <div class="iq-alert-text">A simple <b>light</b> alert—check it out!</div>
                   </div>
                </div>
             </div>
          </div>
          <div class="col-sm-12 col-lg-6">
             <div class="iq-card">
                <div class="iq-card-header d-flex justify-content-between">
                   <div class="iq-header-title">
                      <h4 class="card-title">Basic Line Alerts With Icons</h4>
                   </div>
                </div>
                <div class="iq-card-body">
                   <p class="mb-4">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                      Lorem Ipsum has been the industry's standard dummy text ever
                   </p>
                   <div class="alert bg-white alert-primary" role="alert">
                      <div class="iq-alert-icon">
                         <i class="ri-alert-line"></i>
                      </div>
                      <div class="iq-alert-text">A simple <b>primary</b> alert—check it out!</div>
                   </div>
                   <div class="alert bg-white alert-secondary" role="alert">
                      <div class="iq-alert-icon">
                         <i class="ri-information-line"></i>
                      </div>
                      <div class="iq-alert-text">A simple <b>secondary</b> alert—check it out!</div>
                   </div>
                   <div class="alert bg-white alert-success" role="alert">
                      <div class="iq-alert-icon">
                         <i class="ri-alert-line"></i>
                      </div>
                      <div class="iq-alert-text">A simple <b>success</b> alert—check it out!</div>
                   </div>
                   <div class="alert bg-white alert-danger" role="alert">
                      <div class="iq-alert-icon">
                         <i class="ri-information-line"></i>
                      </div>
                      <div class="iq-alert-text">A simple <b>danger</b> alert—check it out!</div>
                   </div>
                   <div class="alert bg-white alert-warning" role="alert">
                      <div class="iq-alert-icon">
                         <i class="ri-alert-line"></i>
                      </div>
                      <div class="iq-alert-text">A simple <b>warning</b> alert—check it out!</div>
                   </div>
                   <div class="alert bg-white alert-info" role="alert">
                      <div class="iq-alert-icon">
                         <i class="ri-information-line"></i>
                      </div>
                      <div class="iq-alert-text">A simple <b>info</b> alert—check it out!</div>
                   </div>
                   <div class="alert bg-white alert-light" role="alert">
                      <div class="iq-alert-icon">
                         <i class="ri-alert-line"></i>
                      </div>
                      <div class="iq-alert-text">A simple <b>light</b> alert—check it out!</div>
                   </div>
                </div>
             </div>
          </div>
       </div>
       <div class="row">
          <div class="col-sm-12 col-lg-6">
             <div class="iq-card">
                <div class="iq-card-header d-flex justify-content-between">
                   <div class="iq-header-title">
                      <h4 class="card-title">Alerts With Background</h4>
                   </div>
                </div>
                <div class="iq-card-body">
                   <p class="mb-4">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                      Lorem Ipsum has been the industry's standard dummy text ever
                   </p>
                   <div class="alert text-white bg-primary" role="alert">
                      <div class="iq-alert-text">A simple <b>primary</b> alert—check it out!</div>
                   </div>
                   <div class="alert text-white bg-secondary" role="alert">
                      <div class="iq-alert-text">A simple <b>secondary</b> alert—check it out!</div>
                   </div>
                   <div class="alert text-white bg-success" role="alert">
                      <div class="iq-alert-text">A simple <b>success</b> alert—check it out!</div>
                   </div>
                   <div class="alert text-white bg-danger" role="alert">
                      <div class="iq-alert-text">A simple <b>danger</b> alert—check it out!</div>
                   </div>
                   <div class="alert text-white bg-warning" role="alert">
                      <div class="iq-alert-text">A simple <b>warning</b> alert—check it out!</div>
                   </div>
                   <div class="alert text-white bg-info" role="alert">
                      <div class="iq-alert-text">A simple <b>info</b> alert—check it out!</div>
                   </div>
                   <div class="alert bg-light" role="alert">
                      <div class="iq-alert-text">A simple <b>light</b> alert—check it out!</div>
                   </div>
                </div>
             </div>
          </div>
          <div class="col-sm-12 col-lg-6">
             <div class="iq-card">
                <div class="iq-card-header d-flex justify-content-between">
                   <div class="iq-header-title">
                      <h4 class="card-title">Background Alerts With Icons</h4>
                   </div>
                </div>
                <div class="iq-card-body">
                   <p class="mb-4">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                      Lorem Ipsum has been the industry's standard dummy text ever
                   </p>
                   <div class="alert text-white bg-primary" role="alert">
                      <div class="iq-alert-icon">
                         <i class="ri-alert-line"></i>
                      </div>
                      <div class="iq-alert-text">A simple <b>primary</b> alert—check it out!</div>
                   </div>
                   <div class="alert text-white bg-secondary" role="alert">
                      <div class="iq-alert-icon">
                         <i class="ri-information-line"></i>
                      </div>
                      <div class="iq-alert-text">A simple <b>secondary</b> alert—check it out!</div>
                   </div>
                   <div class="alert text-white bg-success" role="alert">
                      <div class="iq-alert-icon">
                         <i class="ri-alert-line"></i>
                      </div>
                      <div class="iq-alert-text">A simple <b>success</b> alert—check it out!</div>
                   </div>
                   <div class="alert text-white bg-danger" role="alert">
                      <div class="iq-alert-icon">
                         <i class="ri-information-line"></i>
                      </div>
                      <div class="iq-alert-text">A simple <b>danger</b> alert—check it out!</div>
                   </div>
                   <div class="alert text-white bg-warning" role="alert">
                      <div class="iq-alert-icon">
                         <i class="ri-alert-line"></i>
                      </div>
                      <div class="iq-alert-text">A simple <b>warning</b> alert—check it out!</div>
                   </div>
                   <div class="alert text-white bg-info" role="alert">
                      <div class="iq-alert-icon">
                         <i class="ri-information-line"></i>
                      </div>
                      <div class="iq-alert-text">A simple <b>info</b> alert—check it out!</div>
                   </div>
                   <div class="alert bg-light" role="alert">
                      <div class="iq-alert-icon">
                         <i class="ri-alert-line"></i>
                      </div>
                      <div class="iq-alert-text">A simple <b>light</b> alert—check it out!</div>
                   </div>
                </div>
             </div>
          </div>
       </div>
       <div class="row">
          <div class="col-sm-12 col-lg-6">
             <div class="iq-card">
                <div class="iq-card-header d-flex justify-content-between">
                   <div class="iq-header-title">
                      <h4 class="card-title">Alerts Dismissing</h4>
                   </div>
                </div>
                <div class="iq-card-body">
                   <p class="mb-4">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                      Lorem Ipsum has been the industry's standard dummy text ever
                   </p>
                   <div class="alert text-white bg-primary" role="alert">
                      <div class="iq-alert-text">A simple <b>primary</b> alert—check it out!</div>
                      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                      <i class="ri-close-line"></i>
                      </button>
                   </div>
                   <div class="alert text-white bg-secondary" role="alert">
                      <div class="iq-alert-text">A simple <b>secondary</b> alert—check it out!</div>
                      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                      <i class="ri-close-line"></i>
                      </button>
                   </div>
                   <div class="alert text-white bg-success" role="alert">
                      <div class="iq-alert-text">A simple <b>success</b> alert—check it out!</div>
                      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                      <i class="ri-close-line"></i>
                      </button>
                   </div>
                   <div class="alert text-white bg-danger" role="alert">
                      <div class="iq-alert-text">A simple <b>danger</b> alert—check it out!</div>
                      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                      <i class="ri-close-line"></i>
                      </button>
                   </div>
                   <div class="alert text-white bg-warning" role="alert">
                      <div class="iq-alert-text">A simple <b>warning</b> alert—check it out!</div>
                      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                      <i class="ri-close-line"></i>
                      </button>
                   </div>
                   <div class="alert text-white bg-info" role="alert">
                      <div class="iq-alert-text">A simple <b>info</b> alert—check it out!</div>
                      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                      <i class="ri-close-line"></i>
                      </button>
                   </div>
                   <div class="alert bg-light" role="alert">
                      <div class="iq-alert-text">A simple <b>light</b> alert—check it out!</div>
                      <button type="button" class="close text-muted" data-dismiss="alert" aria-label="Close">
                      <i class="ri-close-line"></i>
                      </button>
                   </div>
                </div>
             </div>
          </div>
          <div class="col-sm-12 col-lg-6">
             <div class="iq-card">
                <div class="iq-card-header d-flex justify-content-between">
                   <div class="iq-header-title">
                      <h4 class="card-title">Alerts Dismissing With Icons</h4>
                   </div>
                </div>
                <div class="iq-card-body">
                   <p class="mb-4">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                      Lorem Ipsum has been the industry's standard dummy text ever
                   </p>
                   <div class="alert text-white bg-primary" role="alert">
                      <div class="iq-alert-icon">
                         <i class="ri-alert-line"></i>
                      </div>
                      <div class="iq-alert-text">A simple <b>primary</b> alert—check it out!</div>
                      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                      <i class="ri-close-line"></i>
                      </button>
                   </div>
                   <div class="alert text-white bg-secondary" role="alert">
                      <div class="iq-alert-icon">
                         <i class="ri-information-line"></i>
                      </div>
                      <div class="iq-alert-text">A simple <b>secondary</b> alert—check it out!</div>
                      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                      <i class="ri-close-line"></i>
                      </button>
                   </div>
                   <div class="alert text-white bg-success" role="alert">
                      <div class="iq-alert-icon">
                         <i class="ri-alert-line"></i>
                      </div>
                      <div class="iq-alert-text">A simple <b>success</b> alert—check it out!</div>
                      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                      <i class="ri-close-line"></i>
                      </button>
                   </div>
                   <div class="alert text-white bg-danger" role="alert">
                      <div class="iq-alert-icon">
                         <i class="ri-information-line"></i>
                      </div>
                      <div class="iq-alert-text">A simple <b>danger</b> alert—check it out!</div>
                      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                      <i class="ri-close-line"></i>
                      </button>
                   </div>
                   <div class="alert text-white bg-warning" role="alert">
                      <div class="iq-alert-icon">
                         <i class="ri-alert-line"></i>
                      </div>
                      <div class="iq-alert-text">A simple <b>warning</b> alert—check it out!</div>
                      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                      <i class="ri-close-line"></i>
                      </button>
                   </div>
                   <div class="alert text-white bg-info" role="alert">
                      <div class="iq-alert-icon">
                         <i class="ri-information-line"></i>
                      </div>
                      <div class="iq-alert-text">A simple <b>info</b> alert—check it out!</div>
                      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                      <i class="ri-close-line"></i>
                      </button>
                   </div>
                   <div class="alert bg-light" role="alert">
                      <div class="iq-alert-icon">
                         <i class="ri-alert-line"></i>
                      </div>
                      <div class="iq-alert-text">A simple <b>light</b> alert—check it out!</div>
                      <button type="button" class="close text-muted" data-dismiss="alert" aria-label="Close">
                      <i class="ri-close-line"></i>
                      </button>
                   </div>
                </div>
             </div>
          </div>
       </div>
       <div class="row">
          <div class="col-sm-12 col-lg-6">
             <div class="iq-card">
                <div class="iq-card-header d-flex justify-content-between">
                   <div class="iq-header-title">
                      <h4 class="card-title">Alerts With Background</h4>
                   </div>
                </div>
                <div class="iq-card-body">
                   <p class="mb-4">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                      Lorem Ipsum has been the industry's standard dummy text ever
                   </p>
                   <div class="alert alert-primary" role="alert">
                      <div class="iq-alert-text">A simple primary alert with <a href="#" class="alert-link">an
                         example link</a>. Give it a click if you like.
                      </div>
                   </div>
                   <div class="alert alert-secondary" role="alert">
                      <div class="iq-alert-text">A simple secondary alert with <a href="#" class="alert-link">an
                         example link</a>. Give it a click if you like.
                      </div>
                   </div>
                   <div class="alert alert-success" role="alert">
                      <div class="iq-alert-text">A simple success alert with <a href="#" class="alert-link">an
                         example link</a>. Give it a click if you like.
                      </div>
                   </div>
                   <div class="alert alert-danger" role="alert">
                      <div class="iq-alert-text">A simple danger alert with <a href="#" class="alert-link">an
                         example link</a>. Give it a click if you like.
                      </div>
                   </div>
                   <div class="alert alert-warning" role="alert">
                      <div class="iq-alert-text">A simple warning alert with <a href="#" class="alert-link">an
                         example link</a>. Give it a click if you like.
                      </div>
                   </div>
                   <div class="alert alert-info" role="alert">
                      <div class="iq-alert-text">A simple info alert with <a href="#" class="alert-link">an
                         example link</a>. Give it a click if you like.
                      </div>
                   </div>
                   <div class="alert alert-light" role="alert">
                      <div class="iq-alert-text">A simple light alert with <a href="#" class="alert-link">an
                         example link</a>. Give it a click if you like.
                      </div>
                   </div>
                </div>
             </div>
          </div>
          <div class="col-sm-12 col-lg-6">
             <div class="iq-card">
                <div class="iq-card-header d-flex justify-content-between">
                   <div class="iq-header-title">
                      <h4 class="card-title">Background Alerts With Icons</h4>
                   </div>
                </div>
                <div class="iq-card-body">
                   <p class="mb-4">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                      Lorem Ipsum has been the industry's standard dummy text ever
                   </p>
                   <div class="alert text-white bg-primary" role="alert">
                      <div class="iq-alert-icon">
                         <i class="ri-alert-line"></i>
                      </div>
                      <div class="iq-alert-text">simple primary alert with <a href="#"
                         class="alert-link text-white">an
                         example link</a>. Give it a click if you like.
                      </div>
                   </div>
                   <div class="alert text-white bg-secondary" role="alert">
                      <div class="iq-alert-icon">
                         <i class="ri-information-line"></i>
                      </div>
                      <div class="iq-alert-text">simple primary alert with <a href="#"
                         class="alert-link text-white">an
                         example link</a>. Give it a click if you like.
                      </div>
                   </div>
                   <div class="alert text-white bg-success" role="alert">
                      <div class="iq-alert-icon">
                         <i class="ri-alert-line"></i>
                      </div>
                      <div class="iq-alert-text">simple primary alert with <a href="#"
                         class="alert-link text-white">an
                         example link</a>. Give it a click if you like.
                      </div>
                   </div>
                   <div class="alert text-white bg-danger" role="alert">
                      <div class="iq-alert-icon">
                         <i class="ri-information-line"></i>
                      </div>
                      <div class="iq-alert-text">simple primary alert with <a href="#"
                         class="alert-link text-white">an
                         example link</a>. Give it a click if you like.
                      </div>
                   </div>
                   <div class="alert text-white bg-warning" role="alert">
                      <div class="iq-alert-icon">
                         <i class="ri-alert-line"></i>
                      </div>
                      <div class="iq-alert-text">simple primary alert with <a href="#"
                         class="alert-link text-white">an
                         example link</a>. Give it a click if you like.
                      </div>
                   </div>
                   <div class="alert text-white bg-info" role="alert">
                      <div class="iq-alert-icon">
                         <i class="ri-information-line"></i>
                      </div>
                      <div class="iq-alert-text">simple primary alert with <a href="#"
                         class="alert-link text-white">an
                         example link</a>. Give it a click if you like.
                      </div>
                   </div>
                </div>
             </div>
          </div>
          <div class="col-sm-12">
             <div class="iq-card">
                <div class="iq-card-header d-flex justify-content-between">
                   <div class="iq-header-title">
                      <h4 class="card-title">Additional content</h4>
                   </div>
                </div>
                <div class="iq-card-body">
                   <p class="mb-4">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                      Lorem Ipsum has been the industry's standard dummy text ever
                   </p>
                   <div class="row">
                      <div class="col-sm-12 col-lg-6">
                         <div class="alert alert-primary" role="alert">
                            <div class="iq-alert-text">
                               <h5 class="alert-heading">Well done!</h5>
                               <p>Aww yeah, you successfully read this important alert message. This
                                  example text is going to run a bit longer so that you can see how
                                  spacing within an alert works with this kind of content.
                               </p>
                               <hr>
                               <p class="mb-0">Whenever you need to, be sure to use margin utilities to
                                  keep things nice and tidy.
                               </p>
                            </div>
                         </div>
                      </div>
                      <div class="col-sm-12 col-lg-6">
                         <div class="alert alert-success" role="alert">
                            <div class="iq-alert-text">
                               <h5 class="alert-heading">Well done!</h5>
                               <p>Aww yeah, you successfully read this important alert message. This
                                  example text is going to run a bit longer so that you can see how
                                  spacing within an alert works with this kind of content.
                               </p>
                               <hr>
                               <p class="mb-0">Whenever you need to, be sure to use margin utilities to
                                  keep things nice and tidy.
                               </p>
                            </div>
                         </div>
                      </div>
                   </div>
                </div>
             </div>
          </div>
       </div>
    </div>
 </div>
@endsection
