<!-- 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>

<!--Müvekkillerimiz-->
    <div class="container-fluid">
        <div class="row p-2 pb-5">
            <div class="col-lg-6 p-3">
                <h2>Müvekkillerimiz</h2>
                <hr>
                <ul class="list-unstyled">
                    <li class="media">
                        <img class="mr-3" src="https://via.placeholder.com/100" alt="Generic placeholder image">
                        <div class="media-body">
                            <h5 class="mt-0 mb-1">Can Yıldırım</h5>
                            Avukat Remzi Yılmaz Bey’e, yaklaşık iki yıldır süren davama gösterdiği sabır ve akılcı
                            yaklaşımı başta olmak üzere; diğer hukuki meselelerime gösterdiği ahlaklı, dürüst ve şeffaf
                            yaklaşımı için teşekkür eder, başarılarının devamını temenni ederim.
                        </div>
                    </li>
                    <li class="media my-4">
                        <img class="mr-3" src="https://via.placeholder.com/100" alt="Generic placeholder image">
                        <div class="media-body">
                            <h5 class="mt-0 mb-1">Helin Erkin</h5>
                            <small class="text-muted">Firma Sahibi - Vihekasade Prodüksiyon</small>
                            <br>
                            Çalışmaya başladığımız ilk günden beri, bilgi, birikim ve tecrübeleriniz ile tarafımıza
                            göstermiş olduğunuz her türlü destek için teşekkür ediyoruz. Bugüne dek bozulmayan,
                            karşılıklı dürüstlük, saygı ve anlayışa dayanan bu işbirliğimizin daha uzun yıllar devam
                            edeceğini umuyoruz.
                        </div>
                    </li>
                    <li class="media">
                        <img class="mr-3" src="https://via.placeholder.com/100" alt="Generic placeholder image">
                        <div class="media-body">
                            <h5 class="mt-0 mb-1">Vihekasade Ticaret</h5>
                            2018 yılında hizmet almaya başlayarak ticari faliyetlerimizdeki zararlarımızı en hızlı bir
                            şekilde gidererek tahsilat oranlarımızı %200 oranında arttırdık. Ticaretinizde aksama
                            yaşamamak ve devamlılık arıyorsanız, kaliteli bir hukuk bürosu ve iyi insanlarla çalışmak
                            istiyorsanız doğru adrestesiniz.
                        </div>
                    </li>
                </ul>
            </div>
            <div class="col-lg-6 p-5 my-auto">
                <img src="https://bit.ly/3ejeoO3" alt="legal-illegal" class="img-fluid">
            </div>
        </div>
        <hr class="my-4">
    </div>

    <!--Sosyal Medya-->
    <div class="container-fluid pb-5">
        <div class="row text-center">
            <div class="col-12">
                <h2 class="display-4 py-4">Sosyal Medya</h2>
            </div>
            <div class="col-12 social">
                <a href="#"><i class="fab fa-facebook-square fa-2x"></i></a>
                <a href="#"><i class="fab fa-twitter-square fa-2x"></i></a>
                <a href="#"><i class="fab fa-google-plus-square fa-2x"></i></a>
                <a href="https://www.instagram.com/vihekasade/?hl=tr" target="_blank"><i class="fab fa-instagram-square fa-2x"></i></a>
                <a href="#"><i class="fab fa-youtube-square fa-2x"></i></a>
            </div>
        </div>
    </div>

<!--Footer-->
    <footer>
        <div class="container-fluid pt-4">
            <div class="row text-center">
                <div class="col-md-4">
                    <img src="https://bit.ly/2CnIZN8" alt="footer logo">
                    <hr class="light">
                    <p>0500 000 00 00</p>
                    <p>info@hukukburosu.org</p>
                    <p>Demo Mah. Demo Sk. No:2020</p>
                    <p>Kocaeli, Türkiye</p>
                </div>
                <div class="col-md-4">
                    <hr class="light">
                    <h5>Hizmetlerimiz</h5>
                    <hr class="light">
                    <div class="row">                        
                        <div class="col pl-5">
                            <p>Aile Hukuku</p>
                            <p>Kira Hukuku</p>
                            <p>Bilişim Hukuku</p>
                            <p>Enerji Hukuku</p>
                        </div>
                        <div class="col pr-5">
                            <p>Tazminat Hukuku</p>
                            <p>Ceza Hukuku</p>
                            <p>Ticaret Hukuku</p>
                            <p>Arabuluculuk</p>
                        </div>                        
                    </div>
                </div>
                <div class="col-md-4">
                    <hr class="light">
                    <h5>Çalışma Saatlerimiz</h5>
                    <hr class="light">
                    <p>Hafta İçi: 8:00 - 18:00</p>
                    <p>Cumartesi: 8:00 - 14:00</p>
                    <p>Pazar: Kapalı</p>
                </div>
                <div class="col-12 pb-2">
                    <hr class="light-100">
                    <h5>&copy; hukukburosu.org</h5>
                </div>
            </div>
        </div>
    </footer>
html, body{
    height: 100%;
    width: 100%;
    font-family: 'Poppins', sans-serif;
    color: #222;
}

.navbar{
    padding: .8rem;
}

.navbar-nav li{
    padding-right: 20px;
}

.nav-link{
    font-size: 1.1em !important;
}

.carousel-inner img{
    width: 100%;
    height: 100%;
}

.carousel-caption{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.carousel-caption h1{
    text-transform: uppercase;
    text-shadow: 1px 1px 15px #000;
}

.carousel-caption h3{
    font-size: 200%;
    text-shadow: 1px 1px 10px #000;
    padding-bottom: 1rem;
}

.jumbotron{
    border-radius: 0; 
    padding-top: 5rem;
}

.jumbotron .lead{
    width: 90%;
}

.jumbotron .btn:hover{
    color: #17A2B8;
}

.hukukburosu, .duyuru{
    width: 75%;
    margin: 0 auto;
}

.hukukburosu hr, .duyuru hr{
    border-top: 2px solid #b4b4b4;
    width: 95%;
    margin-top: .3rem;
    margin-bottom: 1rem;
}

.fa-bullseye, .fa-handshake, .fa-balance-scale{
    font-size: 4rem;
    margin: 1rem;
    margin-bottom: 1.5rem;
}

.hizmet{
    border-radius: 0;
}

.social a{
    font-size: 2.5em;
    padding: 3rem;
}

.fa-facebook-square{
    color: #3b5998;
}

.fa-twitter-square{
    color: #00aced;
}

.fa-google-plus-square{
    color: #dd4b39;
}

.fa-instagram-square{
    color: #517fa8;
}

.fa-youtube-square{
    color: #bb0000;
}

.fa-facebook-square:hover,
.fa-twitter-square:hover,
.fa-google-plus-square:hover,
.fa-instagram-square:hover,
.fa-youtube-square:hover{
    color: #d5d5d5;
    transition: .3s;
}

footer{
    background-color: #3f3f3f;
    color: #d5d5d5;
}

hr.light{
    border-top: 1px solid #d5d5d5;
    width: 75%;
}

hr.light-100{
    border: 1px solid #d5d5d5;
}

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