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

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