<!-- Menü -->
 <nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
   <div class="container-fluid">
        <a class="navbar-brand" href="#"><img src="https://bit.ly/31TKrBI" alt=""></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a href="#" class="nav-link active">Anasayfa</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Hakkımızda</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Hizmetlerimiz</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">Avukatlarımız</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">İletişim</a>
                </li>
            </ul>
        </div>
     </div>
</nav>

<!-- Slider -->
<div id="slides" class="carousel slide" data-ride="carousel">
        <ul class="carousel-indicators">
            <li data-target="#slides" data-slide-to="0" class="active"></li>
            <li data-target="#slides" data-slide-to="1"></li>
            <li data-target="#slides" data-slide-to="2"></li>
        </ul>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="https://bit.ly/2Z9zQko" alt="slide 1">
              <div class="carousel-caption d-none d-lg-block">
                    <h1 class="display-2">Hukuk Bürosu</h1>
                    <h3>Avukatlık - Hukuki Danışmanlık</h3>
                    <button type="button" class="btn btn-outline-light btn-lg">Bize Ulaşın</button>
                    <button type="button" class="btn btn-info btn-lg">Kurumsal</button>
                </div>
            </div>
            <div class="carousel-item">
                <img src="https://bit.ly/2Z5WI41" alt="slide 2">
            </div>
            <div class="carousel-item">
                <img src="https://bit.ly/2Cc1JiH" alt="slide 3">
            </div>
        </div>
</div>

<!--Jumbotron-->
    <div class="container-fluid">
        <div class="row jumbotron bg-info text-light">
            <div class="col-sm-9 col-xl-10">
                <p class="lead">
                    Bugün, geniş bir çerçevede hukuk hizmeti vererek, en verimli şekilde çözüme ulaşmak amacıyla çalışma
                    alanlarına göre uzmanlaşmış departmanlara ayrılarak organize olmuş bulunmaktayız. Farklı hukuk
                    alanlarında uzmanlaşmış bir danışman kadrosuna ve dünya dinamizmini yansıtan güçlü bir müvekkil
                    ağına sahibiz.
                </p>
            </div>
            <div class="col-sm-3 col-xl-2">
                <a href="#"><button type="button" class="btn btn-outline-light btn-lg">Ekibimiz</button></a>
            </div>
        </div>
</div>

<!--Hukuk Bürosu Bölümü-->
    <div class="container-fluid p-5">
        <div class="row hukukburosu text-center">
            <div class="col-12">
                <h1 class="display-4">Hukuk Bürosu</h1>
            </div>
            <hr>
            <div class="col-12">
                <p class="lead">Avukatlık meslek ahlâkına ve profesyonelliğe uygun olarak müvekkillerimize hizmet etmek
                    amacıyla var olan bir hukuk kurumuyuz. Bu çerçevede; görüşmelerimiz ve çalışmalarımız esnasında
                    edindiğimiz her türlü kişisel ve kurumsal bilgiler bizim için saklanması gereken bir sırdır.</p>
            </div>
        </div>
    </div>

    <!--Üç Sütunlu Bölüm-->
    <div class="container-fluid">
        <div class="row text-center pb-5">
            <div class="col-12 col-sm-6 col-md-4">
                <i class="fas fa-bullseye text-info"></i>
                <h4>ÇÖZÜM ODAKLILIK</h4>
                <p>Kısa sürede sonuca götürecek, daha etkin ve alternatif çözüm yolları sunuyoruz.</p>
            </div>
            <div class="col-12 col-sm-6 col-md-4">
                <i class="fas fa-handshake text-info"></i>
                <h4>GÜVEN</h4>
                <p>Müvekkillerimiz ile aramızda güven ve sadakat ilişkisine önem veriyoruz.</p>
            </div>
            <div class="col-sm-12 col-md-4">
                <i class="fas fa-balance-scale text-info"></i>
                <h4>DÜRÜSTLÜK</h4>
                <p>Hukuki süreçte, doğru bilgiyi bütün riskleriyle dürüstçe müvekkillerimizle paylaşıyoruz.</p>
            </div>
        </div>
        <hr class="my-4">
</div>

