diff --git a/README.md b/README.md index 1d8ff01..7b8a9ac 100644 --- a/README.md +++ b/README.md @@ -4,16 +4,16 @@ ## Hedefler -- box model'i araştırın ve özelliklerini açıklamaya çalışın -- stiller oluşturmak için CSS kullanın +- box model'i araştırın ve özelliklerini açıklamaya çalışın +- stiller oluşturmak için CSS kullanın - CSS kullanımının tarayıcılar arası proje geliştirmekdeki önemini kavrayın -- Responsive site oluşturabilmek için kullanın: (px, em, rem, %, and vw.vh) +- Responsive site oluşturabilmek için kullanın: (px, em, rem, %, and vw.vh) ## Giriş Bu projede Nevşehir Göreme'de bulunan Peribacaları ile ilgili tek sayfalık bir tanıtım sitesi yapacağız. -Hedeflenen sayfa dizaynı şu dosya içerisinde gösterilmiştir: [dizayn dosyası](/design/desktop.jpg) +Hedeflenen sayfa dizaynı şu dosya içerisinde gösterilmiştir: [dizayn dosyası](/design/desktop.jpg) ## Talimatlar @@ -21,45 +21,44 @@ Hedeflenen sayfa dizaynı şu dosya içerisinde gösterilmiştir: [dizayn dosyas Aşağıdaki adımları takip edin.: -- [ ] Repoyu forklayın ve klonlayın. +- [x] Repoyu forklayın ve klonlayın. - [ ] Canvas'a gidin ve Github URL'sini kopyalayıp gönderim yuvasına yapıştırarak deponuzu bağlayın. -- [ ] BRANCH OLUŞTURMAYIN. Güncellemelerinizi main/master 'a pushlayacaksınız. -- [ ] konsoldan repo klasörünüze girin ve VS Code'u açmak için . girin. -- [ ] VS Code'un sol tarafındaki Eklentiler bölümünden Live Server eklentisini indirin. Eklenti yüklendikten sonra sağ altta bulunan "Go Live" butonuna basarak HTML dosyanızı çalıştırabilirsiniz. -- [ ] Çalışmanızı düzenli commitlerle main branch'e aktarın. gönderdiğiniz URL programınızın en son versiyonuna göndermektedir. +- [x] BRANCH OLUŞTURMAYIN. Güncellemelerinizi main/master 'a pushlayacaksınız. +- [x] konsoldan repo klasörünüze girin ve VS Code'u açmak için . girin. +- [x] VS Code'un sol tarafındaki Eklentiler bölümünden Live Server eklentisini indirin. Eklenti yüklendikten sonra sağ altta bulunan "Go Live" butonuna basarak HTML dosyanızı çalıştırabilirsiniz. +- [x] Çalışmanızı düzenli commitlerle main branch'e aktarın. gönderdiğiniz URL programınızın en son versiyonuna göndermektedir. ### Görev 2: Minimum Uygulanabilir Ürün Repository'niz hazır olunca verilen dizayn göze alınarak bugün öğrendiğiniz site stillemeye dair pratik yapın. Tamamladığınız sayfanın verdiğimiz dizayn dosyasına benziyor olması gerekmektedir. Minimum yeterliliği sağlamak için aşağıda verilenleri uygulayın: -- [ ] CSS stylesheet dosyanızı `index.html` dosyasına linkleyin -- [ ] Verilen görüntüyü elde etmek için HTML etiketlerinizi semantik(anlamsal) olarak ekleyin -- [ ] Menü elemanlarını ve footer(altbar)'ı arkaplanlarını(background) renklendirmek için verilen renk kodlarını kullanın: - - [ ] Gezinizi Planlayın: `#FF764E` - - [ ] Bilgi Edinin: `#5ED3EB` - - [ ] Karşılaştırın: `#FFCD69` -- [ ] Yazı renkleri ve fontlar: - - [ ] Peri Bacaları Tanıtımı fontunun adı Chelsea Market'tir ve şu linkten ulaşılabilir [google fonts](https://fonts.google.com/specimen/Chelsea+Market) - - [ ] Diğer tüm fontlar Roboto Mono'dur ve şuradan ulaşılabilir [google fonts](https://fonts.google.com/specimen/Roboto+Mono) -- [ ] Ana metnin arka plan rengi: `#DDB9A3` -- [ ] Footer'ın arka plan rengi: `#F9E7DC` -- [ ] "olağanüstü ve rüya gibi bir deneyim." ve "dünyanın en iyi ATV turlarından birini" kelime öbeklerini bold yapın. -- [ ] Dizayn sayfasındaki sonucu yakalamak için Box model özelliklerini uygulayın (content, padding, margin, and border). En az şunları içermelidir: - - [ ] Headerde bir yuvarlak resim (image) - - [ ] Footer ve menü elemanlarında yuvarlak köşeler - - [ ] Başlık(header) resmi ve hizalı text - - [ ] Ortalanmış içerikler, marginler ve içeriklerin etrafındaki marginler - - [ ] Footer resmi pozisyonu +- [x] CSS stylesheet dosyanızı `index.html` dosyasına linkleyin +- [x] Verilen görüntüyü elde etmek için HTML etiketlerinizi semantik(anlamsal) olarak ekleyin +- [x] Menü elemanlarını ve footer(altbar)'ı arkaplanlarını(background) renklendirmek için verilen renk kodlarını kullanın: + - [x] Gezinizi Planlayın: `#FF764E` + - [x] Bilgi Edinin: `#5ED3EB` + - [x] Karşılaştırın: `#FFCD69` + - [x] Yazı renkleri ve fontlar: + - [x] Peri Bacaları Tanıtımı fontunun adı Chelsea Market'tir ve şu linkten ulaşılabilir [google fonts](https://fonts.google.com/specimen/Chelsea+Market) + - [x] Diğer tüm fontlar Roboto Mono'dur ve şuradan ulaşılabilir [google fonts](https://fonts.google.com/specimen/Roboto+Mono) +- [x] Ana metnin arka plan rengi: `#DDB9A3` +- [x] Footer'ın arka plan rengi: `#F9E7DC` +- [x] "olağanüstü ve rüya gibi bir deneyim." ve "dünyanın en iyi ATV turlarından birini" kelime öbeklerini bold yapın. +- [x] Dizayn sayfasındaki sonucu yakalamak için Box model özelliklerini uygulayın (content, padding, margin, and border). En az şunları içermelidir: + - [x] Headerde bir yuvarlak resim (image) + - [x] Footer ve menü elemanlarında yuvarlak köşeler + - [x] Başlık(header) resmi ve hizalı text + - [x] Ortalanmış içerikler, marginler ve içeriklerin etrafındaki marginler + - [x] Footer resmi pozisyonu **Tasarımınız boyunca statik öğelerden kaçının (pikseller) Mümkün olduğunca responsive öğeler kullanın.** **Lütfen şunu unatmayın, bugünkü uygulamada flexbox kullanılmayacak. Hedefe inline-block kullanarak ulaşmayı deneyin.** - ### Görev 3: Ek Görevler Aşağıdakileri uygulayın. - [ ] CSS animasyonları ekleyin (hover, mouseover, etc.) -- [ ] `Gezinizi Planlayın`, `Bilgi Edinin`, ve `Karşılaştırın` sayfaları için kendi tasarımlarınızı yapın ve çalıştırın -- [ ] [favicon.io](https://favicon.io/favicon-converter/) sitesini kullanarak atv ve balon ikonlarını favicon'a dönüştürüp sayfaya ekleyin. +- [ ] `Gezinizi Planlayın`, `Bilgi Edinin`, ve `Karşılaştırın` sayfaları için kendi tasarımlarınızı yapın ve çalıştırın +- [ ] [favicon.io](https://favicon.io/favicon-converter/) sitesini kullanarak atv ve balon ikonlarını favicon'a dönüştürüp sayfaya ekleyin. diff --git a/index.css b/index.css index e69de29..d09249b 100644 --- a/index.css +++ b/index.css @@ -0,0 +1,66 @@ +* { + font-family: "Roboto Mono"; + margin: 0px; +} +.col3 { + display: inline-block; + border-radius: 10px; + margin: 0px 100px; + padding: 10px; +} +.col3 a { + color: white; + text-decoration: none; +} +.first_nav { + border: 1px solid #ff764e; + background-color: #ff764e; +} +.second_nav { + border: 1px solid #5ed3eb; + background-color: #5ed3eb; +} +.third_nav { + border: 1px solid #ffcd69; + background-color: #ffcd69; +} +h1 { + font-family: "Chelsea Market"; +} +.container { + display: inline-block; + margin: 40px 50px; +} +.header_img { + border-radius: 50%; + width: 250px; + height: 250px; +} +.section1 { + vertical-align: top; + margin-left: 200px; +} +.content { + background-color: #ddb9a3; + margin-top: 0px; + padding: 0px 10px; + text-align: center; + color: white; +} +.ortala { + display: inline-block; + width: 310px; + text-align: center; + padding: 10px; + margin-left: 450px; + margin-top: 50px; +} +.footer_img { + width: 100%; + height: 200px; + margin-top: 100px; +} +.nav2 { + background-color: #f9e7dc; + padding: 50px; +} diff --git a/index.html b/index.html index f3bf5da..c8b0afc 100644 --- a/index.html +++ b/index.html @@ -1,55 +1,93 @@ - - - - - - - Gezinizi Planlayın - - Bilgi edinin - - Karşılaştırın - - - - Peri Bacaları Tanıtımı - - Gelin ve Nevşehir'in gizli güzelliklerini keşfedin. - Sürekli açık. Ziyaret için rezervasyona gerek yoktur. - - - - Sadece ülkemizin değil, dünyanın en gizemli yerlerinden biri olan Kapadokya’yı gezerken derin bir merak duyduğunuzu biliyoruz. ‘ Peri bacaları nasıl oluştu, insanlar peri bacalarının içlerini ustalıkla nasıl oydu, bu yeraltı şehirlerini kimler yaptı, o kadar insan yerin altında nasıl yaşadı ’ diye binlerce soru geliyor gezginin aklına. + + + + + + + +
+ +
+
+
+ +
+
+

