JavaScript ile memleketimizi tanıtmak

Alcheinz

Alcheinz

Centipat
Katılım
7 Eylül 2022
Mesajlar
310
Çözümler
1
Daha fazla  
Cinsiyet
Erkek
Arkadaşlar ödevim var ve konum memleketimizi tanıtmak. Aşağıya tüm kodlarımı bırakıyorum böyle bir projeye internete ihtiyaç duymayacak ne gibi JS kodları ekleyebilirim? Hoca JS'de istiyor ve ben sadece sahte bir hava durumu ekleyebildim.

HTML: 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Samsun'u Keşfet</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>

</head>

<body>
    <!--! Header Başlangıç -->
    <header class="container">
        <nav>
            <div class="logo">
                <a href="index.html">Güneşin Doğduğu Şehir</a>
            </div>
            <div class="menu">
                <ul>
                    <li><a href="index.html">Anasayfa</a></li>
                    <li><a href="tarihce.html">Tarihçe</a></li>
                    <li><a href="gezilecekyerler.html">Gezilecek Yerler</a></li>
                    <li><a href="yemekler.html">Yemekler</a></li>
                    <li><a href="Konaklama.html">Konaklama</a></li>
                </ul>
                <a href="https://www.samsunspor.org.tr/" target="_blank" class="menu-button">Samsunspor</a>
            </div>
        </nav>
    </header>
    <!--! Header Sonu  -->

    <!--! Section Başlangıç -->
    <section class="container content">
        <h1>Samsun'a Hoşgeldiniz.</h1>
        <p>Karadeniz Bölgesi'nin eğitim, sağlık, sanayi, ticaret, ulaşım ve ekonomi açılarından en gelişmiş şehri.</p>
        <div style="text-align: center;">
            <video width="700" height="440" controls>
                <source src="Samsun Tanıtım Filmi.mp4" type="video/mp4">
                Tarayıcınız video formatını desteklememekte. :/
            </video>
        </div>
    </section>

    <!--! Section Sonu -->

</body>

</html>


HTML: 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Samsun Tarihçesi</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>

<body>

    <!--! Header Başlangıç -->
    <header class="container">
        <nav>
            <div class="logo">
                <a href="index.html">Güneşin Doğduğu Şehir</a>
            </div>
            <div class="menu">
                <ul>
                    <li><a href="index.html">Anasayfa</a></li>
                    <li><a href="tarihce.html">Tarihçe</a></li>
                    <li><a href="gezilecekyerler.html">Gezilecek Yerler</a></li>
                    <li><a href="yemekler.html">Yemekler</a></li>
                    <li><a href="Konaklama.html">Konaklama</a></li>
                </ul>
                <a href="https://www.samsunspor.org.tr/" target="_blank" class="menu-button">Samsunspor</a>
            </div>
        </nav>
    </header>
    <!--! Header Sonu  -->
    <div style="text-align: center; color: white;" class="card">
        <img src="samsuniskele.jpg" alt="samsun iskele" style="width:45%">
        <div class="container">
            <h2><b>Tarihçe</b></h2>
            <p class="tarihceyazi">Samsun, Türkiye'nin Karadeniz bölgesinde yer alan tarihi ve kültürel öneme
                sahip bir şehirdir. Samsun'un tarihçesi oldukça eski dönemlere kadar uzanır ve birçok medeniyetin
                izlerini taşır. İşte Samsun'un tarihçesi hakkında kısa bir özet:

                Antik Dönem:
                Samsun'un tarihi, antik döneme kadar gitmektedir. M.Ö. 5. yüzyılda şehir, Hellenistik dönemde Pontus
                Krallığı'nın bir parçasıydı ve bu dönemde önemli bir liman kenti olarak kullanıldı. Samsun, Roma
                İmparatorluğu'nun bir parçası haline geldi ve bu dönemde de ticaretin merkezi olmaya devam etti.

                Orta Çağ:
                Orta Çağ boyunca, Samsun birçok farklı medeniyetin egemenliği altına girdi. Bizans İmparatorluğu'nun
                ardından şehir, 1214 yılında Selçuklu Sultanı I. Alaeddin Keykubat tarafından fethedildi. Daha sonra
                Candaroğulları Beyliği'nin başkenti oldu.

                Osmanlı Dönemi:
                Samsun, 1402 yılında Timur'un yönetimine geçti, ancak daha sonra Osmanlı İmparatorluğu'nun hakimiyeti
                altına girdi. Osmanlı döneminde, Samsun önemli bir ticaret merkezi olarak gelişti ve Karadeniz
                kıyısındaki diğer şehirlerle birlikte önemli bir liman haline geldi.

                Kurtuluş Savaşı:
                Samsun'un modern tarihindeki en önemli olaylardan biri, 19 Mayıs 1919'da Mustafa Kemal Atatürk'ün şehre
                gelerek Kurtuluş Savaşı'nı başlatmasıdır. Bu tarih, Türkiye Cumhuriyeti'nin kuruluşunun temelini
                atmıştır. Atatürk'ün Samsun'a ayak basarak bağımsızlık mücadelesini başlatması, şehri Türk tarihinde
                özel bir yere sahip kılmıştır.

                Cumhuriyet Dönemi:
                Samsun, Türkiye Cumhuriyeti'nin kuruluşundan sonra da büyümeye devam etti. 20. yüzyılın ortalarında
                limanı modernize edildi ve şehir sanayileşmeye başladı. Bu dönemde tarım, ticaret ve sanayi Samsun
                ekonomisinin temelini oluşturdu.

                Bugün:
                Bugün Samsun, Türkiye'nin önemli bir şehri ve Karadeniz Bölgesi'nin en büyük şehirlerinden biridir.
                Sahip olduğu tarihi ve kültürel miras, turistlerin ilgisini çeken birçok mekanın bulunmasını sağlar.
                Ayrıca Samsun, Karadeniz kıyısının güzel plajları ve doğal güzellikleri ile de ünlüdür.

                Samsun şehri, köklü geçmişi ve modern yaşam tarzıyla Türkiye'nin önemli şehirlerinden biri olarak
                varlığını sürdürmektedir.</p>
        </div>
    </div>

</body>

</html>


HTML: 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Samsun'da Gezmeniz Gereken Yerler</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>

