Skip to content

goncanegis-kodluyoruz-projeleri/patika-dev-odev-bootstrap3

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 

Repository files navigation

# Ö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](https://github.com/Kodluyoruz/taskforce/raw/main/bootstrap/odev3/figures/linkedin.gif) Yine bir vicdansızlık yaparak size temel olarak vereceğimiz projeyi şuna dönüştürdük. ![garibanlinkedin](https://github.com/Kodluyoruz/taskforce/raw/main/bootstrap/odev3/figures/garibanlinkedin.gif) Temel dosyalara [şuradan](https://github.com/Kodluyoruz/taskforce/tree/main/bootstrap/odev3/bootstraplinkedinclone) 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](https://raw.githubusercontent.com/Kodluyoruz/taskforce/main/bootstrap/odev3/figures/nolmus.jpg) 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 `overflow`unu 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 `overflow`unu 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. # patika-dev-odev-bootstrap3 # patika-dev-odev-bootstrap3

About

Linkedin clone made with Bootstrap

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages