الگو:فهرست: تفاوت میان نسخه‌ها
بدون خلاصۀ ویرایش |
بدون خلاصۀ ویرایش |
||
| خط ۱: | خط ۱: | ||
<html lang="fa"> | <html lang="fa"> | ||
<head> | <head> | ||
| خط ۱۲: | خط ۱۱: | ||
padding: 0; | padding: 0; | ||
direction: rtl; | direction: rtl; | ||
background-color: #ecf0f1; | |||
} | } | ||
.header { | .header { | ||
| خط ۲۰: | خط ۲۰: | ||
padding: 10px 20px; | padding: 10px 20px; | ||
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); | box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); | ||
border-radius: 0 0 15px 15px; /* گوشه‌های گرد پایین */ | |||
} | } | ||
.header .logo a { | .header .logo a { | ||
| خط ۲۶: | خط ۲۷: | ||
color: #ffffff; | color: #ffffff; | ||
text-decoration: none; | text-decoration: none; | ||
transition: color 0.3s ease, transform 0.3s ease; /* تغییر رنگ و انیمیشن بزرگ‌نمایی */ | |||
} | } | ||
.header .logo a:hover { | .header .logo a:hover { | ||
color: #1abc9c; | color: #1abc9c; | ||
transform: scale(1.1); /* بزرگ‌نمایی هنگام هاور */ | |||
} | } | ||
.header .menu { | .header .menu { | ||
| خط ۴۱: | خط ۴۴: | ||
color: #ffffff; | color: #ffffff; | ||
font-weight: bold; | font-weight: bold; | ||
padding: | padding: 8px 12px; | ||
border-radius: 8px; /* گوشه‌های گرد برای لینک‌ها */ | |||
transition: all 0.3s ease; /* تغییرات نرم */ | |||
} | } | ||
.header .menu a:hover { | .header .menu a:hover { | ||
background-color: #1abc9c; | background-color: #1abc9c; | ||
transform: scale(1.1); /* بزرگ‌نمایی جزئی هنگام هاور */ | |||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* سایه ملایم */ | |||
} | } | ||
.dropdown { | .dropdown { | ||
| خط ۵۶: | خط ۶۳: | ||
background-color: #34495e; | background-color: #34495e; | ||
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); | box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); | ||
border-radius: | border-radius: 10px; /* گوشه‌های گرد برای منو */ | ||
overflow: hidden; | overflow: hidden; | ||
z-index: 1; | z-index: 1; | ||
opacity: 0; /* شروع از شفاف */ | |||
transform: translateY(-10px); /* موقعیت اولیه کمی بالاتر */ | |||
transition: all 0.3s ease; /* انیمیشن باز شدن */ | |||
} | |||
.dropdown:hover .dropdown-content { | |||
display: block; | |||
opacity: 1; /* قابل مشاهده */ | |||
transform: translateY(0); /* بازگشت به موقعیت اصلی */ | |||
} | } | ||
.dropdown-content a { | .dropdown-content a { | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
padding: 10px; | justify-content: center; /* وسط‌چین کردن متن */ | ||
padding: 10px 15px; | |||
text-decoration: none; | text-decoration: none; | ||
color: #ffffff; | color: #ffffff; | ||
white-space: nowrap; | white-space: nowrap; | ||
transition: all 0.3s ease; /* تغییرات نرم */ | |||
font-size: 14px; /* یکسان‌سازی اندازه متن */ | |||
text-align: center; /* وسط‌چین کردن متن */ | |||
} | } | ||
.dropdown-content a:hover { | .dropdown-content a:hover { | ||
background-color: #1abc9c; | background-color: #1abc9c; | ||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* سایه ملایم هنگام هاور */ | |||
transform: scale(1.05); /* بزرگ‌نمایی جزئی */ | |||
} | } | ||
.dropdown-content { | |||
text-align: justify; /* متن جاستیفای برای کل زیرمنو */ | |||
} | } | ||
.dropdown-title { | .dropdown-title { | ||
| خط ۸۰: | خط ۱۰۱: | ||
text-align: center; | text-align: center; | ||
font-weight: bold; | font-weight: bold; | ||
border-radius: 10px 10px 0 0; /* گوشه‌های گرد بالا */ | |||
} | } | ||
</style> | </style> | ||
| خط ۸۷: | خط ۱۰۹: | ||
<div class="header"> | <div class="header"> | ||
<div class="logo"> | <div class="logo"> | ||
<a href=" | <a href="#">تحلیل روز</a> | ||
</div> | </div> | ||
<div class="menu"> | <div class="menu"> | ||
| خط ۹۴: | خط ۱۱۶: | ||
<div class="dropdown-content"> | <div class="dropdown-content"> | ||
<div class="dropdown-title">ارزها</div> | <div class="dropdown-title">ارزها</div> | ||
<a href=" | <a href="#">یورو</a> | ||
<a href=" | <a href="#">پوند</a> | ||
<a href=" | <a href="#">دلار کانادا</a> | ||
<a href=" | <a href="#">ین ژاپن</a> | ||
</div> | </div> | ||
</div> | </div> | ||
| خط ۱۰۴: | خط ۱۲۶: | ||
<div class="dropdown-content"> | <div class="dropdown-content"> | ||
<div class="dropdown-title">کالاها</div> | <div class="dropdown-title">کالاها</div> | ||
<a href=" | <a href="#">انس طلا</a> | ||
<a href=" | <a href="#">انس نقره</a> | ||
<a href=" | <a href="#">نفت</a> | ||
</div> | </div> | ||
</div> | </div> | ||
| خط ۱۱۲: | خط ۱۳۴: | ||
<a href="#">ارز دیجیتال</a> | <a href="#">ارز دیجیتال</a> | ||
<div class="dropdown-content"> | <div class="dropdown-content"> | ||
<a href=" | <a href="#">بیت‌کوین</a> | ||
<a href=" | <a href="#">اتریوم</a> | ||
<a href=" | <a href="#">بایننس</a> | ||
<a href=" | <a href="#">دوج</a> | ||
</div> | </div> | ||
</div> | </div> | ||
| خط ۱۲۱: | خط ۱۴۳: | ||
<a href="#">بازار داخلی</a> | <a href="#">بازار داخلی</a> | ||
<div class="dropdown-content"> | <div class="dropdown-content"> | ||
<a href=" | <a href="#">طلا</a> | ||
<a href=" | <a href="#">سکه</a> | ||
<a href=" | <a href="#">دلار</a> | ||
<a href=" | <a href="#">درهم</a> | ||
</div> | </div> | ||
</div> | </div> | ||
| خط ۱۳۰: | خط ۱۵۲: | ||
<a href="#">بازار بورس</a> | <a href="#">بازار بورس</a> | ||
<div class="dropdown-content"> | <div class="dropdown-content"> | ||
<a href=" | <a href="#">شاخص کل</a> | ||
<a href=" | <a href="#">شاخص هموزن</a> | ||
</div> | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
<div class="logo"> | <div class="logo"> | ||
<a href=" | <a href="#">آرشیو تحلیل‌ها</a> | ||
</div> | </div> | ||
</div> | </div> | ||