Middle Section and 3 box Info IE + OPERA

index.cshtml

<div class="recommend-container">
    <div class="recommend-wrapper container-fluid">
        <div class="row">
            @Partial.Translate("bilgialani3lu", lang)
        </div>
    </div>
</div>
<style>
    @@media (min-width: 1950px) {
        .col-md-4.col-sm-6.kulucka-container {
            padding: 200px !important;
            text-align: center;
        }
    }
</style>

Translate

<div class="col-md-4 col-sm-6 kulucka-container wow zoomInLeft" data-wow-duration="1.25s">
 <div class="row">
 <div class="kulucka-logo">
 <img src="/Upload/File/2020/1/28/karayel-logo.png">
 </div>
 <div class="kulucka-info" style="color:white;">
 <p>
Karayel Ar-Ge Tasarım Limited Şirketi Antalya'da web tasarım sektöründe bünyesinde bilgisayar mühendisi bulunduran nadir bir Antalya web tasarım firmasıdır.
 </p>
 </div>
 <div class="kulucka-button" style="background-color:white;">
 <a href="" target="_blank">Detaylı İncele</a>
 </div>
 </div>
 </div>

 <div class="col-md-4 col-sm-6 kulucka-container wow zoomInLeft" data-wow-duration="1.25s">
 <div class="row">
 <div class="kulucka-logo">
 <img src="/Upload/File/2020/1/28/karayel-logo.png">
 </div>
 <div class="kulucka-info" style="color:black;">
 <p>
Karayel Ar-Ge Tasarım Limited Şirketi Antalya'da web tasarım sektöründe bünyesinde bilgisayar mühendisi bulunduran nadir bir Antalya web tasarım firmasıdır.
 </p>
 </div>
 <div class="kulucka-button">
 <a href="" target="_blank" style="color:white;background-color:#0077a2;">Detaylı İncele</a>
 </div>
 </div>
 </div>


 <div class="col-md-4 col-sm-6 kulucka-container wow zoomInRight" data-wow-duration="1.25s">
 <div class="row">
 <div class="kulucka-logo">
 <img src="/Upload/File/2020/1/28/karayel-logo.png">
 </div>
 <div class="kulucka-info" style="color:white;">
 <p>
Karayel Ar-Ge Tasarım Limited Şirketi Antalya'da web tasarım sektöründe bünyesinde bilgisayar mühendisi bulunduran nadir bir Antalya web tasarım firmasıdır.
 </p>
 </div>
 <div class="kulucka-button">
 <a href="" target="_blank" style="color:#fff;background-color:#32a1e0;">Detaylı İncele</a>
 </div>
 </div>
 </div>

CSS

.col-md-4.col-sm-6.kulucka-container {
        padding: 110px;
        text-align: center;
    }

    .kulucka-logo {
        margin: 0px auto;
    }

    .kulucka-info p {
        height: 150px;
    }

    .kulucka-button {
        margin: 0px auto;
        border: medium none;
        border-radius: 0;
        box-shadow: none;
        font-size: 18px;
        font-weight: 400;
        line-height: 1.9em;
        outline: medium none;
        transition: background-color 0.5s ease 0s;
        -webkit-transform: skew(-15deg);
        -moz-transform: skew(-15deg);
        -o-transform: skew(-15deg);
    }

        .kulucka-button a {
            display: block;
            padding: 7px 19px;
        }

        .discus-content a{
            color:red;
        }
@media (max-width: 575.98px) {
        .kulucka-info {
            color: black !important;
        }

        .col-md-4.col-sm-6.kulucka-container {
            padding: 30px !important;
            text-align: center;
        }

        .kulucka-button {
            background-color: #0077a2 !important;
        }

            .kulucka-button a {
                color: white !important;
                background-color: #0077a2 !important;
            }
}

www.antalyateknokent.com.tr

Kullanılan Görseller;

İndex Bileşenleri