<body>

    <!--! Header Başlangıç -->
    <header class="container">
        <nav>
            <div class="logo">
                <a href="index.html">Güneşin Doğduğu Şehir</a>
            </div>
            <div class="menu">
                <ul>
                    <li><a href="index.html">Anasayfa</a></li>
                    <li><a href="tarihce.html">Tarihçe</a></li>
                    <li><a href="gezilecekyerler.html">Gezilecek Yerler</a></li>
                    <li><a href="yemekler.html">Yemekler</a></li>
                    <li><a href="Konaklama.html">Konaklama</a></li>
                </ul>
                <a href="https://www.samsunspor.org.tr/" target="_blank" class="menu-button">Samsunspor</a>
            </div>
        </nav>
    </header>
    <!--! Header Sonu  -->

    <div class="responsive">
        <div class="gallery">
            <a target="_blank" href="gez1.jpg">
                <img src="gez1.jpg" alt="#">
            </a>
            <div class="desc">Samsun Amazon Heykeli, Şehrin sembolü olan bu heykel, Amazon kadın savaşçılarını anıyor.
            </div>
        </div>
    </div>

    <div class="responsive">
        <div class="gallery">
            <a target="_blank" href="gez6.jpg">
                <img src="gez6.jpg" alt="#">
            </a>
            <div class="desc">Amazon Köyü, Efsanevi kadın savaşçıların hikayelerini yaşatan bu köy, özellikle çocuklar
                için eğlenceli
                bir yer.</div>
        </div>
    </div>

    <div class="responsive">
        <div class="gallery">
            <a target="_blank" href="gez3.jpg">
                <img src="gez3.jpg" alt="#">
            </a>
            <div class="desc">Amisos Tepesi, Samsun'da hem tarihi hem de görsel bir zenginlik sunan, ziyaretçilerine
                muhteşem bir gün batımı deneyimi yaşatırken, aynı zamanda antik dönemi deneyimleyebileceğiniz bir yer.
            </div>
        </div>
    </div>

    <div class="responsive">
        <div class="gallery">
            <a target="_blank" href="gez4.jpg">
                <img src="gez4.jpg" alt="#">
            </a>
            <div class="desc">Bandırma Vapuru Müzesi, Kurtuluş Savaşı'nın simgesi olan Bandırma Vapuru, bu müzede
                sergileniyor. Adeta tarihi bir yolculuk.</div>
        </div>
    </div>
    <div class="responsive">
        <div class="gallery">
            <a target="_blank" href="gez2.jpg">
                <img src="gez2.jpg" alt="#">
            </a>
            <div class="desc">Altınkaya Barajı, doğaseverler ve su sporları tutkunları için harika bir destinasyondur.
                Bu bölgeyi ziyaret ettiğinizde, doğanın huzurunu ve güzelliklerini keşfetme şansı bulacaksınız.</div>
        </div>
    </div>
    <div class="responsive">
        <div class="gallery">
            <a target="_blank" href="gez5.jpg">
                <img src="gez5.jpg" alt="#">
            </a>
            <div class="desc">Samsun Çiftlik Caddesi, şehrin canlı alışveriş ve yeme-içme merkezi olarak bilinir. Birçok
                mağaza, restoran ve kafe burada bulunur ve sık sık etkinlikler düzenlenir.</div>
        </div>
    </div>
    <div class="clearfix"></div>
    <h1 style="color: white;">Şehir Hava Durumu</h1>
    <div id="weather-info"></div>
</body>

</html>

HTML: 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Samsun'u Keşfet</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <!--! Header Başlangıç -->
    <header class="container">
        <nav>
            <div class="logo">
                <a href="index.html">Güneşin Doğduğu Şehir</a>
            </div>
            <div class="menu">
                <ul>
                    <li><a href="index.html">Anasayfa</a></li>
                    <li><a href="tarihce.html">Tarihçe</a></li>
                    <li><a href="gezilecekyerler.html">Gezilecek Yerler</a></li>
                    <li><a href="yemekler.html">Yemekler</a></li>
                    <li><a href="Konaklama.html">Konaklama</a></li>
                </ul>
                <a href="https://www.samsunspor.org.tr/" target="_blank" class="menu-button">Samsunspor</a>
            </div>
        </nav>
    </header>
    <!--! Header Sonu  -->

    <img style="width: 1400px; padding-left: 155px; padding-top: 30px; " src="yemeklerbanner.png" alt="">
    <br>
    <br>
    <p class="tarihceyazi">Samsun’un geleneksel mutfağında lahana, mısır, kuru fasulye ve hamur işi yiyecekler ile
        deniz ürünleri(Çoğunlukla hamsi, mezgit, palamut, istavrit ve barbun) ağırlıklıdır. Karadeniz Bölgesi yöresel
        yemek kültürünün de etkilerini taşıyan Samsun mutfağı, sebze ağırlıklı yemekleri pişirmeyi sever. Bunun yanında,
        kümes hayvanları(kaz, tavuk, ördek) yörenin beslenme kültüründe önemli bir yer tutar. İlçe ilçe değişen ve
        kendine has lezzetleri yansıtan açık ve kapalı pideler, Samsun halkının hafta sonu kahvaltı sofralarının
        vazgeçilmezlerindendir. Samsun yöresel mutfağında fasulye diblesi, turşu kavurması, karalâhana dolması, mısır
        çorbası, tirit, keşkek, ekşili, kaz asması, katık böreği, içli mantı, kapalı kıymalı pide ve fındıklı baklava
        ile kıvratma ve nokul çeşitleri en dikkat çeken yemeklerdendir. Samsun mutfağında doğada yetişen bitkilerden
        yapılan yemekler de önemlidir. Kırçan, kaldırayak (galdirik), madımak ve largon gibi bitkilerle yapılan kavurma
        ve çorbalar, Samsun yöresinin sevdiği tatlardandır.</p>
    <br>
    <div class="responsive">
        <div class="gallery">
            <a target="_blank" href="samsunmutfagi-1.jpg">
                <img src="samsunmutfagi-1.jpg" alt="#">
            </a>
            <div class="desc">Simit</div>
        </div>
    </div>

    <div class="responsive">
        <div class="gallery">
            <a target="_blank" href="samsunmutfagi-2.jpg">
                <img src="samsunmutfagi-2.jpg" alt="#">
            </a>
            <div class="desc">Keşkek</div>
        </div>
    </div>

    <div class="responsive">
        <div class="gallery">
            <a target="_blank" href="samsunmutfagi-3.jpg">
                <img src="samsunmutfagi-3.jpg" alt="#">
            </a>
            <div class="desc">Nokul</div>
        </div>
    </div>

    <div class="responsive">
        <div class="gallery">
            <a target="_blank" href="samsunmutfagi-4.jpg">
                <img src="samsunmutfagi-4.jpg" alt="#">
            </a>
            <div class="desc">Terme Pidesi</div>
        </div>
    </div>
    <div class="responsive">
        <div class="gallery">
            <a target="_blank" href="samsunmutfagi-5.jpg">
                <img src="samsunmutfagi-5.jpg" alt="#">
            </a>
            <div class="desc">Kaymaklı Lokum</div>
        </div>
    </div>
    <div class="responsive">
        <div class="gallery">
            <a target="_blank" href="samsunmutfagi-6.jpg">
                <img src="samsunmutfagi-6.jpg" alt="#">
            </a>
            <div class="desc">Bafra Pidesi</div>
        </div>
    </div>
    <div class="clearfix"></div>
    <div class="responsive">
        <div class="gallery">
            <a target="_blank" href="samsunmutfagi-7.jpg">
                <img src="samsunmutfagi-7.jpg" alt="#">
            </a>
            <div class="desc">Kestane Balı</div>
        </div>
    </div>
    <div class="responsive">
        <div class="gallery">
            <a target="_blank" href="samsunmutfagi-8.jpg">
                <img src="samsunmutfagi-8.jpg" alt="#">
            </a>
            <div class="desc">Çarşamba Pidesi</div>
        </div>
    </div>
    <div class="responsive">
        <div class="gallery">
            <a target="_blank" href="samsunmutfagi-9.jpg">
                <img src="samsunmutfagi-9.jpg" alt="#">
            </a>
            <div class="desc">Menemen</div>
        </div>
    </div>
    <div class="responsive">
        <div class="gallery">
            <a target="_blank" href="samsunmutfagi-10.jpg">
                <img src="samsunmutfagi-10.jpg" alt="#">
            </a>
            <div class="desc">Yazı Pancarı</div>
        </div>
    </div>
    <div class="responsive">
        <div class="gallery">
            <a target="_blank" href="samsunmutfagi-12.jpg">
                <img src="samsunmutfagi-12.jpg" alt="#">
            </a>
            <div class="desc">Fasulyeli Mısır Çorbası</div>
        </div>
    </div>
    <div class="responsive">
        <div class="gallery">
            <a target="_blank" href="samsunmutfagi-13.jpg">
                <img src="samsunmutfagi-13.jpg" alt="#">
            </a>
            <div class="desc">Kaz Tiridi</div>
        </div>
    </div>