Peri Bacaları Tanıtımı

+

Gelin ve Nevşehir'in gizli güzelliklerini keşfedin.

+

Sürekli açık. Ziyaret için rezervasyona gerek yoktur.

+
+
+
+
+

+ Sadece ülkemizin değil, dünyanın en gizemli yerlerinden biri olan + Kapadokya’yı gezerken derin bir merak duyduğunuzu biliyoruz. ‘ Peri + bacaları nasıl oluştu, insanlar peri bacalarının içlerini ustalıkla + nasıl oydu, bu yeraltı şehirlerini kimler yaptı, o kadar insan yerin + altında nasıl yaşadı ’ diye binlerce soru geliyor gezginin aklına. +

+

+ Peri bacaları oluşumunun bilimsel açıklaması olmasına rağmen mistik + havasının da şöyle düşündürdüğü biliyoruz; ‘Kapadokya eskiden + perilerin cenneti miydi, yoksa doğa bir mucize mi göstermek istedi!’ +

+
+
+
+
+ +

+ Kapadokya denilince akla ilk gelen şeylerden birisi de şüphesiz sıcak + hava balonları ile yapılan turlar. Her sabah gün doğumundan önce + yüzlerce sıcak hava balonlarından oluşan konvoy ile Kapadokya’nın + eşsiz güzellikteki manzaralarını havadan izlemek katılımcılar için + gerçekten olağanüstü ve rüya gibi bir deneyim. +

