Mobil Menü

PHP ile Kişisel Blog

Kişisel blog sitenizi oluşturmak ve çevrimiçi varlığınızı güçlendirmek için PHP, MySQL ve CSS kullanarak geliştirdiğimiz bu proje, hem teknik hem de kullanıcı deneyimi açısından tam donanımlı bir çözüm sunuyor. Bu blog sitesi, anasayfa, blog, projeler, galeri, hakkımda ve iletişim sayfaları gibi temel bölümlerin yanı sıra, SEO uyumlu yapısı ve responsive tasarımıyla dikkat çekiyor. İşte bu projenin öne çıkan özellikleri:

SEO Uyumlu Yapı

Blog siteniz, arama motorlarında üst sıralarda yer almak için optimize edilmiştir. Meta açıklamalar, anahtar kelimeler ve başlık etiketleri gibi SEO unsurları, her sayfada dikkatlice kullanılmıştır. Örneğin, <meta name="description"> ve <meta name="keywords"> etiketleriyle sitenizin içeriği arama motorlarına etkili bir şekilde tanıtılır. Ayrıca, URL yapısı ve başlıklar, hem kullanıcılar hem de arama motorları için anlaşılır ve erişilebilir şekilde tasarlanmıştır.

Responsive Tasarım

Mobil cihazların kullanımının artmasıyla birlikte, sitenizin her ekran boyutunda sorunsuz çalışması büyük önem taşır. Bu projede, CSS media query’ler kullanılarak responsive bir tasarım oluşturulmuştur. Mobil cihazlarda menüler, resimler ve metinler otomatik olarak yeniden boyutlandırılır, böylece kullanıcılarınıza her cihazda mükemmel bir deneyim sunarsınız.

Dinamik İçerik Yönetimi

PHP ve MySQL entegrasyonu sayesinde, blog yazılarınızı, projelerinizi ve galeri resimlerinizi kolayca yönetebilirsiniz. Admin paneli üzerinden yeni yazılar ekleyebilir, mevcut içerikleri düzenleyebilir veya silebilirsiniz. Ayrıca, kullanıcı yorumları özelliği ile ziyaretçilerinizle etkileşim kurma imkanı bulursunuz. Bu dinamik yapı, sitenizin sürekli güncel kalmasını sağlar.

Kullanıcı Yorumları ve Arama Çubuğu

Blog yazılarınıza yapılan yorumlar, MySQL veritabanında saklanır ve kullanıcıların geri bildirimlerini kolayca takip edebilirsiniz. Ayrıca, blog sayfasında yer alan arama çubuğu ile ziyaretçileriniz, ilgilendikleri konuları hızlıca bulabilir. Bu özellikler, kullanıcı deneyimini artırır ve sitenizin etkileşim oranını yükseltir.

Kategoriler ve Galeri

Blog yazılarınızı kategorilere ayırarak, kullanıcıların ilgi alanlarına göre içeriklere ulaşmalarını sağlayabilirsiniz. Galeri bölümünde ise projelerinizi veya kişisel çalışmalarınızı görsel olarak sergileyebilirsiniz. Bu özellikler, sitenizin daha organize ve çekici olmasını sağlar.

Neden Bu Proje?

Bu proje, hem yeni başlayanlar hem de deneyimli geliştiriciler için harika bir örnek teşkil eder. SEO uyumlu yapısı, responsive tasarımı ve dinamik içerik yönetimi ile kişisel blog sitenizi kolayca oluşturabilir ve yönetebilirsiniz. Ayrıca, bu proje üzerinde yapacağınız özelleştirmelerle, kendi tarzınıza uygun bir blog sitesi yaratabilirsiniz.

Elbette! PHP ile kişisel bir blog sitesi tasarlayabiliriz. Bu projede, temel sayfaları (anasayfa, blog, projeler, galeri, hakkımda, iletişim) oluşturacağız ve her bir sayfanın içeriğini dolduracağız. Ayrıca CSS ile güzel bir görünüm sağlayacağız.

Proje Yapısı

Proje dosya yapısı şu şekilde olacak:

/kişisel-blog
    /css
        style.css
    /images
        (resimler burada olacak)
    /inc
        header.php
        footer.php
    index.php
    blog.php
    projeler.php
    galeri.php
    hakkimda.php
    iletisim.php

1. header.php ve footer.php

Bu dosyalar, tüm sayfalarda ortak olan başlık ve altbilgi kısımlarını içerecek.