HTML: 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Samsun'u Keşfet</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>

<body>

    <!--! Header Başlangıç -->
    <header class="container">
        <nav>
            <div class="logo">
                <a href="index.html">Güneşin Doğduğu Şehir</a>
            </div>
            <div class="menu">
                <ul>
                    <li><a href="index.html">Anasayfa</a></li>
                    <li><a href="tarihce.html">Tarihçe</a></li>
                    <li><a href="gezilecekyerler.html">Gezilecek Yerler</a></li>
                    <li><a href="yemekler.html">Yemekler</a></li>
                    <li><a href="Konaklama.html">Konaklama</a></li>
                </ul>
                <a href="https://www.samsunspor.org.tr/" target="_blank" class="menu-button">Samsunspor</a>
            </div>
        </nav>
    </header>
    <!--! Header Sonu  -->
    <div style="margin-left: 550px; color: white;" class="animated-text">
        <h1>Konaklamada En İyi Oteller</h1>
    </div>
    </div>
    <div class="hotel-container">
        <div class="hotel">
            <img src="sheraton-grand-samsun.jpg" alt="">
            <h2>Sheraton Grand Otel</h2>
            <p>Derecelendirme: 4.8/5</p>
        </div>
        <div class="hotel">
            <img src="hotel-exterior-at-night.jpg" alt="">
            <h2>Park Inn by Radisson</h2>
            <p>Derecelendirme: 4.5/5</p>
        </div>
        <div class="hotel">
            <img src="exterior.jpg" alt="">
            <h2>Hampton by Hilton</h2>
            <p>Derecelendirme: 4.4/5</p>
        </div>
        <div class="hotel">
            <img src="hilas-thermal-resort.jpg" alt="">
            <h2>Hilas Thermal Resort & Spa</h2>
            <p>Derecelendirme: 4.2/5</p>
        </div>
        <div class="hotel">
            <img src="bungalov_samsun.jpg" alt="">
            <h2>Taşkonak Dağ Evleri</h2>
            <p>Derecelendirme: 4.1/5</p>
        </div>
        <div class="hotel">
            <img style="width: 300px; height: 300px;" src="anemon.png" alt="">
            <h2>Anemon Otel</h2>
            <p>Derecelendirme: 4.0/5</p>
        </div>
    </div>
</body>

</html>


CSS: 
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    background-image: url("bg.jpg");
    background-size: cover;
}



.container {
    width: 80%;
    margin: auto;
}

/*! header başlangıç */

header {
    height: 100px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.06);
}

header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

header nav .logo a {
    color: white;
    text-decoration: none;
    font-weight: 700;
    font-size: 20px;
}

nav ul {
    list-style: none;
    display: flex;
    column-gap: 30px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    transition: color .25s ease;
}

nav ul li a:hover {
    color: #0ba2c0;
}

nav .menu {
    display: flex;
    align-items: center;
    column-gap: 48px;
}

nav .menu .menu-button {
    color: #ffffff;
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0.08);
    padding: 12px 24px;
    border-radius: 56px;
    transition: all .25s ease;
}

nav .menu .menu-button:hover {
    background-color: #b14040;
    color: white;
}

/*! header sonu */

/*! section başlangıç  */
.content {
    color: white;
    height: calc(100vh - 100px);
    padding-top: 150px;
}

.content h1 {
    font-size: 60px;
    text-align: center;
}

.content p {
    font-size: 24px;
    text-align: center;
    margin-top: 32px;
}

.content .links {
    display: flex;
    justify-content: center;
    margin-top: 48px;
    column-gap: 16px;
}

.tarihceyazi {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 20px;
    text-align: center;
}

.card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;

}

.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.container {
    padding: 2px 16px;
}

.content .links a {
    background-color: white;
    padding: 20px;
    width: 280px;
    color: black;
    text-align: center;
    font-size: 18px;
    text-decoration: none;
    border-radius: 56px;
    transition: all .25s ease-in;
}

.content .links a:hover {
    background-color: #0ba2c0;
    color: white;
}


/*! section sonu  */

/*! responsive başlangıç */
@media(max-width:576px) {
    .container {
        width: 100%;
        padding-left: 12px;
        padding-right: 12px;
    }

    .menu ul {
        column-gap: 20px;
    }

    .menu .menu-button {
        display: none;
    }

    .content {
        padding-top: 50px;
    }

    .content h1 {
        font-size: 36px;
    }

    .content p {
        font-size: 16px;
    }

    .content .links {
        flex-direction: column;
        align-items: center;
        row-gap: 1rem;
    }

    .content .links a {
        padding: 14px;
        width: 90%;
    }
}

div.gallery {
    border: 1px solid #ccc;
}

div.gallery:hover {
    border: 1px solid #777;
}

div.gallery img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
}

* {
    box-sizing: border-box;
}

.responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
}

@media only screen and (max-width: 700px) {
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px) {
    .responsive {
        width: 100%;
    }
}

.hotel-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px;
}

.hotel {
    margin: 10px;
    padding: 10px;
    border: 1px solid #ddd;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5);
}

