<!-- ------------------------------Alert--success------------------------- -->

                    <div class="alert success">
                        <div class="container-1">
                            <i class="fas fa-check-circle"></i>
                        </div>
                        <div class="container-2">
                            <p>Success</p>
                            <p>Your changes are saved successfully</p>
                        </div>
                    </div>
            <!-- ------------------------------Alert--Error-------------------------- -->
                    <div class="alert error">
                        <div class="container-1">
                            <i class="fas fa-times-circle"></i>
                        </div>
                        <div class="container-2">
                            <p>Error</p>
                            <p>Something wrong happened</p>
                        </div>
                    </div>
             <!-- ------------------------------Alert--info----------------------  -->
                    <div class="alert info">
                        <div class="container-1">
                            <i class="fas fa-info-circle"></i>
                        </div>
                        <div class="container-2">
                            <p>Info</p>
                            <p>An update is available to install</p>
                        </div>
                    </div>

            <!-- ------------------------------Alert--warning------------------          -->
                    <div class="alert warning">
                        <div class="container-1">
                            <i class="fas fa-exclamation-circle"></i>
                        </div>
                        <div class="container-2">
                            <p>warning</p>
                            <p>Entered username is invalid</p>
                        </div>
                    </div>
                </div>