Bu makalede aşağıdaki görselde de görebileceğiniz kartlardan yapacağız. Kartları sadece HTML5 ve CSS3 kullanarak kodlayacağız.

Böylece #3 numaralı istek makale kapanmış olacak :)

Not : Issues sayfasında varolan makale isteklerini görebileceğinizi, hatta yeni makale isteğinde bulunabileceğinizi biliyor muydunuz?

Öncelikle projeyi kendi bilgisayarımızda oluşturabilmek için nodejs.org adresinden en güncel NodeJs kurulumunu indirelim ve bilgisayarımıza kuralım.

Kurulum bittikten sonra hemen projemiz için yeni bir dizin oluşturalım, Command Prompt penceresi açalım ve aşağıdaki komutu çalıştıralım;

Eğer bilgisayarınıza daha önce http-server npm paketini kurmadıysanız öncelikle aşağıdaki komutu çalıştırarak http-server paketini kurmanız gerekiyor;

Proje için oluşturduğumuz dizinde bir index.html bir de index.css dosyası oluşturalım, index.html dosyası içerisine aşağıdaki html kodlarını yazalım;

Card nesnemizin parçaları;

Şimdi index.css dosyasını açarak stil vermeye başlayabiliriz.

İlk olarak body elementinin font‘unu Segoe UI yapalım ve http://localhost:8080/ adresini açalım ve aşağıdaki gibi bir sayfa gördüğümüzden emin olalım;

Şimdi index.css dosyasına aşağıdaki kodu ekleyelim;

Eklediğimiz .card css class‘ı sayesinde bütün card nesnesini genişliği 150px olan bir çerçeve içerisine almış olduk;

Sırada başlığı düzeltmek var, index.css dosyasını açalım ve aşağıdaki kodu ekleyelim;

Böylece artık sayfamız aşağıdaki şekilde gözükmeye başlamalı;

Sırada, card nesnesinin asıl parçası var, hemen index.css dosyasını açalım ve aşağıdaki kodları ekleyelim;

Böylece artık sayfamız aşağıdaki şekilde gözükmeye başlamalı;

Son olarak, icon ve açıklama alanının stilini de ekleyelim;

Böylece artık sayfamız aşağıdaki şekilde gözükmeye başlamalı;

Bütün index.css dosyası aşağıdaki gibi olmalı;

Tüm Material Icon listesini Material Icons sayfasında bulabilirsiniz. Değişik renkler ve değişik icon‘lar ile sizler de istediğiniz gibi bir card tasarımı yapabilirsiniz.

Not : Bu makalenin orjinalini Build a Minimalist HTML Card in just 53 lines of code (with Flexbox) adresinden okuyabilirsiniz