آزمایش

[shadow9130]

<title>وبلاگ حرفه‌ای من</title> <style> body { font-family: 'Tahoma', sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; direction: rtl; transition: background 0.3s, color 0.3s; }

header {
  background-color: #333;
  color: white;
  padding: 20px;
  text-align: center;
  position: relative;
}

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

nav ul li {
  display: inline-block;
  margin: 0 15px;
}

nav ul li a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}

#toggle-theme {
  position: absolute;
  left: 20px;
  top: 20px;
  padding: 5px 10px;
  cursor: pointer;
  border: none;
  border-radius: 5px;
  background: #555;
  color: #fff;
}

main {
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
}

.content {
  flex: 3;
  margin-left: 20px;
}

.sidebar {
  flex: 1;
  background-color: #ddd;
  padding: 15px;
  border-radius: 5px;
}

article {
  background-color: white;
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 15px;
  margin-top: 20px;
}

/* فرم تماس */
.contact {
  background: white;
  padding: 15px;
  border-radius: 5px;
  margin-top: 20px;
}

.contact input, .contact textarea {
  width: 100%;
  padding: 10px;
  margin: 8px 0;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.contact button {
  background: #333;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
}

/* حالت شب */
body.dark {
  background-color: #222;
  color: #eee;
}

body.dark header, body.dark footer {
  background-color: #111;
}

body.dark article, body.dark .contact {
  background-color: #333;
  color: #eee;
}

body.dark .sidebar {
  background-color: #444;
  color: #eee;
}

@media (max-width: 768px) {
  main {
    flex-direction: column;
  }

  .content, .sidebar {
    margin-left: 0;
    margin-bottom: 20px;
  }
}

</style>

وبلاگ من

🌙 حالت شب

• خانه
• درباره من
• تماس با ما

شعار

ما نخوردیم نان‌ گندم داداش ولی ديديم دست مردم

عنوان مطلب دوم

مطلب دوم با طراحی زیبا و واکنش‌گرا. مناسب برای نمایش در موبایل و دسکتاپ.

  <div class="contact" id="contact">
    <h3>فرم تماس</h3>
    <form>
      <input type="text" placeholder="نام شما" required>
      <input type="email" placeholder="ایمیل شما" required>
      <textarea rows="5" placeholder="پیام شما..." required></textarea>
      <button type="submit">ارسال</button>
    </form>
  </div>
</section>

<aside class="sidebar">
  <h3>دسته‌بندی‌ها</h3>
  <ul>
    <li><a href="#">برنامه‌نویسی</a></li>
    <li><a href="#">طراحی وب</a></li>
    <li><a href="#">زندگی روزمره</a></li>
  </ul>
</aside>

© 2025 وبلاگ من - تمامی حقوق محفوظ است.

<script> const toggleBtn = document.getElementById('toggle-theme'); toggleBtn.addEventListener('click', () => { document.body.classList.toggle('dark'); toggleBtn.textContent = document.body.classList.contains('dark') ? '☀️ حالت روز' : '🌙 حالت شب'; }); </script>

[guest20]

@shadow9130

You might have posted this to the wrong place

ربما تكون قد نشرت هذا في المكان الخطأ