@extends('layouts.app')
@section('content')
    <div class="row">
        <!-- Blog Content-->
        <div class="col-xl-9">
            <div class="card-columns">
                <div class="card">
                    <a href="#"><img class="img-fluid" src="/img/bg1.jpg" alt="demo" /></a>
                    <div class="card-body">
                        <p class="d-flex">
                            <span>
                                <small class="mr-1">
                                    By
                                    <a class="ml-1" href="#">Erica Castro</a>
                                </small>
                                <small class="mr-1">May 03, 2015</small>
                            </span>
                            <span class="ml-auto">
                                <small>
                                    <strong>56</strong>
                                    <span>Comments</span>
                                </small>
                            </span>
                        </p>
                        <h4><a href="#">Trip down the river</a></h4>
                        <p>
                            Aenean in sollicitudin velit. Nam sem magna, tristique non facilisis a, porta ut elit. Aliquam luctus nulla in justo euismod blandit. Aliquam condimentum enim a risus
                            cursus blandit.
                        </p>
                    </div>
                </div>
                <div class="card">
                    <div class="card-body bg-primary">
                        <h3 class="my-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
                    </div>
                    <div class="card-body">
                        <p class="d-flex">
                            <span>
                                <small class="mr-1">
                                    By
                                    <a class="ml-1" href="#">Erica Castro</a>
                                </small>
                                <small class="mr-1">May 03, 2015</small>
                            </span>
                            <span class="ml-auto">
                                <small>
                                    <strong>56</strong>
                                    <span>Comments</span>
                                </small>
                            </span>
                        </p>
                    </div>
                </div>
                <div class="card">
                    <a href="#"><img class="img-fluid" src="/img/bg10.jpg" alt="demo" /></a>
                    <div class="card-body">
                        <p class="d-flex">
                            <span>
                                <small class="mr-1">
                                    By
                                    <a class="ml-1" href="#">Erin Clark</a>
                                </small>
                                <small class="mr-1">Apr 13, 2015</small>
                            </span>
                            <span class="ml-auto">
                                <small>
                                    <strong>1000</strong>
                                    <span>Comments</span>
                                </small>
                            </span>
                        </p>
                        <h4><a href="#">New camera</a></h4>
                        <p>
                            Nullam posuere euismod volutpat. Quisque in ligula eget libero tristique varius sed euismod dolor. Sed ultrices, diam varius pellentesque porta, nulla neque auctor elit,
                            quis tempus orci massa eget odio. Duis eleifend elementum commodo. Donec volutpat tristique laoreet. Cras vitae turpis enim, eget malesuada erat. Suspendisse quam leo,
                            gravida a ullamcorper a, interdum id odio. Nullam eu lacus in nibh rutrum ornare at eget tellus.
                        </p>
                    </div>
                </div>
                <div class="card">
                    <a href="#"><img class="img-fluid" src="/img/bg2.jpg" alt="demo" /></a>
                    <div class="card-body">
                        <p class="d-flex">
                            <span>
                                <small class="mr-1">
                                    By
                                    <a class="ml-1" href="#">Erica Castro</a>
                                </small>
                                <small class="mr-1">May 03, 2015</small>
                            </span>
                            <span class="ml-auto">
                                <small>
                                    <strong>56</strong>
                                    <span>Comments</span>
                                </small>
                            </span>
                        </p>
                        <h4><a href="#">Reviewing latests phones</a></h4>
                        <p>
                            Aenean in sollicitudin velit. Nam sem magna, tristique non facilisis a, porta ut elit. Aliquam luctus nulla in justo euismod blandit. Aliquam condimentum enim a risus
                            cursus blandit.
                        </p>
                    </div>
                </div>
                <div class="card">
                    <a href="#"><img class="img-fluid" src="/img/bg8.jpg" alt="demo" /></a>
                    <div class="card-body">
                        <p class="d-flex">
                            <span>
                                <small class="mr-1">
                                    By
                                    <a class="ml-1" href="#">Allen Stephens</a>
                                </small>
                                <small class="mr-1">May 03, 2015</small>
                            </span>
                            <span class="ml-auto">
                                <small>
                                    <strong>5600</strong>
                                    <span>Comments</span>
                                </small>
                            </span>
                        </p>
                        <h4><a href="#">Workspace showcase</a></h4>
                        <p>Aenean iaculis diam lectus. Morbi quis purus velit. Maecenas tincidunt tempus sapien id ultrices. Vivamus fermentum libero vel felis aliquet interdum.</p>
                    </div>
                </div>
                <div class="card">
                    <a href="#"><img class="img-fluid" src="/img/bg3.jpg" alt="demo" /></a>
                    <div class="card-body">
                        <p class="d-flex">
                            <span>
                                <small class="mr-1">
                                    By
                                    <a class="ml-1" href="#">Erica Castro</a>
                                </small>
                                <small class="mr-1">May 03, 2015</small>
                            </span>
                            <span class="ml-auto">
                                <small>
                                    <strong>56</strong>
                                    <span>Comments</span>
                                </small>
                            </span>
                        </p>
                        <h4><a href="#">Incredible panoramic</a></h4>
                        <p>
                            Aenean in sollicitudin velit. Nam sem magna, tristique non facilisis a, porta ut elit. Aliquam luctus nulla in justo euismod blandit. Aliquam condimentum enim a risus
                            cursus blandit.
                        </p>
                    </div>
                </div>
                <div class="card">
                    <div class="card-body bg-purple">
                        <h3 class="my-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
                    </div>
                    <div class="card-body">
                        <p class="d-flex m-0">
                            <span>
                                <small class="mr-1">
                                    By
                                    <a class="ml-1" href="#">Ava Chavez</a>
                                </small>
                                <small class="mr-1">May 03, 2015</small>
                            </span>
                            <span class="ml-auto">
                                <small>
                                    <strong>999</strong>
                                    <span>Comments</span>
                                </small>
                            </span>
                        </p>
                    </div>
                </div>
                <div class="card">
                    <a href="#"><img class="img-fluid" src="/img/bg4.jpg" alt="demo" /></a>
                    <div class="card-body">
                        <p class="d-flex">
                            <span>
                                <small class="mr-1">
                                    By
                                    <a class="ml-1" href="#">Danny Ford</a>
                                </small>
                                <small class="mr-1">May 03, 2015</small>
                            </span>
                            <span class="ml-auto">
                                <small>
                                    <strong>1000</strong>
                                    <span>Comments</span>
                                </small>
                            </span>
                        </p>
                        <h4><a href="#">Sunset in the forest</a></h4>
                    </div>
                </div>
                <div class="card">
                    <a href="#"><img class="img-fluid" src="/img/bg5.jpg" alt="demo" /></a>
                    <div class="card-body">
                        <p class="d-flex">
                            <span>
                                <small class="mr-1">
                                    By
                                    <a class="ml-1" href="#">Danny Ford</a>
                                </small>
                                <small class="mr-1">May 03, 2015</small>
                            </span>
                            <span class="ml-auto">
                                <small>
                                    <strong>1000</strong>
                                    <span>Comments</span>
                                </small>
                            </span>
                        </p>
                        <h4><a href="#">Tech review</a></h4>
                    </div>
                </div>
            </div>
        </div>
        <!-- Blog Sidebar-->
        <div class="col-xl-3">
            <!-- Search-->
            <div class="card card-default">
                <div class="card-header">Search</div>
                <div class="card-body">
                    <form class="form-horizontal">
                        <div class="input-group">
                            <input class="form-control" type="text" placeholder="Search for..." />
                            <span class="input-group-btn">
                                <button class="btn btn-secondary" type="button"><em class="fa fa-search"></em></button>
                            </span>
                        </div>
                    </form>
                </div>
            </div>
            <!-- Categories-->
            <div class="card card-default">
                <div class="card-header">Categories</div>
                <div class="card-body">
                    <ul class="list-unstyled">
                        <li>
                            <a href="#">
                                <em class="fa fa-angle-right fa-fw"></em>
                                Smartphones
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <em class="fa fa-angle-right fa-fw"></em>
                                Mobiles
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <em class="fa fa-angle-right fa-fw"></em>
                                Tech
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <em class="fa fa-angle-right fa-fw"></em>
                                Inpiration
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <em class="fa fa-angle-right fa-fw"></em>
                                Workspace
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- Tag Cloud-->
            <div class="card card-default">
                <div class="card-header">Tag Cloud</div>
                <div class="card-body">
                    <div class="mw-100" id="jqcloud"></div>
                </div>
            </div>
            <!-- Ads-->
            <div class="card card-default">
                <div class="card-header">Ads</div>
                <div class="card-body ie-fix-flex">
                    <a href="#"><img class="img-fluid img-thumbnail" src="/img/mockup.png" alt="demo" /></a>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('styles')@endsection
@section('scripts')
    <script src="{{ mix('/js/jqcloud.js') }}"></script>
@endsection
