@extends('frontend.layouts.main')
@section('content')
<style>
/*html,*/
/*body {*/
/*    overflow-x: hidden;*/
/*}*/

/*.timeline {*/
/*    position: relative;*/
/*    padding-top: 60px;*/
/*    background: #0a447a17;*/
/*    padding-bottom: 60px;*/
    /* background: #DFEBF1; */

/*    &::before {*/
/*        content: '';*/
/*        width: 5px;*/
/*        height: 95%;*/
/*        position: absolute;*/
/*        left: 50%;*/
/*        transform: translateX(-50%);*/
/*    }*/
/*}*/


/*.timeline-item {*/
/*    width: 100%;*/
    /* margin-bottom: 60px; */

/*    &:nth-child(even) {*/
/*        .timeline-content {*/
/*            padding: 20px 20px 20px 20px;*/
/*        }*/
/*    }*/

/*    .timeline-content {*/
/*        position: relative;*/
/*        width: 100%;*/
/*        padding: 20px 20px;*/
/*        border-radius: 4px;*/
/*        background-color: #fff;*/
/*        box-shadow: 0 20px 25px -15px rgba(0, 0, 0, .3);*/
/*    }*/
/*}*/

/*.timeline-img {*/
/*    width: 30px;*/
/*    height: 30px;*/
/*    border-radius: 50%;*/
/*    position: absolute;*/
/*    left: 50%;*/
/*    margin-top: 25px;*/
/*    margin-left: -15px;*/
/*}*/


/*blockquote {*/
/*    margin-top: 30px;*/
/*    padding: 0 20px;*/
/*}*/

/*.date {*/
/*    display: inline-block;*/
/*    color: red;*/
/*    padding: 20px;*/
/*    position: absolute;*/
/*    top: 0;*/
/*    right: 0;*/
/*}*/

/*.timeline::before {*/
/*    content: "";*/
    /*background: #e4f6ff;*/
/*    background: #0a447a;*/
/*    width: 5px;*/
/*    height: 92%;*/
/*    position: absolute;*/
/*    left: 50%;*/
/*    transform: translateX(-50%);*/
/*}*/

/*.timeline-img {*/
/*    width: 30px;*/
/*    height: 30px;*/
    /*background: #e4f6ff;*/
/*    background: #0a447a;*/
/*    border-radius: 50%;*/
/*    position: absolute;*/
/*    left: 50%;*/
/*    margin-top: 25px;*/
/*    margin-left: -15px;*/
/*}*/

/*&::before {*/
/*    content: '';*/
    /* width: 5px; */
/*    height: 55%;*/
/*    position: absolute;*/
    /* left: 50%; */
/*    transform: translateX(-50%);*/
/*    background-color: #c5cae9;*/
/*}*/

/* &::before {
    content: '';
    width: 5px;
    height: 55%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background-color: #c5cae9;
} */

/*.samadhan-journey-h {*/
/*    font-size: 20px;*/
/*    font-family: 'roboto slab';*/
/*}*/

/*a.bnt-more {*/
/*    text-decoration: none;*/
/*    background-color: #3f51b5;*/
/*    padding: 10px 20px;*/
/*    border-radius: 5px;*/
/*    color: #ffffff;*/
/*}*/

/*.col-md-6 .right-journey {*/
/*    width: 46%;*/
/*}*/

/*.col-md-6.right-journey {*/
/*    margin-left: 54%;*/
/*}*/

/*.col-md-6.left-journey {*/
/*    margin-left: -48px;*/
/*}*/

/* .journey-image {
    float: inline-start;
    margin-right: 15px;
} */

/*.journey-image img {*/
/*    float: inline-start;*/
/*    margin-right: 15px;*/
/*    height: 189px;*/
/*    border-radius: 10px;*/
/*}*/
</style>
<section class="page-about">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h3 class="page-about-h">Journey</h3>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb justify-content-center">
                            <li class="breadcrumb-item text-center"><a class="breadcrumb-home"
                                    href="{{url('/')}}">Home</a></li>
                            <li class="breadcrumb-item active text-center" aria-current="page">Journey</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
</section>
<section class="timeline">
    <div class="container">
        @foreach ($journies as $journey)
        @if ($loop->iteration % 2 !== 0)
            <div class="timeline-item">
                <div class="timeline-img"></div>
                <div class="col-md-6 left-journey">
                    <div class="box-journey">
                        <div class="timeline-content js--fadeInLeft">
                            <div class="row">
                                <div class="col-md-10">
                                    <h2 class="samadhan-journey-h">{{$journey->title}}</h2>
                                </div>
                                <div class="col-md-2">
                                    <div class="date">{{$journey->date}}</div> 
                                </div>
                            </div>
                            <div class="journey-image">
                                <!--<img src="{{asset($journey->thumbnail)}}" alt="" class="img-fluid" width="250px">-->
                                <img src="{{ s3_url($journey->thumbnail) }}" alt="" class="img-fluid" width="250px">
                                
                            </div>
                            <p>{{strip_tags($journey->description)}}</p>
                            <!-- <a class="bnt-more" href="#">More</a> -->
                        </div>
                    </div>
                </div>
            </div>
        @else
            <div class="timeline-item">
                <div class="timeline-img"></div>
                <div class="col-md-6 right-journey">
                    <div class="box-journey">
                        <div class="timeline-content js--fadeInLeft">
                            <div class="row">
                                <div class="col-md-10">
                                    <h2 class="samadhan-journey-h">{{$journey->title}}</h2>
                                </div>
                                <div class="col-md-2">
                                    <div class="date">{{$journey->date}}</div>
                                </div>
                            </div>
                            <div class="journey-image">
                                <!--<img src="{{asset($journey->thumbnail)}}" alt="" class="img-fluid" width="250px">-->
                                <img src="{{ s3_url($journey->thumbnail) }}" alt="" class="img-fluid" width="250px">
                                
                            </div>
                            <p>{{strip_tags($journey->description)}}</p>
                            <!-- <a class="bnt-more" href="#">More</a> -->
                        </div>
                    </div>
                </div>
            </div>
        @endif
        @endforeach
    </div>
</section>
@endsection