@section('style')
<style>
    section#timeline {
        width: 80%;
        margin: 20px auto;
        position: relative;
    }

    section#timeline:before {
        content: '';
        display: block;
        position: absolute;
        left: 50%;
        top: 0;
        margin: 0 0 0 -1px;
        width: 2px;
        height: 100%;
        background: #35bb78 ;

    }

    section#timeline article {
        width: 100%;
        margin: 0 0 20px 0;
        position: relative;
    }

    section#timeline article:after {
        content: '';
        display: block;
        clear: both;
    }

    section#timeline article div.inner {
        width: 40%;
        float: left;
        margin: 5px 0 0 0;
        border-radius: 6px;
        border: double;
    }

    section#timeline article div.inner span.date {
        display: block;
        width: 60px;
        height: 60px;
        padding: 5px 0;
        position: absolute;
        top: 0;
        left: 50%;
        margin: 0 0 0 -32px;
        border-radius: 100%;
        font-size: 12px;
        font-weight: 900;
        text-transform: uppercase;
        background: #fff;
        color: rgb(0 0 0);
        border: 2px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 0 0 7px #ffffff;
    }

    section#timeline article div.inner span.date span {
        display: block;
        text-align: center;
    }

    section#timeline article div.inner span.date span.day {
        font-size: 10px;
    }

    section#timeline article div.inner span.date span.month {
        font-size: 18px;
    }

    section#timeline article div.inner span.date span.year {
        font-size: 10px;
    }

    section#timeline article div.inner h2 {
        padding: 15px;
        margin: 0;
        color: #fff;
        font-size: 20px;
        text-transform: uppercase;
        letter-spacing: -1px;
        border-radius: 6px 6px 0 0;
        position: relative;
    }

    section#timeline article div.inner h2:after {
        content: '';
        position: absolute;
        top: 20px;
        right: -5px;
        width: 10px;
        height: 10px;
        -webkit-transform: rotate(-45deg);
    }

    section#timeline article div.inner p {
        padding: 15px;
        margin: 0;
        font-size: 14px;
        background: #fff;
        color: #656565;
        border-radius: 0 0 6px 6px;
    }

    section#timeline article:nth-child(2n+2) div.inner {
        float: right;
    }

    section#timeline article:nth-child(2n+2) div.inner h2:after {
        left: -5px;
    }

    section#timeline article:nth-child(1) div.inner h2 {
        background: #e74c3c;
    }

    section#timeline article:nth-child(1) div.inner h2:after {
        background: #e74c3c;
    }

    section#timeline article:nth-child(2) div.inner h2 {
        background: #2ecc71;
    }

    section#timeline article:nth-child(2) div.inner h2:after {
        background: #2ecc71;
    }

    section#timeline article:nth-child(3) div.inner h2 {
        background: #e67e22;
    }

    section#timeline article:nth-child(3) div.inner h2:after {
        background: #e67e22;
    }

    section#timeline article:nth-child(4) div.inner h2 {
        background: #1abc9c;
    }

    section#timeline article:nth-child(4) div.inner h2:after {
        background: #1abc9c;
    }

    section#timeline article:nth-child(5) div.inner h2 {
        background: #9b59b6;
    }

    section#timeline article:nth-child(5) div.inner h2:after {
        background: #9b59b6;
    }
    section#timeline article:nth-child(6) div.inner h2 {
        background: #cf772f;
    }

    section#timeline article:nth-child(6) div.inner h2:after {
        background: #cf772f;
    }
    section#timeline article:nth-child(7) div.inner h2 {
        background: #0b8a79;
    }

    section#timeline article:nth-child(7) div.inner h2:after {
        background: #0b8a79;
    }
    section#timeline article:nth-child(8) div.inner h2 {
        background: #f3bd09;
    }

    section#timeline article:nth-child(8) div.inner h2:after {
        background: #f3bd09;
    }
    section#timeline article:nth-child(9) div.inner h2 {
        background: #0d0085;
    }

    section#timeline article:nth-child(9) div.inner h2:after {
        background: #0d0085;
    }

</style>
@endsection
@extends('layouts.Home.app')
@section('content')
    <div class="container">

        <div class="page-section">
            <div class="container">
                <div class="row">
                    <section id="timeline">
                        @foreach ($record as $r )
                        <article>
                            <div class="inner">
                                <span class="date">
                                    <span class="day">{{Carbon\Carbon::parse($r->created_at)->format('d')}}</span>
                                    <span class="month">{{Carbon\Carbon::parse($r->created_at)->format('M')}}</span>
                                    <span class="year">{{Carbon\Carbon::parse($r->created_at)->format('Y')}}</span>
                                </span>
                                <h2>{{$r->proses}}</h2>
                            </div>
                        </article>
                        @endforeach
                    </section>
                </div> <!-- row -->
            </div> <!-- .container -->
        </div>
    </div>
@endsection