<!--Yaklaşım Bölümü-->
     <div class="container-fluid py-5">
        <div class="row p-2">
            <div class="col-lg-6 p-3">
                <h2>Yaklaşım</h2>
                <hr>
                <p>Bizim yaklaşımımız, müvekkillerimizin gerçek ihtiyaçlarını ve amaçlarını tespit etmek üzere
                    odaklanmak ve onlara sunduğumuz kaliteli ve hızlı hizmet sayesinde müvekkillerimizle olan
                    ilişkilerimizin uzun süreli ve kalıcı olmasını sağlamaktır.</p>
                <p>Ortaklarımız, müvekkillerimize hem Türkiye'de hem de dünyanın birçok ülkesinde uluslararası düzeyde
                    tatmin edici bir hizmetin sunulmasını teminen, sadece müvekkil ile olan ilişkileri üstlenmekle
                    kalmayıp aynı zamanda verilen işin de tüm sorumluluğunu üstlenerek en uygun çözümleri sunmaktadır.
                </p>
                <p>Bizi diğerlerinden ayıran temel fark ise sadece avukat bakış açısı ile değil, uluslarası ve
                    profesyonel anlayışa sahip olan işadamlarının bakış açısıyla da düşünmeyi ve ona göre hareket etmeyi
                    becerebilme kabiliyetimizdir.</p>
                <a href="#" class="btn btn-info">Detaylı Bilgi</a>
            </div>
            <div class="col-lg-6 p-3 my-auto">
                <img src="https://bit.ly/2ZSPq2U" alt="lawyer" class="img-fluid img-thumbnail rounded">
            </div>
        </div>
    </div>

<!--Hizmet Bölümü-->
    <button type="button" class="hizmet btn-block btn btn-outline-info btn-lg" data-toggle="collapse"
        data-target="#hizmet">HİZMET ALANLARIMIZ</button>
    <div id="hizmet" class="collapse">
        <div class="container-fluid">
            <div class="row text-center">
                <div class="col-sm-6 col-md-3 bg-info text-white p-2 pt-4 pl-4">
                    <h3 class="text-left"><i class="fas fa-users"></i> &nbsp; Aile Hukuku</h3>
                    <hr class="bg-white">
                    <p class="text-left">
                        Aile ile ilgili olan tüm konuları içerisinde barındıran, aile bireylerinin ve özellikle eşlerin
                        birbirine karşı hak ve yükümlülüklerini düzenleyen hukuk dalıdır.
                    </p>
                </div>
                <div class="col-sm-6 col-md-3 bg-info text-white p-2 pt-4">
                    <h3 class="text-left"><i class="fas fa-home"></i> &nbsp; Kira Hukuku</h3>
                    <hr class="bg-white">
                    <p class="text-left">
                        Kira sözleşmeleri, bir şey veya bir hakka ilişkin kullanma, yararlanma hakkının devrini
                        gerektiren sözleşmelerden kullanmanın bedel karşılığında devri borcunu doğuran sözleşmelerdir.
                    </p>
                </div>
                <div class="col-sm-6 col-md-3 bg-info text-white p-2 pt-4">
                    <h3 class="text-left"><i class="fas fa-user-secret"></i> &nbsp; Bilişim Hukuku</h3>
                    <hr class="bg-white">
                    <p class="text-left">
                        Bilişim hukuku temel olarak teknoloji ve bilişim sistemlerinin birlikte kullanılması ile
                        üretilen sonuçlara bağlanan hukuki çözüm yollarına ilişkin uygulanacak kuralları kapsar.
                    </p>
                </div>
                <div class="col-sm-6 col-md-3 bg-info text-white p-2 pt-4 pr-4">
                    <h3 class="text-left"><i class="fas fa-atom"></i> &nbsp; Enerji Hukuku</h3>
                    <hr class="bg-white">
                    <p class="text-left">
                        Ofisimiz tarafından, elektrik, doğalgaz ve petrol piyasalarında yapılan her türlü enerji
                        yatırımına yönelik çeşitli konularda danışmanlık hizmeti verilmektedir.
                    </p>
                </div>
            </div>
            <div class="row text-center">
                <div class="col-sm-6 col-md-3 bg-info text-white p-2 pl-4">
                    <h3 class="text-left"><i class="fas fa-hand-holding-usd"></i> &nbsp; Tazminat Hukuku</h3>
                    <hr class="bg-white">
                    <p class="text-left">
                        Hukuka aykırı bir eylem sonucunda meydana gelen zarara karşılık olarak ödenen bedel olan
                        tazminat ile ilgili anlaşmazlıklarda ortaya çıkabilecek problemleri çözen hukuk birimidir.
                    </p>
                </div>
                <div class="col-sm-6 col-md-3 bg-info text-white p-2">
                    <h3 class="text-left"><i class="fas fa-gavel"></i> &nbsp; Ceza Hukuku</h3>
                    <hr class="bg-white">
                    <p class="text-left">
                        Hukuk dünyası içerisinde suç sayılan davranış ve fiiller ile bu davranış ve fiillere uygulanacak
                        ceza müeyyidelerinin temelini oluşturan hukuk dalıdır.
                    </p>
                </div>
                <div class="col-sm-6 col-md-3 bg-info text-white p-2">
                    <h3 class="text-left"><i class="fas fa-coins"></i> &nbsp; Ticaret Hukuku</h3>
                    <hr class="bg-white">
                    <p class="text-left">
                        Ticaret hukuku, ticari karakter taşıyan olaylara uygulanan hukuk dalıdır. Ticaret Hukuku yapısal
                        ve işlevsel anlamda en geniş hukuki alanlardan biridir.
                    </p>
                </div>
                <div class="col-sm-6 col-md-3 bg-info text-white p-2 pr-4">
                    <h3 class="text-left"><i class="fas fa-hands-helping"></i> &nbsp; Arabuluculuk</h3>
                    <hr class="bg-white">
                    <p class="text-left">
                        Uyuşmazlık çözüm yollardan biri olan arabuluculuk, hızlı bir çözüm yoludur. Yargı organları
                        tarafından yürütülen süreçten çok daha kısa süren bir süreçtir.
                    </p>
                </div>
            </div>
        </div>
    </div>

