Workintech · Murathann61 · Feb 8, 2023 · Feb 8, 2023
diff --git a/index.css b/index.css
@@ -0,0 +1,95 @@
+*{
+    font-family: 'Roboto Mono', monospace;
+    font-size: 12px;
+}
+
+body{
+    margin: 0;
+    padding: 0;
+}
+.container{
+    width: 750px;
+    margin: auto;
+}
+
+nav a{
+    border-radius: 10px;
+    color: white;
+    padding: 10px 20px;
+    background: #5ED3EB;
+    text-decoration: none;
+    width: 13%;
+    margin: 2% 15%;
+    display: inline-block;
+    text-align: center;
+    vertical-align: middle;
+}
+
+nav a:first-child{
+    background: #FF764E;
+    margin: 2%;
+    padding: 2px 20px;
+}
+
+nav a:last-child{
+    background: #FFCD69;
+    margin: 2%;
+}
+
+main div{
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.main_image{
+    width: 26%;
+}
+
+.main_image img{
+    height: 150px;
+    width: 150px;
+    margin: auto;
+    border-radius: 100px;
+    display: block;
+}
+.main_text{
+    width: 50%;
+    text-align: center;
+    padding: 10%;
+}
+
+h1{
+    font-family: 'Chelsea Market', cursive;
+    font-size: 2rem;
+}
+
+.sec_box{
+    background-color: #DDB9A3;
+    color: white;
+    padding: 2px 10px;
+}
+
+#ozellikler div{
+    width: 40%;
+    margin: 3% auto;
+    text-align: center;
+}
+
+#ozellikler div img{
+    width: 35%;
+    margin: auto;
+}
+
+#ozellikler span {
+    font-weight: bold;
+}
+
+footer div{
+    background: url(/assets/footer_img.jpg);
+    height: 180px;
+    width: 100%;
+}
+
+footer{
+    background : #F9E7DC;
+}
diff --git a/index.html b/index.html
@@ -1,55 +1,86 @@
 <!-- Aşağıdaki içerikleri CSS ile biçimlendirerek etiketleyin. -->
 <!DOCTYPE html>
 <html lang="tr">
+
 <head>
-<!-- Link your CSS stylesheet -->
-
+  <!-- Link your CSS stylesheet -->
+  <link rel="stylesheet" href="/index.css">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Chelsea+Market&family=Roboto+Mono&display=swap" rel="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
-
+  <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">
+    <!-- "header_img.jpg" -->
+    <div class="main_image">
+      <img src="/assets/header_img.jpg" alt="Peri Bacaları Tanıtımı">
+    </div>
+    <div class="main_text">
+      <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>
+
+  <section class="container">
+    <div class="sec_box">
+      <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 id="ozellikler" class="container">
+    <div>
+      <img src="/assets/hot-air-balloon.svg" alt="balon">
+      <!--  "hot-air-balloon.svg" -->
+      <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="atv">
+      <!--  "atv.svg" -->
+
+      <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.png" -->
+  <footer>
+    <div>
+
+    </div>
+    <nav class="container">
+      <a href="#">Gezinizi Planlayın</a>
+      <a href="#">Bilgi edinin</a>
+      <a href="#">Karşılaştırın</a>
+    </nav>
+  </footer>
 </body>
-</html>
+
+</html>
diff --git a/odev_teslim/screencapture-127-0-0-1-5500-index-html-2023-02-08-23_49_14.png b/odev_teslim/screencapture-127-0-0-1-5500-index-html-2023-02-08-23_49_14.png