Responsive ve SEO Uyumlu Sohbet Sayfası Tasarımı - IRCForumları - IRC ve mIRC Kullanıcılarının Buluşma Noktası

Nefret · 09 Mayıs 2025, 13:30

Merhaba arkadaşlar, size Bootstrap kullanarak responsive (uyumlu) ve SEO uyumlu bir sohbet sayfası tasarımı hazırladım. Sayfa, kullanıcı adı ve şifre girişi için ikonlar içeriyor ve mobil cihazlarda düzgün bir şekilde çalışacak şekilde tasarlandı. Ayrıca, arama motorları için SEO optimizasyonu sağlandı. İşte kullanılan teknolojiler:

HTML5: Sayfa yapısını oluşturmak için kullanıldı.

CSS: Görsel stil ve düzen ayarları yapıldı.

Bootstrap: Hızlı ve uyumlu tasarım için kullanıldı.

Font Awesome: Kullanıcı adı ve şifre alanlarında ikonlar kullanıldı.

JavaScript: Form etkileşimleri ve kullanıcı deneyimi sağlandı.

SEO Optimizasyonu: Sayfanın arama motorları için uygun hale getirilmesi sağlandı.

Bu sayede hem mobil uyumlu, hem de estetik bir tasarım elde ettik.

Kod: Kodu kopyalamak için üzerine çift tıklayın!

<!DOCTYPE html>
<html lang="tr">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sohbet Muhabbet - Hemen Katıl!</title>
  <meta name="description" content="Sohbet Muhabbet - Güvenli, keyifli ve hızlı bir sohbet platformu. Hemen sohbete katıl!">
  <meta name="keywords" content="sohbet, chat, sohbet odaları, muhabbete katıl, çevrimiçi sohbet">
  <meta name="robots" content="index, follow">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet">

  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: "Segoe UI", sans-serif;
    }

    .navbar {
      background-color: rgba(0, 0, 0, 0.85);
    }

    .navbar .nav-link {
      color: white !important;
    }

    .cover {
      background-image: url('https://images.unsplash.com/photo-1525182008055-f88b95ff7980?auto=format&fit=crop&w=1470&q=80');
      background-size: cover;
      background-position: center;
      min-height: 100vh;
    }

    .giris {
      background: rgba(0, 0, 0, 0.6);
      padding: 20px;
      border-radius: 10px;
    }

    .giris input {
      background-color: #f1f1f1;
    }

    .btn-primary {
      background-color: #007bff;
      border: none;
    }

    .obes {
      padding: 20px;
    }

    .dortlu {
      font-size: 18px;
    }

    .bosluk {
      padding: 40px 0;
    }

    .renkark {
      background-color: #222;
    }

    footer a {
      display: block;
      margin-bottom: 5px;
    }

    .fa-angle-down {
      animation: bounce 2s infinite;
    }

    @[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]rames bounce {
      0%, 100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(10px);
      }
    }

    /* Responsive Design */
    @[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...] (max-width: 768px) {
      .cover {
        background-position: top;
        min-height: 60vh;
      }

      .navbar-collapse {
        text-align: center;
      }

      .giris {
        padding: 15px;
      }
    }
  </style>
</head>

