
<style>
    .carousel-item>img{
        object-fit:cover !important;
    }
    #carouselExampleControls .carousel-inner{
        height:35em !important;
    }
    #jtron-holder{
        height: 35em;
    }
    #jumbotron{
        position: fixed;
        width: 100%;
        z-index:0
    }
</style>
<div class="position-relative" id="jtron-holder">
    <div id="jumbotron">
        <div id="carouselExampleControls" class="carousel slide bg-dark" data-ride="carousel">
            <div class="carousel-inner">
                <?php 
                    $upload_path = "uploads/banner";
                    if(is_dir(base_app.$upload_path)): 
                    $file= scandir(base_app.$upload_path);
                    $_i = 0;
                        foreach($file as $img):
                            if(in_array($img,array('.','..')))
                                continue;
                    $_i++;
                        
                ?>
                <div class="carousel-item h-100 <?php echo $_i == 1 ? "active" : '' ?>">
                    <img src="<?php echo validate_image($upload_path.'/'.$img) ?>" class="d-block w-100  h-100" alt="<?php echo $img ?>">
                </div>
                <?php endforeach; ?>
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>
<section class="py-3 bg-gradient-dark position-relative" style="z-index:1">
    <div class="container-fluid">
        <div class="row justify-content-center" style="margin-top:-7em">
            <div class="col-lg-10 col-md-11 col-sm-11 col-sm-11">
                <div class="card card-outline rounded-0">
                    <div class="card-body">
                        <div class="container-fluid">
                            <?= htmlspecialchars_decode(file_get_contents('welcome.html')) ?>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>