Hazır HTML Ana sayfa Kodu (1 kişi okuyor)

Hakan · 26 Şub 2025

Merhaba arkadaşlar,

Bugün sizlerle basit, çok sütunlu ve şık bir ana sayfa tasarımı üzerine konuşacağız. Bu tasarım, hem estetik hem de işlevselliği ön planda tutarak hazırlanmıştır.

Tasarımımız toplamda 12 sütundan oluşmaktadır ve bu sütun yapısı oldukça esnek bir yapıya sahiptir. İhtiyaçlarınıza göre sütunları dilediğiniz gibi artırabilir veya azaltabilirsiniz. Böylece farklı sayfa düzenleri oluşturmak mümkün hale gelir.

Ayrıca, tasarım tamamen mobil uyumlu (responsive) olarak geliştirilmiştir. Bu, tasarımın masaüstü, tablet ve mobil cihazlarda sorunsuz bir şekilde görüntülenmesini sağlar. Kullanıcı deneyimini en üst seviyede tutmak için tüm cihazlarla uyumluluk sağlanmıştır.

Bu basit ve kullanışlı ana sayfa düzenini projelerinizde rahatlıkla kullanabilir, kendi ihtiyaçlarınıza göre kişiselleştirebilirsiniz. Sorularınız veya geliştirme önerileriniz olursa, yorumlarda paylaşabilirsiniz!

HTML:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="site açıklaması">
    <meta name="keywords" content="keywords">
    <meta name="author" content="yazar">
    <link rel="icon" href="icon_path" type="image/icon type">
    <title>Çok sutunlu Html Ana sayfa</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }

        header {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 20px 0;
        }

        .container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .box {
            background-color: #fff;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
            text-align: center;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        footer {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 10px 0;
            margin-top: 20px;
        }
    </style>
</head>
<body>

<header>
 
        <img src="https://wf.tr/data/assets/logo/wftr.png" border="0" width="200" height="73" alt="webmaster" />
    <h1>Çok sutunlu Html Ana sayfa</h1>
</header>

<div class="container">
    <div class="box">
        <h2>Yakında!</h2>
        <p>Bu alan, görseller ya da başka içeriklerle zenginleştirilebilir.</p>
    </div>
    <div class="box">
        <h2>Yakında!</h2>
        <p>Bu alan, görseller ya da başka içeriklerle zenginleştirilebilir.</p>
    </div>
    <div class="box">
        <h2>Yakında!</h2>
        <p>Bu alan, görseller ya da başka içeriklerle zenginleştirilebilir.</p>
    </div>
    <div class="box">
        <h2>Yakında!</h2>
        <p>Bu alan, görseller ya da başka içeriklerle zenginleştirilebilir.</p>
    </div>
    <div class="box">
        <h2>Yakında!</h2>
        <p>Bu alan, görseller ya da başka içeriklerle zenginleştirilebilir.</p>
    </div>
    <div class="box">
        <h2>Yakında!</h2>
        <p>Bu alan, görseller ya da başka içeriklerle zenginleştirilebilir.</p>
    </div>
    <div class="box">
        <h2>Yakında!</h2>
        <p>Bu alan, görseller ya da başka içeriklerle zenginleştirilebilir.</p>
    </div>
    <div class="box">
        <h2>Yakında!</h2>
        <p>Bu alan, görseller ya da başka içeriklerle zenginleştirilebilir.</p>
    </div>
    <div class="box">
        <h2>Yakında!</h2>
        <p>Bu alan, görseller ya da başka içeriklerle zenginleştirilebilir.</p>
    </div>
    <div class="box">
        <h2>Yakında!</h2>
        <p>Bu alan, görseller ya da başka içeriklerle zenginleştirilebilir.</p>
    </div>
    <div class="box">
        <h2>Yakında!</h2>
        <p>Bu alan, görseller ya da başka içeriklerle zenginleştirilebilir.</p>
    </div>
    <div class="box">
        <h2>Yakında!</h2>
        <p>Bu alan, görseller ya da başka içeriklerle zenginleştirilebilir.</p>
    </div>
    </div>

<footer>
    <p>&copy; Html Ana sayfa - Tüm Hakları Saklıdır.</p>
</footer>

</body>
</html>

Kod:

Sütunları dilediğiniz gibi artırabilir veya azaltabilirsiniz.
Tek yapmanız gereken bu kodu silmek veya eklemek.
<div class="box">
        <h2>Yakında!</h2>
        <p>Bu alan, görseller ya da başka içeriklerle zenginleştirilebilir.</p>
    </div>

Hazır HTML Ana sayfa Kodu (1 kişi okuyor)

Hakan

Meraklı

Bu konuyu görüntüleyen kullanıcılar