<body>

  <!-- Navbar -->
  <nav class="navbar navbar-expand-md navbar-dark">
    <div class="container">
      <a class="navbar-brand" href="#"><img src="https://i.imgur.com/zqpwkLQ.png" width="100" alt="Sohbet"></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMenu">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarMenu">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item"><a class="nav-link" href="#">Ana Sayfa</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Kurallar</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Hakkımızda</a></li>
          <li class="nav-item"><a class="nav-link" href="#">İletişim</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Giriş Alanı ve Tanıtım -->
  <div class="cover d-flex align-items-center">
    <div class="container">
      <div class="row">
        <!-- Giriş Formu -->
        <div class="col-lg-5">
          <form class="giris text-white">
            <img class="img-fluid d-block mx-auto" src="https://i.imgur.com/GQzGgAF.png" width="80">
            <h4 class="text-center my-3">Sohbet Girişi</h4>

            <div class="form-group">
              <label>Kullanıcı Adı</label>
              <div class="input-group">
                <div class="input-group-prepend">
                  <span class="input-group-text"><i class="fa fa-user"></i></span>
                </div>
                <input type="text" class="form-control" placeholder="Kullanıcı Adı">
              </div>
            </div>

            <div class="form-group">
              <label>Şifre</label>
              <div class="input-group">
                <div class="input-group-prepend">
                  <span class="input-group-text"><i class="fa fa-lock"></i></span>
                </div>
                <input type="password" class="form-control" placeholder="Şifreniz">
              </div>
              <small class="form-text text-light">* Şifreniz yoksa boş bırakabilirsiniz.</small>
            </div>

            <button type="submit" class="btn btn-primary btn-block">SOHBETE BAĞLAN</button>
          </form>
        </div>

        <!-- Tanıtım Yazısı -->
        <div class="col-lg-7 text-white d-flex flex-column justify-content-center">
          <h2 class="text-right">Sohbet Odaları</h2>
          <p class="text-right">
            Mobil ve web sohbetin birleştiği bu platformda yerinizi hemen alın. İster yazılı, ister görüntülü sohbetle sosyalleşmenin tadını çıkarın. Sadece bir tıklama uzağınızdayız!
          </p>
        </div>
      </div>

      <div class="text-center mt-4">
        <i class="fa fa-angle-down fa-3x text-white"></i>
      </div>
    </div>
  </div>

  <!-- Bilgilendirme -->
  <div class="bosluk">
    <div class="container">
      <div class="row">
        <div class="col-md-12 text-center">
          <h3 class="text-primary">Neden Biz?</h3>
          <p>
            Chat yapmanın keyifli, güvenli ve hızlı yolu. Samimi sohbet ortamımızda yeni dostluklara yelken açın. Haydi şimdi sohbete katıl!
          </p>
        </div>
      </div>
    </div>
  </div>

  <!-- Footer -->
  <footer class="bg-dark text-white pt-4">
    <div class="container">
      <div class="row">
        <div class="col-md-3">
          <h5>Sohbet</h5>
          <a href="#">Ana Sayfa</a>
          <a href="#">Hakkımızda</a>
          <a href="#">Kurallar</a>
        </div>
        <div class="col-md-3">
          <h5>Yardım</h5>
          <a href="#">SSS</a>
          <a href="#">Destek</a>
          <a href="#">İletişim</a>
        </div>
        <div class="col-md-3">
          <h5>Gizlilik</h5>
          <a href="#">Kullanım Şartları</a>
          <a href="#">Gizlilik Politikası</a>
        </div>
        <div class="col-md-3">
          <h5>Takip Et</h5>
          <a href="https://facebook.com" target="_blank"><i class="fa fa-facebook"></i> Facebook</a>
          <a href="https://twitter.com" target="_blank"><i class="fa fa-twitter"></i> Twitter</a>
        </div>
      </div>
      <div class="text-center py-3">
        © 2025 SohbetMuhabbet. Tüm hakları saklıdır.
      </div>
    </div>
  </footer>

  <!-- Scripts -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    // Giriş formu örnek olay
    document.querySelector("form").addEventListener("submit", function(e) {
      e.preventDefault();
      alert("Sohbete bağlanma işlemi burada başlatılır (örnek).");
    });
  </script>
</body>

</html>

Mylife · 09 Mayıs 2025, 14:15

Paylaşım için teşekkürler. Elinize sağlık.

Benzer Konular
Konu	Konuyu Başlatan	Forum	Cevaplar	Son Mesaj
Responsive Mobil Uyumlu Html Sohbet Giriş Sayfası (One Page, Tek Sayfa)	LitmuS	HTML/CSS/JavaScript	5	30 Mart 2024 02:34
Mobil Uyumlu Responsive HTML Sohbet Giriş Sayfası (One Page) \| ÜCRETSİZ	LitmuS	HTML/CSS/JavaScript	10	30 Mart 2024 02:33
Responsive Html Sohbet Giriş Sayfası	LitmuS	HTML/CSS/JavaScript	0	01 Mayıs 2022 15:25
Responsive sohbet sayfası	AspavA	Webmaster Genel	2	21 Kasım 2020 20:22

Konuyu Toplam 1 Üye okuyor. (0 Kayıtlı üye ve 1 Misafir)

Etiketlenen Kullanıcılar
Etiketlemek istediğiniz kullanıcılar arasına virgül koyunuz. Örnek: nokta,sukunet,NucLear

5846 sayılı Fikir ve Sanat Eserleri Kanunu gereğince sitemizde telif hakkı bulunan mp3,video v.b. eserlerin paylaşımı yasaktır. Yasal işlem olması halinde paylaşan kişi yada kişilerin bilgileri gerekli kuruma verilecektir.