.hotel img {
    max-width: 100%;
    height: auto;
}

.hotel h2 {
    font-size: 20px;
    color: white;
}

.hotel p {
    font-size: 14px;
    color: rgb(214, 196, 56);
}


/*! responsive sonu */




JavaScript: 
document.addEventListener("DOMContentLoaded", () => {
    const sahteWeatherData = {
        weather: [{
            description: "Parçalı bulutlu"
        }],
        main: {
            temp: 22
        }
    };

    const weatherInfo = document.getElementById('weather-info');
    weatherInfo.innerHTML = `Hava durumu: ${sahteWeatherData.weather[0].description}, Sıcaklık: ${sahteWeatherData.main.temp}°C`;
});




Projede veri tabanı olmayacak. Başka bi' öneriniz olursa onu da bekliyorum.
 
Tarihe göre sırala Puana göre sırala
spriggan dedi:
Siteyi yaparken body içerisine container id'li div koy. Div'in margin değerini margin:0 auto; olarak ayarla. Width olarak 1000px ver mesela. O div otomatik olarak tarayıcının içerisinde ortalanacaktır.

Ardından tüm web sitesini bu container id'li div içerisine yerleştir.
Genişletmek için tıkla...
Hocam müsaitsen sana bir konuda danışmak istiyorum, projedeki gezilecekyerler.html sayfasında sayfayı büyütüp küçülttüğümde her şey kayıyor, yerleri değişiyor ve çirkin bi görüntü oluşuyor temel sebebi nedir bunun düzeltmek için ne yapmalıyım, bunu hallettiğimde proje teslime hazır hale gelecek ve kurtulacağım çünkü :).

Ben yine sayfanın HTML ve CSS(tüm proje için geçerli CSS dosyası) kodlarını bırakıyorum aşağıya.
HTML: 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Samsun'da Gezmeniz Gereken Yerler</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>

<body>

    <!--! Header Başlangıç -->
    <header class="container">
        <nav>
            <div class="logo">
                <a href="index.html">Güneşin Doğduğu Şehir</a>
            </div>
            <div class="menu">
                <ul>
                    <li><a href="index.html">Anasayfa</a></li>
                    <li><a href="tarihce.html">Tarihçe</a></li>
                    <li><a href="gezilecekyerler.html">Gezilecek Yerler</a></li>
                    <li><a href="yemekler.html">Yemekler</a></li>
                    <li><a href="restoranlar.html">Restoranlar</a></li>
                    <li><a href="Konaklama.html">Konaklama</a></li>
                </ul>
                <a href="https://www.samsunspor.org.tr/" target="_blank" class="menu-button">Samsunspor</a>
            </div>
        </nav>
    </header>
    <!--! Header Sonu  -->

    <div class="responsive">
        <div class="gallery">
            <a target="_blank" href="gez1.jpg">
                <img src="gez1.jpg" alt="#">
            </a>
            <div class="desc">Samsun Amazon Heykeli, Şehrin sembolü olan bu heykel, Amazon kadın savaşçılarını anıyor.
            </div>
        </div>
    </div>

    <div class="responsive">
        <div class="gallery">
            <a target="_blank" href="gez6.jpg">
                <img src="gez6.jpg" alt="#">
            </a>
            <div class="desc">Amazon Köyü, Efsanevi kadın savaşçıların hikayelerini yaşatan bu köy, özellikle çocuklar
                için eğlenceli
                bir yer.</div>
        </div>
    </div>

    <div class="responsive">
        <div class="gallery">
            <a target="_blank" href="gez3.jpg">
                <img src="gez3.jpg" alt="#">
            </a>
            <div class="desc">Amisos Tepesi, Samsun'da hem tarihi hem de görsel bir zenginlik sunan, ziyaretçilerine
                muhteşem bir gün batımı deneyimi yaşatırken, aynı zamanda antik dönemi deneyimleyebileceğiniz bir yer.
            </div>
        </div>
    </div>

    <div class="responsive">
        <div class="gallery">
            <a target="_blank" href="gez4.jpg">
                <img src="gez4.jpg" alt="#">
            </a>
            <div class="desc">Bandırma Vapuru Müzesi, Kurtuluş Savaşı'nın simgesi olan Bandırma Vapuru, bu müzede
                sergileniyor. Adeta tarihi bir yolculuk.</div>
        </div>
    </div>
    <div class="responsive">
        <div class="gallery">
            <a target="_blank" href="gez2.jpg">
                <img src="gez2.jpg" alt="#">
            </a>
            <div class="desc">Altınkaya Barajı, doğaseverler ve su sporları tutkunları için harika bir destinasyondur.
                Bu bölgeyi ziyaret ettiğinizde, doğanın huzurunu ve güzelliklerini keşfetme şansı bulacaksınız.</div>
        </div>
    </div>
    <div class="responsive">
        <div class="gallery">
            <a target="_blank" href="gez5.jpg">
                <img src="gez5.jpg" alt="#">
            </a>
            <div class="desc">Samsun Çiftlik Caddesi, şehrin canlı alışveriş ve yeme-içme merkezi olarak bilinir. Birçok
                mağaza, restoran ve kafe burada bulunur ve sık sık etkinlikler düzenlenir.</div>
        </div>
    </div>
    <div class="clearfix"></div>
    <h1 style="color: white;">Şehir Hava Durumu</h1>
    <div id="weather-info"></div>
</body>

</html>

CSS: 
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    background-image: url("bg.jpg");
    background-size: cover;
}



.container {
    width: 80%;
    margin: auto;
}

/*! header başlangıç */

header {
    height: 100px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.06);
}

header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

header nav .logo a {
    color: white;
    text-decoration: none;
    font-weight: 700;
    font-size: 20px;
}

nav ul {
    list-style: none;
    display: flex;
    column-gap: 30px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    transition: color .25s ease;
}

nav ul li a:hover {
    color: #0ba2c0;
}

nav .menu {
    display: flex;
    align-items: center;
    column-gap: 48px;
}

nav .menu .menu-button {
    color: #ffffff;
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0.08);
    padding: 12px 24px;
    border-radius: 56px;
    transition: all .25s ease;
}

nav .menu .menu-button:hover {
    background-color: #ff0000;
    color: white;
}

/*! header sonu */

/*! section başlangıç  */
.content {
    color: white;
    height: calc(100vh - 100px);
    padding-top: 150px;
}

.content h1 {
    font-size: 60px;
    text-align: center;
}

.content p {
    font-size: 24px;
    text-align: center;
    margin-top: 32px;
}

.content .links {
    display: flex;
    justify-content: center;
    margin-top: 48px;
    column-gap: 16px;
}

.tarihceyazi {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 20px;
    text-align: center;
}

.card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;

}

