پرش به محتوا

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

از فراغیب
تفاوت با ویرایش جدیدتر ←
دیداریویکی‌متن
صفحه‌ای تازه حاوی «<html> ←========================================== Deniz Door Products SEO | Responsive | IRANSans ===========================================: @font-face{ font-family:'IRANSans'; src:url('/fonts/IRANSans.woff2') format('woff2'), url('/fonts/IRANSans.woff') format('woff'); font-display:swap; } :root{ --primary:#1f2937; --secondary:#555; --light:#ffffff; --border:#ececec; --hover:#f8f9fa;...» ایجاد کرد
 
بدون خلاصۀ ویرایش
خط ۱: خط ۱:
<html>
<html>


/*==========================================
/*=====================================================
  Deniz Door Products
  Deniz Door Products Section
  SEO | Responsive | IRANSans
  Version : 2.0
===========================================*/
  Responsive + SEO + Accessibility
======================================================*/
 
@charset "UTF-8";
 
/*-------------------------
    IRANSans Font
--------------------------*/
 
@font-face{
@font-face{
     font-family:'IRANSans';
     font-family:'IRANSans';
خط ۱۰: خط ۱۸:
         url('/fonts/IRANSans.woff') format('woff');
         url('/fonts/IRANSans.woff') format('woff');
     font-display:swap;
     font-display:swap;
    font-weight:normal;
}
}
@font-face{
    font-family:'IRANSans';
    src:url('/fonts/IRANSans-Bold.woff2') format('woff2'),
        url('/fonts/IRANSans-Bold.woff') format('woff');
    font-display:swap;
    font-weight:bold;
}
/*-------------------------
    Variables
--------------------------*/
:root{
:root{
    --primary:#1f2937;
 
    --secondary:#555;
--primary:#222222;
    --light:#ffffff;
--secondary:#666666;
    --border:#ececec;
--border:#ececec;
    --hover:#f8f9fa;
--bg:#ffffff;
    --shadow:0 10px 28px rgba(0,0,0,.08);
--hover:#fafafa;
    --shadow-hover:0 18px 40px rgba(0,0,0,.14);
--radius:22px;
 
--shadow:
0 8px 20px rgba(0,0,0,.06);
 
--shadow-hover:
0 18px 40px rgba(0,0,0,.12);
 
--transition:.35s ease;
 
}
}
*{
 
    margin:0;
/*-------------------------
    padding:0;
    Reset
    box-sizing:border-box;
--------------------------*/
 
*,
*::before,
*::after{
 
margin:0;
padding:0;
box-sizing:border-box;
 
}
}
html{
html{
    scroll-behavior:smooth;
 
font-size:16px;
scroll-behavior:smooth;
 
}
}
body{
body{
    direction:rtl;
 
    font-family:'IRANSans',Tahoma,sans-serif;
font-family:'IRANSans',Tahoma,sans-serif;
    background:#fff;
direction:rtl;
    color:var(--primary);
background:#fff;
    line-height:2;
color:var(--primary);
line-height:2;
overflow-x:hidden;
text-rendering:optimizeLegibility;
 
}
}
img{
img{
    max-width:100%;
 
    display:block;
display:block;
max-width:100%;
height:auto;
 
}
}
a{
a{
    color:inherit;
 
    text-decoration:none;
text-decoration:none;
color:inherit;
 
}
 
ul{
 
list-style:none;
 
}
 
/*==================================================
            PRODUCTS SECTION
===================================================*/
 
.deniz-products{
 
padding:90px 20px;
background:#fff;
position:relative;
 
}
 
.deniz-products .container{
 
max-width:1320px;
margin:auto;
 
}
 
/*=========================
      Heading
==========================*/
 
.deniz-heading{
 
text-align:center;
margin-bottom:70px;
 
}
 
.deniz-heading h2{
 
font-size:46px;
font-weight:700;
color:#111;
line-height:1.3;
 
}
 
.deniz-heading::after{
 
content:"";
display:block;
 
width:90px;
height:2px;
 
background:#d9d9d9;
 
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);
 
}
}
.products-section{
/*=========================
    width:100%;
      Image Area
    padding:70px 20px;
==========================*/
    background:#fff;
 
.deniz-card .image-box{
 
position:relative;
 
width:100%;
 
aspect-ratio:1 / 1;
 
overflow:hidden;
 
border-radius:var(--radius);
 
background:#f7f7f7;
 
margin-bottom:22px;
 
}
}
.products-container{
 
    max-width:1350px;
 
    margin:auto;
.deniz-card .image-box img{
 
width:100%;
 
height:100%;
 
object-fit:cover;
 
transition:var(--transition);
 
}
}
.products-header{
 
    text-align:center;
 
    margin-bottom:55px;
.deniz-card:hover .image-box img{
 
transform:scale(1.08);
 
}
}
.products-header h2{
 
    font-size:48px;
 
    font-weight:800;
 
    color:#111;
/*=========================
    line-height:1.4;
      Product Title
==========================*/
 
.deniz-card h3{
 
font-size:22px;
 
font-weight:700;
 
color:#111;
 
line-height:1.8;
 
margin-bottom:12px;
 
transition:var(--transition);
 
}
}
.products-header span{
 
    display:block;
 
    width:140px;
.deniz-card:hover h3{
    height:2px;
 
    background:#e6e6e6;
color:#444;
    margin:18px auto 0;
 
}
}
.products-grid{
 
    display:grid;
 
    grid-template-columns:repeat(4,1fr);
 
    gap:35px;
/*=========================
      Description
==========================*/
 
.deniz-card p{
 
font-size:15px;
 
color:var(--secondary);
 
line-height:2;
 
max-width:280px;
 
margin:0 auto;
 
}
}
.product-card{
 
    text-align:center;
 
    transition:.35s;
 
    border-radius:18px;
/*=========================
    padding:10px 12px 20px;
      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);
 
}
}
.product-card:hover{
 
    background:var(--hover);
 
    transform:translateY(-8px);
.deniz-card .read-more::after{
    box-shadow:var(--shadow-hover);
 
content:"←";
 
font-size:18px;
 
transition:var(--transition);
 
}
}
.product-image{
 
    width:210px;
 
    height:210px;
.deniz-card:hover .read-more{
    margin:0 auto 22px;
 
    border-radius:50%;
color:#111;
    overflow:hidden;
 
    border:1px solid #ededed;
    box-shadow:var(--shadow);
}
}
.product-image img{
 
    width:100%;
 
    height:100%;
.deniz-card:hover .read-more::after{
    object-fit:cover;
 
    transition:.45s;
transform:translateX(-6px);
 
}
}
.product-card:hover img{
 
    transform:scale(1.08);
 
 
/*=========================
      Accessibility Focus
==========================*/
 
.deniz-card a:focus-visible{
 
outline:3px solid #777;
 
outline-offset:5px;
 
}
}
.product-card h3{
 
    font-size:30px;
 
    margin-bottom:18px;
 
    color:#222;
/*==================================================
    font-weight:800;
            TABLET RESPONSIVE
===================================================*/
 
@media(max-width:1100px){
 
 
.deniz-products{
 
padding:70px 20px;
 
}
}
.product-card p{
 
    color:var(--secondary);
 
    font-size:17px;
.deniz-heading h2{
    text-align:justify;
 
    line-height:2.2;
font-size:38px;
 
}
}
.product-card strong{
 
    color:#111;
 
    font-weight:800;
.deniz-grid{
 
grid-template-columns:
repeat(2,minmax(240px,1fr));
 
gap:35px;
 
}
}
.product-card p::selection{
 
    background:#222;
 
    color:#fff;
.deniz-card h3{
 
font-size:20px;
 
}
}
.product-image img{
 
    aspect-ratio:1/1;
 
}
}
.product-card figure{
 
    margin:0;
 
 
/*==================================================
            MOBILE RESPONSIVE
===================================================*/
 
@media(max-width:600px){
 
 
.deniz-products{
 
padding:45px 15px;
 
}
}
.product-card figcaption{
 
    padding:0 8px;
 
 
.deniz-heading{
 
margin-bottom:40px;
 
}
}
/*==========================================
 
    Responsive Design
 
===========================================*/
 
@media (max-width:1200px){
.deniz-heading h2{
    .products-grid{
 
        grid-template-columns:repeat(2,1fr);
font-size:28px;
        gap:40px;
 
    }
    .product-image{
        width:190px;
        height:190px;
    }
    .product-card h3{
        font-size:28px;
    }
}
}
@media (max-width:768px){
 
    .products-section{
 
        padding:55px 18px;
 
    }
.deniz-heading::after{
    .products-header{
 
        margin-bottom:40px;
width:60px;
    }
 
    .products-header h2{
        font-size:38px;
    }
    .products-grid{
        grid-template-columns:1fr;
        gap:45px;
    }
    .product-card{
        max-width:480px;
        margin:auto;
    }
    .product-image{
        width:180px;
        height:180px;
    }
    .product-card h3{
        font-size:26px;
    }
    .product-card p{
        font-size:16px;
        line-height:2.1;
    }
}
}
@media (max-width:480px){
 
    .products-section{
 
        padding:45px 15px;
 
    }
.deniz-grid{
    .products-header h2{
 
        font-size:32px;
grid-template-columns:1fr;
    }
 
    .products-header span{
gap:28px;
        width:110px;
 
    }
    .product-image{
        width:155px;
        height:155px;
    }
    .product-card{
        padding:0;
    }
    .product-card h3{
        font-size:23px;
        margin-bottom:12px;
    }
    .product-card p{
        font-size:15px;
        text-align:right;
        line-height:2;
    }
}
}
/*==========================================
 
    Accessibility
 
===========================================*/
 
.product-card a{
.deniz-card a{
    display:block;
 
    outline:none;
padding:8px;
    border-radius:18px;
 
}
}
.product-card a:focus-visible{
 
    box-shadow:0 0 0 4px rgba(0,102,204,.25);
 
 
.deniz-card .image-box{
 
border-radius:18px;
 
}
}
/*==========================================
 
    Performance
 
===========================================*/
 
.product-image img{
.deniz-card h3{
    content-visibility:auto;
 
font-size:18px;
 
}
}
/*==========================================
 
    Print
 
===========================================*/
 
.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{
@media print{
    .products-section{
 
        padding:0;
 
    }
.deniz-products{
    .product-card{
 
        break-inside:avoid;
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;
 
}
}
/*==========================================
 
    End CSS
 
===========================================*/
 
<section class="products-section" aria-labelledby="products-title">
/*==================================================
    <div class="products-container">
      ICON SUPPORT
        <header class="products-header">
===================================================*/
            <h2 id="products-title">محصولات</h2>
 
            <span aria-hidden="true"></span>
 
        </header>
.deniz-icon{
        <div class="products-grid">
 
            <!-- درب ضد حریق -->
width:45px;
            <article class="product-card">
 
                <a href="/fire-door"
height:45px;
                  title="درب ضد حریق دنیز درب">
 
                    <figure class="product-image">
display:flex;
                        <img
 
                            src="images/fire-door.webp"
align-items:center;
                            alt="درب ضد حریق دنیز درب"
 
                            width="210"
justify-content:center;
                            height="210"
 
                            loading="lazy"
margin:0 auto 15px;
                            decoding="async">
 
                    </figure>
border-radius:50%;
                    <figcaption>
 
                        <h3>درب ضد حریق</h3>
background:#f4f4f4;
                        <p>
 
                            <strong>دنیز درب</strong> تولیدکننده انواع درب ضد حریق استاندارد با مقاومت بالا در برابر آتش است. این محصولات با استفاده از متریال باکیفیت، امنیت ساختمان را افزایش داده و مطابق استانداردهای روز، از گسترش حریق جلوگیری می‌کنند.
color:#222;
                        </p>
 
                    </figcaption>
font-size:20px;
                </a>
 
            </article>
transition:var(--transition);
            <!-- درب اتاقی -->
 
            <article class="product-card">
                <a href="/room-door"
                  title="درب اتاقی دنیز درب">
                    <figure class="product-image">
                        <img
                            src="images/room-door.webp"
                            alt="درب اتاقی دنیز درب"
                            width="210"
                            height="210"
                            loading="lazy"
                            decoding="async">
                    </figure>
                    <figcaption>
                        <h3>درب اتاقی</h3>
                        <p>
                            <strong>دنیز درب</strong> انواع درب اتاقی مدرن، کلاسیک و لوکس را با طراحی متنوع و کیفیت ساخت بالا تولید می‌کند تا زیبایی و دوام را در کنار هم برای فضای داخلی ساختمان فراهم کند.
                        </p>
                    </figcaption>
                </a>
            </article>
            <!-- درب سفارشی -->
            <article class="product-card">
                <a href="/custom-door"
                  title="درب سفارشی دنیز درب">
                    <figure class="product-image">
                        <img
                            src="images/custom-door.webp"
                            alt="درب سفارشی دنیز درب"
                            width="210"
                            height="210"
                            loading="lazy"
                            decoding="async">
                    </figure>
                    <figcaption>
                        <h3>درب سفارشی</h3>
                        <p>
                            <strong>دنیز درب</strong> امکان طراحی و تولید انواع درب سفارشی را مطابق ابعاد، رنگ، سبک معماری و نیاز پروژه فراهم کرده است تا محصول نهایی کاملاً مطابق سلیقه مشتری باشد.
                        </p>
                    </figcaption>
                </a>
            </article>
            <!-- درب ضد سرقت -->
            <article class="product-card">
                <a href="/security-door"
                  title="درب ضد سرقت دنیز درب">
                    <figure class="product-image">
                        <img
                            src="images/security-door.webp"
                            alt="درب ضد سرقت دنیز درب"
                            width="210"
                            height="210"
                            loading="lazy"
                            decoding="async">
                    </figure>
                    <figcaption>
                        <h3>درب ضد سرقت</h3>
                        <p>
                            <strong>دنیز درب</strong> با تولید درب‌های ضد سرقت مجهز به قفل‌های ایمن، چهارچوب تقویت‌شده و متریال استاندارد، امنیت و زیبایی را به صورت همزمان برای ساختمان‌های مسکونی، اداری و تجاری فراهم می‌کند.
                        </p>
                    </figcaption>
                </a>
            </article>
        </div>
    </div>
</section>
<!-- ==========================================
      SEO Meta Tags
=========================================== -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>محصولات دنیز درب | تولید کننده درب ضد سرقت، درب ضد حریق، درب اتاقی و درب سفارشی</title>
<meta name="description" content="دنیز درب تولید کننده انواع درب ضد سرقت، درب ضد حریق، درب اتاقی و درب سفارشی با کیفیت بالا، طراحی مدرن، قیمت مناسب و ارسال به سراسر ایران.">
<meta name="keywords" content="دنیز درب, درب ضد سرقت, درب ضد حریق, درب اتاقی, درب سفارشی, تولید کننده درب, خرید درب ضد سرقت, قیمت درب ضد سرقت">
<meta name="robots" content="index,follow,max-image-preview:large">
<meta name="author" content="Deniz Door">
<meta name="theme-color" content="#ffffff">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" href="/fonts/IRANSans.woff2" as="font" type="font/woff2" crossorigin>
<link rel="canonical" href="https://example.com/products">
<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:title" content="محصولات دنیز درب">
<meta property="og:description" content="تولید کننده انواع درب ضد سرقت، درب ضد حریق، درب اتاقی و درب سفارشی">
<meta property="og:image" content="https://example.com/images/cover.webp">
<meta property="og:locale" content="fa_IR">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<!-- ==========================================
      Structured Data (Schema.org)
=========================================== -->
<script type="application/ld+json">
{
"@context":"https://schema.org",
"@type":"ItemList",
"name":"محصولات دنیز درب",
"itemListElement":[
{
"@type":"Product",
"position":1,
"name":"درب ضد حریق",
"brand":{
"@type":"Brand",
"name":"دنیز درب"
}
}
},
 
{
 
"@type":"Product",
 
"position":2,
.deniz-card:hover .deniz-icon{
"name":"درب اتاقی",
 
"brand":{
transform:translateY(-5px);
"@type":"Brand",
 
"name":"دنیز درب"
background:#111;
 
color:#fff;
 
}
}
},
 
{
 
"@type":"Product",
 
"position":3,
/*==================================================
"name":"درب سفارشی",
      MOBILE CARD IMPROVEMENT
"brand":{
===================================================*/
"@type":"Brand",
 
"name":"دنیز درب"
@media(max-width:600px){
 
 
.deniz-card .product-badge{
 
top:12px;
 
right:12px;
 
font-size:11px;
 
padding:5px 10px;
 
}
}
},
 
{
 
"@type":"Product",
 
"position":4,
.deniz-features span{
"name":"درب ضد سرقت",
 
"brand":{
font-size:11px;
"@type":"Brand",
 
"name":"دنیز درب"
padding:4px 9px;
 
}
}
.deniz-card .product-btn{
width:100%;
padding:9px 20px;
}
}
]
 
 
}
}
</script>
 
<!-- ==========================================
 
      پیشنهاد برای تصاویر
 
=========================================== -->
<div class="poly-menu-container">
<!--
    <nav class="poly-nav" aria-label="گروه اهدای مثبت بخشنده">
فرمت تصاویر:
        <ul>
WEBP
            <li><a href="/wiki/اصلی">اصلی</a></li>
ابعاد:
            <li><a href="/wiki/مخزن_پلی_اتیلن_آب_شرب">مخزن آب شرب</a></li>
700×700
            <li><a href="/wiki/مخزن_پلی_اتیلن_صنعتی">مخزن صنعتی</a></li>
حجم:
           
کمتر از 80KB
            <!-- بخش منوی کشویی -->
loading="lazy"
            <li class="dropdown">
decoding="async"
                <a href="/wiki/انواع_مخزن_پلی_اتیلن">انواع و ظرفیت‌ها ▾</a>
fetchpriority="low"
                <div class="dropdown-content">
-->
                    <a href="/wiki/مخزن_یک_قسمتی">مخزن یک قسمتی</a>
<!-- ==========================================
                    <a href="/wiki/مخزن_دو_قسمتی">مخزن دو قسمتی</a>
      کلاس Active برای Hover نرم
                    <a href="/wiki/مخزن_سه_قسمتی">مخزن سه قسمتی</a>
=========================================== -->
                    <a href="/wiki/مخزن_پلی_اتیلن_بزرگ">مخازن با ظرفیت بالا</a>
<script>
                </div>
document.querySelectorAll('.product-card').forEach(card=>{
            </li>
card.addEventListener('mouseenter',()=>card.classList.add('active'));
 
card.addEventListener('mouseleave',()=>card.classList.remove('active'));
            <li><a href="/wiki/قیمت_مخزن_پلی_اتیلن">استعلام قیمت</a></li>
});
            <li><a href="/wiki/راهنمای_خرید_مخزن">راهنمای خرید</a></li>
</script>
        </ul>
    </nav>
</div>




</html>
</html>

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

/*===================================================== Deniz Door Products Section Version : 2.0 Responsive + SEO + Accessibility ======================================================*/ @charset "UTF-8"; /*------------------------- IRANSans Font --------------------------*/ @font-face{ font-family:'IRANSans'; src:url('/fonts/IRANSans.woff2') format('woff2'), url('/fonts/IRANSans.woff') format('woff'); font-display:swap; font-weight:normal; } @font-face{ font-family:'IRANSans'; src:url('/fonts/IRANSans-Bold.woff2') format('woff2'), url('/fonts/IRANSans-Bold.woff') format('woff'); font-display:swap; font-weight:bold; } /*------------------------- Variables --------------------------*/ :root{ --primary:#222222; --secondary:#666666; --border:#ececec; --bg:#ffffff; --hover:#fafafa; --radius:22px; --shadow: 0 8px 20px rgba(0,0,0,.06); --shadow-hover: 0 18px 40px rgba(0,0,0,.12); --transition:.35s ease; } /*------------------------- Reset --------------------------*/ *, *::before, *::after{ margin:0; padding:0; box-sizing:border-box; } html{ font-size:16px; scroll-behavior:smooth; } body{ font-family:'IRANSans',Tahoma,sans-serif; direction:rtl; background:#fff; color:var(--primary); line-height:2; overflow-x:hidden; text-rendering:optimizeLegibility; } img{ display:block; max-width:100%; height:auto; } a{ text-decoration:none; color:inherit; } ul{ list-style:none; } /*================================================== PRODUCTS SECTION ===================================================*/ .deniz-products{ padding:90px 20px; background:#fff; position:relative; } .deniz-products .container{ max-width:1320px; margin:auto; } /*========================= Heading ==========================*/ .deniz-heading{ text-align:center; margin-bottom:70px; } .deniz-heading h2{ font-size:46px; font-weight:700; color:#111; line-height:1.3; } .deniz-heading::after{ content:""; display:block; width:90px; height:2px; background:#d9d9d9; 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; } }

برگرفته از «https://fa.faraghaib.ir/w/index.php?title=الگو:محصولات_دایره_ای&oldid=4751»