JavaScript ile memleketimizi tanıtmak

Alcheinz · 14 Ekim 2023

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.

Alcheinz · 15 Ekim 2023

spriggan dedi:
Çok eskiden kendi yazmış olduğum bir javascript slider vardı. Kodlarını paylaşayım seninle. Kullanımıyla ilgili videoda çekmiştim onlarıda bırakıyorum. Nasıl kullandığıma bakarsın. Videolarda başka işlemlerde var sen slider için gerekli olan yerlere bakarsın.

Düzenleme : Videoları liste dışı paylaşamadığım için linkleri sildim.

İndirme Linki:

JS_Slider.rar

drive.google.com

Kendi siteme göre ayarladım fakat Slider ile başlık arasında garip bir boşluk var bunun neden olduğunu anlayamadım tam olarak, CSS dosyamı incelediğimde bir şey bulamadım sorunla alakalı. Yardımcı olabilecek olan var mı?

spriggan · 15 Ekim 2023

Alcheinz dedi:
Kendi siteme göre ayarladım fakat Slider ile başlık arasında garip bir boşluk var bunun neden olduğunu anlayamadım tam olarak, CSS dosyamı incelediğimde bir şey bulamadım sorunla alakalı. Yardımcı olabilecek olan var mı?

O slider benim kendi yaptığım bir script. CSS dosyasında ayarlamalar yapman gerek.

Alcheinz · 15 Ekim 2023

spriggan dedi:
O slider benim kendi yaptığım bir script. CSS dosyasında ayarlamalar yapman gerek.

Yaptım zaten ama bi' yerde eksik var galiba çözemedim tam bak aşağıya bırakıyorum.

spriggan · 15 Ekim 2023

Alcheinz dedi:
Yaptım zaten ama bi' yerde eksik var galiba çözemedim tam bak aşağıya bırakıyorum.
Eki Görüntüle 1978280

Kodu görmeden zor söylemek fakat aklıma iki durum geldi. Slider'ın container sınıfında margin gibi bir özellik kalmış olabilir. Yada bir üstteki element ile altındaki element arasında margin gibi bir şeyden etkileniyordur.

Chrome'da F12'ye basıp Inspect Element ile kontrol edebilirsin.

Alcheinz · 15 Ekim 2023

spriggan dedi:
Kodu görmeden zor söylemek fakat aklıma iki durum geldi. Slider'ın container sınıfında margin gibi bir özellik kalmış olabilir. Yada bir üstteki element ile altındaki element arasında margin gibi bir şeyden etkileniyordur.

Chrome'da F12'ye basıp Inspect Element ile kontrol edebilirsin.

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="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <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 style="margin-left: 550px; color: white;" class="">
        <h1>En Beğenilen Restoranlar</h1>
    </div>
    <div id="JSlider">
        <div class="JSlider">
            <ul>
                <li><a href="#">
                        <img src="restoran1.jpg" /></a>
                    <div class="desc">
                        <h2></h2>
                        <p>
                        </p>
                    </div>
                </li>
                <li><a href="#">
                        <img src="restoran2.jpg" /></a>
                    <div class="desc">
                        <h2></h2>
                        <p>

                        </p>
                    </div>
                </li>
                <li><a href="#">
                        <img src="restoran3.jpg" /></a>
                    <div class="desc">
                        <h2></h2>
                        <p>

                        </p>
                    </div>
                </li>
                <li><a href="#">
                        <img src="restorant4.jpg" /></a>
                    <div class="desc">
                        <h2></h2>
                        <p>

                        </p>
                    </div>
                </li>
                <li><a href="#">
                        <img src="restoran5.jpg" /></a>
                    <div class="desc">
                        <h2></h2>
                        <p>
                        </p>
                    </div>
                </li>
                <li><a href="#">
                        <img src="restoran6.jpg" /></a>
                    <div class="desc">
                        <h2></h2>
                        <p>

                        </p>
                    </div>
                </li>
            </ul>
            <a href="#" id="onceki" class="navButton">«</a>
            <a href="#" id="sonraki" class="navButton">»</a>

        </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);
}




/*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: 240px;
    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 */

spriggan · 15 Ekim 2023

