Takip Edin

BOOTSTRAP

Hukuk Büroları İçin Responsive Site Tasarımı

hukuk burosu featured resim

Menü

Not : EDIT ON CODEPEN yazısına tıklayarak kodlar üzerinde düzenlemeler yapabilirsiniz.

Sayfa genişliği 768 px (.navbar-expand-md) değerinin altına indiğinde menü, bir buton aracılığıyla gösterilecektir:

hukuk bürosu navbar-expand-menu

Slider

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

.carousel-caption sınıfını kullanarak sliderın ilk resmi üzerine içerik girelim:

<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-caption d-none d-lg-block">

Sayfa genişliği 992 px değerinin altına indiğinde slayt üzerindeki yazı görünmeyecektir:

hukuk slider caption 1
hukuk slider caption 2

Jumbotron

Sliderın altına .jumbotron sınıfına sahip olan bir div ekleyelim:

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

.lead sınıfına sahip olan paragrafla aynı satırı paylaşan Ekibimiz butonu, sayfa genişliği 576 px’in altına indiğinde bir alt satıra geçerek tüm satırı kaplar hale gelecektir.

hukuk_burosu_ekibimiz_butonu_1
hukuk bürosu ekibimiz butonu-2

Hukuk Bürosu

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

Çözüm odaklılık, güven ve dürüstlük bölümlerininin içinde bulunduğu divler .col-md-4 sınıfına sahip olduklarından dolayı sayfa genişliği 768 px ve üstü değerlerde bu üç bölüm, aynı satırı paylaşacaktır.

Dürüstlük   bölümü, .col-sm-12 sınıfına sahip olduğundan dolayı sayfa genişliği, 576 px – 767 px değerleri arasında bir alt satıra geçerek tüm satırı kaplar hale gelecektir.

çözüm-güvenlik-dürüstlük-768px
çözüm-güvenlik-dürüstlük-767px

Sayfa genişlik değeri 576 px değerinin altına indiğinde üç bölüm de alt alta gelerek tüm satırı kaplar hale gelecektir.

çözüm-güvenlik-dürüstlük-576px
çözüm-güvenlik-dürüstlük-575px

Yaklaşım

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

Sayfa genişliği, 992 px değerinin altına indiğinde aynı satırı paylaşan paragraf ve resim bölümleri, içinde bulundukları div’lerin sahip olduğu sınıftan dolayı (.col-lg-6) alt alta gelerek bulundukları satırı kaplayacaklardır.

hukuk bürosu yaklaşım bölümü 992 px
hukuk bürosu yaklaşım bölümü 991 px

Hizmet Alanlarımız

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

Her bir hizmet alanı, içinde bulunduğu div’in sahip olduğu .col-md-3 sınıfından dolayı sayfa genişliği 768 px ve üstü değerlerde olduğunda bir satırın 1/4’lik genişliğini kaplar.

Yine içinde bulunduğu div’in sahip olduğu .col-sm-6 sınıfından dolayı her bir hizmet alanı, 576 px ve 767 px arası değerlerde bir satırın yarısını kaplar.

hukuk bürosu hizmet alanları kısmı 768 px
hukuk bürosu hizmet alanları kısmı 767 px

576 px değerinin altındaki değerlerde ise her bir hizmet alanı, bulunduğu satırı kaplar.

hukuk bürosu hizmet alanları kısmı 576 px
hukuk bürosu hizmet alanları kısmı 575 px

Duyurular

    <!--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="img2/hukuk_duyuru1.jpg" 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="img2/hukuk_duyuru2.jpg" 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="img2/hukuk_duyuru3.jpg" 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>

.card sınıfına sahip olan her bir duyuru .col-md-4 sınıfına sahip olan bir div içerisinde olduğundan bir satırın 1/3’lik kısmını kaplar. Sayfa genişliği, 768 px değerinin altına geldiğinde ise her bir duyuru, bir satırı kaplar hale gelir.

hukuk bürosu duyurular 768 px
hukuk bürosu duyurular 767 px

Müvekkillerimiz

    <!--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="img2/hukuk_illegal_legal.jpg" alt="legal-illegal" class="img-fluid">
            </div>
        </div>
        <hr class="my-4">
    </div>

Müvekkil yorumları ve resim bölümleri, .col-lg-6 sınıfına sahip olan div içerisinde bulunduklarından dolayı sayfa genişliği 992 px değerinin altına indiğinde resim bölümü alt satıra geçerek her bir bölüm bulunduğu satırı kaplar hale gelecektir.

hukuk bürosu müvekkillerimiz 992 px
hukuk bürosu müvekkillerimiz 991 px

Sosyal Medya

    <!--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="#"><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>

Her bir sosyal medya ikonu, Font Awesome kütüphanesinden alınmıştır.

Sosyal medya ikonları, .col-12 sınıfına sahip olan div içerisinde bulunduklarından dolayı bulundukları satırı kaplarlar.

hukuk bürosu - html - sosyal medya bölümü

Footer Bölümü

    <!--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>© hukukburosu.org</h5>
                </div>
            </div>
        </div>
    </footer>

Logo, hizmetlerimiz ve çalışma saatlerimiz bölümlerinin her biri .col-md-4 sınıfına sahip olan bir div içerisinde bulunduğundan dolayı sayfa genişliği, 768 px ve üstü değerler için her bir bölüm yan yana gelirken 768 px değerinin altındaki değerler içinse her bir bölüm alt alta gelerek bulunduğu satırı kaplayacaktır.

Hizmetlerimiz bölümünde bulunan hizmet alanları, .row sınıfına sahip olan div içerisinde bulunan iki tane .col sınıfına sahip div içerisinde yer almaktadır. Dolayısıyla hizmet alanları, hizmetlerimiz bölümü altında iki sütun halinde gözükecektir.

