@extends('templates.header')
@section('content')
    <style>
        /* Applique des styles spécifiques à .tp-bgimg.defaultimg */
        .tp-bgimg.defaultimg {
            background-size: contain !important;
            background-position: right center !important;
            max-width: 100%;
            height: auto;
            object-fit: contain;
            /* Assure que l'image conserve ses proportions */
        }

        /* Applique des styles uniquement dans votre bannière */
        .tp-banner-container .tp-bgimg.defaultimg {
            background-size: contain !important;
            background-position: right center !important;
            max-width: 100%;
            height: auto;
            border-radius: 10px;
            /* Exemple : Ajoutez des coins arrondis */
        }

        .tp-caption.text1.sfb {
            color: black !important;
            /* Définit la couleur du texte à noir */
        }

        .section_holder2 .plan_info .singup_but {
            color: #fff;
            text-align: center;
            padding: 8px 30px;
            margin: 25px 0px 25px 50px;
            float: left;
            border-radius: 2px;
            background-color: #92d102;
        }

        @media (max-width: 768px) {
            .section_holder2 .plan_info .singup_but {
                color: #fff;
                text-align: center;
                padding: 8px 30px;
                margin: 25px 0px 25px 86px;
                float: left;
                border-radius: 2px;
                background-color: #92d102;
            }
        }

        @media only screen and (max-width: 479px) {
            .section_holder2 .arrow_up {
                margin: -26px 0px 0px 110px;
            }
        }

        @media only screen and (max-width: 479px) {
            .section_holder2 .arrow_down {
                margin: -6px 0px 0px 115px;
            }
        }

        .section_holder41 .offerbadge2 {
            position: absolute;
            width: 90px;
            height: 90px;
            float: left;
            padding: 35px 0 0 0;
            text-align: center;
            color: #272727;
            margin: 0 0 0 321px;
            line-height: 17px;
            background: url('{{ asset('images/site-img76.png') }}');

            z-index: 2;
        }

        .readmore_but2 {
            float: left;
            color: #fff;
            text-transform: uppercase;
            padding: 11px 8px;
            border: 2px solid #fff;
            border-radius: 2px;
        }



        .section_holder45 {
            width: 100%;
            float: left;
            padding: 50px 0 50px 0;
            margin: 0;
            background-color: white;
        }
        .section_holder43 .img_middle .badge {
    position: absolute;
    width: 170px;
    height: 170px;
    padding: 0;
    margin: 0px 0px 0px 158px;
    float: left;
    background: url('{{ asset('images/site-img50.png') }}');


}
.section_holder43 .img_middle .badge .text {
    padding: 50px 0px 0px 0px;
    font-size: 12px;
    margin: 0px;
    color: #272727;
    text-transform: uppercase;
}
.section_holder43 .bottom_shape {
    width: 100%;
    height: 18px;
    float: left;
    padding: 0;
    margin: 5px 0 0 0;
    background: url('{{ asset('images/site-img81.png') }}');

}
.section_holder43 .img_middle .badge .text span {
    padding: 0;
    font-size: 20px;
    margin: 0;
    font-weight: 600;
    color: #272727;
}
    </style>
    <div class="clearfix"></div>
    <div class="tp-banner">
        <div class="tp-banner2">
            <ul>
                <!-- SLIDE 1  -->
                @foreach ($banniere as $banner)
                    <li>

                        <!-- MAIN IMAGE -->

                        <img class="custom-image" src="{{ asset('uploads/bannieres/' . $banner->apercu) }}">


                        <!-- LAYERS -->



                       

                        <div class="tp-caption offerbadge sfb" data-x="617" data-hoffset="0" data-voffset="-10"
                            data-y="315" data-speed="800" data-start="1600" data-easing="Power4.easeOut"
                            data-endspeed="300" data-endeasing="Power1.easeIn" data-captionhidden="off" style="z-index: 6">
                            À partir de <br>
                            <span class="price">{{ $banner->prix }}DH</span><br>

                        </div>
                        <div class="tp-caption text1 sfb" data-x="0" data-hoffset="0" data-voffset="-10" data-y="126"
                            data-speed="800" data-start="1900" data-easing="Power4.easeOut" data-endspeed="300"
                            data-endeasing="Power1.easeIn" data-captionhidden="off" style="z-index: 6">{{ $banner->titre }}
                        </div>



                        <div class="tp-caption slide_list2 sfb" data-x="0" data-hoffset="0" data-voffset="-10"
                            data-y="220" data-speed="800" data-start="2500" data-easing="Power4.easeOut"
                            data-endspeed="300" data-endeasing="Power1.easeIn" data-captionhidden="off" style="z-index: 6">
                            {!! $banner->description !!}
                        </div>

                        <div class="tp-caption slider_but1 sfb" data-x="0" data-hoffset="0" data-voffset="-10"
                            data-y="435" data-speed="800" data-start="3900" data-easing="Power4.easeOut"
                            data-endspeed="300" data-endeasing="Power1.easeIn" data-captionhidden="off" style="z-index: 6">
                            <a href="#">Commencer</a>
                        </div>
                    </li>
                @endforeach

            </ul>
            <div class="tp-bannertimer"></div>
        </div>
    </div>
    <div class="clearfix"></div>
    <!--end slider-->

    {{-- <div class="domain_search_home">
        <div class="container">
            <div class="one_half">
                <form method="get" id="domain-searchform" action="blog.html">
                    <div>
                        <input class="input-text" name="dsearch" id="dsearch" value="Enter your Domain Name here..."
                            onfocus="if (this.value == 'Enter your Domain Name here...') {this.value = '';}"
                            onblur="if (this.value == '') {this.value = 'Enter your Domain Name here...';}" type="text">
                        <select class="drlist">
                            <option value=".com">.com</option>
                            <option value=".co">.co</option>
                            <option value=".net">.net</option>
                            <option value=".org">.org</option>
                            <option value=".biz">.biz</option>
                            <option value=".us.com">.us.com</option>
                            <option value=".us">.us</option>
                            <option value=".mobi">.mobi</option>
                            <option value=".info">.info</option>
                        </select>
                        <input id="searchsubmit" value="Search" type="submit">
                    </div>
                </form>
            </div>

            <div class="one_half last">
                <ul class="tld_list">
                    <li class="title">Top Domains</li>
                    <li class="one">.com <span>$11.99</span></li>
                    <li class="two">.org <span>$11.99</span></li>
                    <li class="three">.net <span>$10.99</span></li>
                </ul>
            </div>

        </div>
    </div> --}}
    <!--end home domain sear bar-->


 
    <!--end section-->
    <div class="clearfix"></div>

    <div class="section_holder43">
        <div class="container">

            <div class="one_third">
                <h4 class="uppercase lessmar">Créer un</h4>
                <h1 class="bold uppercase lessmar">Nouveau site Web?</h1>
                <h6>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse et justo. </h6>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse et justo. Praesent mattis.</p><br>
                <ol class="list_st4">
                    <li>Consectetuer adipiscing elit suspendisse adipiscing elit suspendisse</li>
                    <li> Hendrerit augue Cras tellus In pulvinar Hendrerit augue Cras tellus In pulvinar</li>
                    <li> Rutrum adipiscing luctus nisl magna adipiscing</li>
                </ol>
                <div class="bottom_shape"></div>
            </div> <!--end item-->

            <div class="one_third">
                <div class="img_middle">
                   
                    <!--end offer-->
                    <img src="{{ asset('images/site-img82.jpg')}}" alt="">
                </div>
            </div><!--end item-->


            <div class="one_third last">
                <h4 class="uppercase lessmar">En provenance de</h4>
                <h1 class="bold uppercase lessmar">Un autre hôte ?</h1>
                <h6>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse et justo. </h6>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse et justo. Praesent mattis.</p><br>
                <ol class="list_st4">
                    <li>Consectetuer adipiscing elit suspendisse adipiscing elit suspendisse</li>
                    <li> Hendrerit augue Cras tellus In pulvinar Hendrerit augue Cras tellus In pulvinar</li>
                    <li> Rutrum adipiscing luctus nisl magna adipiscing</li>
                </ol>
                <div class="bottom_shape"></div>
            </div> <!--end item-->

        </div>
    </div>
    <div class="clearfix"></div>


    <!--end section-->
    <div class="clearfix"></div>
    <div class="section_holder41">
        <div class="container">


            <div class="one_half last" style="width:100%">
                <h1 class="lt_title_big_left">Obetenir un <span>site Web</span></h1>
                <div class="clearfix"></div>
                <div class="cl_title_line_left two"></div>
                <div class="clearfix"></div>
                <div class="img_right">
                    <div class="offerbadge2"><span>3500 DH</span><br>/ mo</div>
                    <img src="{{ asset('images/slider-home.png') }}" style="width:300px; height:200px;" alt="">
                </div>
                <div class="text_left">
                    <h6>Créez votre propre site Web</h6>
                    <ul class="list">
                        <li><i class="fa fa-check"></i> Lorem ipsum dolor sit amet sit justo</li>
                        <li><i class="fa fa-check"></i> Nullam turpis. Cras dapibus</li>
                        <li><i class="fa fa-check"></i> Ipsum dolor sit amet sit justo</li>
                        <li><i class="fa fa-check"></i> Lorem ipsum dolor sit amet sit justo</li>
                    </ul>
                    <a href="{{ route('contacts') }}" class="readmore_but3">Contactez-Nous</a>
                </div>
            </div>
            <!--end item-->
        </div>
    </div>
    <!--end section-->

    <div class="clearfix"></div>
    <div class="punchtext">
        <div class="container">
            <div class="text">
                <h4 class="white margin_top1">Obtenez d'excellentes mises en page d'hébergement Web uniques avec Atlas
                    Hosting</h4>
            </div>
            <div class="but"> <a href="{{ route('contacts') }}" class="readmore_but2">Contactez-Nous</a> </div>
        </div>
    </div>


    <div class="clearfix"></div>
    <br><br><br>
@endsection