incridible
4 months ago

how to change display layout at frontend using laravel

Posted 4 months ago by incridible

hi m getting categories from db in this way: https://ibb.co/3WtryYK and I wants to show them in this way https://ibb.co/NnmBKkm , I need a scenario like conditional statement or loop and select 2 grids that one category show in one grid and the oher in another

i have tried this code but it bads the layout,

code:

   <section class="banner bgwhite p-t-40 p-b-40">
    <div class="container">
        <div class="row">
            @foreach($categories as $key => $category)
            @if($key % 2 == 0)
            <div class="col-sm-10 col-md-8 col-lg-4 m-l-r-auto">
                <!-- block1 -->
                
                <div class="block1 hov-img-zoom pos-relative m-b-30">
                    <img src="{{ asset('/images/frontend_images/banner-02.jpg') }}" alt="IMG-BENNER">

                    <div class="block1-wrapbtn w-size2">
                        <!-- Button -->
                        <a href="#" class="flex-c-m size2 m-text2 bg3 hov1 trans-0-4">
                            {{ ucwords($category->category_name) }}
                        </a>
                    </div>
                </div>
                @endif

                <!-- block1 -->
                @if($key % 2 == 1)
                <div class="block1 hov-img-zoom pos-relative m-b-30">
                    <img src="{{ asset('/images/frontend_images/banner-05.jpg') }}" alt="IMG-BENNER">

                    <div class="block1-wrapbtn w-size2">
                        <!-- Button -->
                        <a href="#" class="flex-c-m size2 m-text2 bg3 hov1 trans-0-4">
                            Sunglasses
                        </a>
                    </div>
                </div>
                @endif
            </div>
            @endforeach

            <div class="col-sm-10 col-md-8 col-lg-4 m-l-r-auto">
                <!-- block1 -->
                <div class="block1 hov-img-zoom pos-relative m-b-30">
                    <img src="{{ asset('/images/frontend_images/banner-03.jpg') }}" alt="IMG-BENNER">

                    <div class="block1-wrapbtn w-size2">
                        <!-- Button -->
                        <a href="#" class="flex-c-m size2 m-text2 bg3 hov1 trans-0-4">
                            Watches
                        </a>
                    </div>
                </div>

                <!-- block1 -->
                <div class="block1 hov-img-zoom pos-relative m-b-30">
                    <img src="{{ asset('/images/frontend_images/banner-07.jpg') }}" alt="IMG-BENNER">

                    <div class="block1-wrapbtn w-size2">
                        <!-- Button -->
                        <a href="#" class="flex-c-m size2 m-text2 bg3 hov1 trans-0-4">
                            Footerwear
                        </a>
                    </div>
                </div>
            </div>

            <div class="col-sm-10 col-md-8 col-lg-4 m-l-r-auto">
                <!-- block1 -->
                <div class="block1 hov-img-zoom pos-relative m-b-30">
                    <img src="{{ asset('/images/frontend_images/banner-04.jpg') }}" alt="IMG-BENNER">

                    <div class="block1-wrapbtn w-size2">
                        <!-- Button -->
                        <a href="#" class="flex-c-m size2 m-text2 bg3 hov1 trans-0-4">
                            Bags
                        </a>
                    </div>
                </div>

                <!-- block2 -->
                <div class="block2 wrap-pic-w pos-relative m-b-30">
                    <img src="{{ asset('/images/frontend_images/icons/bg-01.jpg') }}" alt="IMG">

                    <div class="block2-content sizefull ab-t-l flex-col-c-m">
                        <h4 class="m-text4 t-center w-size3 p-b-8">
                            Sign up & get 20% off
                        </h4>

                        <p class="t-center w-size4">
                            Be the frist to know about the latest fashion news and get exclu-sive offers
                        </p>

                        <div class="w-size2 p-t-25">
                            <!-- Button -->
                            <a href="#" class="flex-c-m size2 bg4 bo-rad-23 hov1 m-text3 trans-0-4">
                                Sign Up
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </section>

Please sign in or create an account to participate in this conversation.