.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.container {
    padding: 2px 16px;
}

.content .links a {
    background-color: white;
    padding: 20px;
    width: 280px;
    color: black;
    text-align: center;
    font-size: 18px;
    text-decoration: none;
    border-radius: 56px;
    transition: all .25s ease-in;
}

.content .links a:hover {
    background-color: #0ba2c0;
    color: white;
}


/*! section sonu  */

/*! responsive başlangıç */
@media(max-width:576px) {
    .container {
        width: 100%;
        padding-left: 12px;
        padding-right: 12px;
    }

    .menu ul {
        column-gap: 20px;
    }

    .menu .menu-button {
        display: none;
    }

    .content {
        padding-top: 50px;
    }

    .content h1 {
        font-size: 36px;
    }

    .content p {
        font-size: 16px;
    }

    .content .links {
        flex-direction: column;
        align-items: center;
        row-gap: 1rem;
    }

    .content .links a {
        padding: 14px;
        width: 90%;
    }
}

div.gallery {
    border: 1px solid #ccc;
}

div.gallery:hover {
    border: 1px solid #777;
}

div.gallery img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
}

* {
    box-sizing: border-box;
}

.responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
}

@media only screen and (max-width: 700px) {
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px) {
    .responsive {
        width: 100%;
    }
}

.hotel-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px;
}

.hotel {
    margin: 10px;
    padding: 10px;
    border: 1px solid #ddd;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5);
}

.hotel img {
    max-width: 100%;
    height: auto;
}

.hotel h2 {
    font-size: 20px;
    color: white;
}

.hotel p {
    font-size: 14px;
    color: rgb(214, 196, 56);
}




/*Sayfa içerisinde bulunan tüm a etiketlerinin altı çizili özelliğini kapatıyoruz.*/
a {
    text-decoration: none;
}

/*Sayfa içerisindeki tüm ul'lerin liste stilini kapatıyoruz.*/
ul {
    list-style: none;
}

/* Slider'ımızın boyutlarını ve konumunu ayarlıyoruz. */
#JSlider {
    margin: 0px 240px 0px 240px;
    padding-top: 20px;
    width: 990px;
    height: 400px;
}

.JSlider {
    width: 990px;
    height: 400px;
    overflow: hidden;
    position: relative;
}

.JSlider ul {
    overflow: hidden;
    z-index: 0;
}

.JSlider ul li {
    width: 990px;
    height: 400px;
    float: left;
    position: relative;
}

.JSlider ul li img {
    width: 990px;
    height: 400px;
}

/*Slider içindeki İleri Geri butonlarımızın konumlarını ve diğer özelliklerini ayarlıyoruz. */
.navButton {
    background: #000;
    color: #fff;
    position: absolute;
    text-align: center;
    opacity: 0.5;
    font-size: 24px;
    transition: 300ms;
    top: 175px;
    width: 50px;
    height: 50px;
    line-height: 50px;
}

.navButton:hover {
    opacity: 0.9;
}

#onceki {
    left: 0;
}

#sonraki {
    right: 0;
}

/*Açıklama penceresinin konumu ve görüntü özellikleri*/
.desc1 {
    width: 1000px;
    height: 50px;
    top: 350px;
    transition: 300ms;
    background: #000;
    color: #fff;
    position: absolute;
    text-align: center;
    font-size: 24px;
    transition: 300ms;
}

.desc1:hover {
    opacity: 0.9;
    width: 1000px;
    height: 100px;
    top: 300px;
}

.desc1 h2 {
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    padding: 5px;
}


/*! responsive sonu */
 
Artı 0 Eksi
Alcheinz dedi:
Hocam müsaitsen sana bir konuda danışmak istiyorum, projedeki gezilecekyerler.html sayfasında sayfayı büyütüp küçülttüğümde her şey kayıyor, yerleri değişiyor ve çirkin bir görüntü oluşuyor temel sebebi nedir bunun düzeltmek için ne yapmalıyım, bunu hallettiğimde proje teslime hazır hale gelecek ve kurtulacağım çünkü :).

Ben yine sayfanın HTML ve CSS(tüm proje için geçerli CSS dosyası) kodlarını bırakıyorum aşağıya.
HTML: 
<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Samsun'da Gezmeniz Gereken Yerler</title>
 <link rel="stylesheet" href="style.css">
 <script src="script.js"></script>
</head>

<body>

 <!--! Header Başlangıç -->
 <header class="container">
 <nav>
 <div class="logo">
 <a href="index.html">Güneşin Doğduğu Şehir</a>
 </div>
 <div class="menu">
 <ul>
 <li><a href="index.html">Anasayfa</a></li>
 <li><a href="tarihce.html">Tarihçe</a></li>
 <li><a href="gezilecekyerler.html">Gezilecek Yerler</a></li>
 <li><a href="yemekler.html">Yemekler</a></li>
 <li><a href="restoranlar.html">Restoranlar</a></li>
 <li><a href="Konaklama.html">Konaklama</a></li>
 </ul>
 <a href="https://www.samsunspor.org.tr/" target="_blank" class="menu-button">Samsunspor</a>
 </div>
 </nav>
 </header>
 <!--! Header Sonu -->

 <div class="responsive">
 <div class="gallery">
 <a target="_blank" href="gez1.jpg">
 <img src="gez1.jpg" alt="#">
 </a>
 <div class="desc">Samsun Amazon Heykeli, Şehrin sembolü olan bu heykel, Amazon kadın savaşçılarını anıyor.
 </div>
 </div>
 </div>

 <div class="responsive">
 <div class="gallery">
 <a target="_blank" href="gez6.jpg">
 <img src="gez6.jpg" alt="#">
 </a>
 <div class="desc">Amazon Köyü, Efsanevi kadın savaşçıların hikayelerini yaşatan bu köy, özellikle çocuklar
 için eğlenceli
 bir yer.</div>
 </div>
 </div>

 <div class="responsive">
 <div class="gallery">
 <a target="_blank" href="gez3.jpg">
 <img src="gez3.jpg" alt="#">
 </a>
 <div class="desc">Amisos Tepesi, Samsun'da hem tarihi hem de görsel bir zenginlik sunan, ziyaretçilerine
 muhteşem bir gün batımı deneyimi yaşatırken, aynı zamanda antik dönemi deneyimleyebileceğiniz bir yer.
 </div>
 </div>
 </div>

 <div class="responsive">
 <div class="gallery">
 <a target="_blank" href="gez4.jpg">
 <img src="gez4.jpg" alt="#">
 </a>
 <div class="desc">Bandırma Vapuru Müzesi, Kurtuluş Savaşı'nın simgesi olan Bandırma Vapuru, bu müzede
 sergileniyor. Adeta tarihi bir yolculuk.</div>
 </div>
 </div>
 <div class="responsive">
 <div class="gallery">
 <a target="_blank" href="gez2.jpg">
 <img src="gez2.jpg" alt="#">
 </a>
 <div class="desc">Altınkaya Barajı, doğaseverler ve su sporları tutkunları için harika bir destinasyondur.
 Bu bölgeyi ziyaret ettiğinizde, doğanın huzurunu ve güzelliklerini keşfetme şansı bulacaksınız.</div>
 </div>
 </div>
 <div class="responsive">
 <div class="gallery">
 <a target="_blank" href="gez5.jpg">
 <img src="gez5.jpg" alt="#">
 </a>
 <div class="desc">Samsun Çiftlik Caddesi, şehrin canlı alışveriş ve yeme-içme merkezi olarak bilinir. Birçok
 mağaza, restoran ve kafe burada bulunur ve sık sık etkinlikler düzenlenir.</div>
 </div>
 </div>
 <div class="clearfix"></div>
 <h1 style="color: white;">Şehir Hava Durumu</h1>
 <div id="weather-info"></div>
