Bu projede, YouTube’da gördüğüm bir kafe sitesini HTML, CSS ve JavaScript kullanarak kendim de yazmak istedim. Amacım, temel web geliştirme becerilerimi pekiştirmek ve projeler üzerinde çalışarak kendimi geliştirmekti.

1. Header (Üst Kısım)

Sayfanın en üstünde navigasyon menüsü var. Burada “COFFEE” isimli bir logo ve Home, About, Discover, Contact gibi bağlantılar bulunuyor. Menü öğelerini düzenli göstermek için flexbox kullandım. Küçük ekranlar için de hamburger menü (fa-bars ikonu) ekledim. Ana başlık “Welcome”, alt başlık ise “Fill Me Up With Coffee” olarak tasarlandı. Altına “Get Started” butonu koydum, bu butonun hover efekti var.

2. About (Hakkında)

Burada kahve hikayemizi anlatıyorum. Yan yana duran bir görsel ve metin kutusu oluşturdum. Metnin üstüne “Our Story” başlığı, bir ikon ve kısa açıklama ekledim. Yazıyı şık ve okunaklı göstermek için orta hizalı ve belirgin bir tipografi kullandım.

3. Portfolio (Portföy)

Burada 8 adet resim (g1.jpg, g2.jpg… g8.jpg) içeren bir galeri oluşturdum. Resimler 4 sütun halinde sıralanıyor ve üzerine gelince arka plan değişiyor, ikon beliriyor. Küçük animasyonlar ekleyerek resimlerin üzerine gelindiğinde zoom efekti verdim.

4. Discover (Keşfet)

Bu bölüm about (hakkında) ile aynı yapıda, sadece “DISCOVER” başlığı var. Yine bir görsel (menu.jpg) ve yanında metin açıklaması ekledim.

5. Contact (İletişim)

Burada 3 adet bilgi kutusu var:
📍 Adres
📞 Telefon
📧 E-posta
Her bilginin yanında Font Awesome ikonlarını kullandım.

Sayfa görselleri;

Sayfanın en altına “ABOUT US” başlığı ve kısa bir açıklama koydum. Sosyal medya ikonları (Google+, Twitter, Facebook) ekleyerek bütünlüğü sağladım. Arka planı siyah yaparak kontrast oluşturdum. CSS Tarafı Google Fonts ile Poppins, Open Sans ve Herr Von Muellerhoff yazı tiplerini ekledim. Tüm elemanları sıfırladım (margin: 0; padding: 0; box-sizing: border-box;). Header’a tam ekran bir arka plan verdim (background-image: url(grsl.jpg);). Flexbox ve grid sistemlerini kullanarak düzen sağladım. Hover efektleri, buton animasyonları ve görseller için geçiş efektleri ekledim.