Hakkımızda Sayfası - Translate

index.cshtml

<section id="values" class="panel" data-color="orange">
    <div class="container py-5 my-5">
        <div class="row">
            <div class="col-md-6">
                <h1>Temel değerlerimiz</h1>
                <p class="text-sm font-weight-bold d-none">
                    HOW WE DECIDE AND ACT
                </p>

                <p class="py-3">
                    PupaHouse'un Dijitalleşme yaklaşımı: <br> Dijitalleşme, popüler trend takipçisi olmanın aksine temel bir iş fonksiyonudur. Planlama, kaynak ve bütçe yönetimi ile teknoloji ve deneyim tasarımı yeteneği gerektirir.
                </p>
            </div>
            <div class="col-md-6">
                <img src="https://pupahouse.com/images/about_values.jpg" alt="Our core values" class="img-fluid">
            </div>
        </div>
        <div class="row py-3">
            <div class="col-md-6 my-3">
                <div class="values_first_line">
                    <div class="step">1</div>
                    <h3>"Hands on" Yönetim</h3>
                    <p class="m-0">
                        Şirketler için somut sonuçlar üretiyoruz. Bunu sağlamak için Pupahouse ekibi olarak projelerde aktif ve “hands on” bir yaklaşım benimsiyoruz.
                    </p>
                </div>
            </div>
            <div class="col-md-6 my-3">
                <div class="values_first_line">
                    <div class="step">2</div>
                    <h3>Tasarım Odaklı Düşünme</h3>
                    <p class="m-0">
                        Hedef ve problemlerini anladığımız müşterilerimize sürdürülebilir çözümler üretiyoruz. Kullanıcı ile empati kurarak temel problemleri belirliyor, çözümleri kavramsallaştırıyor, prototipliyor ve test ediyoruz.
                    </p>
                </div>
            </div>
            <div class="col-md-6 my-3">
                <div class="values_second_blocks">
                    <div class="step">3</div>
                    <div class="row">
                        <div class="col-md-10">
                            <h3>Sürdürülebilirlik</h3>
                            <p class="m-0">Dijitalleşmenin ve dijital çözümlerin ticaretin sürekli bir parçası olduğunu ve olması gerektiğini biliyoruz. Sürdürülebilir dijital ürünler için finansal açıdan uygun çözümler sağlıyoruz.</p>

                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 my-3">
                <div class="values_second_blocks">
                    <div class="step">4</div>
                    <div class="row">
                        <div class="col-md-10">
                            <h3>Ticari Gerçekler</h3>
                            <p class="m-0">Ticari gerçekleri biliyor ve bu yüzden projelerimize tüm paydaşları başından itibaren dahil ediyoruz. </p>

                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 my-3">
                <div class="values_second_blocks">
                    <div class="step">5</div>
                    <div class="row">
                        <div class="col-md-10">
                            <h3>Teknolojide Rasyonel Çözümler</h3>
                            <p class="m-0">
                                Teknoloji ve çözümlerin seçiminde rasyonel davranırız. Daha fazla analiz yapıp daha az bütçe kullanırız.
                            </p>

                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 my-3">
                <div class="values_second_blocks">
                    <div class="step">6</div>
                    <div class="row">
                        <div class="col-md-10">
                            <h3>Kullanıcı Odaklı Strateji</h3>
                            <p class="m-0">Pupahouse olarak son sözü daima kullanıcıların söylediğini biliyoruz. Bu yüzden kullanıcılar ve personalar dijital ve ürün stratejilerimizde ana odak noktamız oluyor.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

CSS

<style>
    #values .values_first_line {
        position: relative;
        display: -webkit-box;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        -webkit-box-pack: center;
        justify-content: center;
        background: #fd5f27;
        color: #fff;
        padding: 20px;
        min-height: 190px;
    }

        #values .values_first_line .step {
            position: absolute;
            top: 10px;
            right: 20px;
            font-size: 50px;
            opacity: 0.1;
            font-weight: 900;
            font-family: "Merriweather", sans-serif;
        }

    #values .values_second_blocks {
        position: relative;
        background: rgba(253, 95, 39, 0.1);
        border-left: 10px solid #fd5f27;
        padding: 30px;
        min-height: 210px;
    }

        #values .values_second_blocks .step {
            position: absolute;
            top: 10px;
            right: 20px;
            font-size: 50px;
            opacity: 0.2;
            color: #fd5f27;
            font-weight: 900;
            font-family: "Merriweather", sans-serif;
        }
    h3 {
        font-family: "Merriweather", sans-serif;
        font-size: 30px;
        line-height: 40px;
    }
</style>