</body>

</html>

CSS: 
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

body {
 font-family: 'Poppins', sans-serif;
 background-image: url("bg.jpg");
 background-size: cover;
}

.container {
 width: 80%;
 margin: auto;
}

/*! header başlangıç */

header {
 height: 100px;
 border-bottom: 2px solid rgba(255, 255, 255, 0.06);
}

header nav {
 display: flex;
 justify-content: space-between;
 align-items: center;
 height: 100%;
}

header nav .logo a {
 color: white;
 text-decoration: none;
 font-weight: 700;
 font-size: 20px;
}

nav ul {
 list-style: none;
 display: flex;
 column-gap: 30px;
}

nav ul li a {
 color: white;
 text-decoration: none;
 transition: color .25s ease;
}

nav ul li a:hover {
 color: #0ba2c0;
}

nav .menu {
 display: flex;
 align-items: center;
 column-gap: 48px;
}

nav .menu .menu-button {
 color: #ffffff;
 text-decoration: none;
 background-color: rgba(255, 255, 255, 0.08);
 padding: 12px 24px;
 border-radius: 56px;
 transition: all .25s ease;
}

nav .menu .menu-button:hover {
 background-color: #ff0000;
 color: white;
}

/*! header sonu */

/*! section başlangıç */
.content {
 color: white;
 height: calc(100vh - 100px);
 padding-top: 150px;
}

.content h1 {
 font-size: 60px;
 text-align: center;
}

.content p {
 font-size: 24px;
 text-align: center;
 margin-top: 32px;
}

.content .links {
 display: flex;
 justify-content: center;
 margin-top: 48px;
 column-gap: 16px;
}

.tarihceyazi {
 background-color: rgba(0, 0, 0, 0.5);
 color: white;
 padding: 20px;
 text-align: center;
}

.card {
 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
 transition: 0.3s;

}

.card:hover {
 box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.container {
 padding: 2px 16px;
}

.content .links a {
 background-color: white;
 padding: 20px;
 width: 280px;
 color: black;
 text-align: center;
 font-size: 18px;
 text-decoration: none;
 border-radius: 56px;
 transition: all .25s ease-in;
}

.content .links a:hover {
 background-color: #0ba2c0;
 color: white;
}

/*! section sonu */

/*! responsive başlangıç */
@media(max-width:576px) {
 .container {
 width: 100%;
 padding-left: 12px;
 padding-right: 12px;
 }

 .menu ul {
 column-gap: 20px;
 }

 .menu .menu-button {
 display: none;
 }

 .content {
 padding-top: 50px;
 }

 .content h1 {
 font-size: 36px;
 }

 .content p {
 font-size: 16px;
 }

 .content .links {
 flex-direction: column;
 align-items: center;
 row-gap: 1rem;
 }

 .content .links a {
 padding: 14px;
 width: 90%;
 }
}

div.gallery {
 border: 1px solid #ccc;
}

div.gallery:hover {
 border: 1px solid #777;
}

div.gallery img {
 width: 100%;
 height: auto;
}

div.desc {
 padding: 15px;
 text-align: center;
 background-color: rgba(0, 0, 0, 0.5);
 color: white;
}

* {
 box-sizing: border-box;
}

.responsive {
 padding: 0 6px;
 float: left;
 width: 24.99999%;
}

@media only screen and (max-width: 700px) {
 .responsive {
 width: 49.99999%;
 margin: 6px 0;
 }
}

@media only screen and (max-width: 500px) {
 .responsive {
 width: 100%;
 }
}

.hotel-container {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 padding: 20px;
}

.hotel {
 margin: 10px;
 padding: 10px;
 border: 1px solid #ddd;
 text-align: center;
 background-color: rgba(0, 0, 0, 0.5);
}

.hotel img {
 max-width: 100%;
 height: auto;
}

.hotel h2 {
 font-size: 20px;
 color: white;
}

.hotel p {
 font-size: 14px;
 color: rgb(214, 196, 56);
}

/*Sayfa içerisinde bulunan tüm a etiketlerinin altı çizili özelliğini kapatıyoruz.*/
a {
 text-decoration: none;
}

/*Sayfa içerisindeki tüm ul'lerin liste stilini kapatıyoruz.*/
ul {
 list-style: none;
}

/* Slider'ımızın boyutlarını ve konumunu ayarlıyoruz. */
#JSlider {
 margin: 0px 240px 0px 240px;
 padding-top: 20px;
 width: 990px;
 height: 400px;
}

.JSlider {
 width: 990px;
 height: 400px;
 overflow: hidden;
 position: relative;
}

.JSlider ul {
 overflow: hidden;
 z-index: 0;
}

.JSlider ul li {
 width: 990px;
 height: 400px;
 float: left;
 position: relative;
}

.JSlider ul li img {
 width: 990px;
 height: 400px;
}

/*Slider içindeki İleri Geri butonlarımızın konumlarını ve diğer özelliklerini ayarlıyoruz. */
.navButton {
 background: #000;
 color: #fff;
 position: absolute;
 text-align: center;
 opacity: 0.5;
 font-size: 24px;
 transition: 300ms;
 top: 175px;
 width: 50px;
 height: 50px;
 line-height: 50px;
}

.navButton:hover {
 opacity: 0.9;
}

#onceki {
 left: 0;
}

#sonraki {
 right: 0;
}

/*Açıklama penceresinin konumu ve görüntü özellikleri*/
.desc1 {
 width: 1000px;
 height: 50px;
 top: 350px;
 transition: 300ms;
 background: #000;
 color: #fff;
 position: absolute;
 text-align: center;
 font-size: 24px;
 transition: 300ms;
}

.desc1:hover {
 opacity: 0.9;
 width: 1000px;
 height: 100px;
 top: 300px;
}