inc/header.php:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kişisel Blog</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <div class="container">
            <h1>Kişisel Blog</h1>
            <nav>
                <ul>
                    <li><a href="index.php">Anasayfa</a></li>
                    <li><a href="blog.php">Blog</a></li>
                    <li><a href="projeler.php">Projeler</a></li>
                    <li><a href="galeri.php">Galeri</a></li>
                    <li><a href="hakkimda.php">Hakkımda</a></li>
                    <li><a href="iletisim.php">İletişim</a></li>
                </ul>
            </nav>
        </div>
    </header>

inc/footer.php:

    <footer>
        <div class="container">
            <p>&copy; 2023 Kişisel Blog. Tüm hakları saklıdır.</p>
        </div>
    </footer>
</body>
</html>

2. index.php (Anasayfa)

index.php:

<?php include 'inc/header.php'; ?>

<div class="container">
    <h2>Hoş Geldiniz!</h2>
    <p>Bu benim kişisel blog sitem. Burada yazılarımı, projelerimi ve fotoğraflarımı paylaşıyorum.</p>
    <p>Blog sayfasından son yazılarıma ulaşabilir, projelerim hakkında bilgi alabilir ve galeride fotoğraflarımı görebilirsiniz.</p>
</div>

<?php include 'inc/footer.php'; ?>

3. blog.php (Blog Sayfası)

blog.php:

<?php include 'inc/header.php'; ?>

<div class="container">
    <h2>Blog</h2>
    <article>
        <h3>İlk Blog Yazım</h3>
        <p>Bu benim ilk blog yazım. Burada kişisel deneyimlerimi ve düşüncelerimi paylaşıyorum.</p>
        <a href="#">Devamını Oku</a>
    </article>
    <article>
        <h3>Web Geliştirme İpuçları</h3>
        <p>Web geliştirme sürecinde işinize yarayacak bazı ipuçlarını bu yazıda bulabilirsiniz.</p>
        <a href="#">Devamını Oku</a>
    </article>
</div>

<?php include 'inc/footer.php'; ?>

4. projeler.php (Projeler Sayfası)

projeler.php:

<?php include 'inc/header.php'; ?>

<div class="container">
    <h2>Projeler</h2>
    <div class="project">
        <h3>Kişisel Blog Sitesi</h3>
        <p>Bu projede PHP ve CSS kullanarak kişisel bir blog sitesi geliştirdim.</p>
    </div>
    <div class="project">
        <h3>Portfolyo Sitesi</h3>
        <p>HTML, CSS ve JavaScript kullanarak bir portfolyo sitesi oluşturdum.</p>
    </div>
</div>

<?php include 'inc/footer.php'; ?>

5. galeri.php (Galeri Sayfası)

galeri.php:

<?php include 'inc/header.php'; ?>

<div class="container">
    <h2>Galeri</h2>
    <div class="gallery">
        <img src="images/resim1.jpg" alt="Resim 1">
        <img src="images/resim2.jpg" alt="Resim 2">
        <img src="images/resim3.jpg" alt="Resim 3">
    </div>
</div>

<?php include 'inc/footer.php'; ?>

6. hakkimda.php (Hakkımda Sayfası)

hakkimda.php:

<?php include 'inc/header.php'; ?>

<div class="container">
    <h2>Hakkımda</h2>
    <p>Merhaba, ben [Adınız]. Web geliştirme ve yazılım alanında çalışıyorum. Bu blogda kendi deneyimlerimi ve bilgilerimi paylaşıyorum.</p>
    <p>İlgi alanlarım arasında web geliştirme, mobil uygulamalar ve yapay zeka bulunuyor.</p>
</div>

<?php include 'inc/footer.php'; ?>

7. iletisim.php (İletişim Sayfası)

iletisim.php:

<?php include 'inc/header.php'; ?>

<div class="container">
    <h2>İletişim</h2>
    <form action="iletisim.php" method="post">
        <label for="name">Adınız:</label>
        <input type="text" id="name" name="name" required>

        <label for="email">E-posta:</label>
        <input type="email" id="email" name="email" required>

        <label for="message">Mesajınız:</label>
        <textarea id="message" name="message" required></textarea>

        <button type="submit">Gönder</button>
    </form>
</div>

<?php include 'inc/footer.php'; ?>

8. css/style.css (CSS Dosyası)

css/style.css:

/*

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

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

header h1 {
    margin: 0;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 10px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
}

.container {
    width: 80%;
    margin: 20px auto;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    position: fixed;
    width: 100%;
    bottom: 0;
}

.gallery img {
    width: 30%;
    margin: 1%;
    display: inline-block;
}

form label {
    display: block;
    margin: 10px 0 5px;
}

form input, form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

form button {
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

form button:hover {
    background-color: #555;
}

*/

9. Resimler

images klasörüne resim1.jpg, resim2.jpg, resim3.jpg gibi resimler ekleyebilirsiniz.

Admin Paneli

Admin paneli oluşturmak için admin klasörü oluşturalım ve içine giriş sayfası, yazı ekleme, düzenleme ve silme sayfaları ekleyelim.

admin/login.php:

<?php
session_start();
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $username = $_POST['username'];
    $password = $_POST['password'];
    if ($username == 'admin' && $password == 'password') {
        $_SESSION['loggedin'] = true;
        header('Location: index.php');
    } else {
        echo 'Yanlış kullanıcı adı veya şifre!';
    }
}
?>
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Admin Giriş</title>
    <link rel="stylesheet" href="../css/style.css">
</head>
<body>
    <div class="container">
        <h2>Admin Giriş</h2>
        <form action="login.php" method="post">
            <label for="username">Kullanıcı Adı:</label>
            <input type="text" id="username" name="username" required>
            <label for="password">Şifre:</label>
            <input type="password" id="password" name="password" required>
            <button type="submit">Giriş Yap</button>
        </form>
    </div>
</body>
</html>

admin/index.php:

<?php
session_start();
if (!isset($_SESSION['loggedin'])) {
    header('Location: login.php');
    exit;
}
?>
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Admin Paneli</title>
    <link rel="stylesheet" href="../css/style.css">
</head>
<body>
    <div class="container">
        <h2>Admin Paneli</h2>
        <nav>
            <ul>
                <li><a href="add_post.php">Yazı Ekle</a></li>
                <li><a href="edit_post.php">Yazıları Düzenle</a></li>
                <li><a href="logout.php">Çıkış Yap</a></li>
            </ul>
        </nav>
    </div>
</body>
</html>

admin/logout.php:

<?php
session_start();
session_destroy();
header('Location: login.php');
?>

2. Veritabanı Entegrasyonu

MySQL veritabanı kullanarak blog yazılarını saklayalım.

Veritabanı Tablosu:

CREATE TABLE posts (
    id INT AUTO_INCREMENT PRIMARY KEY,
    title VARCHAR(255) NOT NULL,
    content TEXT NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

inc/db.php:

<?php
$host = 'localhost';
$dbname = 'personal_blog';
$username = 'root';
$password = '';

try {
    $conn = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
    echo "Bağlantı hatası: " . $e->getMessage();
}
?>

admin/add_post.php:

<?php
session_start();
if (!isset($_SESSION['loggedin'])) {
    header('Location: login.php');
    exit;
}

include '../inc/db.php';

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $title = $_POST['title'];
    $content = $_POST['content'];
    $stmt = $conn->prepare("INSERT INTO posts (title, content) VALUES (:title, :content)");
    $stmt->bindParam(':title', $title);
    $stmt->bindParam(':content', $content);
    $stmt->execute();
    header('Location: index.php');
}
?>
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Yazı Ekle</title>
    <link rel="stylesheet" href="../css/style.css">
</head>
<body>
    <div class="container">
        <h2>Yazı Ekle</h2>
        <form action="add_post.php" method="post">
            <label for="title">Başlık:</label>
            <input type="text" id="title" name="title" required>
            <label for="content">İçerik:</label>
            <textarea id="content" name="content" required></textarea>
            <button type="submit">Yazıyı Ekle</button>
        </form>
    </div>
</body>
</html>

3. Kullanıcı Yorumları

Kullanıcı yorumlarını saklamak için bir veritabanı tablosu oluşturalım.

Veritabanı Tablosu:

CREATE TABLE comments (
    id INT AUTO_INCREMENT PRIMARY KEY,
    post_id INT,
    name VARCHAR(255) NOT NULL,
    comment TEXT NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (post_id) REFERENCES posts(id)
);

blog.php:

<?php
include 'inc/header.php';
include 'inc/db.php';

$stmt = $conn->query("SELECT * FROM posts ORDER BY created_at DESC");
$posts = $stmt->fetchAll();

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $post_id = $_POST['post_id'];
    $name = $_POST['name'];
    $comment = $_POST['comment'];
    $stmt = $conn->prepare("INSERT INTO comments (post_id, name, comment) VALUES (:post_id, :name, :comment)");
    $stmt->bindParam(':post_id', $post_id);
    $stmt->bindParam(':name', $name);
    $stmt->bindParam(':comment', $comment);
    $stmt->execute();
}
?>

<div class="container">
    <h2>Blog</h2>
    <?php foreach ($posts as $post): ?>
        <article>
            <h3><?php echo htmlspecialchars($post['title']); ?></h3>
            <p><?php echo nl2br(htmlspecialchars($post['content'])); ?></p>
            <p><small><?php echo $post['created_at']; ?></small></p>
            <h4>Yorumlar</h4>
            <?php
            $stmt = $conn->prepare("SELECT * FROM comments WHERE post_id = :post_id ORDER BY created_at DESC");
            $stmt->bindParam(':post_id', $post['id']);
            $stmt->execute();
            $comments = $stmt->fetchAll();
            foreach ($comments as $comment): ?>
                <div class="comment">
                    <strong><?php echo htmlspecialchars($comment['name']); ?></strong>
                    <p><?php echo nl2br(htmlspecialchars($comment['comment'])); ?></p>
                    <small><?php echo $comment['created_at']; ?></small>
                </div>
            <?php endforeach; ?>
            <form action="blog.php" method="post">
                <input type="hidden" name="post_id" value="<?php echo $post['id']; ?>">
                <label for="name">Adınız:</label>
                <input type="text" id="name" name="name" required>
                <label for="comment">Yorumunuz:</label>
                <textarea id="comment" name="comment" required></textarea>
                <button type="submit">Yorum Yap</button>
            </form>
        </article>
    <?php endforeach; ?>
</div>

<?php include 'inc/footer.php'; ?>

4. Arama Çubuğu

inc/header.php:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kişisel Blog</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <div class="container">
            <h1>Kişisel Blog</h1>
            <nav>
                <ul>
                    <li><a href="index.php">Anasayfa</a></li>
                    <li><a href="blog.php">Blog</a></li>
                    <li><a href="projeler.php">Projeler</a></li>
                    <li><a href="galeri.php">Galeri</a></li>
                    <li><a href="hakkimda.php">Hakkımda</a></li>
                    <li><a href="iletisim.php">İletişim</a></li>
                </ul>
            </nav>
            <form action="blog.php" method="get" class="search-form">
                <input type="text" name="search" placeholder="Blogda ara...">
                <button type="submit">Ara</button>
            </form>
        </div>
    </header>

blog.php:

<?php
include 'inc/header.php';
include 'inc/db.php';

$search = isset($_GET['search']) ? $_GET['search'] : '';
if ($search) {
    $stmt = $conn->prepare("SELECT * FROM posts WHERE title LIKE :search OR content LIKE :search ORDER BY created_at DESC");
    $stmt->bindValue(':search', "%$search%");
} else {
    $stmt = $conn->query("SELECT * FROM posts ORDER BY created_at DESC");
}
$stmt->execute();
$posts = $stmt->fetchAll();

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $post_id = $_POST['post_id'];
    $name = $_POST['name'];
    $comment = $_POST['comment'];
    $stmt = $conn->prepare("INSERT INTO comments (post_id, name, comment) VALUES (:post_id, :name, :comment)");
    $stmt->bindParam(':post_id', $post_id);
    $stmt->bindParam(':name', $name);
    $stmt->bindParam(':comment', $comment);
    $stmt->execute();
}
?>

<div class="container">
    <h2>Blog</h2>
    <?php foreach ($posts as $post): ?>
        <article>
            <h3><?php echo htmlspecialchars($post['title']); ?></h3>
            <p><?php echo nl2br(htmlspecialchars($post['content'])); ?></p>
            <p><small><?php echo $post['created_at']; ?></small></p>
            <h4>Yorumlar</h4>
            <?php
            $stmt = $conn->prepare("SELECT * FROM comments WHERE post_id = :post_id ORDER BY created_at DESC");
            $stmt->bindParam(':post_id', $post['id']);
            $stmt->execute();
            $comments = $stmt->fetchAll();
            foreach ($comments as $comment): ?>
                <div class="comment">
                    <strong><?php echo htmlspecialchars($comment['name']); ?></strong>
                    <p><?php echo nl2br(htmlspecialchars($comment['comment'])); ?></p>
                    <small><?php echo $comment['created_at']; ?></small>
                </div>
            <?php endforeach; ?>
            <form action="blog.php" method="post">
                <input type="hidden" name="post_id" value="<?php echo $post['id']; ?>">
                <label for="name">Adınız:</label>
                <input type="text" id="name" name="name" required>
                <label for="comment">Yorumunuz:</label>
                <textarea id="comment" name="comment" required></textarea>
                <button type="submit">Yorum Yap</button>
            </form>
        </article>
    <?php endforeach; ?>
</div>

<?php include 'inc/footer.php'; ?>

5. Kategoriler

