|
|
| (۱۵ نسخهٔ میانی ویرایش شده توسط یک کاربر دیگر نشان داده نشد) |
| خط ۱: |
خط ۱: |
| | |
| <div class = "por tal-column-3-3 por tal-container-3" style = "margin-bottom: 16px; grid-column: span 3; padding: 1px; text-align: center; background: #89CFF0; border-radius: 10px; box-shadow: 2px 4px 11px 0px #becbd5; align-items: left; overflow: hidden"> | | <div class = "por tal-column-3-3 por tal-container-3" style = "margin-bottom: 16px; grid-column: span 3; padding: 1px; text-align: center; background: #89CFF0; border-radius: 10px; box-shadow: 2px 4px 11px 0px #becbd5; align-items: left; overflow: hidden"> |
| <div class = "portal-column-2-3" style = ""> | | <div class = "portal-column-2-3" style = ""> |
| خط ۵۳: |
خط ۵۴: |
| </div> | | </div> |
|
| |
|
| | | <div style="display:flex; flex-direction:row; flex-wrap:wrap; gap:10px; justify-content:center; align-items:flex-start; width:100%; margin:5px 0;"> |
| | | {{کانتینرعکس دایره}} |
| | | {{کانتینرعکس دایره}} |
| | | {{کانتینرعکس دایره}} |
| | | {{کانتینرعکس دایره}} |
| | | {{کانتینرعکس دایره}} |
| | |
| <!-- شروع کانتینر اصلی گالری با پسزمینه آبی آسمانی ابر و بادی و چیدمان وسطچین -->
| |
| <div style="max-width: 1000px; margin: 0px auto; padding: 10px; direction: rtl; text-align: center;
| |
| background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 50%, #f0f9ff 100%); /* ایجاد رنگ پسزمینه ابر و بادی */
| |
| border-radius: 16px; /* منحنی کردن گوشههای کل باکس گالری */
| |
| box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* ایجاد سایه ملایم دور کادر */
| |
| box-sizing: border-box;">
| |
| | |
| <!-- ردیف اول: دو عکس بزرگ (همواره کنار هم در موبایل و دسکتاپ بدون شکستن خط) -->
| |
| <div style="display: flex; gap: 10px; justify-content: center; margin-bottom: 10px; width: 100%;">
| |
|
| |
| <!-- عکس بزرگ اول -->
| |
| <div style="flex: 1 1 calc(50% - 5px); max-width: 485px; min-width: 0; display: flex; flex-direction: column; align-items: center; border: 5px solid #7ED957; background-color: #2A9D8F; padding: 1px; box-sizing: border-box;
| |
| border-radius: 15px; /* منحنی کردن گوشههای کادر تصویر بزرگ اول */">
| |
| <!-- نگهدارنده تصویر بزرگ جهت برش و همترازی با نسبت ۴:۳ -->
| |
| <div style="width: 100%; aspect-ratio: 4/3; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 9px;">
| |
| [[File:3.jpg|thumb|link=|class=not-resized|center]]
| |
| </div>
| |
| <!-- کپشن تکخطی تصویر بزرگ اول: وسطچین، بدون کادر، با فاصله کمتر -->
| |
| <div style="margin-top: 4px; margin-bottom: 4px; font-size: 90%; color: #000000; font-weight: bold; text-align: center; width: 100%;
| |
| line-height: 1.2; border: none; background: transparent; box-shadow: none; outline: none;
| |
| white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
| |
| توضیحات عکس 1
| |
| </div>
| |
| </div>
| |
| | |
| <!-- عکس بزرگ دوم -->
| |
| <div style=" flex: 1 1 calc(50% - 5px); max-width: 485px; min-width: 0; display: flex; flex-direction: column; align-items: center; border: 5px solid #7ED957; background-color: #2A9D8F; padding: 1px; box-sizing: border-box; | |
| border-radius: 15px; /* منحنی کردن گوشههای کادر تصویر بزرگ دوم */">
| |
| <!-- نگهدارنده تصویر بزرگ جهت برش و همترازی با نسبت ۴:۳ -->
| |
| <div style="width: 100%; aspect-ratio: 4/3; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 9px;">
| |
| [[File:7.jpg|thumb|link=|class=not-resized|center]]
| |
| </div>
| |
| <!-- کپشن تکخطی تصویر بزرگ دوم: وسطچین، بدون کادر، با فاصله کمتر -->
| |
| <div style="margin-top: 4px; margin-bottom: 4px; font-size: 90%; color: #000000; font-weight: bold; text-align: center; width: 100%;
| |
| line-height: 1.2; border: none; background: transparent; box-shadow: none; outline: none;
| |
| white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
| |
| توضیات عکس 2
| |
| </div>
| |
| </div>
| |
| | |
| </div>
| |
| | |
| <!-- ردیف دوم: چهار عکس کوچک (همواره در یک ردیف در موبایل و دسکتاپ بدون شکستن خط) -->
| |
| <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; justify-content: center; width: 100%;">
| |
|
| |
| <!-- عکس کوچک ۱ -->
| |
| <div style="display: flex; flex-direction: column; align-items: center; border: 5px solid #7ED957; background-color: #2A9D8F; padding: 4px; box-sizing: border-box;
| |
| border-radius: 15px; min-width: 0; /* منحنی کردن گوشههای کادر تصویر کوچک اول */">
| |
| <!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ -->
| |
| <div style="width: 100%; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 8px;">
| |
| [[File:1.jpg|thumb|link=|class=not-resized|center]]
| |
| </div>
| |
| <!-- کپشن تکخطی تصویر کوچک اول -->
| |
| <div style="margin-top: 4px; margin-bottom: 1px; font-size: 80%; color: #000000; text-align: center; width: 100%;
| |
| line-height: 1.1; border: none; background: transparent; box-shadow: none; outline: none;
| |
| white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
| |
| دوربین سقفی
| |
| </div>
| |
| </div>
| |
| | |
| <!-- عکس کوچک ۲ -->
| |
| <div style="display: flex; flex-direction: column; align-items: center; border: 5px solid #7ED957; background-color: #2A9D8F; padding: 4px; box-sizing: border-box;
| |
| border-radius: 15px; min-width: 0; /* منحنی کردن گوشههای کادر تصویر کوچک دوم */">
| |
| <!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ -->
| |
| <div style="width: 100%; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 8px;">
| |
| [[File:22.jpg|thumb|link=|class=not-resized|center]]
| |
| </div>
| |
| <!-- کپشن تکخطی تصویر کوچک دوم -->
| |
| <div style="margin-top: 4px; margin-bottom: 1px; font-size: 80%; color: #000000; text-align: center; width: 100%;
| |
| line-height: 1.1; border: none; background: transparent; box-shadow: none; outline: none;
| |
| white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
| |
| دوربین دیواری
| |
| </div>
| |
| </div>
| |
| | |
| <!-- عکس کوچک ۳ -->
| |
| <div style="display: flex; flex-direction: column; align-items: center; border: 5px solid #7ED957; background-color: #2A9D8F; padding: 4px; box-sizing: border-box;
| |
| border-radius: 15px; min-width: 0; /* منحنی کردن گوشههای کادر تصویر کوچک سوم */">
| |
| <!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ -->
| |
| <div style="width: 100%; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 8px;">
| |
| [[File:4.jpg|thumb|link=|class=not-resized|center]]
| |
| </div>
| |
| <!-- کپشن تکخطی تصویر کوچک سوم -->
| |
| <div style="margin-top: 4px; margin-bottom: 1px; font-size: 80%; color: #000000; text-align: center; width: 100%;
| |
| line-height: 1.1; border: none; background: transparent; box-shadow: none; outline: none;
| |
| white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
| |
| دوربین 360 درجه
| |
| </div>
| |
| </div>
| |
| | |
| <!-- عکس کوچک ۴ -->
| |
| <div style="display: flex; flex-direction: column; align-items: center; border: 5px solid #7ED957; background-color: #2A9D8F; padding: 4px; box-sizing: border-box;
| |
| border-radius: 15px; min-width: 0; /* منحنی کردن گوشههای کادر تصویر کوچک چهارم */">
| |
| <!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ -->
| |
| <div style="width: 100%; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 8px;">
| |
| [[File:9.jpg|thumb|link=|class=not-resized|center]]
| |
| </div>
| |
| <!-- کپشن تکخطی تصویر کوچک چهارم -->
| |
| <div style="margin-top: 4px; margin-bottom: 1px; font-size: 80%; color: #000000; text-align: center; width: 100%;
| |
| line-height: 1.1; border: none; background: transparent; box-shadow: none; outline: none;
| |
| white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
| |
| دوربین بند انگشتی
| |
| </div>
| |
| </div>
| |
| | |
| </div>
| |
| | |
| </div> | | </div> |
|
| |
|
| |
|
| |
|
| |
|
| |
| <!DOCTYPE html>
| |
| <html lang="fa" dir="rtl">
| |
| <head>
| |
| <meta charset="UTF-8">
| |
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
| |
| <title>بخش خدمات طراحی سایت - فراغیب</title>
| |
| <style>
| |
| /* استایلهای پایه */
| |
| body {
| |
| font-family: 'Tahoma', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
| |
| background-color: #fcfcfc;
| |
| margin: 0;
| |
| padding: 50px 20px;
| |
| display: flex;
| |
| justify-content: center;
| |
| }
| |
|
| |
| /* کانتینر اصلی بخش خدمات */
| |
| .services-container {
| |
| display: flex;
| |
| justify-content: center;
| |
| align-items: flex-start;
| |
| flex-wrap: wrap;
| |
| gap: 40px;
| |
| max-width: 1200px;
| |
| width: 100%;
| |
| }
| |
|
| |
| /* هر آیتم خدماتی */
| |
| .service-item {
| |
| display: flex;
| |
| flex-direction: column;
| |
| align-items: center;
| |
| text-align: center;
| |
| flex: 0 1 180px; /* عرض منعطف برای هر آیتم */
| |
| transition: transform 0.3s ease;
| |
| }
| |
|
| |
| .service-item:hover {
| |
| transform: translateY(-10px);
| |
| }
| |
|
| |
| /* طراحی دایره مشابه تصویر */
| |
| .service-circle {
| |
| width: 160px;
| |
| height: 160px;
| |
| border-radius: 50%;
| |
| background: linear-gradient(145deg, #ffffff, #f0f0f0);
| |
| box-shadow: 10px 10px 25px #e0e0e0,
| |
| -10px -10px 25px #ffffff; /* افکت نئومورفیسم نرم */
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| margin-bottom: 20px;
| |
| position: relative;
| |
| border: 1px solid rgba(0,0,0,0.05);
| |
| }
| |
|
| |
| /* استایل آیکنهای SVG داخل دایره */
| |
| .service-circle svg {
| |
| width: 80px;
| |
| height: 80px;
| |
| fill: #444; /* رنگ آیکنها */
| |
| }
| |
|
| |
| /* استایل متن زیر دایره */
| |
| .service-title {
| |
| font-size: 16px;
| |
| font-weight: bold;
| |
| color: #333;
| |
| margin: 0;
| |
| line-height: 1.6;
| |
| }
| |
|
| |
| /* ریسپانسیو سازی برای موبایل */
| |
| @media (max-width: 768px) {
| |
| .services-container {
| |
| gap: 20px;
| |
| }
| |
| .service-circle {
| |
| width: 130px;
| |
| height: 130px;
| |
| }
| |
| .service-circle svg {
| |
| width: 60px;
| |
| height: 60px;
| |
| }
| |
| .service-title {
| |
| font-size: 14px;
| |
| }
| |
| }
| |
| </style>
| |
| </head>
| |
| <body>
| |
|
| |
| <div class="services-container">
| |
|
| |
| <!-- آیتم اول: قیمت طراحی سایت -->
| |
| <div class="service-item">
| |
| <div class="service-circle">
| |
| <!-- آیکن کیف پول/هزینه -->
| |
| <svg viewBox="0 0 24 24"><path d="M21,18V19A2,2 0 0,1 19,21H5C3.89,21 3,20.1 3,19V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5V6H12C10.89,6 10,6.9 10,8V16A2,2 0 0,0 12,18H21M12,16H22V8H12V16M16,13.5A1.5,1.5 0 0,1 14.5,12A1.5,1.5 0 0,1 16,10.5A1.5,1.5 0 0,1 17.5,12A1.5,1.5 0 0,1 16,13.5Z" /></svg>
| |
| </div>
| |
| <p class="service-title">قیمت طراحی سایت</p>
| |
| </div>
| |
|
| |
| <!-- آیتم دوم: پشتیبانی سایت -->
| |
| <div class="service-item">
| |
| <div class="service-circle">
| |
| <!-- آیکن پشتیبانی/هدست -->
| |
| <svg viewBox="0 0 24 24"><path d="M12,1C7,1 3,5 3,10V17A3,3 0 0,0 6,20H9V12H5V10A7,7 0 0,1 12,3A7,7 0 0,1 19,10V12H15V20H18A3,3 0 0,0 21,17V10C21,5 17,1 12,1M7,14H7V18H6A1,1 0 0,1 5,17V14H7M17,14H19V17A1,1 0 0,1 18,18H17V14Z" /></svg>
| |
| </div>
| |
| <p class="service-title">پشتیبانی سایت</p>
| |
| </div>
| |
|
| |
| <!-- آیتم سوم: طراحی سایت اختصاصی -->
| |
| <div class="service-item">
| |
| <div class="service-circle">
| |
| <!-- آیکن اختصاصی/کد نویسی -->
| |
| <svg viewBox="0 0 24 24"><path d="M12.89,3L14.85,3.4L11.11,21L9.15,20.6L12.89,3M19.59,12L16,8.41V5.58L22.42,12L16,18.41V15.58L19.59,12M1.58,12L8,5.58V8.41L4.41,12L8,15.58V18.41L1.58,12Z" /></svg>
| |
| </div>
| |
| <p class="service-title">طراحی سایت اختصاصی</p>
| |
| </div>
| |
|
| |
| <!-- آیتم چهارم: طراحی سایت فروشگاهی -->
| |
| <div class="service-item">
| |
| <div class="service-circle">
| |
| <!-- آیکن سبد خرید -->
| |
| <svg viewBox="0 0 24 24"><path d="M17,18A2,2 0 0,1 19,20A2,2 0 0,1 17,22C15.89,22 15,21.1 15,20C15,18.89 15.89,18 17,18M1,2H4.27L5.21,4H20A1,1 0 0,1 21,5C21,5.17 20.95,5.34 20.88,5.5L17.3,11.97C16.96,12.58 16.3,13 15.55,13H8.1L7.2,14.63L7.17,14.75A0.25,0.25 0 0,0 7.42,15H19V17H7C5.89,17 5,16.1 5,15C5,14.65 5.09,14.32 5.24,14.04L6.6,11.59L3,4H1V2M7,18A2,2 0 0,1 9,20A2,2 0 0,1 7,22C5.89,22 5,21.1 5,20C5,18.89 5.89,18 7,18M16,11L18.78,6H6.14L8.5,11H16Z" /></svg>
| |
| </div>
| |
| <p class="service-title">طراحی سایت فروشگاهی</p>
| |
| </div>
| |
|
| |
| <!-- آیتم پنجم: طراحی سایت شرکتی -->
| |
| <div class="service-item">
| |
| <div class="service-circle">
| |
| <!-- آیکن ساختمان/شرکت -->
| |
| <svg viewBox="0 0 24 24"><path d="M5,21V3H19V21H17V19H15V21H13V19H11V21H9V19H7V21H5M7,5V7H9V5H7M11,5V7H13V5H11M15,5V7H17V5H15M7,9V11H9V9H7M11,9V11H13V9H11M15,9V11H17V9H15M7,13V15H9V13H7M11,13V15H13V13H11M15,13V15H17V13H15M7,17V18H9V17H7M11,17V18H13V17H11M15,17V18H17V17H15Z" /></svg>
| |
| </div>
| |
| <p class="service-title">طراحی سایت شرکتی</p>
| |
| </div>
| |
|
| |
| </div>
| |
|
| |
| </body>
| |
| </html>
| |