<!--Duyurular-->
    <div class="container-fluid mt-5">
        <div class="row duyuru text-center">
            <div class="col-12">
                <h1 class="display-4">Duyurular</h1>
            </div>
            <hr>
        </div>
    </div>

    <!--Kartlar-->
    <div class="container-fluid p-5">
        <div class="row pb-5">
            <div class="col-md-4 mb-3">
                <div class="card">
                    <img src="https://bit.ly/2W8HJEw" alt="duyuru1" class="card-img-top">
                    <div class="card-body">
                        <h5 class="card-title">6763 SAYILI CEZA MUHAKEMESİ KANUNU</h5>
                        <p class="card-text">6763 Sayılı Ceza Muhakemesi Kanunu ile Bazı Kanunlarda Değişiklik
                            Yapılmasına Dair Kanun</p>
                        <a href="#" class="btn btn-outline-info">DEVAMI</a>
                    </div>
                </div>
            </div>

            <div class="col-md-4 mb-3">
                <div class="card">
                    <img src="https://bit.ly/2Oc2URX" alt="duyuru2" class="card-img-top">
                    <div class="card-body">
                        <h5 class="card-title">TCK. 299. MADDENİN İPTALİ İSTEMİNİN REDDİNE DAİR ANAYASA MAHKEMESİ KARARI
                        </h5>
                        <p class="card-text">TCK 299. Madde'nin Anayasa’ya aykırılık sorununun incelenmesi neticesinde
                            14.12.2016</p>
                        <a href="#" class="btn btn-outline-info">DEVAMI</a>
                    </div>
                </div>
            </div>

            <div class="col-md-4 mb-3">
                <div class="card">
                    <img src="https://bit.ly/2W6Zd4n" alt="duyuru3" class="card-img-top">
                    <div class="card-body">
                        <h5 class="card-title">6754 SAYILI BİLİRKİŞİ KANUNU BİLGİ NOTU</h5>
                        <p class="card-text">03.11.2016 gün ve 6754 sayılı Bilirkişilik Kanunu 24.11.2016 gün ve 29898
                            sayılı Resmi Gazete’de..</p>
                        <a href="#" class="btn btn-outline-info">DEVAMI</a>
                    </div>
                </div>
            </div>
        </div>
        <hr class="my-4">
    </div>

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/js/bootstrap.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/fontawesome-iconpicker/3.2.0/js/fontawesome-iconpicker.min.js