-
Notifications
You must be signed in to change notification settings - Fork 57
Open
Description
<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;
}
</style>
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;
}
}
وبلاگ من
🌙 حالت شبشعار
ما نخوردیم نان گندم داداش ولی ديديم دست مردم
عنوان مطلب دوم
مطلب دوم با طراحی زیبا و واکنشگرا. مناسب برای نمایش در موبایل و دسکتاپ.
<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>Metadata
Metadata
Assignees
Labels
No labels