test log helper

by T1MOXA

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
    <div class="player-profile card-block">
        <h4 class="f-w-400">Профиль игрока</h4>
        <div class="content">
            <img class="avatar-big" src="https://i.pinimg.com/originals/1e/aa/75/1eaa75496c78dc65c9c7358cd8dd759a.jpg">
            <h1>M3V3RISΞ</h1>
            <h6 class="f-w-300">STEAM_ID:1:123456789</h6>
        </div>
    </div>
    <div class="grid-striped">
        <div class="row font-weight-bold py-2">
            <div class="col-sm">Администратор</div>
            <div class="col-sm">Дата</div>
            <div class="col-sm">Тип</div>
            <div class="col-sm">Сервер</div>
            <div class="col-sm">Длительность</div>
        </div>
        <div class="row py-2" data-toggle="collapse" data-target="#1" aria-expanded="false" aria-controls="collapseExample">
            <div class="col-sm">
                <img class="avatar" src="https://i.pinimg.com/originals/1e/aa/75/1eaa75496c78dc65c9c7358cd8dd759a.jpg">
                <a href="#">{Ramzes}</a>
            </div>
            <div class="col-sm">2018-07-31 12:12:18</div>
            <div class="col-sm">Кик</div>
            <div class="col-sm">1</div>
            <div class="col-sm">-</div>
        </div>
        <div class="collapse" id="1">
            <div class="card-block" style="background-color: #6f6f6f">
                <h4>Причина:</h4>
                <h6 class="f-w-300">П.П. 1.1.9. Множ. Оскорбления, унижение, дискриминация.</h6>
            </div>
        </div>
    </div>
</div>

CSS

.player-profile {
	background-color: #607D8B;
}

.card-block {
    color: #fff;
    padding: 30px;
}

.row:hover {
    background-color: #ddecff !important;
}

.grid-striped .row:nth-of-type(odd) {
    background-color: #ffffff80;
}

.row {
    margin: 0;
    background-color: #fff;
}

.content img {
    margin-right: 15px;
    float: left;
}

.avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin: 5px;
}

.avatar-big {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 3px solid #FFF;
}

.f-w-300 {
    font-weight: 300;
}

.f-w-400 {
    font-weight: 400;
}

.container {
    margin: 10px;
    border: none;
    -webkit-box-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.05), 0 -2px 1px -2px rgba(0, 0, 0, 0.04), 0 0 0 -1px rgba(0, 0, 0, 0.05);
    box-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.05), 0 -2px 1px -2px rgba(0, 0, 0, 0.04), 0 0 0 -1px rgba(0, 0, 0, 0.05);
	margin: 10px auto 10px auto;
    padding-right: 0px;
    padding-left: 0px;
}

.container:hover {
    -webkit-box-shadow: 0 0 25px -5px #9e9c9e;
    box-shadow: 0 0 25px -5px #9e9c9e;
    -webkit-transition: all 150ms linear;
    transition: all 150ms linear;
}

body {
    font-size: 15px;
    overflow-x: hidden;
    background-color: #E5E5E5;
    font-family: 'Open Sans', sans-serif;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
}