@extends('layouts.app')
@section('content')

<div class="page-header header-filter" data-parallax="true" style="background-image: url({{ asset('img/profile_city.jpg') }})">
    <div class="container">
      <div class="row">
        <div class="col-md-8 ml-auto mr-auto">
          <div class="brand text-center">
            <h1>Nuestros Productos</h1>
            <h3 class="title text-center">Tenemos los mejores productos para ti</h3>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="main main-raised">
    <div class="container">
        <div class="section">
            <h2 class="title"></h2>
            <div class="">
                <div class="row">
                    <div class="col-md-6"  >
                            <!-- Card blog -->
                            <div class="card bg-dark text-white">
                                <img class="card-img" src="https://images.unsplash.com/photo-1517303650219-83c8b1788c4c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bd4c162d27ea317ff8c67255e955e3c8&auto=format&fit=crop&w=2691&q=80" alt="Card image">
                                <div class="card-img-overlay">
                                    <h4 class="card-title">Card title</h4>
                                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                                    <p class="card-text">Last updated 3 mins ago</p>
                                </div>
                            </div>
                            <!-- End Card Blog -->
                    </div>

                    <div class="col-md-3 mb-auto mt-auto" >
                        <h3>Mas compradas</h3>
                            <!-- Card blog -->
                            <div class="card bg-dark text-white">
                                <img class="card-img" src="https://images.unsplash.com/photo-1517303650219-83c8b1788c4c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bd4c162d27ea317ff8c67255e955e3c8&auto=format&fit=crop&w=2691&q=80" alt="Card image">
                                <div class="card-img-overlay">
                                    <h4 class="card-title">Card title</h4>
                                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                                    <p class="card-text">Last updated 3 mins ago</p>
                                </div>
                            </div>
                            <!-- End Card Blog -->
                    </div>

                    <div class="col-md-3 mb-auto mt-auto" >
                            <!-- Card blog -->
                            <h3>Nueva</h3>
                            <div class="card bg-dark text-white">
                                <img class="card-img" src="https://images.unsplash.com/photo-1517303650219-83c8b1788c4c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bd4c162d27ea317ff8c67255e955e3c8&auto=format&fit=crop&w=2691&q=80" alt="Card image">
                                <div class="card-img-overlay">
                                    <h4 class="card-title">Card title</h4>
                                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                                    <p class="card-text">Last updated 3 mins ago</p>
                                </div>
                            </div>
                            <!-- End Card Blog -->
                    </div>

                </div>
                <!-- end row --> 
                <div class="row">
                    <div class="col-md-4"  >
                            <!-- Card blog -->
                            <div class="card bg-dark text-white">
                                <img class="card-img" src="https://images.unsplash.com/photo-1517303650219-83c8b1788c4c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bd4c162d27ea317ff8c67255e955e3c8&auto=format&fit=crop&w=2691&q=80" alt="Card image">
                                <div class="card-img-overlay">
                                    <h4 class="card-title">Card title</h4>
                                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                                    <p class="card-text">Last updated 3 mins ago</p>
                                </div>
                            </div>
                            <!-- End Card Blog -->
                    </div>

                    <div class="col-md-4" >
                            <!-- Card blog -->
                            <div class="card bg-dark text-white">
                                <img class="card-img" src="https://images.unsplash.com/photo-1517303650219-83c8b1788c4c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bd4c162d27ea317ff8c67255e955e3c8&auto=format&fit=crop&w=2691&q=80" alt="Card image">
                                <div class="card-img-overlay">
                                    <h4 class="card-title">Card title</h4>
                                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                                    <p class="card-text">Last updated 3 mins ago</p>
                                </div>
                            </div>
                            <!-- End Card Blog -->
                    </div>

                    <div class="col-md-4" >
                            <!-- Card blog -->
                            <div class="card bg-dark text-white">
                                <img class="card-img" src="https://images.unsplash.com/photo-1517303650219-83c8b1788c4c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bd4c162d27ea317ff8c67255e955e3c8&auto=format&fit=crop&w=2691&q=80" alt="Card image">
                                <div class="card-img-overlay">
                                    <h4 class="card-title">Card title</h4>
                                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                                    <p class="card-text">Last updated 3 mins ago</p>
                                </div>
                            </div>
                            <!-- End Card Blog -->
                    </div>

                </div>
                
                
            </div>
            <!-- end team -->
        </div>
        <!-- end section -->
    </div>
    <!-- end container -->
  </div>
  <!-- end main -->

@endsection