hukuk bürosu html footer kısmı 768 px
hukuk bürosu html footer kısmı 767 px

CSS Bölümü

Font

Öncelikle font stili ve rengi üzerinde düzenleme yapalım:

hukuk burosu font stilsiz ve renksiz
hukuk burosu font stilli ve renkli

Menü

Menüye padding verelim ve menünün font boyutunu artıralım:

hukuk burosu stilsiz menu
hukuk burosu stilli menu

Slider

Slider kısmında bulunan resimlerin genişliğini sayfa genişliği ile aynı yapalım ve ilk resmin üzerinde bulunan yazıların stil ve konumu üzerinde düzenlemeler yapalım:

.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;
}
hukuk burosu css slider stilsiz
hukuk burosu css slider stilli

Jumbotron

Jumbotron kısmı üzerinde düzenleme yapalım:

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

.jumbotron .lead{
    width: 90%;
}

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

Jumbotronun üst bölümüne padding değerini artırdık ve kenarlık yarıçapını sıfırladık.

hukuk burosu jumbotron css bolumu stilsiz
hukuk burosu jumbotron css bolumu stilli

Hukuk Bürosu ve Duyurular – <hr> Etiketi

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

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

.hukukburosu ve .duyuru sınıfına sahip olan div’lerin genişliğini ayarlayıp sağdan ve soldan ortaladık. Ayrıca yine bu div’lerin sahip olduğu <hr> etiketlerinin genişlik ve rengini ayarladık.

hukuk burosu css bolumu hr etiketi stilsiz
hukuk burosu css bolumu hr etiketi stilli
hukuk burosu duyurular css bolumu hr etiketi stilsiz
hukuk burosu duyurular css bolumu hr etiketi stilli

Hukuk Bürosu – İkon Kısmı

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

Çözüm odaklılık, güven ve dürüstlük başlıklarının içinde bulunduğu div’lerle aynı yerde bulunan ikonların boyutlarını ayarladık.

hukuk burosu ikon css kısmı stilsiz
hukuk burosu ikon css kısmı stilli

Hizmet Alanlarımız Butonu ve Sosyal Medya

.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;
}

Hizmet alanlarımız butonunun kenarlık yarıçapını sıfırladık.

hukuk bürosu hizmet alanları butonu css kısmı stilsiz
hukuk bürosu hizmet alanları butonu css kısmı stilli

Sosyal medya ikonlarının boyut, renk ve padding değerlerini ayarladık, ayrıca ikonların üzerinde gezindiğimizde var olan renklerini #d5d5d5 değerine aldık.

hukuk burosu sosyal medya ikonları stilsiz
hukuk burosu sosyal medya ikonları stilli

Footer

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

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

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

Footer bölümünün font rengini ve arka plan rengini ayarladık.

hukuk burosu footer css stilsiz
hukuk burosu footer css stilli

Medya Sorguları

Carousel Indicators

@media (max-width: 576px) {
    .carousel-indicators {
        display: none;
    }
}

Sayfa genişliği, 576 px değerine geldiğinde slider’ın alt göstergelerini kaldırdık.

hukuk burosu carousel indicators 577 px
hukuk burosu carousel indicators 576 px

.display-4 Sınıfına Sahip Olan Başlıklar

@media (max-width: 768px) {
    .display-4{
        font-size: 250%;
    }
}

@media (max-width: 576px) {
    .display-4{
        font-size: 170%;
    }
}

Sayfa genişliğinin değerine göre .display-4 sınıfına sahip olan hukuk bürosu, duyurular ve sosyal medya  başlıklarının font büyüklüklerini ayarladık.

hukuk burosu display-4 769 px
hukuk burosu display-4 768 px
hukuk burosu display-4 577 px
hukuk burosu display-4 576 px
hukuk burosu duyurular display-4 769 px
hukuk burosu duyurular display-4 768 px
hukuk burosu duyurular display-4 577 px
hukuk burosu duyurular display-4 576 px
hukuk burosu sosyal medya display-4 769 px
hukuk burosu sosyal medya display-4 768 px
hukuk burosu sosyal medya display-4 577 px
hukuk burosu sosyal medya display-4 576 px

#hizmet id’sine Sahip Olan div

@media (max-width: 768px) {
    #hizmet .bg-info{        
        padding-left: .5rem !important;        
    }
}

Sayfa genişliği, 768 px değerinin altına indiğinde aile hukuku ve tazminat hukuku bölümlerinin sol tarafa hizalanma sorununu padding-left değerini azaltarak giderdik.

hukuk burosu aile-tazminat stilsiz
hukuk burosu aile-tazminat stilli

Sosyal Medya İkonları

@media (max-width:992px) {
    .social a {
        font-size: 2em;
        padding: 2rem;
    }
}

@media (max-width: 768px) { 
    .social a {
        font-size: 1.5em;
        padding: 1.2rem;        
    }
}

@media (max-width: 576px) {   
    .social a {
        font-size: 1em;
        padding: .7rem;
    }
}

Sayfa genişliği; 992 px, 768 px ve 576 px değerlerine geldiğinde sosyal medya ikonlarının boyutlarını kademeli olarak düşürdük.

hukuk burosu sosyal medya ikon css 993 px
hukuk burosu sosyal medya ikon css 992 px
hukuk burosu sosyal medya ikon css 769 px
hukuk burosu sosyal medya ikon css 768 px
hukuk burosu sosyal medya ikon css 577 px
hukuk burosu sosyal medya ikon css 576 px
Devamını oku

Popüler

error: Content is protected !!