Blog yazılarını kategorilere ayırmak için bir categories tablosu oluşturalım.

Veritabanı Tablosu:

CREATE TABLE categories (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(255) NOT NULL
);

CREATE TABLE post_categories (
    post_id INT,
    category_id INT,
    FOREIGN KEY (post_id) REFERENCES posts(id),
    FOREIGN KEY (category_id) REFERENCES categories(id)
);

admin/add_category.php:

<?php
session_start();
if (!isset($_SESSION['loggedin'])) {
    header('Location: login.php');
    exit;
}

include '../inc/db.php';

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $name = $_POST['name'];
    $stmt = $conn->prepare("INSERT INTO categories (name) VALUES (:name)");
    $stmt->bindParam(':name', $name);
    $stmt->execute();
    header('Location: index.php');
}
?>
<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Kategori Ekle</title>
    <link rel="stylesheet" href="../css/style.css">
</head>
<body>
    <div class="container">
        <h2>Kategori Ekle</h2>
        <form action="add_category.php" method="post">
            <label for="name">Kategori Adı:</label>
            <input type="text" id="name" name="name" required>
            <button type="submit">Kategori Ekle</button>
        </form>
    </div>
</body>
</html>

blog.php:

<?php
include 'inc/header.php';
include 'inc/db.php';

$search = isset($_GET['search']) ? $_GET['search'] : '';
if ($search) {
    $stmt = $conn->prepare("SELECT * FROM posts WHERE title LIKE :search OR content LIKE :search ORDER BY created_at DESC");
    $stmt->bindValue(':search', "%$search%");
} else {
    $stmt = $conn->query("SELECT * FROM posts ORDER BY created_at DESC");
}
$stmt->execute();
$posts = $stmt->fetchAll();

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $post_id = $_POST['post_id'];
    $name = $_POST['name'];
    $comment = $_POST['comment'];
    $stmt = $conn->prepare("INSERT INTO comments (post_id, name, comment) VALUES (:post_id, :name, :comment)");
    $stmt->bindParam(':post_id', $post_id);
    $stmt->bindParam(':name', $name);
    $stmt->bindParam(':comment', $comment);
    $stmt->execute();
}
?>

<div class="container">
    <h2>Blog</h2>
    <?php foreach ($posts as $post): ?>
        <article>
            <h3><?php echo htmlspecialchars($post['title']); ?></h3>
            <p><?php echo nl2br(htmlspecialchars($post['content'])); ?></p>
            <p><small><?php echo $post['created_at']; ?></small></p>
            <h4>Yorumlar</h4>
            <?php
            $stmt = $conn->prepare("SELECT * FROM comments WHERE post_id = :post_id ORDER BY created_at DESC");
            $stmt->bindParam(':post_id', $post['id']);
            $stmt->execute();
            $comments = $stmt->fetchAll();
            foreach ($comments as $comment): ?>
                <div class="comment">
                    <strong><?php echo htmlspecialchars($comment['name']); ?></strong>
                    <p><?php echo nl2br(htmlspecialchars($comment['comment'])); ?></p>
                    <small><?php echo $comment['created_at']; ?></small>
                </div>
            <?php endforeach; ?>
            <form action="blog.php" method="post">
                <input type="hidden" name="post_id" value="<?php echo $post['id']; ?>">
                <label for="name">Adınız:</label>
                <input type="text" id="name" name="name" required>
                <label for="comment">Yorumunuz:</label>
                <textarea id="comment" name="comment" required></textarea>
                <button type="submit">Yorum Yap</button>
            </form>
        </article>
    <?php endforeach; ?>
</div>

<?php include 'inc/footer.php'; ?>

6. Responsive Tasarım

css/style.css:

/*

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

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

header h1 {
    margin: 0;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 10px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
}

.container {
    width: 80%;
    margin: 20px auto;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    position: fixed;
    width: 100%;
    bottom: 0;
}

.gallery img {
    width: 30%;
    margin: 1%;
    display: inline-block;
}

form label {
    display: block;
    margin: 10px 0 5px;
}

form input, form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

form button {
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

form button:hover {
    background-color: #555;
}

@media (max-width: 768px) {
    .container {
        width: 95%;
    }

    nav ul li {
        display: block;
        margin: 10px 0;
    }

    .gallery img {
        width: 100%;
        margin: 10px 0;
    }
}

*/
Görünüm: 24
Etiketler
Paylaş
Osman Bayrak
Osman Bayrak

Yazılım Mühendisiyim. Teknoloji ve yazılıma meraklıyım.

Articles: 278

Benzer Konular