Alcheinz dedi:

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="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <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 style="margin-left: 550px; color: white;" class="">
        <h1>En Beğenilen Restoranlar</h1>
    </div>
    <div id="JSlider">
        <div class="JSlider">
            <ul>
                <li><a href="#">
                        <img src="restoran1.jpg" /></a>
                    <div class="desc">
                        <h2></h2>
                        <p>
                        </p>
                    </div>
                </li>
                <li><a href="#">
                        <img src="restoran2.jpg" /></a>
                    <div class="desc">
                        <h2></h2>
                        <p>

                        </p>
                    </div>
                </li>
                <li><a href="#">
                        <img src="restoran3.jpg" /></a>
                    <div class="desc">
                        <h2></h2>
                        <p>

                        </p>
                    </div>
                </li>
                <li><a href="#">
                        <img src="restorant4.jpg" /></a>
                    <div class="desc">
                        <h2></h2>
                        <p>

                        </p>
                    </div>
                </li>
                <li><a href="#">
                        <img src="restoran5.jpg" /></a>
                    <div class="desc">
                        <h2></h2>
                        <p>
                        </p>
                    </div>
                </li>
                <li><a href="#">
                        <img src="restoran6.jpg" /></a>
                    <div class="desc">
                        <h2></h2>
                        <p>

                        </p>
                    </div>
                </li>
            </ul>
            <a href="#" id="onceki" class="navButton">«</a>
            <a href="#" id="sonraki" class="navButton">»</a>

        </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);
}




/*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: 240px;
    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 */

#JSlider {
margin: 240px;
width: 990px;
height: 400px;
}

komutunda margin 240px demek, her yönden 240 px uzak ol anlamını taşıyor. Sadece sağdan ve soldan 240 vermek istiyorsan
margin:0px 240px 0px 240px; olarak düzenle.
Sıralaması : üst, sağ, alt, sol

Ayrıca siteyi ortalama tekniğin (margin-left) çok hatalı. Web sayfaları bu şekilde ortalanmaz.

Alcheinz · 15 Ekim 2023

spriggan dedi:
#JSlider {
margin: 240px;
width: 990px;
height: 400px;
}

komutunda margin 240px demek, her yönden 240 px uzak ol anlamını taşıyor. Sadece sağdan ve soldan 240 vermek istiyorsan
margin:0px 240px 0px 240px; olarak düzenle.
Sıralaması : üst, sağ, alt, sol

Ayrıca siteyi ortalama tekniğin (margin-left) çok hatalı. Web sayfaları bu şekilde ortalanmaz.

Teşekkür ederim. Hatalı olduğunun farkındayım bu arada haklısın, henüz deneme yanılma öğrenme kısımlarındayım

.

spriggan · 15 Ekim 2023

Alcheinz dedi:
Teşekkür ederim. Hatalı olduğunun farkındayım bu arada haklısın, henüz deneme yanılma öğrenme kısımlarındayım .

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.

Alcheinz · 15 Ekim 2023

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.

Anladım çok mantıklı, yazın Web eğitimi izlerken baya alışmıştım terimlere vs. uzun zaman sonra böyle bi şey karşıma çıkınca tekrar ısınmak zaman alıyor. Teşekkürler bu arada proje bitti sadece bi' kaç fotoğraf düzenleme işi kaldı.

RaSGooL · 16 Ekim 2023

Tasarım ve konsept açısından fikir vermesi için bir site bırakayım.

Official Travel Guide of Türkiye - GoTürkiye

Everything you need to know about Türkiye, where to travel and our tourism, all at your fingertips. A magical journey that will entice your taste buds and mesmerize...

goturkiye.com

JavaScript ile memleketimizi tanıtmak

Ayrıntılı düzenleme

Alcheinz

Centipat

Alcheinz

Centipat

JS_Slider.rar

spriggan

Hectopat

Alcheinz

Centipat

spriggan

Hectopat

Alcheinz

Centipat

spriggan

Hectopat

Alcheinz

Centipat

spriggan

Hectopat

Alcheinz

Centipat

RaSGooL

Kilopat

Official Travel Guide of Türkiye - GoTürkiye

Benzer konular

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz