/kodluyoruz-linkedin

Primary LanguageHTML

Ödev 3

Bootstrap Linkedin Clone

Günümüzde iş hayatının Facebook'u, biznısınızın göbeği olan Linkedin çok sık kullanılmakta. Eğer bir Linkedin hesabınız yoksa hemen oluşturmanızı öneririz. Network bizim mesleğimizde ekstra daha çok önemli. Bu güzel sitenin muhteşem bir cloneunu Kodluyoruz mühendislerimiz uzun uğraşlar sonucu yapmayı başardı. Karşınızda Koyun Dolly değil Bootstrap Linkedin!

linkedin

Yine bir vicdansızlık yaparak size temel olarak vereceğimiz projeyi şuna dönüştürdük.

garibanlinkedin

Temel dosyalara şuradan ulaşabilirsiniz.

  • Navbar yukarıya sabitlenmemiş durumda ve kenarlığı yok. Bunları düzeltiniz.
  • Logoya soldan boşluk ayarlayınız.
  • Arama alanına sağdan boşluk bırakınız ve placeholder'ini düzeltiniz.
  • Arama alanı ile menü arasındaki boşluğu ayarlayınız.
  • Menülerdeki yazıları ve ikonları ortalayın.
  • Ben kategorisini diğer kategori isimleri gibi düzenleyiniz ve profil fotoğrafını düzeltiniz.
  • Navbar'da bir değişiklik görüyor musunuz? Navbar'ın yüzüne ne olmuş yahu?

nolmus

Biz de onu soruyoruz işte ne olmuş?

  • Navbar'ı yukarı sabitleyince fark etmişsinizdir ki içerik biraz yukarıda kalıyor. O yüzden yukarıdan biraz boşluk bırakın.
  • İçerik biraz geniş kalmış sanki, toplamak için ne kullanabiliriz? İpucu: Layout
  • Responsive yapı için sol panele 2 birim, orta panele 6 birim, sağ panele de 3 birim veriniz. Bütün boyutlarda aynı ölçü geçerli olsun.
  • Profil fotoğrafını ortalayın, kenarlığını yuvarlak yapın ve 2 birim beyaz kenarlık verin.
  • Yazıları eski haline getiriniz.
  • Bu alanda gözünüze çarpan kısımları kendinize göre düzenleyiniz.
  • Sayfa bildirimi sayısını sağa alınız.
  • En Yeni bölümüne sticky pozisyon verin ve overflowunu görünür yapın. Yukarıdan 4rem mesafe verin.
  • Gönderi başlatın placeholderını düzeltiniz.
  • Butonlara Bootstrap'ta bulunan düzenlemeyi yapınız.
  • Fotoğraf'a #70B5F9, Video'ya #7FC15E, Etkinlik'e #E7A33E, Yazı Yaz'a #F5987E renklerini uygulayın. İpucu: fill
  • Posttaki kullanıcı adını üste, meslek title'sını ortaya, post paylaşım süresini aşağı sabitleyiniz. İpucu: align
  • inline-css şeklinde yazılan CSS'leri düzenli hale getiriniz.
  • Beğenme, kalp ve alkışa margin veriniz.
  • Butonlara bootstrap düzenlemesi yapınız.
  • Sağ panelde logoların yazıları yanlarında olması lazım. Div yerine ne kullanmak gerekiyor?
  • Bugünün en çok izlenen eğitimleri bölümünün genişliğini üstteki gibi ayarlayınız.
  • Sağ panelde en alttaki bölüme sticky pozisyon verin ve overflowunu görünür yapın. Yukarıdan 4rem mesafe verin.
  • Bu bölümdeki linkler yan yana olmalı.
  • Mesajlaşmanın genişliği 300px olmalı, arkaplanı beyaz olmalı.

İçeriğinde çok şey var diye paniğe kapılmayın, sırayla gittiğinizde her şeyin çok seri şekilde geleceğine emin olabilirsiniz.

Hepinize başarılar ve kolay gelsin.