.desc1 h2 {
 color: #fff;
 font-size: 18px;
 font-weight: bold;
 padding: 5px;
}

/*! responsive sonu */
Genişletmek için tıkla...

Bakıp söyleyeyim. Bu mesaja etiketlerim baktıktan sonra.

@Alcheinz
Kodlarda eksik olduğundan (javascriptler falan yok) düzgün görüntülenmiyor. Ama kodlara baktığım kadarıyla benim daha önce söylediğim sorunu yaşıyorsun gibi görünüyor. Siteyi body içerisinde yer alan tek bir div içerisinde çalış.
 
Son düzenleme:
Artı 0 Eksi
spriggan dedi:
Bakıp söyleyeyim. Bu mesaja etiketlerim baktıktan sonra.

@Alcheinz
Kodlarda eksik olduğundan (javascriptler falan yok) düzgün görüntülenmiyor. Ama kodlara baktığım kadarıyla benim daha önce söylediğim sorunu yaşıyorsun gibi görünüyor. Siteyi body içerisinde yer alan tek bir div içerisinde çalış.
Genişletmek için tıkla...
Tamamdır deneyeceğim, işe yaramazsa müsait olduğumda kodları tekrar atarım.

spriggan dedi:
Bakıp söyleyeyim. Bu mesaja etiketlerim baktıktan sonra.

@Alcheinz
Kodlarda eksik olduğundan (javascriptler falan yok) düzgün görüntülenmiyor. Ama kodlara baktığım kadarıyla benim daha önce söylediğim sorunu yaşıyorsun gibi görünüyor. Siteyi body içerisinde yer alan tek bir div içerisinde çalış.
Genişletmek için tıkla...
Body başlangıcında div'e alıp sonunda da div'i kapattım fakat hala aynı siteyi zoom in/zoom out yaptığımda istemediğim şekillerde kayıyor her şey.


HTML: 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Samsun'da Gezmeniz Gereken Yerler</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>

<body>

    <!--! Header Başlangıç -->
    <header class="container">
        <nav>
            <div class="logo">
                <a href="index.html">Güneşin Doğduğu Şehir</a>
            </div>
            <div class="menu">
                <ul>
                    <li><a href="index.html">Anasayfa</a></li>
                    <li><a href="tarihce.html">Tarihçe</a></li>
                    <li><a href="gezilecekyerler.html">Gezilecek Yerler</a></li>
                    <li><a href="yemekler.html">Yemekler</a></li>
                    <li><a href="restoranlar.html">Restoranlar</a></li>
                    <li><a href="Konaklama.html">Konaklama</a></li>
                </ul>
                <a href="https://www.samsunspor.org.tr/" target="_blank" class="menu-button">Samsunspor</a>
            </div>
        </nav>
    </header>
    <!--! Header Sonu  -->

    <div>
    <div class="responsive">
        <div class="gallery">
            <a target="_blank" href="gez1.jpg">
                <img src="gez1.jpg" alt="#">
            </a>
            <div class="desc">Samsun Amazon Heykeli, Şehrin sembolü olan bu heykel, Amazon kadın savaşçılarını anıyor.
            </div>
        </div>
    </div>

    <div class="responsive">
        <div class="gallery">
            <a target="_blank" href="gez6.jpg">
                <img src="gez6.jpg" alt="#">
            </a>
            <div class="desc">Amazon Köyü, Efsanevi kadın savaşçıların hikayelerini yaşatan bu köy, özellikle çocuklar
                için eğlenceli
                bir yer.</div>
        </div>
    </div>

    <div class="responsive">
        <div class="gallery">
            <a target="_blank" href="gez3.jpg">
                <img src="gez3.jpg" alt="#">
            </a>
            <div class="desc">Amisos Tepesi, Samsun'da hem tarihi hem de görsel bir zenginlik sunan, ziyaretçilerine
                muhteşem bir gün batımı deneyimi yaşatırken, aynı zamanda antik dönemi deneyimleyebileceğiniz bir yer.
            </div>
        </div>
    </div>

    <div class="responsive">
        <div class="gallery">
            <a target="_blank" href="gez4.jpg">
                <img src="gez4.jpg" alt="#">
            </a>
            <div class="desc">Bandırma Vapuru Müzesi, Kurtuluş Savaşı'nın simgesi olan Bandırma Vapuru, bu müzede
                sergileniyor. Adeta tarihi bir yolculuk.</div>
        </div>
    </div>
    <div class="responsive">
        <div class="gallery">
            <a target="_blank" href="gez2.jpg">
                <img src="gez2.jpg" alt="#">
            </a>
            <div class="desc">Altınkaya Barajı, doğaseverler ve su sporları tutkunları için harika bir destinasyondur.
                Bu bölgeyi ziyaret ettiğinizde, doğanın huzurunu ve güzelliklerini keşfetme şansı bulacaksınız.</div>
        </div>
    </div>
    <div class="responsive">
        <div class="gallery">
            <a target="_blank" href="gez5.jpg">
                <img src="gez5.jpg" alt="#">
            </a>
            <div class="desc">Samsun Çiftlik Caddesi, şehrin canlı alışveriş ve yeme-içme merkezi olarak bilinir. Birçok
                mağaza, restoran ve kafe burada bulunur ve sık sık etkinlikler düzenlenir.</div>
        </div>
    </div>
    <div class="clearfix"></div>
    <h1 style="color: white;">Şehir Hava Durumu</h1>
    <div id="weather-info"></div>
</div>
</body>

</html>


CSS: 
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    background-image: url("bg.jpg");
    background-size: cover;
}



.container {
    width: 80%;
    margin: auto;
}

/*! header başlangıç */

header {
    height: 100px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.06);
}

header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

header nav .logo a {
    color: white;
    text-decoration: none;
    font-weight: 700;
    font-size: 20px;
}

nav ul {
    list-style: none;
    display: flex;
    column-gap: 30px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    transition: color .25s ease;
}

nav ul li a:hover {
    color: #0ba2c0;
}

nav .menu {
    display: flex;
    align-items: center;
    column-gap: 48px;
}

nav .menu .menu-button {
    color: #ffffff;
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0.08);
    padding: 12px 24px;
    border-radius: 56px;
    transition: all .25s ease;
}

nav .menu .menu-button:hover {
    background-color: #ff0000;
    color: white;
}

/*! header sonu */

/*! section başlangıç  */
.content {
    color: white;
    height: calc(100vh - 100px);
    padding-top: 150px;
}

.content h1 {
    font-size: 60px;
    text-align: center;
}

.content p {
    font-size: 24px;
    text-align: center;
    margin-top: 32px;
}

.content .links {
    display: flex;
    justify-content: center;
    margin-top: 48px;
    column-gap: 16px;
}

.tarihceyazi {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 20px;
    text-align: center;
}

.card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;

}

.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.container {
    padding: 2px 16px;
}

