فراغیب

الگو:کادر اطلاعاتی: تفاوت میان نسخه‌ها

→ تفاوت با ویرایش قدیمی‌ترتفاوت با ویرایش جدیدتر ←
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
خط ۱: خط ۱:
<html>
<html>
<!-- شروع کد باکس عریض خدمات - طراحی شده برای فراغیب -->
 
<div class="f-wide-box-wrapper">
<!-- شروع باکس خدمات نعمتی - نسخه فشرده -->
     <div class="f-wide-box-content">
<div class="f-compact-wrapper">
         <h2 class="f-wide-box-title">چاپ بنر در چاپ متین</h2>
     <div class="f-compact-content">
         <p class="f-wide-box-text">
         <h2 class="f-compact-title">خدمات چاپ و تبلیغات نعمتی</h2>
             هنگامی که شما از <strong>خدمات چاپ و تبلیغات نعمتی</strong> بازدید می‌کنید، لازم نیست نگران از کیفیت بنر و یا <strong>چاپ سررسید اختصاصی</strong> خود باشید. اگر قبلاً بنر خود را طراحی کرده‌اید، به سادگی فایل‌های آماده خود را بر روی سایت ما آپلود کنید. بعد از اینکه سفارش خود را ارسال کردید، فایل‌های شما را بررسی می‌کنیم تا اطمینان حاصل شود که فایل‌ها دارای شرایط درست و دقیق هستند و ما در نهایت برای شما تأیید <strong>چاپ روی بنر</strong> را ارسال خواهیم کرد.
         <p class="f-compact-text">
             برای تجربه بهترین <strong>خدمات چاپ و تبلیغات نعمتی</strong>، کافیست سفارش خود را به ما بسپارید. ما با کیفیت‌ترین خدمات <strong>چاپ بنر</strong>، <strong>چاپ سررسید اختصاصی</strong> و <strong>طراحی تراکت</strong> را با دقت بالا و قیمت مناسب ارائه می‌دهیم. همین حالا فایل‌های خود را ارسال کنید تا در سریع‌ترین زمان ممکن، سفارش شما را با بالاترین کیفیت آماده و تحویل دهیم.
         </p>
         </p>
     </div>
     </div>
خط ۱۱: خط ۱۲:


<style>
<style>
/* استایل باکس عریض */
/* فونت ایران‌سنس - فرض بر این است که در سایت شما تعریف شده است */
.f-wide-box-wrapper {
.f-compact-wrapper, .f-compact-wrapper * {
    font-family: 'IRANSans', Tahoma, sans-serif !important;
}
 
.f-compact-wrapper {
     position: relative;
     position: relative;
     width: 95%; /* استفاده از اکثر عرض صفحه */
     width: 90%;
     max-width: 1250px; /* حداکثر عرض مجاز برای خوانایی بهتر */
     max-width: 800px;
     margin: 50px auto;
     margin: 30px auto;
     padding-bottom: 25px;
     padding-bottom: 15px; /* فضا برای سایه */
}
}


.f-wide-box-content {
.f-compact-content {
     position: relative;
     position: relative;
     background: #ffffff;
     background: #fff;
     border-top: 5px solid #a11e1e; /* خط قرمز بالایی */
     border-top: 4px solid #b71c1c;
     padding: 35px 45px; /* فضای داخلی بیشتر برای باکس عریض */
     padding: 20px 25px; /* کاهش ارتفاع با تنظیم پدینگ */
     border-left: 1px solid #e5e5e5;
     border: 1px solid #e0e0e0;
    border-right: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
     z-index: 2;
     z-index: 2;
     direction: rtl;
     direction: rtl;
     border-radius: 2px;
     text-align: right;
}
}


.f-wide-box-title {
.f-compact-title {
     font-size: 1.6rem;
     font-size: 1.3rem;
     font-weight: bold;
     font-weight: 800;
     color: #222;
     color: #222;
     margin-bottom: 25px;
     margin: 0 0 15px 0;
     text-align: center;
     text-align: center;
    font-family: 'Tahoma', sans-serif;
}
}


.f-wide-box-text {
.f-compact-text {
     font-size: 1.05rem;
     font-size: 0.95rem;
     line-height: 1.9; /* فاصله خطوط بیشتر برای خوانایی در عرض زیاد */
     line-height: 1.7;
     color: #444;
     color: #444;
     text-align: justify; /* تراز از طرفین طبق درخواست */
     text-align: justify;
     margin: 0;
     margin: 0;
    font-family: 'Tahoma', sans-serif;
}
}


.f-wide-box-text strong {
.f-compact-text strong {
     color: #a11e1e;
     color: #b71c1c;
     font-weight: 700;
     font-weight: 700;
}
}


/* ایجاد سایه گوشه‌ها مشابه عکس (تمرکز در دو طرف، محو در وسط) */
/* افکت سایه گوشه‌دار ملایم */
.f-wide-box-wrapper::before,
.f-compact-wrapper::before,
.f-wide-box-wrapper::after {
.f-compact-wrapper::after {
     content: "";
     content: "";
     position: absolute;
     position: absolute;
     bottom: 12px;
     bottom: 5px; /* نزدیک‌تر به باکس برای ارتفاع کمتر */
     left: 25px;
     left: 20px;
     width: 45%;
     width: 40%;
     height: 25px;
     height: 15px;
     background: transparent;
     background: transparent;
     box-shadow: 0 18px 18px rgba(0,0,0,0.35); /* سایه عمیق‌تر برای گوشه‌ها */
     box-shadow: 0 12px 10px rgba(0,0,0,0.25);
     transform: rotate(-2.5deg); /* زاویه ملایم‌تر برای باکس عریض */
     transform: rotate(-2deg);
     z-index: 1;
     z-index: 1;
}
}


.f-wide-box-wrapper::after {
.f-compact-wrapper::after {
     left: auto;
     left: auto;
     right: 25px;
     right: 20px;
     transform: rotate(2.5deg);
     transform: rotate(2deg);
}
}


/* بهینه‌سازی ریسپانسیو */
/* ریسپانسیو */
@media (max-width: 768px) {
@media (max-width: 600px) {
     .f-wide-box-content { padding: 25px; }
     .f-compact-content { padding: 15px; }
    .f-wide-box-wrapper { width: 92%; margin: 25px auto; }
    .f-wide-box-wrapper::before, .f-wide-box-wrapper::after { bottom: 15px; width: 40%; }
}
}
</style>
</style>
<!-- پایان کد باکس عریض -->
<!-- پایان باکس -->
 


</html>
</html>
برگرفته از «https://fa.faraghaib.ir/wiki/الگو:کادر_اطلاعاتی»