فراغیب

الگو:محصولات دایره ای: تفاوت میان نسخه‌ها

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


     <div class="container">
     <div class="container">


        <header class="section-header">
     
            <h2 id="products-title">محصولات</h2>
        </header>
 
         <div class="products-grid">
         <div class="products-grid">


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


                 <a href="/security-door/" title="درب ضد سرقت">
                 <a href="/security-door/" title="چاپ و تبلیغات">


                     <figure>
                     <figure>


                         <img
                         <img
                             src="images/security-door.webp"
                             src="https://dl.faraghaib.ir/m/260005/26000515.png"
                             alt="درب ضد سرقت سام درب"
                             alt="چاپ و تبلیغات"
                             loading="lazy"
                             loading="lazy"
                             width="260"
                             width="260"
خط ۲۶: خط ۲۳:
                     </figure>
                     </figure>


                     <h3>درب ضد سرقت</h3>
                     <h3>چاپ هولوگرام</h3>


                     <p>
                     <p>
                         تولید و فروش انواع درب ضد سرقت با استفاده از بهترین
                         چاپ هولوگرام امنیتی با کیفیت بالا برای افزایش اصالت برند و جلوگیری از جعل
                        متریال، قفل‌های ایمن و استانداردهای روز دنیا.
                     </p>
                     </p>


خط ۳۷: خط ۳۳:
             </article>
             </article>


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


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


                 <a href="/custom-door/" title="درب سفارشی">
                 <a href="/custom-door/" title="چاپ پوستر">


                     <figure>
                     <figure>


                         <img
                         <img
                             src="images/custom-door.webp"
                             src="https://dl.faraghaib.ir/m/260005/26000525.png"
                             alt="درب سفارشی"
                             alt="چاپ پوستر"
                             loading="lazy"
                             loading="lazy"
                             width="260"
                             width="260"
خط ۵۴: خط ۵۰:
                     </figure>
                     </figure>


                     <h3>درب سفارشی</h3>
                     <h3>چاپ پوستر</h3>


                     <p>
                     <p>
                         طراحی و تولید انواع درب سفارشی مطابق نیاز پروژه‌های
                         چاپ پوستر با کیفیت بالا، رنگ‌های زنده و ماندگاری عالی برای تبلیغات مؤثر
                        ساختمانی و معماری.
                     </p>
                     </p>


خط ۶۵: خط ۶۰:
             </article>
             </article>


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


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


                 <a href="/room-door/" title="درب اتاقی">
                 <a href="/room-door/" title="چاپ تراکت">


                     <figure>
                     <figure>


                         <img
                         <img
                             src="images/room-door.webp"
                             src="https://dl.faraghaib.ir/m/260005/26000520.png"
                             alt="درب اتاقی"
                             alt="چاپ تراکت"


                             loading="lazy"
                             loading="lazy"
خط ۸۵: خط ۸۰:
                     </figure>
                     </figure>


                     <h3>درب اتاقی</h3>
                     <h3>چاپ تراکت</h3>


                     <p>
                     <p>
                        انواع درب اتاقی مدرن و کلاسیک با کیفیت بالا و طراحی
                      چاپ تراکت تبلیغاتی با کیفیت بالا و تحویل سریع برای معرفی مؤثر کسب‌وکار شما
                        متنوع.
                     </p>
                     </p>


خط ۹۶: خط ۹۰:
             </article>
             </article>


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


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


                 <a href="/fire-door/" title="درب ضد حریق">
                 <a href="/fire-door/" title="طراحی حرفه ای لوگو">


                     <figure>
                     <figure>


                         <img
                         <img
                             src="images/fire-door.webp"
                             src="https://dl.faraghaib.ir/m/260005/26000526.png"
                             alt="درب ضد حریق"
                             alt="طراحی حرفه ای لوگو"


                             loading="lazy"
                             loading="lazy"
خط ۱۱۶: خط ۱۱۰:
                     </figure>
                     </figure>


                     <h3>درب ضد حریق</h3>
                     <h3>طراحی حرفه ای لوگو</h3>


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


خط ۱۳۲: خط ۱۲۵:


</section>
</section>
.products-section{
    padding:70px 15px;
    background:#fff;
}
.container{
    max-width:1300px;
    margin:auto;
}
.section-header{
    text-align:center;
    margin-bottom:55px;
}
.section-header h2{
    font-size:42px;
    font-weight:700;
    color:#111;
    position:relative;
    display:inline-block;
}
.section-header h2::after{
    content:"";
    display:block;
    width:80px;
    height:3px;
    background:#e6e6e6;
    margin:15px auto 0;
}
.products-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:40px;
}
.product-card{
    text-align:center;
    transition:.35s;
}
.product-card a{
    color:#333;
    text-decoration:none;
    display:block;
}
.product-card figure{
    width:190px;
    height:190px;
    margin:0 auto 25px;
    border-radius:50%;
    overflow:hidden;
    transition:.4s;
}
.product-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.5s;
}
.product-card h3{
    font-size:29px;
    margin-bottom:18px;
    color:#222;
}
.product-card p{
    line-height:2;
    color:#666;
    font-size:17px;
}
.product-card:hover figure{
    transform:translateY(-8px);
    box-shadow:0 18px 40px rgba(0,0,0,.18);
}
.product-card:hover img{
    transform:scale(1.08);
}
.product-card:hover h3{
    color:#b48b45;
}
.products-section{
    padding:70px 15px;
    background:#fff;
}
.container{
    max-width:1300px;
    margin:auto;
}
.section-header{
    text-align:center;
    margin-bottom:55px;
}
.section-header h2{
    font-size:42px;
    font-weight:700;
    color:#111;
    position:relative;
    display:inline-block;
}
.section-header h2::after{
    content:"";
    display:block;
    width:80px;
    height:3px;
    background:#e6e6e6;
    margin:15px auto 0;
}
.products-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:40px;
}
.product-card{
    text-align:center;
    transition:.35s;
}
.product-card a{
    color:#333;
    text-decoration:none;
    display:block;
}
.product-card figure{
    width:190px;
    height:190px;
    margin:0 auto 25px;
    border-radius:50%;
    overflow:hidden;
    transition:.4s;
}
.product-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.5s;
}
.product-card h3{
    font-size:29px;
    margin-bottom:18px;
    color:#222;
}
.product-card p{
    line-height:2;
    color:#666;
    font-size:17px;
}
.product-card:hover figure{
    transform:translateY(-8px);
    box-shadow:0 18px 40px rgba(0,0,0,.18);
}
.product-card:hover img{
    transform:scale(1.08);
}
.product-card:hover h3{
    color:#b48b45;
}


</html>
</html>
[[رده:در حال ویرایش جاوید]]
برگرفته از «https://fa.faraghaib.ir/wiki/الگو:محصولات_دایره_ای»