Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
111 changes: 111 additions & 0 deletions index.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
* {
font-family: "Roboto Mono";
}

body {
margin: 0;
padding: 0;
}

.container {
width: 900px;
margin: 0 auto;
}

header {
padding: 15px;
}

header nav a {
background-color: #5ed3eb;
border-radius: 10px;
padding: 10px 20px;
color: white;
text-decoration: none;
margin: 5px 15%;
display: inline-block;
width: 12%;
text-align: center;
min-height: 16px;
vertical-align: middle;
font-size: 12px;
}

nav a:first-child {
background-color: #ff764e;
margin: 5px 3%;
min-height: 36px;
}

nav a:last-child {
background-color: #ffcd69;
margin: 5px 3%;
}

main {
padding-top: 20px;
}

.main-img {
width: 30%;
display: inline-block;
}

.main-text {
width: 68%;
display: inline-block;
text-align: center;
vertical-align: top;
}

.main-img img {
border-radius: 80%;
width: 200px;
height: 200px;
}

h1 {
font-family: "Chelsea Market";
}

#tanitim {
background-color: #ddb9a3;
color: white;
padding: 5px 10px;
margin-top: 40px;
}

.bilgi {
width: 40%;
margin: 0 auto;
text-align: center;
margin-top: 40px;
}

.bilgi img {
width: 30%;
}

footer {
background-color: #f9e7dc;
}

footer div {
height: 150px;
background-image: url("/FSWeb-S3G2-Intro-CSS/assets/footer_img.jpg");
}

footer nav a {
background-color: #5ed3eb;
border-radius: 10px;
padding: 10px 20px;
color: white;
text-decoration: none;
margin: 5px 15%;
display: inline-block;
width: 12%;
text-align: center;
min-height: 16px;
vertical-align: middle;
font-size: 12px;
}
117 changes: 69 additions & 48 deletions index.html
Original file line number Diff line number Diff line change
@@ -1,55 +1,76 @@
<!-- 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" />
<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&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?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

<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">
<div class="main-img">
<img src="/FSWeb-S3G2-Intro-CSS/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 id="tanitim" class="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="container">
<div class="bilgi">
<img src="/FSWeb-S3G2-Intro-CSS/assets/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 olağanüstü ve rüya gibi bir deneyim.
</p>
</div>
<div class="bilgi">
<img src="/FSWeb-S3G2-Intro-CSS/assets/atv.svg" />
<p>
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.
</p>
</div>
</section>
<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>