<template>
    <app-header></app-header>
    <section>
        <div id="push2" class="container-fluid max-width-fit-content">
            <h1 class="text-center g-py-20">Teams</h1>
            <div class="row">
                <div class="col-12 col-md-6 col-lg-6 g-mb-20">
                    <div class="g-pl-10 g-py-15 text-left box-shadow2 border-gray">
                        <img class="float-left" src="../assets/user.png" alt="userimage" width="50">
                        <span class="g-font-size-14 g-pl-10">David Kurniawan</span> -
                        <span class="g-font-size-14 g-pl-0">Manager IT</span><br>
                        <span class="g-font-size-14 g-pl-10 g-color-gray">Hello everyone ! Welcome to community</span>
                        <a href="#" class="button-chat btn btn-sm float-right g-mr-10 text-decoration-none g-pa-10 g-mt-minus-20">Chat</a>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-lg-6 g-mb-20">
                    <div class="g-pl-10 g-py-15 text-left box-shadow2 border-gray">
                        <img class="float-left" src="../assets/user.png" alt="userimage" width="50">
                        <span class="g-font-size-14 g-pl-10">Pricilla</span> -
                        <span class="g-font-size-14 g-pl-0">Sales</span><br>
                        <span class="g-font-size-14 g-pl-10 g-color-gray">Hello everyone ! Welcome to community</span>
                        <a href="#" class="button-chat btn btn-sm float-right g-mr-10 text-decoration-none g-pa-10 g-mt-minus-20">Chat</a>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-lg-6 g-mb-20">
                    <div class="g-pl-10 g-py-15 text-left box-shadow2 border-gray">
                        <img class="float-left" src="../assets/user.png" alt="userimage" width="50">
                        <span class="g-font-size-14 g-pl-10">Disty</span> -
                        <span class="g-font-size-14 g-pl-0">Finance</span><br>
                        <span class="g-font-size-14 g-pl-10 g-color-gray">Hello everyone ! Welcome to community</span>
                        <a href="#" class="button-chat btn btn-sm float-right g-mr-10 text-decoration-none g-pa-10 g-mt-minus-20">Chat</a>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-lg-6 g-mb-20">
                    <div class="g-pl-10 g-py-15 text-left box-shadow2 border-gray">
                        <img class="float-left" src="../assets/user.png" alt="userimage" width="50">
                        <span class="g-font-size-14 g-pl-10">Dave</span> -
                        <span class="g-font-size-14 g-pl-0">Sales</span><br>
                        <span class="g-font-size-14 g-pl-10 g-color-gray">Hello everyone ! Welcome to community</span>
                        <a href="#" class="button-chat btn btn-sm float-right g-mr-10 text-decoration-none g-pa-10 g-mt-minus-20">Chat</a>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-lg-6 g-mb-20">
                    <div class="g-pl-10 g-py-15 text-left box-shadow2 border-gray">
                        <img class="float-left" src="../assets/user.png" alt="userimage" width="50">
                        <span class="g-font-size-14 g-pl-10">Davis</span> -
                        <span class="g-font-size-14 g-pl-0">IT</span><br>
                        <span class="g-font-size-14 g-pl-10 g-color-gray">Hello everyone ! Welcome to community</span>
                        <a href="#" class="button-chat btn btn-sm float-right g-mr-10 text-decoration-none g-pa-10 g-mt-minus-20">Chat</a>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-lg-6 g-mb-20">
                    <div class="g-pl-10 g-py-15 text-left box-shadow2 border-gray">
                        <img class="float-left" src="../assets/user.png" alt="userimage" width="50">
                        <span class="g-font-size-14 g-pl-10">Satria</span> -
                        <span class="g-font-size-14 g-pl-0">IT</span><br>
                        <span class="g-font-size-14 g-pl-10 g-color-gray">Hello everyone ! Welcome to community</span>
                        <a href="#" class="button-chat btn btn-sm float-right g-mr-10 text-decoration-none g-pa-10 g-mt-minus-20">Chat</a>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-lg-6 g-mb-20">
                    <div class="g-pl-10 g-py-15 text-left box-shadow2 border-gray">
                        <img class="float-left" src="../assets/user.png" alt="userimage" width="50">
                        <span class="g-font-size-14 g-pl-10">Billy</span> -
                        <span class="g-font-size-14 g-pl-0">IT</span><br>
                        <span class="g-font-size-14 g-pl-10 g-color-gray">Hello everyone ! Welcome to community</span>
                        <a href="#" class="button-chat btn btn-sm float-right g-mr-10 text-decoration-none g-pa-10 g-mt-minus-20">Chat</a>
                    </div>
                </div>
                <div class="col-12 col-md-6 col-lg-6 g-mb-20">
                    <div class="g-pl-10 g-py-15 text-left box-shadow2 border-gray">
                        <img class="float-left" src="../assets/user.png" alt="userimage" width="50">
                        <span class="g-font-size-14 g-pl-10">Budi</span> -
                        <span class="g-font-size-14 g-pl-0">Sales</span><br>
                        <span class="g-font-size-14 g-pl-10 g-color-gray">Hello everyone ! Welcome to community</span>
                        <a href="#" class="button-chat btn btn-sm float-right g-mr-10 text-decoration-none g-pa-10 g-mt-minus-20">Chat</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>

<style scoped>
a {
    color: #ff6d00;
}
.button-chat {
    border: solid 1px #ff6d00;
    border-radius: 10px;
    background-color: #ffffff;
    color: #ff6d00;
    padding-top: 11px;
    padding-left: 20px;
    padding-right: 20px;
}
</style>

<script>
import Header from './Header.vue'

export default {
    components: {
        'app-header': Header
    },
}
</script>