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
138 changes: 138 additions & 0 deletions index.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,138 @@
/*
font-family: 'Chelsea Market', cursive;
font-family: 'Roboto Mono', monospace;
*/

body {
margin:0;
padding: 0;
}

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

nav a {
display: inline-block;
border-radius: 10px;
font-size: 25px;
background-color: #5ED3EB;
padding: 12px 3%;
width: 200px;
height: 40px;
margin: 0;
text-align: center;
text-decoration: none;
color: white;
vertical-align: middle;
}
nav a:first-child {
background-color: #FF764E;
padding: 12px 3%;
margin: 0;
}
nav a:last-child {
background-color: #FFCD69;
margin: 0;
} /*ilk ve sonu en sağa ve sola dayadık, ortadakine eklemiş olduk*/

main img {
display: inline-block;
vertical-align: top;
border-radius: 50%;
width: 150px;
height: 150px;


}
main, header {
padding: 50px 0;
}

main div {
display: inline-block;
vertical-align: top;
width: 550px;
}
h1 {
display: inline-block;
margin: 18px;
text-align: center;
font-family: 'Chelsea Market', cursive;
font-size: 30px;

}

main p {
margin:8px 0;
text-align: center;
font-family: 'Roboto Mono', monospace;
font-size: 17px;
}

.description {
background-color: #ddb9a3;
color: #f9e7dc;
padding: 20px;
}

.features img{
display: block;
width: 20%;
margin: 20px auto;

}

.features span{
font-weight: bold;
}

.feature {
width: 50%;
margin: 20px auto;
text-align: center;
}

footer {
background-color: #F9E7DC;
}

footer div{
height: 150px;
width: 100%;
background-image: url("assets/footer_img.jpg");
background-size: cover;
}











/*
header nav a:first-child {

margin: 10px;
font-size: 40px;
color: #FF764E;
text-decoration: underline;
}
header nav a:nth-child(2){
margin: 10px;
font-size: 40px;
color: #5ED3EB;
text-decoration: underline;
}
header nav a:nth-child(3){
margin: 10px;
font-size: 40px;
color: #FFCD69;
text-decoration: underline;
}
*/
118 changes: 70 additions & 48 deletions index.html
Original file line number Diff line number Diff line change
@@ -1,55 +1,77 @@
<!-- 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 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&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">
<!-- Navigation -->
<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" -->
<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.
Sürekli açık. Ziyaret için rezervasyona gerek yoktur.</p>
</div>
</main>

<section class="container description">

<!-- Services Section-->
<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 features">
<div class="feature">
<!-- "hot-air-balloon.svg" -->
<img src="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 <span> olağanüstü ve rüya gibi bir deneyim. </span>
</p>
</div>
<div class="feature">
<!-- "atv.svg" -->
<img src="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, <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>
<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>