@extends('layouts.app')
@section('content')
    <div class="card b text-white">
        <div class="card-body bg-cover clearfix" style="background-image: url(/img/profile-bg.jpg)">
            <div class="media mt-0 align-items-center">
                <img class="mr-3 img-thumbnail rounded-circle thumb96" src="/img/user/06.jpg" alt="Image" />
                <div class="media-body">
                    <div class="d-flex">
                        <div>
                            <h4 class="m-0">Claire Beck</h4>
                            <p>Team lead</p>
                            <button class="btn btn-info btn-xs" type="button">"Following"</button>
                        </div>
                        <div class="ml-auto">
                            <div class="inline text-center mr-2">
                                <div class="h3 m-0"><strong>1.4k</strong></div>
                                <small>followers</small>
                            </div>
                            <div class="inline text-center mr-2">
                                <div class="h3 m-0"><strong>350</strong></div>
                                <small>pictures</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="card-columns card-columns-2">
        <div class="card b">
            <div class="card-body">
                <form class="mb-2 mt-2" method="post" action="#"><textarea class="form-control" rows="4" placeholder="Post a new comment.."></textarea></form>
                <div class="clearfix">
                    <div class="float-left">
                        <ul class="nav nav-pills">
                            <li class="nav-item">
                                <a class="nav-link" href="#"><em class="fa fa-location-arrow"></em></a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#"><em class="far fa-image"></em></a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#"><em class="fas fa-video"></em></a>
                            </li>
                        </ul>
                    </div>
                    <div class="float-right"><button class="btn btn-success" type="button">Post</button></div>
                </div>
            </div>
        </div>
        <div class="card b">
            <div class="card-header">
                <div class="float-right">
                    <div class="btn-group dropdown">
                        <button class="btn btn-link" data-toggle="dropdown"><em class="fa fa-ellipsis-v fa-lg text-muted"></em></button>
                        <div class="dropdown-menu dropdown-menu-right" role="menu">
                            <a class="dropdown-item" href="#"><span>Hide this</span></a>
                            <a class="dropdown-item" href="#"><span>Share</span></a>
                            <a class="dropdown-item" href="#"><span>Block user</span></a>
                        </div>
                    </div>
                </div>
                <div class="media mt-0">
                    <img class="mr-2 img-thumbnail rounded-circle thumb32" src="/img/user/03.jpg" alt="Image" />
                    <div class="media-body">
                        <h5 class="m-0 text-bold">Raymond Clark</h5>
                        <div class="text-sm text-muted">yesterday</div>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-xl-4 text-center mb-3">
                        <a href="#"><img class="img-fluid img-thumbnail" src="/img/bg8.jpg" alt="Image" /></a>
                    </div>
                    <div class="col-xl-8">
                        <h4>Lorem Ipsum</h4>
                        <p>
                            Fusce at enim eget nibh convallis elementum. Duis a neque odio, at varius elit. Suspendisse ullamcorper eros eget augue ultrices feugiat. Phasellus dictum nisi eu ipsum
                            fermentum rhoncus. Mauris eu lacus massa, vel condimentum lectus..
                        </p>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <form class="mt-2" method="post" action="#"><textarea class="form-control no-resize" placeholder="Comment..." rows="1"></textarea></form>
            </div>
        </div>
        <div class="card b">
            <div class="card-header">
                <div class="float-right">
                    <a class="text-muted" href="#">
                        <em class="far fa-thumbs-up fa-fw"></em>
                        <span>(32)</span>
                    </a>
                </div>
                <div class="media mt-0">
                    <img class="mr-2 img-thumbnail rounded-circle thumb32" src="/img/user/08.jpg" alt="Image" />
                    <div class="media-body">
                        <h5 class="m-0 text-bold">Kelly Vargas</h5>
                        <div class="text-sm text-muted">3 days</div>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <p>Curabitur dignissim dapibus nisl sed iaculis.</p>
                <p>
                    <a href="#"><img class="img-fluid img-thumbnail" src="/img/bg10.jpg" alt="Image" /></a>
                </p>
                <p>
                    <em class="far fa-comment fa-fw"></em>
                    <span>(9)</span>
                </p>
                <div class="media mb-2">
                    <img class="mr-2 rounded-circle thumb32" src="/img/user/05.jpg" alt="Image" />
                    <div class="media-body">
                        <div>
                            <p class="m-0">
                                <a href="#"><strong>Aiden Curtis</strong></a>
                            </p>
                            <p class="m-0 text-muted">Hey looks great!</p>
                        </div>
                    </div>
                    <small class="ml-auto text-muted">12m ago</small>
                </div>
                <div class="media mb-2">
                    <img class="mr-2 rounded-circle thumb32" src="/img/user/08.jpg" alt="Image" />
                    <div class="media-body">
                        <div>
                            <p class="m-0">
                                <a href="#"><strong>William Stevens</strong></a>
                            </p>
                            <p class="m-0 text-muted">Excellento shot!</p>
                        </div>
                    </div>
                    <small class="ml-auto text-muted">30m ago</small>
                </div>
                <div class="media mb-2">
                    <img class="mr-2 rounded-circle thumb32" src="/img/user/04.jpg" alt="Image" />
                    <div class="media-body">
                        <div>
                            <p class="m-0">
                                <a href="#"><strong>James Payne</strong></a>
                            </p>
                            <p class="m-0 text-muted">Nice shot!</p>
                        </div>
                    </div>
                    <small class="ml-auto text-muted">30m ago</small>
                </div>
            </div>
            <div class="card-body bg-gray-lighter"><a class="link-unstyled" href="#">Load (6) more comments</a></div>
            <div class="card-body">
                <form class="mt-2" method="post" action="#"><textarea class="form-control no-resize" placeholder="Comment..." rows="1"></textarea></form>
            </div>
        </div>
        <div class="card b">
            <div class="card-header">
                <div class="float-right">
                    <a class="inline" href="#"><img class="rounded-circle thumb24" src="/img/user/05.jpg" alt="member" /></a>
                    <a class="inline" href="#"><img class="rounded-circle thumb24" src="/img/user/06.jpg" alt="member" /></a>
                    <a class="inline" href="#"><img class="rounded-circle thumb24" src="/img/user/07.jpg" alt="member" /></a>
                </div>
                <div class="media mt-0">
                    <img class="mr-2 img-thumbnail rounded-circle thumb32" src="/img/user/04.jpg" alt="Image" />
                    <div class="media-body">
                        <h5 class="m-0 text-bold">Travis Horton</h5>
                        <div class="text-sm text-muted">3 minutes</div>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <blockquote>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu odio vitae augue elementum molestie sed quis turpis.</p>
                    <footer>
                        Someone famous in
                        <cite title="Source Title">Source Title</cite>
                    </footer>
                </blockquote>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>
        <div class="card b">
            <div class="card-header">
                <div class="media">
                    <img class="mr-2 img-thumbnail rounded-circle thumb32" src="/img/user/08.jpg" alt="Image" />
                    <div class="media-body">
                        <h5 class="m-0 text-bold">Kelly Vargas</h5>
                        <div class="text-sm text-muted">3 days</div>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <p>
                    <a href="#"><img class="img-fluid img-thumbnail" src="/img/bg3.jpg" alt="Image" /></a>
                </p>
                <p>Curabitur dignissim dapibus nisl sed iaculis.</p>
            </div>
        </div>
        <div class="card b">
            <div class="card-header">
                <div class="float-right">
                    <div class="btn-group dropdown">
                        <button class="btn btn-link" data-toggle="dropdown"><em class="fa fa-ellipsis-v fa-lg text-muted"></em></button>
                        <div class="dropdown-menu dropdown-menu-right" role="menu">
                            <a class="dropdown-item" href="#"><span>Hide this</span></a>
                            <a class="dropdown-item" href="#"><span>Share</span></a>
                            <a class="dropdown-item" href="#"><span>Block user</span></a>
                        </div>
                    </div>
                </div>
                <div class="media mt-0">
                    <img class="mr-2 img-thumbnail rounded-circle thumb32" src="/img/user/03.jpg" alt="Image" />
                    <div class="media-body">
                        <h5 class="m-0 text-bold">Elmer Thomas</h5>
                        <div class="text-sm text-muted">3 minutes</div>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <p>I'm the big picture guy! xD</p>
            </div>
            <div class="card-body">
                <a class="inline" href="#"><img class="rounded-circle thumb48" src="/img/user/03.jpg" alt="member" /></a>
                <a class="inline" href="#"><img class="rounded-circle thumb24" src="/img/user/02.jpg" alt="member" /></a>
                <a class="inline" href="#"><img class="rounded-circle thumb24" src="/img/user/06.jpg" alt="member" /></a>
                <a class="inline" href="#"><img class="rounded-circle thumb24" src="/img/user/07.jpg" alt="member" /></a>
                <a class="inline" href="#"><img class="rounded-circle thumb24" src="/img/user/08.jpg" alt="member" /></a>
                <a class="inline" href="#"><img class="rounded-circle thumb24" src="/img/user/09.jpg" alt="member" /></a>
            </div>
            <div class="card-body">
                <form class="mb-2 mt-2" method="post" action="#"><textarea class="form-control no-resize" placeholder="Comment..." rows="1"></textarea></form>
                <div class="clearfix">
                    <div class="float-left">
                        <ul class="nav nav-pills">
                            <li class="nav-item">
                                <a class="nav-link" href="#"><em class="fa fa-location-arrow"></em></a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#"><em class="far fa-image"></em></a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#"><em class="fas fa-video"></em></a>
                            </li>
                        </ul>
                    </div>
                    <div class="float-right"><button class="btn btn-success btn-sm" type="button">Post</button></div>
                </div>
            </div>
        </div>
        <div class="card b">
            <div class="card-header">
                <div class="media">
                    <img class="mr-2 img-thumbnail rounded-circle thumb32" src="/img/user/08.jpg" alt="Image" />
                    <div class="media-body">
                        <h5 class="m-0 text-bold">Kelly Vargas</h5>
                        <div class="text-sm text-muted">3 days</div>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <p>Sharing some ideas of what we could do with flexbox</p>
                <div class="row row-flush">
                    <div class="col-6">
                        <div class="row row-flush">
                            <div class="row row-flush">
                                <div class="col-6">
                                    <a href="#"><img class="img-fluid img-thumbnail" src="/img/bg7.jpg" alt="Image" /></a>
                                </div>
                                <div class="col-6">
                                    <a href="#"><img class="img-fluid img-thumbnail" src="/img/bg8.jpg" alt="Image" /></a>
                                </div>
                            </div>
                            <div class="col-12">
                                <a href="#"><img class="img-fluid img-thumbnail" src="/img/lock-bg.jpg" alt="Image" /></a>
                            </div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="row row-flush">
                            <div class="col-12">
                                <a href="#"><img class="img-fluid img-thumbnail" src="/img/lock-bg.jpg" alt="Image" /></a>
                            </div>
                            <div class="row row-flush">
                                <div class="col-6">
                                    <a href="#"><img class="img-fluid img-thumbnail" src="/img/bg4.jpg" alt="Image" /></a>
                                </div>
                                <div class="col-6">
                                    <a href="#"><img class="img-fluid img-thumbnail" src="/img/bg5.jpg" alt="Image" /></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="text-center my-3">
        <button class="btn btn-secondary btn-oval btn-lg" type="button">Load more..</button>
    </div>
@endsection
@section('styles')@endsection
@section('scripts')@endsection
