tainacan-theme/src/single-colecoes.php

<?php get_header(); ?>
<div class="container-fluid p-0 capa-colecoes">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item"><a href="#">Library</a></li>
            <li class="breadcrumb-item active" aria-current="page">Data</li>
        </ol>
    </nav>
    <section class="tainacan-info p-2 m-md-5">
        <div class="row">
            <div class="col-12 col-md-6 p-5">
                <h3 class="text-jelly-bean text-capitalize font-weight-bold mb-3">About</h3>
                <p>about text</p>
            </div>
            <hr class="bg-oslo-gray w-100 d-sm-none mx-4"/>
            <hr class="bg-oslo-gray h-100 d-none d-md-block my-4"/>
            <div class="col-12 col-md-6 p-5">
                <h3 class="text-jelly-bean text-capitalize font-weight-bold mb-3">Hiring Info</h3>
                <p>info text</p>
            </div>
        </div>
    </section>
    <section class="tainacan-ranking p-2">
        <div class="col-12 d-flex border-bottom">
            <h4 class="text-jelly-bean">Rankings</h4> <span class="text-jelly-bean ml-auto align-self-center">Ver mais</span>
        </div>
        <div class="row p-5">
            <div class="col-sm border-bottom p-2 mx-lg-5">
                <i class="material-icons text-scooter p-3">play_arrow</i> Esculturas
            </div>
            <div class="col-sm border-bottom p-2 mx-lg-5">
                <i class="material-icons text-scooter p-3">play_arrow</i> Livros
            </div>
            <div class="col-sm border-bottom p-2 mx-lg-5">
                <i class="material-icons text-scooter p-3">play_arrow</i> Quadros
            </div>
            <div class="w-100"></div>
            <div class="col-sm border-bottom p-2 mx-lg-5">
                <i class="material-icons text-scooter p-3">play_arrow</i> Artefatos
            </div>
            <div class="col-sm border-bottom p-2 mx-lg-5">
                <i class="material-icons text-scooter p-3">play_arrow</i> Documentos
            </div>
            <div class="col-sm border-bottom p-2 mx-lg-5">
                <i class="material-icons text-scooter p-3">play_arrow</i> Outros
            </div>
        </div>
    </section>
    <section class="tainacan-img-dest p-2">
        <div class="col-12 d-flex border-bottom">
            <h4 class="text-jelly-bean">Imagens em destaque</h4> <span class="text-jelly-bean ml-auto align-self-center">Ver mais</span>
        </div>
        <div class="row p-3 p-md-5">
            <div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="9000">
                <div class="carousel-inner row w-100 mx-auto p-md-5" role="listbox">
                    <div class="carousel-item col-md-4 p-5 active">
                        <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400/000/fff?text=1" alt="slide 1">
                    </div>
                    <div class="carousel-item col-md-4 p-5">
                        <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=2" alt="slide 2">
                    </div>
                    <div class="carousel-item col-md-4 p-5">
                        <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=3" alt="slide 3">
                    </div>
                    <div class="carousel-item col-md-4 p-5">
                        <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=4" alt="slide 4">
                    </div>
                    <div class="carousel-item col-md-4 p-5">
                        <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=5" alt="slide 5">
                    </div>
                    <div class="carousel-item col-md-4 p-5">
                        <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=6" alt="slide 6">
                    </div>
                    <div class="carousel-item col-md-4 p-5">
                        <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=7" alt="slide 7">
                    </div>
                    <div class="carousel-item col-md-4 p-5">
                        <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=8" alt="slide 7">
                    </div>
                </div>
                <a class="carousel-control-prev text-scooter justify-content-start" href="#carouselExample" role="button" data-slide="prev">
                    <i class="material-icons prev-play">play_arrow</i>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next text-scooter justify-content-end" href="#carouselExample" role="button" data-slide="next">
                    <i class="material-icons">play_arrow</i>
                    <span class="sr-only">Next</span>
                </a>
            </div>

        </div>
    </section>
    <section class="tainacan-gallery-itens p-2">
        <div class="col-12 d-flex border-bottom mb-5">
            <h4 class="text-jelly-bean">Galeria de itens</h4> <span class="text-jelly-bean ml-auto align-self-center">Ver mais</span>
        </div>
        <div class="row p-3 p-md-5">
            <div class="col-sm-6 col-lg-4">
                <img class="img-fluid mx-auto d-block mb-3 mb-md-5" src="//placehold.it/600x400/?text=1" alt="slide 1">
            </div>
            <div class="col-sm-6 col-lg-4">
                <img class="img-fluid mx-auto d-block mb-3 mb-md-5" src="//placehold.it/600x400/?text=2" alt="slide 2">
            </div>
            <div class="col-sm-6 col-lg-4">
                <img class="img-fluid mx-auto d-block mb-3 mb-md-5" src="//placehold.it/600x400/?text=3" alt="slide 3">
            </div>
            <div class="col-sm-6 col-lg-4">
                <img class="img-fluid mx-auto d-block mb-3 mb-md-5" src="//placehold.it/600x400/?text=4" alt="slide 4">
            </div>
            <div class="col-sm-6 col-lg-4">
                <img class="img-fluid mx-auto d-none d-sm-block mb-3 mb-md-5" src="//placehold.it/600x400/?text=5" alt="slide 5">
            </div>
            <div class="col-sm-6 col-lg-4">
                <img class="img-fluid mx-auto d-none d-sm-block mb-3 mb-md-5" src="//placehold.it/600x400/?text=6" alt="slide 6">
            </div>
            <div class="col-sm-6 col-lg-4">
                <img class="img-fluid mx-auto d-none d-sm-block mb-3 mb-md-5" src="//placehold.it/600x400/?text=7" alt="slide 7">
            </div>
            <div class="col-sm-6 col-lg-4">
                <img class="img-fluid mx-auto d-none d-sm-block mb-3 mb-md-5" src="//placehold.it/600x400/?text=8" alt="slide 8">
            </div>
            <div class="col-sm-6 col-lg-4">
                <img class="img-fluid mx-auto d-none d-lg-block mb-3 mb-md-5" src="//placehold.it/600x400/?text=9" alt="slide 9">
            </div>
        </div>
    </section>
    <section class="tainacan-estatisticas p-2">
        <div class="col-12 d-flex border-bottom mb-4">
            <h4 class="text-jelly-bean">Estatísticas</h4> <span class="text-jelly-bean ml-auto align-self-center">Ver mais</span>
        </div>
        <div class="row p-0 p-lg-5">
            <div class="col-lg-6 p-0 p-lg-5">
                <h5 class="text-dark p-4">Localização do usuário</h5>
                <div class="d-flex justify-content-center bg-black-opacit">
                    <iframe class="my-lg-5" frameborder="0" style="border:0; height: 242.5px; width: 381.3px;"
                        src="https://www.google.com/maps/embed/v1/place?key=AIzaSyBbMcow3w_8HeBmqUcYcwigRSii0b2exT0
                            &q=Campus+Samambaia,Goiania+GO" allowfullscreen>
                    </iframe>
                </div>
            </div>
            <div class="col-lg-6 p-0 p-lg-5">
                <h5 class="text-dark pb-0 px-4 pt-4 p-md-4">Coleções do usuário</h5>
                <div class="d-flex justify-content-center">
                    <div id="collectionGraph" class="" style="width: 600px;"></div>
                </div>
            </div>
            <div class="col-lg-6 p-3">
                
            </div>
            <div class="col-lg-6 p-3">
                
            </div>
        </div>
    </section>
    <section class="tainacan-caracteristicas p-2">
        <div class="col-12 d-flex border-bottom">
            <h4 class="text-jelly-bean">Características</h4> <span class="text-jelly-bean ml-auto align-self-center">Ver mais</span>
        </div>
        <div class="row p-5">
            
        </div>
    </section>
</div>

<?php get_footer(); ?>