.content .links a {
    background-color: white;
    padding: 20px;
    width: 280px;
    color: black;
    text-align: center;
    font-size: 18px;
    text-decoration: none;
    border-radius: 56px;
    transition: all .25s ease-in;
}

.content .links a:hover {
    background-color: #0ba2c0;
    color: white;
}


/*! section sonu  */

/*! responsive başlangıç */
@media(max-width:576px) {
    .container {
        width: 100%;
        padding-left: 12px;
        padding-right: 12px;
    }

    .menu ul {
        column-gap: 20px;
    }

    .menu .menu-button {
        display: none;
    }

    .content {
        padding-top: 50px;
    }

    .content h1 {
        font-size: 36px;
    }

    .content p {
        font-size: 16px;
    }

    .content .links {
        flex-direction: column;
        align-items: center;
        row-gap: 1rem;
    }

    .content .links a {
        padding: 14px;
        width: 90%;
    }
}

div.gallery {
    border: 1px solid #ccc;
}

div.gallery:hover {
    border: 1px solid #777;
}

div.gallery img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
}

* {
    box-sizing: border-box;
}

.responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
}

@media only screen and (max-width: 700px) {
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px) {
    .responsive {
        width: 100%;
    }
}

.hotel-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px;
}

.hotel {
    margin: 10px;
    padding: 10px;
    border: 1px solid #ddd;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5);
}

.hotel img {
    max-width: 100%;
    height: auto;
}

.hotel h2 {
    font-size: 20px;
    color: white;
}

.hotel p {
    font-size: 14px;
    color: rgb(214, 196, 56);
}




/*Sayfa içerisinde bulunan tüm a etiketlerinin altı çizili özelliğini kapatıyoruz.*/
a {
    text-decoration: none;
}

/*Sayfa içerisindeki tüm ul'lerin liste stilini kapatıyoruz.*/
ul {
    list-style: none;
}

/* Slider'ımızın boyutlarını ve konumunu ayarlıyoruz. */
#JSlider {
    margin: 0px 240px 0px 240px;
    padding-top: 20px;
    width: 990px;
    height: 400px;
}

.JSlider {
    width: 990px;
    height: 400px;
    overflow: hidden;
    position: relative;
}

.JSlider ul {
    overflow: hidden;
    z-index: 0;
}

.JSlider ul li {
    width: 990px;
    height: 400px;
    float: left;
    position: relative;
}

.JSlider ul li img {
    width: 990px;
    height: 400px;
}

/*Slider içindeki İleri Geri butonlarımızın konumlarını ve diğer özelliklerini ayarlıyoruz. */
.navButton {
    background: #000;
    color: #fff;
    position: absolute;
    text-align: center;
    opacity: 0.5;
    font-size: 24px;
    transition: 300ms;
    top: 175px;
    width: 50px;
    height: 50px;
    line-height: 50px;
}

.navButton:hover {
    opacity: 0.9;
}

#onceki {
    left: 0;
}

#sonraki {
    right: 0;
}

/*Açıklama penceresinin konumu ve görüntü özellikleri*/
.desc1 {
    width: 1000px;
    height: 50px;
    top: 350px;
    transition: 300ms;
    background: #000;
    color: #fff;
    position: absolute;
    text-align: center;
    font-size: 24px;
    transition: 300ms;
}

.desc1:hover {
    opacity: 0.9;
    width: 1000px;
    height: 100px;
    top: 300px;
}

.desc1 h2 {
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    padding: 5px;
}


/*! responsive sonu */



JavaScript: 
document.addEventListener("DOMContentLoaded", () => {
    const sahteWeatherData = {
        weather: [{
            description: "Parçalı bulutlu"
        }],
        main: {
            temp: 22
        }
    };

    const weatherInfo = document.getElementById('weather-info');
    weatherInfo.innerHTML = `Hava durumu: ${sahteWeatherData.weather[0].description}, Sıcaklık: ${sahteWeatherData.main.temp}°C`;
});

$(function () {
    var sure = 5000; //Slider Dönüş süresi
    var sliderHizi = 500;
    var toplamLi = $(".JSlider ul li").length; //Toplam kaç resim var?
    var liWidth = 990;
    var toplamWidth = liWidth * toplamLi;
    var liDeger = 0;

    $(".JSlider ul").css("width", toplamWidth + "px");

    //Sonraki butonuna bastığımda işleyecek kodlar
    $("a#sonraki").click(function () {
        clearInterval(don);
        don = setInterval($.Slider, sure);
        if (liDeger < toplamLi - 1) {
            liDeger++;
            yeniWidth = liWidth * liDeger;
            $(".JSlider ul").animate({ marginLeft: "-" + yeniWidth + "px" }, sliderHizi);
        }
        else {
            liDeger = 0;
            $(".JSlider ul").animate({ marginLeft: "0" }, sliderHizi);
        }
        return false;
    })

    $("a#onceki").click(function () {//Önceki butonuna bastığımda işleyecek kodlar
        clearInterval(don);
        don = setInterval($.Slider, sure);
        if (liDeger > 0) {
            liDeger--;
            yeniWidth = liWidth * liDeger;
            $(".JSlider ul").animate({ marginLeft: "-" + yeniWidth + "px" }, sliderHizi);
        }
        else { //Eğer 1. resimdeysek bastığımda son resme dönsün
            liDeger = toplamLi;
            $(".JSlider ul").animate({ marginRight: "0" }, sliderHizi);
        }
        return false;
    })

    /* Timer */
    $.Slider = function () {
        if (liDeger < toplamLi - 1) {
            liDeger++;
            yeniWidth = liWidth * liDeger;
            $(".JSlider ul").animate({ marginLeft: "-" + yeniWidth + "px" }, sliderHizi);
        } else {
            liDeger = 0;
            $(".JSlider ul").animate({ marginLeft: "0" }, sliderHizi);
        }
    }

    var don = setInterval("$.Slider()", sure);
});
 
Son düzenleme:
Artı 0 Eksi

Benzer konular

CodeBot
  • Çözüldü
Çözüldü  JavaScript ile metni kaydetme
Mesaj
3
Görüntüleme
1B
CodeBot
CodeBot
therocker13
JavaScript ile Menü
Mesaj
2
Görüntüleme
872
IIBySinyoRII
IIBySinyoRII
alieren196
JavaScript ile test yapmak istiyorum
Mesaj
1
Görüntüleme
431
hateratsu
hateratsu
B
JavaScript ile pagination yapmak
2
Mesaj
10
Görüntüleme
353
delikarga
delikarga
EfeKaan3444
JavaScript  JavaScript ile anket sitesi
Mesaj
2
Görüntüleme
230
Şahbaz Babazade
Şahbaz Babazade

Yeni konular

Yeni mesajlar

Geri
Yukarı