Görev 1: Ergineer Mangal Header

Proje Tanımı

Arkadaşın Onur bir restaurant açıyor ve davetliler arasında sen de varsın. İstanbul'da güzel bir yerde, çok da özenerek bir yer açmış. Tasarımından yemeklerine her şeyi beğendin ve arkadaşın Onur'a bir şekilde destek olmak istedin.

Bir Frontend developer olarak aklına ilk arkadaşının müşteri bulmasına yardımcı olmak geldi.

Telefonundaki farklı farklı harita uygulamalarını açtın ve adres kayıtlı mı diye baktın. Ekli olduğunu gördün. Ama bir şey dikkatini çekti, arama motorlarında arkadaşının web sitesi hiç çıkmıyor. Hatta web sitesi bölümünde 'Pek yakında' yazıyor.

Öğrendin ki, Onur web sitesi hazırlatmaya başlamış ama yarıda kalmış. Bu yüzden yayınlayamamışlar. İşte sen de bu noktada devreye girmeye karar verdin.

Şimdi, ilk sorun ana sayfanın header'ında... Anasayfayı tasarım klasöründeki tasarim-desktop ve tasarim-mobile gibi yapalım ve sitenin açılışını yapmak için ilk adımı atalım.

Not: Yönlendirmeleri index.css ve index.html dosyalarında bulacaksın. İhtiyaç duyacağın görseller de tasarım klasörü içinde. Görsel adreslerini almak için, resmi büyüttükten sonra önce resme sağ tıkla, sonra "copy image adress/resim adresini kopyala" ya tıkla.

• İpucu: index.css'de contact böllmünde background'da image nasıl kullanılmış örnek alabilirsin.
• İpucu: div.header-content ifadesi, "classı header-content olan bir div element"ini temsil ediyor. (örn: <div class='header-content'>)

Önemli Notlar

• Proje dizinindeki user.json dosyasını bulun ve user_id alanını NextGen proje ekranında görünen kendi user_id değeriniz ile güncelleyin.
• Geliştirme sırasında testleri izlemek için npm test komutunu kullanın.
• Testleri çalıştırıp skoru NextGen'e kaydetmek için npm run sendresults komutunu kullanın.