<div class="row" style="margin-top:40px;">
        <div class="container">
            <div class="card bg-light" style="height:80%;">
                <div class="card-header">
                    Sohbet Uygulaması
                </div>
                <div class="card-body" style="max-height: 80%;overflow-y: auto;">
                    <!-- Giriş ekranı tasarımı başlangıcı -->
                    <div id="girisEkrani" >
                        <div class="row">
                            <div class="col-md-4 offset-md-4">
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text" id="kullanici_adi">@</span>
                                    </div>
                                    <input type="text" class="form-control" placeholder="Kullanıcı adı giriniz"
                                        aria-label="Kullanıcı adı giriniz" aria-describedby="kullanici_adi" id="kadi">
                                </div>
                                <button type="button" class="form-control btn btn-success">Giriş Yap</button>
                            </div>
                        </div>
                    </div>
                    <!-- Giriş ekranı tasarımı bitiş -->

                    <div id="chatEkrani" style="display:none;">
                        <div class="row">
                            <div id="mesajAlani bg-white" class="col-md-12">
                                <div class="d-flex">
                                    <div class="alert alert-dark" role="alert">
                                        <b>@kizildas</b> Bu mesaj karşı taraftan geldi!
                                    </div>
                                </div>
                                <div class="d-flex justify-content-end">
                                    <div class="alert alert-info" role="alert">
                                        Bu mesaj sizin tarafınızdan gönderildi! <b>@emrkzl</b>
                                    </div>
                                </div>
                            </div>
                            <div id="yeniMesajAlani" class="col-md-12" style="position: absolute;bottom: 10;">
                                <div class="row">
                                    <div class="col-md-9">
                                        <input type="text" class="form-control" id="mesaj"
                                            placeholder="Mesaj yazınız.." />
                                    </div>
                                    <div class="col-md-3">
                                        <button type="button" class="form-control btn btn-success">Gönder</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>