Workintech · CeylinYasar · Dec 14, 2022
diff --git a/README.md b/README.md
@@ -4,62 +4,61 @@
 
 ## 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
 
 ### Görev 1: Projeyi Git'le kurun
 
 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
@@ -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
@@ -1,55 +1,93 @@
 <!-- Aşağıdaki içerikleri CSS ile biçimlendirerek etiketleyin. -->
 <!DOCTYPE html>
 <html lang="tr">
-<head>
-<!-- Link your CSS stylesheet -->
-
-</head>
-<body>
-
-        Gezinizi Planlayın
-
-        Bilgi edinin
-
-        Karşılaştırın
-
-      <!-- "header_img.jpg" -->
-
-      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. 
+  <head>
+    <link rel="stylesheet" href="index.css" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Chelsea+Market&family=Roboto&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
+      integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+  </head>
+  <body>
+    <header>
+      <nav class="container">
+        <div class="col3 first_nav"><a href="#">Gezinizi Planlayın</a></div>
+        <div class="col3 second_nav"><a href="#">Bilgi edinin</a></div>
+        <div class="col3 third_nav"><a href="#">Karşılaştırın</a></div>
+      </nav>
+    </header>
+    <section>
+      <div class="container">
+        <img src="assets/header_img.jpg" alt="" class="header_img" />
+      </div>
+      <div class="container section1">
+        <h1>Peri Bacaları Tanıtımı</h1>
+        <p>Gelin ve Nevşehir'in gizli güzelliklerini keşfedin.</p>
+        <p>Sürekli açık. Ziyaret için rezervasyona gerek yoktur.</p>
+      </div>
+    </section>
+    <section>
+      <div class="container content">
+        <p>
+          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.
+        </p>
+        <p>
+          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!’
+        </p>
+      </div>
+    </section>
+    <section>
+      <div class="ortala">
+        <i class="fa-solid fa-golf-ball-tee" style="font-size: 50px"></i>
+        <p>
+          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 <b>olağanüstü ve rüya gibi bir deneyim.</b>
+        </p>
+      </div>
+    </section>
+    <section>
+      <div class="ortala">
+        <i class="fa-solid fa-motorcycle" style="font-size: 50px"></i>
+        <p>
+          ATV turları, Kapadokya’yı gezmenin heyecan verici, eğlenceli ve farklı
+          bir yoludur. Bölgenin eşsiz ve muhteşem vadileri,
+          <b>dünyanın en iyi ATV turlarından birini</b> deneyimlemenize fırsat
+          verir. ATV turlarının herkes için uygun bir aktivite olduğunu
+          söylemeliyiz.
+        </p>
+      </div>
+    </section>
 
+    <!-- "footer_img.png" -->
 
-     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!’
-
-
-     <!--  "hot-air-balloon.svg" -->
-
-
-      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.svg" -->
-
-
-      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.
-
-
-
-      <!-- "footer_img.png" -->
-
-
-
-        Gezinizi Planlayın
-
-        Bilgi edinin
-
-        Karşılaştırın
-
-</body>
+    <img src="assets/footer_img.jpg" alt="" class="footer_img" />
+
+    <footer>
+      <nav class="nav2">
+        <div class="col3 first_nav"><a href="#">Gezinizi Planlayın</a></div>
+        <div class="col3 second_nav"><a href="#">Bilgi edinin</a></div>
+        <div class="col3 third_nav"><a href="#">Karşılaştırın</a></div>
+      </nav>
+    </footer>
+  </body>
 </html>
diff --git a/odev-teslim/CeylinYasar.png b/odev-teslim/CeylinYasar.png