Апартаменты section-service

section-service.blade.php

<section class="section-service">
    <div class="container">
        <h2 class="title">Наш сервис</h2>
        <h4 class="sub-title">Только наивысшее качество</h4>
        <div class="row">
            <div class="col-md-6">
                <div class="tab-content d-none d-md-block">
                    <div class="tab-pane animated fadeInLeft active " id="home" role="tabpanel"><img class="img-fluid" src="@asset('images/serv-photo.jpg')" alt=""></div>
                    <div class="tab-pane animated fadeInLeft" id="profile" role="tabpanel"><img class="img-fluid" src="@asset('images/serv-photo.jpg')" alt=""></div>
                    <div class="tab-pane animated fadeInLeft" id="messages" role="tabpanel"><img class="img-fluid" src="@asset('images/serv-photo.jpg')" alt=""></div>
                </div>
            </div>
            <div class="col-md-6">
                <nav class="nav flex-column" id="myTab" role="tablist">
                    <a class="nav-link relative active" data-toggle="tab" href="#home" role="tab" aria-controls="home">
                        <span id="triangle-left"></span>
                        <span id="triangle-left-w"></span>
                        <img class="img-fluid img-state" src="@asset('images/serv-taxi.png')" alt="taxi">
                        <img class="img-fluid img-hover" src="@asset('images/serv-taxi-hover.png')" alt="taxi">
                        <h5>Парковка</h5>
                        <span>Идейные соображения высшего порядка, а также постоянное обеспе</span>
                    </a>
                    <a class="nav-link relative" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">
                        <span id="triangle-left"></span>
                        <span id="triangle-left-w"></span>
                        <img class="img-fluid img-state" src="@asset('images/serv-parking.png')" alt="parking">
                        <img class="img-fluid img-hover" src="@asset('images/serv-parking-hover.png')" alt="parking">
                        <h5>Трансфер/такси</h5>
                        <span>С другой стороны консультация с широким активом позволяет оцен</span>
                    </a>
                    <a class="nav-link relative" data-toggle="tab" href="#messages" role="tab" aria-controls="messages">
                        <span id="triangle-left"></span>
                        <span id="triangle-left-w"></span>
                        <img class="img-fluid img-state" src="@asset('images/serv-guide.png')" alt="guide">
                        <img class="img-fluid img-hover" src="@asset('images/serv-guide-hover.png')" alt="guide">
                        <h5>Экскурсии</h5>
                        <span>С другой стороны консультация с широким активом позволяет оцен</span>
                    </a>
                </nav>
            </div>
        </div>
        <style>
            .section-service {
                background-image: url(@asset('images/serv-background.jpg'));
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
            }
            #myTab a {
                border: 1px solid #73dedf;
                background-color: #ffffff;
                margin-bottom: 28px;
            }
            #myTab a img {
                float: left;
                margin-top: 20px;
                margin-right: 37px;
                margin-bottom: 20px;
            }
            #myTab a:hover {
                background-color: #048ca5;
                color: #fff;
                border: 1px solid #048ca5;
            }
            .img-hover {
                display: none;
            }
            #myTab a:hover .img-hover {
                display: block;
            }
            #myTab a:hover .img-state {
                display: none;
            }
            #myTab a:hover #triangle-left-w{
                display: none;
            }
            #myTab a:hover #triangle-left{
                border-right: 16px solid #048ca5;
            }
            #triangle-left {
                width: 0;
                height: 0;
                position: absolute;
                top: 28%;
                left: -17px;
                border-top: 24px solid transparent;
                border-right: 16px solid #73dedf;
                border-bottom: 24px solid transparent;
            }
            #triangle-left-w {
                width: 0;
                height: 0;
                position: absolute;
                top: 28%;
                left: -16px;
                border-top: 24px solid transparent;
                border-right: 16px solid #fff;
                border-bottom: 24px solid transparent;
            }
        </style>
    </div>
</section>