+
+
+
+
+ +

+ ATV turları, Kapadokya’yı gezmenin heyecan verici, eğlenceli ve farklı + bir yoludur. Bölgenin eşsiz ve muhteşem vadileri, + dünyanın en iyi ATV turlarından birini deneyimlemenize fırsat + verir. ATV turlarının herkes için uygun bir aktivite olduğunu + söylemeliyiz. +

+
+
+ - Peri bacaları oluşumunun bilimsel açıklaması olmasına rağmen mistik havasının da şöyle düşündürdüğü biliyoruz; ‘Kapadokya eskiden perilerin cenneti miydi, yoksa doğa bir mucize mi göstermek istedi!’ - - - - - - Kapadokya denilince akla ilk gelen şeylerden birisi de şüphesiz sıcak hava balonları ile yapılan turlar. Her sabah gün doğumundan önce yüzlerce sıcak hava balonlarından oluşan konvoy ile Kapadokya’nın eşsiz güzellikteki manzaralarını havadan izlemek katılımcılar için gerçekten olağanüstü ve rüya gibi bir deneyim. - - - - - - ATV turları, Kapadokya’yı gezmenin heyecan verici, eğlenceli ve farklı bir yoludur. Bölgenin eşsiz ve muhteşem vadileri, dünyanın en iyi ATV turlarından birini deneyimlemenize fırsat verir. ATV turlarının herkes için uygun bir aktivite olduğunu söylemeliyiz. - - - - - - - - Gezinizi Planlayın - - Bilgi edinin - - Karşılaştırın - - + + + + diff --git a/odev-teslim/CeylinYasar.png b/odev-teslim/CeylinYasar.png new file mode 100644 index 0000000..79246fe Binary files /dev/null and b/odev-teslim/CeylinYasar.png differ