FSWeb-S3G2-Intro-CSS Cevaplar

README.md

@@ -1,64 +1,64 @@
-# CSS Modül Projesi Giriş
-
-## Kullanıcı Arayüzü ve Git
-
-## Hedefler
-
-- 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) 
-
-## 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) 
-
-## Talimatlar
-
-### Görev 1: Projeyi Git'le kurun
-
-Aşağıdaki adımları takip edin.:
-
-- [ ] Repoyu forklayın ve klonlayın.
-- [ ] BRANCH OLUŞTURMAYIN. Güncellemelerinizi main/master 'a pushlayacaksınız.
-- [ ] Terminalden reponuzun bulunduğu klasöre ulaşın ve VS Code'u açmak için . yazın ve entera basın. Ya da VS Code içerisine proje klasörünü sürükleyip bırakabilirsiniz.
-- [ ] 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.
-
-### 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
-
-**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.
+# CSS Modül Projesi Giriş
+
+## Kullanıcı Arayüzü ve Git
+
+## Hedefler
+
+- 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) 
+
+## 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) 
+
+## Talimatlar
+
+### Görev 1: Projeyi Git'le kurun
+
+Aşağıdaki adımları takip edin.:
+
+- [ ] Repoyu forklayın ve klonlayın.
+- [ ] BRANCH OLUŞTURMAYIN. Güncellemelerinizi main/master 'a pushlayacaksınız.
+- [ ] Terminalden reponuzun bulunduğu klasöre ulaşın ve VS Code'u açmak için . yazın ve entera basın. Ya da VS Code içerisine proje klasörünü sürükleyip bırakabilirsiniz.
+- [ ] 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.
+
+### 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
+
+**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.

index.css

@@ -0,0 +1,82 @@
+*body {
+    margin: 0;
+    padding: 0;
+}
+.container {
+    width: 1000px;
+    margin: 0 auto;
+}
+nav a {
+    width: 100px;
+    text-align: center;
+    color: white;
+    border-radius: 10px;
+    padding: 12px;
+    background: #5ED3E8;
+    margin: 10px 140px;
+    text-decoration: none;
+    display: inline-block;
+    vertical-align: middle;
+}
+ nav a:first-child {
+    background-color: #FF764E;
+    margin: 10px 75px;
+    padding: 5px;
+
+}
+
+ nav a:last-child {
+    background-color: #FFCD69;
+    margin: 10px 75px;
+
+}
+main img{
+    display: inline-block;
+    border-radius: 100%;
+    width: 200px;
+    height: 200px;
+    vertical-align: middle;
+    margin-left: 50px;
+}
+ main div{
+    display: inline-block;
+    width: 650px;
+    text-align: center;
+    vertical-align: middle;
+
+}
+ main{
+    display: block;
+}
+.aboutUs-section {
+    background-color: #DDB9A3;
+    color: white;
+    padding: 0px 10px;
+    text-align: center;
+}
+.feature-section div{
+    width: 30%;
+    margin: auto;
+
+}
+.feature-section img{
+    width: 30%;
+    display: block;
+    margin: auto;
+}
+.feature-section p{
+    text-align: center;
+}
+.feature-section span{
+    font-weight: bold;
+}
+ footer {
+    background-color: #F9E7DC;
+ }
+ footer img {
+    height: 50%;
+    width: 100%;
+    display: block;
+    object-fit: cover;
+    object-position: 100% 15%;
+ }

index.html

@@ -1,55 +1,68 @@
-<!-- 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. 
-
-
-     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>
-</html>
+<!-- Aşağıdaki içerikleri CSS ile biçimlendirerek etiketleyin. -->
+<!DOCTYPE html>
+<html lang="tr">
+<head>
+<!-- Link your CSS stylesheet -->
+<link href="./index.css" rel="stylesheet">
+</head>
+<body>
+  <header class="container">
+    <nav>
+      <a href="">  Gezinizi Planlayın</a>
+
+      <a href="">  Bilgi Edinin</a>
+
+      <a href=""> Karşılaştırın
+
+      </a>
+    </nav>
+  </header>
+  <main class="container">
+    <img src="assets/header_img.jpg">
+    <div>
+      <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>
+  </main>
+      <!-- "header_img.jpg" -->
+	  <section class="aboutUs-section container">
+      <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>
+    </section>
+
+    <section class="feature-section container">
+      <div>
+        <img src="./assets/hot-air-balloon.svg" alt="">
+        <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 <span>olağanüstü ve rüya gibi bir deneyim.</span>
+        </p>
+      </div>
+      <div>
+        <img src="./assets/atv.svg" alt="">
+        <p>
+          ATV turları, Kapadokya’yı gezmenin heyecan verici, eğlenceli ve farklı bir yoludur. Bölgenin eşsiz ve muhteşem vadileri, <span>dünyanın en iyi ATV turlarından birini</span> deneyimlemenize fırsat verir. ATV turlarının herkes için uygun bir aktivite olduğunu söylemeliyiz.
+        </p>
+      </div>
+    </section>
+    <footer>
+      <img src="./assets/footer_img.jpg" alt="">
+      <nav class="footer container"> 
+        <a href="">  Gezinizi Planlayın</a>
+
+        <a href="">  Bilgi Edinin</a>
+
+        <a href=""> Karşılaştırın</a>
+      </nav>
+    </footer>
+
+</body>
+</html>