پرش به محتوا

محصولات دایره ای - فراغیب

از فراغیب
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
 
(۱۱ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۱: خط ۱:
<html>
<html>
<section class="products-section" aria-labelledby="products-title" style="padding: 15px;">


/*=====================================================
    <div class="container">
  Deniz Door Products Section
  Version : 2.0
  Responsive + SEO + Accessibility
======================================================*/


@charset "UTF-8";
     
        <div class="products-grid">


/*-------------------------
            <!-- 1محصول -->
    IRANSans Font
            <article class="product-card">
--------------------------*/


@font-face{
                <a href="/security-door/" title="چاپ و تبلیغات">
    font-family:'IRANSans';
    src:url('/fonts/IRANSans.woff2') format('woff2'),
        url('/fonts/IRANSans.woff') format('woff');
    font-display:swap;
    font-weight:normal;
}


@font-face{
                    <figure>
    font-family:'IRANSans';
    src:url('/fonts/IRANSans-Bold.woff2') format('woff2'),
        url('/fonts/IRANSans-Bold.woff') format('woff');
    font-display:swap;
    font-weight:bold;
}


/*-------------------------
                        <img
    Variables
                            src="https://dl.faraghaib.ir/m/260005/26000515.png"
--------------------------*/
                            alt="چاپ و تبلیغات"
                            loading="lazy"
                            width="260"
                            height="260">


:root{
                    </figure>


--primary:#222222;
                    <h3>چاپ هولوگرام</h3>
--secondary:#666666;
--border:#ececec;
--bg:#ffffff;
--hover:#fafafa;
--radius:22px;


--shadow:
                    <p>
0 8px 20px rgba(0,0,0,.06);
                        چاپ هولوگرام امنیتی با کیفیت بالا برای افزایش اصالت برند و جلوگیری از جعل
                    </p>


--shadow-hover:
                </a>
0 18px 40px rgba(0,0,0,.12);


--transition:.35s ease;
            </article>


}
            <!-- 2محصول -->


/*-------------------------
            <article class="product-card">
    Reset
--------------------------*/


*,
                <a href="/custom-door/" title="چاپ پوستر">
*::before,
*::after{


margin:0;
                    <figure>
padding:0;
box-sizing:border-box;


}
                        <img
                            src="https://dl.faraghaib.ir/m/260005/26000525.png"
                            alt="چاپ پوستر"
                            loading="lazy"
                            width="260"
                            height="260">


html{
                    </figure>


font-size:16px;
                    <h3>چاپ پوستر</h3>
scroll-behavior:smooth;


}
                    <p>
                        چاپ پوستر با کیفیت بالا، رنگ‌های زنده و ماندگاری عالی برای تبلیغات مؤثر
                    </p>


body{
                </a>


font-family:'IRANSans',Tahoma,sans-serif;
            </article>
direction:rtl;
background:#fff;
color:var(--primary);
line-height:2;
overflow-x:hidden;
text-rendering:optimizeLegibility;


}
            <!-- 3محصول -->


img{
            <article class="product-card">


display:block;
                <a href="/room-door/" title="چاپ تراکت">
max-width:100%;
height:auto;


}
                    <figure>


a{
                        <img
                            src="https://dl.faraghaib.ir/m/260005/26000520.png"
                            alt="چاپ تراکت"


text-decoration:none;
                            loading="lazy"
color:inherit;


}
                            width="260"


ul{
                            height="260">


list-style:none;
                    </figure>


}
                    <h3>چاپ تراکت</h3>


/*==================================================
                    <p>
            PRODUCTS SECTION
                      چاپ تراکت تبلیغاتی با کیفیت بالا و تحویل سریع برای معرفی مؤثر کسب‌وکار شما
===================================================*/
                    </p>


.deniz-products{
                </a>


padding:90px 20px;
            </article>
background:#fff;
position:relative;


}
            <!-- 4محصول -->


.deniz-products .container{
            <article class="product-card">


max-width:1320px;
                <a href="/fire-door/" title="طراحی حرفه ای لوگو">
margin:auto;


}
                    <figure>


/*=========================
                        <img
      Heading
                            src="https://dl.faraghaib.ir/m/260005/26000526.png"
==========================*/
                            alt="طراحی حرفه ای لوگو"


.deniz-heading{
                            loading="lazy"


text-align:center;
                            width="260"
margin-bottom:70px;


}
                            height="260">


.deniz-heading h2{
                    </figure>


font-size:46px;
                    <h3>طراحی حرفه ای لوگو</h3>
font-weight:700;
color:#111;
line-height:1.3;


}
                    <p>
                      طراحی لوگوی حرفه‌ای و اختصاصی برای خلق هویت بصری ماندگار و تقویت برند شما
                    </p>


.deniz-heading::after{
                </a>


content:"";
            </article>
display:block;


width:90px;
        </div>
height:2px;


background:#d9d9d9;
     </div>
 
margin:22px auto 0;
 
}
 
/*=========================
      Grid
==========================*/
 
.deniz-grid{
 
display:grid;
 
grid-template-columns:
repeat(4,minmax(240px,1fr));
 
gap:42px;
 
align-items:start;
 
}
 
/*=========================
      Card
==========================*/
 
.deniz-card{
 
position:relative;
 
padding:0;
 
text-align:center;
 
transition:var(--transition);
 
}
 
.deniz-card:hover{
 
transform:translateY(-10px);
 
}
 
.deniz-card a{
 
display:block;
 
padding:10px;
 
border-radius:var(--radius);
 
transition:var(--transition);
 
}
 
.deniz-card:hover a{
 
background:var(--hover);
 
box-shadow:var(--shadow-hover);
 
}
/*=========================
      Image Area
==========================*/
 
.deniz-card .image-box{
 
position:relative;
 
width:100%;
 
aspect-ratio:1 / 1;
 
overflow:hidden;
 
border-radius:var(--radius);
 
background:#f7f7f7;
 
margin-bottom:22px;
 
}
 
 
.deniz-card .image-box img{
 
width:100%;
 
height:100%;
 
object-fit:cover;
 
transition:var(--transition);
 
}
 
 
.deniz-card:hover .image-box img{
 
transform:scale(1.08);
 
}
 
 
 
/*=========================
      Product Title
==========================*/
 
.deniz-card h3{
 
font-size:22px;
 
font-weight:700;
 
color:#111;
 
line-height:1.8;
 
margin-bottom:12px;
 
transition:var(--transition);
 
}
 
 
.deniz-card:hover h3{
 
color:#444;
 
}
 
 
 
/*=========================
      Description
==========================*/
 
.deniz-card p{
 
font-size:15px;
 
color:var(--secondary);
 
line-height:2;
 
max-width:280px;
 
margin:0 auto;
 
}
 
 
 
/*=========================
      Read More
==========================*/
 
.deniz-card .read-more{
 
display:inline-flex;
 
align-items:center;
 
justify-content:center;
 
gap:8px;
 
margin-top:18px;
 
font-size:14px;
 
font-weight:bold;
 
color:#555;
 
transition:var(--transition);
 
}
 
 
.deniz-card .read-more::after{
 
content:"←";
 
font-size:18px;
 
transition:var(--transition);
 
}
 
 
.deniz-card:hover .read-more{
 
color:#111;
 
}
 
 
.deniz-card:hover .read-more::after{
 
transform:translateX(-6px);
 
}
 
 
 
/*=========================
      Accessibility Focus
==========================*/
 
.deniz-card a:focus-visible{
 
outline:3px solid #777;
 
outline-offset:5px;
 
}
 
 
 
/*==================================================
            TABLET RESPONSIVE
===================================================*/
 
@media(max-width:1100px){
 
 
.deniz-products{
 
padding:70px 20px;
 
}
 
 
.deniz-heading h2{
 
font-size:38px;
 
}
 
 
.deniz-grid{
 
grid-template-columns:
repeat(2,minmax(240px,1fr));
 
gap:35px;
 
}
 
 
.deniz-card h3{
 
font-size:20px;
 
}
 
 
}
 
 
 
/*==================================================
            MOBILE RESPONSIVE
===================================================*/
 
@media(max-width:600px){
 
 
.deniz-products{
 
padding:45px 15px;
 
}
 
 
 
.deniz-heading{
 
margin-bottom:40px;
 
}
 
 
 
.deniz-heading h2{
 
font-size:28px;
 
}
 
 
 
.deniz-heading::after{
 
width:60px;
 
}
 
 
 
.deniz-grid{
 
grid-template-columns:1fr;
 
gap:28px;
 
}
 
 
 
.deniz-card a{
 
padding:8px;
 
}
 
 
 
.deniz-card .image-box{
 
border-radius:18px;
 
}
 
 
 
.deniz-card h3{
 
font-size:18px;
 
}
 
 
 
.deniz-card p{
 
font-size:14px;
 
}
 
 
 
.deniz-card:hover{
 
transform:none;
 
}
 
 
}
 
 
 
/*==================================================
            SMALL MOBILE
===================================================*/
 
@media(max-width:380px){
 
 
.deniz-heading h2{
 
font-size:24px;
 
}
 
 
.deniz-card h3{
 
font-size:17px;
 
}
 
 
.deniz-card p{
 
font-size:13px;
 
}
 
 
}
/*==================================================
      SEO + PERFORMANCE OPTIMIZATION
===================================================*/
 
/* جلوگیری از پرش محتوا هنگام لود تصاویر */
 
.deniz-card .image-box{
 
contain:layout paint;
 
}
 
 
/* بهینه سازی رندر متن */
 
.deniz-products,
.deniz-products *{
 
-webkit-font-smoothing:antialiased;
 
-moz-osx-font-smoothing:grayscale;
 
}
 
 
 
/*==================================================
      IMAGE SEO SUPPORT
===================================================*/
 
.deniz-card img{
 
loading:lazy;
 
object-fit:cover;
 
}
 
 
 
/*==================================================
      HIGH CONTRAST SUPPORT
===================================================*/
 
@media (prefers-contrast:high){
 
 
.deniz-card h3{
 
color:#000;
 
}
 
 
.deniz-card p{
 
color:#222;
 
}
 
 
.deniz-card a{
 
border:1px solid #333;
 
}
 
 
}
 
 
 
/*==================================================
      REDUCED MOTION ACCESSIBILITY
===================================================*/
 
@media(prefers-reduced-motion:reduce){
 
 
*,
*::before,
*::after{
 
animation-duration:.01ms!important;
 
animation-iteration-count:1!important;
 
transition-duration:.01ms!important;
 
scroll-behavior:auto!important;
 
}
 
 
}
 
 
 
/*==================================================
      DARK MODE SUPPORT
===================================================*/
 
@media(prefers-color-scheme:dark){
 
 
.deniz-products{
 
background:#111;
 
}
 
 
 
.deniz-heading h2{
 
color:#fff;
 
}
 
 
 
.deniz-heading::after{
 
background:#444;
 
}
 
 
 
.deniz-card:hover a{
 
background:#1b1b1b;
 
}
 
 
 
.deniz-card h3{
 
color:#fff;
 
}
 
 
 
.deniz-card p{
 
color:#bbb;
 
}
 
 
 
.deniz-card .image-box{
 
background:#1c1c1c;
 
}
 
 
 
.deniz-card .read-more{
 
color:#ddd;
 
}
 
 
 
}
 
 
 
/*==================================================
      LARGE DESKTOP OPTIMIZATION
===================================================*/
 
@media(min-width:1400px){
 
 
.deniz-products .container{
 
max-width:1450px;
 
}
 
 
 
.deniz-grid{
 
gap:50px;
 
}
 
 
 
.deniz-card h3{
 
font-size:24px;
 
}
 
 
}
 
 
 
/*==================================================
      PRINT OPTIMIZATION
===================================================*/
 
@media print{
 
 
.deniz-products{
 
padding:20px;
 
}
 
 
 
.deniz-card:hover{
 
transform:none;
 
}
 
 
 
.deniz-card a{
 
box-shadow:none!important;
 
background:none!important;
 
}
 
 
 
.deniz-card .read-more{
 
display:none;
 
}
 
 
}
/*==================================================
      PRODUCT BADGE
      (ویژگی / جدید / پرفروش)
===================================================*/
 
.deniz-card .product-badge{
 
position:absolute;
 
top:18px;
 
right:18px;
 
z-index:5;
 
background:#111;
 
color:#fff;
 
font-size:13px;
 
padding:6px 14px;
 
border-radius:30px;
 
font-weight:bold;
 
line-height:1.5;
 
}
 
 
 
/* رنگ‌های مختلف Badge */
 
.deniz-card .product-badge.new{
 
background:#2ecc71;
 
}
 
 
.deniz-card .product-badge.sale{
 
background:#e74c3c;
 
}
 
 
.deniz-card .product-badge.best{
 
background:#f39c12;
 
}
 
 
 
/*==================================================
      PRODUCT FEATURE LIST
===================================================*/
 
 
.deniz-features{
 
margin-top:18px;
 
display:flex;
 
flex-wrap:wrap;
 
justify-content:center;
 
gap:8px;
 
}
 
 
 
.deniz-features span{
 
background:#f6f6f6;
 
border-radius:20px;
 
padding:5px 12px;
 
font-size:12px;
 
color:#555;
 
transition:var(--transition);
 
}
 
 
 
.deniz-card:hover .deniz-features span{
 
background:#fff;
 
box-shadow:0 5px 15px rgba(0,0,0,.06);
 
}
 
 
 
/*==================================================
      PRODUCT BUTTON
===================================================*/
 
 
.deniz-card .product-btn{
 
display:inline-flex;
 
align-items:center;
 
justify-content:center;
 
margin-top:22px;
 
padding:10px 28px;
 
border-radius:30px;
 
background:#111;
 
color:#fff;
 
font-size:14px;
 
font-weight:bold;
 
transition:var(--transition);
 
}
 
 
 
.deniz-card .product-btn:hover{
 
background:#333;
 
transform:translateY(-3px);
 
}
 
 
 
/*==================================================
      FEATURED PRODUCT CARD
===================================================*/
 
 
.deniz-card.featured a{
 
background:#fafafa;
 
box-shadow:
 
0 10px 30px rgba(0,0,0,.08);
 
}
 
 
 
.deniz-card.featured:hover a{
 
box-shadow:
 
0 20px 45px rgba(0,0,0,.15);
 
}
 
 
 
/*==================================================
      PRODUCT IMAGE OVERLAY
===================================================*/
 
 
.deniz-card .image-overlay{
 
position:absolute;
 
inset:0;
 
background:linear-gradient(
 
to top,
 
rgba(0,0,0,.35),
 
transparent 60%
 
);
 
opacity:0;
 
transition:var(--transition);
 
}
 
 
 
.deniz-card:hover .image-overlay{
 
opacity:1;
 
}
 
 
 
/*==================================================
      ICON SUPPORT
===================================================*/
 
 
.deniz-icon{
 
width:45px;
 
height:45px;
 
display:flex;
 
align-items:center;
 
justify-content:center;
 
margin:0 auto 15px;
 
border-radius:50%;
 
background:#f4f4f4;
 
color:#222;
 
font-size:20px;
 
transition:var(--transition);
 
}
 
 
 
.deniz-card:hover .deniz-icon{
 
transform:translateY(-5px);
 
background:#111;
 
color:#fff;
 
}
 
 
 
/*==================================================
      MOBILE CARD IMPROVEMENT
===================================================*/
 
@media(max-width:600px){
 
 
.deniz-card .product-badge{
 
top:12px;
 
right:12px;
 
font-size:11px;
 
padding:5px 10px;
 
}
 
 
 
.deniz-features span{
 
font-size:11px;
 
padding:4px 9px;
 
}
 
 
 
.deniz-card .product-btn{
 
width:100%;
 
padding:9px 20px;
 
}
 
 
}
 
 
 
<div class="poly-menu-container">
     <nav class="poly-nav" aria-label="گروه اهدای مثبت بخشنده">
        <ul>
            <li><a href="/wiki/اصلی">اصلی</a></li>
            <li><a href="/wiki/مخزن_پلی_اتیلن_آب_شرب">مخزن آب شرب</a></li>
            <li><a href="/wiki/مخزن_پلی_اتیلن_صنعتی">مخزن صنعتی</a></li>
           
            <!-- بخش منوی کشویی -->
            <li class="dropdown">
                <a href="/wiki/انواع_مخزن_پلی_اتیلن">انواع و ظرفیت‌ها ▾</a>
                <div class="dropdown-content">
                    <a href="/wiki/مخزن_یک_قسمتی">مخزن یک قسمتی</a>
                    <a href="/wiki/مخزن_دو_قسمتی">مخزن دو قسمتی</a>
                    <a href="/wiki/مخزن_سه_قسمتی">مخزن سه قسمتی</a>
                    <a href="/wiki/مخزن_پلی_اتیلن_بزرگ">مخازن با ظرفیت بالا</a>
                </div>
            </li>
 
            <li><a href="/wiki/قیمت_مخزن_پلی_اتیلن">استعلام قیمت</a></li>
            <li><a href="/wiki/راهنمای_خرید_مخزن">راهنمای خرید</a></li>
        </ul>
    </nav>
</div>


</section>


</html>
</html>
[[رده:در حال ویرایش جاوید]]

نسخهٔ کنونی تا ‏۱۶ اوت ۲۰۲۶، ساعت ۰۵:۵۸