پرش به محتوا

تست برای چاپ - فراغیب

از فراغیب
→ تفاوت با ویرایش قدیمی‌تر
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
برچسب: واگردانی دستی
 
(۸ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۱: خط ۱:
<div class="patogh-menu-grid">
  {{کارت_پاتوق
    | بج = محبوب
    | نام = چای مخصوص پاتوق
    | توضیحات = چای تازه‌دم سنتی، سرو در استکان کمرباریک.
    | امتیاز = ۴.۹
    | قیمت = ۳۵,۰۰۰
  }}


<html lang="fa" dir="rtl">
  {{کارت_پاتوق
 
    | بج = محبوب
<head>
    | نام = املت مخصوص
 
     | توضیحات = املت گوجه‌فرنگی داغ با نان سنگک برشته.
<meta charset="UTF-8">
    | امتیاز = ۴.۸
 
    | قیمت = ۶۵,۰۰۰
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  }}
 
<title>
ساخت دستگاه صنعتی | طراحی و تولید ماشین آلات صنعتی سفارشی
</title>
 
<meta name="description"
content="
طراحی و ساخت دستگاه صنعتی سفارشی، ماشین آلات صنعتی،
تجهیزات خطوط تولید، اتوماسیون صنعتی و ساخت تجهیزات کارخانه با کیفیت مهندسی.
">
 
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
 
 
<style>
 
/* ===============================
  FONT
================================ */
 
@font-face{
 
font-family:IRANSans;
 
src:url("fonts/IRANSans.woff2");
 
}
 
 
 
*{
 
box-sizing:border-box;
 
margin:0;
 
padding:0;
 
}
 
 
body{
 
font-family:IRANSans,Tahoma,sans-serif;
 
direction:rtl;
 
background:#fff;
 
color:#222;
 
}
 
 
img{
 
max-width:100%;
 
display:block;
 
}
 
 
a{
 
text-decoration:none;
 
color:inherit;
 
}
 
 
.container{
 
width:92%;
 
max-width:1200px;
 
margin:auto;
 
}
 
 
 
/* ===============================
HEADER
================================ */
 
 
.header{
 
position:absolute;
 
top:0;
 
right:0;
 
width:100%;
 
z-index:20;
 
color:white;
 
}
 
 
 
.header-box{
 
height:75px;
 
display:flex;
 
align-items:center;
 
justify-content:space-between;
 
}
 
 
.logo{
 
font-size:24px;
 
font-weight:bold;
 
}
 
 
 
.logo span{
 
color:#f32845;
 
}
 
 
 
.menu-btn{
 
background:none;
 
border:none;
 
color:white;
 
font-size:25px;
 
cursor:pointer;
 
}
 
 
 
.nav{
 
display:none;
 
}
 
 
 
.nav a{
 
font-size:13px;
 
padding:10px;
 
}
 
 
 
.header-contact{
 
display:none;
 
background:white;
 
color:#222;
 
padding:8px 20px;
 
border-radius:5px;
 
font-size:12px;
 
}
 
 
 
/* ===============================
HERO
================================ */
 
 
.hero{
 
height:540px;
 
position:relative;
 
background:
 
linear-gradient(
rgba(0,0,0,.75),
rgba(0,0,0,.75)
),
 
url("images/industrial-bg.jpg");
 
background-size:cover;
 
background-position:center;
 
display:flex;
 
align-items:center;
 
justify-content:center;
 
text-align:center;
 
color:white;
 
overflow:hidden;
 
}
 
 
 
.hero:after{
 
content:"";
 
position:absolute;
 
bottom:-45px;
 
right:-5%;
 
width:110%;
 
height:90px;
 
background:#fff;
 
border-radius:50% 50% 0 0;
 
}
 
 
 
.hero-content{
 
width:90%;
 
max-width:700px;
 
}
 
 
 
.hero-small{
 
font-size:14px;
 
margin-bottom:15px;
 
}
 
 
 
.hero h1{
 
font-size:36px;
 
line-height:1.6;
 
margin-bottom:15px;
 
}
 
 
 
.hero p{
 
font-size:13px;
 
line-height:2;
 
color:#ddd;
 
margin-bottom:25px;
 
}
 
 
 
.main-btn{
 
display:inline-flex;
 
background:white;
 
color:#222;
 
padding:12px 30px;
 
border-radius:4px;
 
font-size:13px;
 
font-weight:bold;
 
}
 
 
 
 
/* ===============================
SERVICES
================================ */
 
 
.services{
 
padding:45px 0 30px;
 
}
 
 
 
.services-grid{
 
display:grid;
 
grid-template-columns:repeat(2,1fr);
 
gap:35px 15px;
 
}
 
 
 
.service{
 
text-align:center;
 
}
 
 
 
.service-icon{
 
width:70px;
 
height:70px;
 
border-radius:50%;
 
margin:auto;
 
background:#111;
 
color:white;
 
display:flex;
 
align-items:center;
 
justify-content:center;
 
font-size:28px;
 
border:3px solid white;
 
outline:2px solid #ff9aaa;
 
}
 
 
 
.service h3{
 
font-size:13px;
 
margin-top:15px;
 
font-weight:normal;
 
}
 
 
 
 
/* ===============================
ABOUT
================================ */
 
 
.about{
 
      
    color: #FFF8C9;
 
      text-align:center;
 
      padding:45px 0;
 
}
 
 
.my-div {
    position: relative;
    width: 100%;
    min-height: 220px;
 
    background:
        url("https://dl.faraghaib.ir/m/260023-01/260023-01-13.png")
        center / cover
        no-repeat;
}
 
/* لایه خاکستری شفاف */
.my-div::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(80, 80, 80, 0.5);
}
 
/* محتوای روی تصویر */
.my-div > * {
    position: relative;
    z-index: 1;
}
 
/* تبلت */
@media (min-width: 768px) {
    .my-div {
        min-height: 300px;
    }
}
 
/* دسکتاپ */
@media (min-width: 1024px) {
    .my-div {
        min-height: 400px;
    }
}
 
 
 
.about p{
 
font-size:13px;
 
line-height:2.3;
 
margin-bottom:15px;
 
}
 
 
.about .main-btn{
 
margin-top:15px;
 
}
 
 
 
 
/* ===============================
TABLET
================================ */
 
 
@media(min-width:768px){
 
 
.services-grid{
 
grid-template-columns:repeat(4,1fr);
 
}
 
 
 
.hero h1{
 
font-size:55px;
 
}
 
 
 
}
 
 
 
</style>
 
 
</head>
 
 
 
<body>
 
 
 
<header >
 
 
<div >
 
</html>
{{منوی اصلی/اقای علیرضایی}}
{{هدر منحنی/علیرضایی}}
 
<html>
 
</div>
 
</header>
 
<section class="services">
 
 
<div class="container">
 
 
<div class="services-grid">
 
 
 
<div class="service">
 
 
<div class="service-icon">
 
<i class="fa-solid fa-gears"></i>
 
</div>
 
 
<h3>
 
ساخت دستگاه صنعتی
 
</h3>
 
 
</div>
 
 
 
 
 
<div class="service">
 
 
<div class="service-icon">
 
<i class="fa-solid fa-industry"></i>
 
</div>
 
 
<h3>
 
ماشین آلات صنعتی
 
</h3>
 
 
</div>
 
 
 
 
 
<div class="service">
 
 
<div class="service-icon">
 
<i class="fa-solid fa-boxes-stacked"></i>
 
</div>
 
 
<h3>
 
تجهیزات خطوط تولید
 
</h3>
 
 
</div>
 
 
 
 
 
<div class="service">
 
 
<div class="service-icon">
 
<i class="fa-solid fa-robot"></i>
 
</div>
 
 
<h3>
 
اتوماسیون صنعتی
 
</h3>
 
 
</div>
 
 
 
 
</div>
 
 
</div>
 
 
</section>
 
 
 
 
 
 
<section class="my-div about">
 
 
<div class="container">
 
 
<h2>
 
درباره ما
 
</h2>
 
 
 
<p>
 
شرکت ما با تجربه در زمینه طراحی و ساخت دستگاه‌های صنعتی،
ماشین‌آلات سفارشی و تجهیزات کارخانه،
راهکارهای مهندسی اختصاصی برای صنایع مختلف ارائه می‌دهد.
 
</p>
 
 
<p>
 
از طراحی اولیه و نقشه‌کشی صنعتی تا ساخت،
مونتاژ و راه‌اندازی دستگاه،
تمام مراحل پروژه توسط تیم مهندسی انجام می‌شود.
 
</p>
 
 
 
<a href="#" class="main-btn">
 
دریافت مشاوره
 
</a>
 
 
</div>
 
 
</section>
 
<!-- ==========================================
    PROJECTS
========================================== -->
 
<section class="projects">
 
<div class="container">
 
 
<div class="section-title">
 
<h2>
جدیدترین پروژه‌های ما
</h2>
 
 
 
</div>
 
 
 
<div class="project-grid">
 
 
 
<article class="project-item">
 
<img src="https://dl.faraghaib.ir/m/260023-01/260023-01-11.jpg"
alt="ساخت دستگاه صنعتی سفارشی">
 
</article>
 
 
 
 
<article class="project-item">
 
<img src="https://dl.faraghaib.ir/m/260023-01/260023-01-12.jpg"
alt="طراحی ماشین آلات صنعتی">
 
</article>
 
 
 
 
<article class="project-item">
 
<img src="https://dl.faraghaib.ir/m/260023-01/260023-01-07.jpg"
alt="ساخت تجهیزات خطوط تولید">
 
</article>
 
 
 
 
<article class="project-item">
 
<img src="https://dl.faraghaib.ir/m/260023-01/260023-01-01.jpg"
alt="تولید دستگاه صنعتی کارخانه">
 
</article>
 
 
 
 
</div>
 
 
</div>
 
</section>
 
 
 
 
 
 
<!-- ==========================================
    STATISTICS
========================================== -->
 
 
<section class="statistics">
 
 
<div class="container">
 
 
<h2>
 
تجربه‌ای جدید از خدمات ساخت صنعتی!
 
</h2>
 
 
 
<div class="stat-grid">
 
 
 
<div class="stat">
 
<strong>
10+
</strong>
 
<span>
سال تجربه صنعتی
</span>
 
</div>
 
 
 
 
<div class="stat">
 
<strong>
110
</strong>
 
<span>
پروژه انجام شده
</span>
 
</div>
 
 
 
 
 
<div class="stat">
 
<strong>
98%
</strong>
 
<span>
رضایت مشتریان
</span>
 
</div>
 
 
 
 
 
<div class="stat">
 
<strong>
350+
</strong>
 
<span>
دستگاه ساخته شده
</span>
 
</div>
 
 
 
</div>
 
 
</div>
 
 
</section>
 
 
 
 
 
 
 
 
<!-- ==========================================
    ADVANTAGES
========================================== -->
 
 
<section class="advantages">
 
 
<div class="container">
 
 
<div class="section-title">
 
<h2>
 
خدمات تخصصی ما
 
</h2>
 
</div>
 
 
 
<div class="adv-grid">
 
 
 
<div class="adv-box">
 
 
<div class="adv-icon">
 
<i class="fa-solid fa-compass-drafting"></i>
 
</div>
 
 
<h3>
 
طراحی مهندسی
 
</h3>
 
 
<p>
 
طراحی سه بعدی و نقشه‌کشی صنعتی
براساس نیاز خط تولید مشتری.
 
</p>
 
 
</div>
 
 
 
 
 
 
 
<div class="adv-box">
 
 
<div class="adv-icon">
 
<i class="fa-solid fa-award"></i>
 
</div>
 
 
<h3>
 
کنترل کیفیت نهایی
 
</h3>
 
 
<p>
 
بررسی عملکرد دستگاه قبل از تحویل
برای تضمین کیفیت و دوام.
 
</p>
 
 
</div>
 
 
 
 
 
 
 
 
<div class="adv-box">
 
 
<div class="adv-icon">
 
<i class="fa-solid fa-truck-fast"></i>
 
</div>
 
 
<h3>
 
تحویل و نصب دستگاه
 
</h3>
 
 
<p>
 
ارسال، نصب و راه‌اندازی تجهیزات
در محل کارخانه مشتری.
 
</p>
 
 
</div>
 
 
 
 
 
 
 
<div class="adv-box">
 
 
<div class="adv-icon">
 
<i class="fa-solid fa-clock"></i>
 
</div>
 
 
<h3>
 
زمان‌بندی دقیق
 
</h3>
 
 
<p>
 
اجرای پروژه طبق برنامه مشخص
و کاهش زمان توقف تولید.
 
</p>
 
 
</div>
 
 
 
</div>
 
 
</div>
 
 
</section>
 
 
 
 
 
 
 
 
<!-- ==========================================
    ARTICLES
========================================== -->
 
 
<section class="articles">
 
 
<div class="container">
 
 
<div class="section-title">
 
 
<h2>
 
جدیدترین مطالب صنعتی
 
</h2>
 
 
</div>
 
 
 
 
 
<div class="article-grid">
 
 
 
 
 
<article class="article-card">
 
 
<img src="https://dl.faraghaib.ir/m/260023-01/260023-01-23.jpg"
alt="راهنمای خرید دستگاه صنعتی">
 
 
 
<div class="article-overlay">
 
<h3>
 
راهنمای انتخاب دستگاه صنعتی مناسب خط تولید
 
</h3>
 
</div>
 
 
</article>
 
 
 
 
 
 
 
<article class="article-card">
 
 
<img src="https://dl.faraghaib.ir/m/260023-01/260023-01-24.jpg"
alt="مهندسی معکوس دستگاه صنعتی">
 
 
 
<div class="article-overlay">
 
<h3>
 
مهندسی معکوس و ساخت دستگاه صنعتی سفارشی
 
</h3>
 
</div>
 
 
</article>
 
<article class="article-card">
 
 
<img src="https://dl.faraghaib.ir/m/260023-01/260023-01-03.jpeg"
alt="مراحل ساخت ماشین آلات صنعتی">
 
<div class="article-overlay">
 
<h3>
 
مراحل طراحی و ساخت ماشین آلات صنعتی
 
</h3>
 
</div>
 
 
</article>
 
<article class="article-card">
 
<img src="https://dl.faraghaib.ir/m/260023-01/260023-01-16.jpg"
alt="قیمت ساخت دستگاه صنعتی">
 
<div class="article-overlay">
 
<h3>
 
عوامل موثر بر قیمت ساخت دستگاه صنعتی
 
</h3>
 
</div>
 
 
</article>
 
 
 
 
 
 
</div>
 
 
</div>
 
 
</section>
 
 
 
 
 
 
<style>
 
 
/* ======================================
PROJECTS STYLE
====================================== */
 
 
.projects{
 
padding:45px 0;
 
}
 
 
.section-title{
 
text-align:center;
 
margin-bottom:30px;
 
}
 
 
.section-title h2{
 
font-size:24px;
 
font-weight:bold;
 
}
 
 
 
.dots{
 
display:flex;
 
justify-content:center;
 
gap:5px;
 
margin-top:10px;
 
}
 
 
.dots span{
 
width:8px;
 
height:8px;
 
background:#f52d48;
 
border-radius:50%;
 
}
 
 
 
 
.project-grid{
 
display:grid;
 
grid-template-columns:repeat(2,1fr);
 
gap:20px;
 
}
 
 
 
.project-item{
 
overflow:hidden;
 
height:170px;
 
}
 
 
 
.project-item img{
 
width:100%;
 
height:100%;
 
object-fit:cover;
 
transition:.3s;
 
}
 
 
 
.project-item:hover img{
 
transform:scale(1.08);
 
}
 
 
 
 
 
 
 
 
/* ======================================
STATISTICS
====================================== */
 
 
.statistics{
 
 
padding:55px 0 70px;
 
 
color:#fff;
 
 
text-align:center;
 
 
background:
 
linear-gradient(
rgba(0,0,0,.7),
rgba(0,0,0,.7)
),
 
url("images/stat-bg.jpg");
 
background-size:cover;
 
background-position:center;
 
}
 
 
 
 
.statistics h2{
 
font-size:22px;
 
margin-bottom:35px;
 
}
 
 
 
 
.stat-grid{
 
 
display:grid;
 
grid-template-columns:repeat(2,1fr);
 
gap:30px 10px;
 
 
}
 
 
 
 
.stat strong{
 
 
display:block;
 
font-size:38px;
 
color:#f52d48;
 
line-height:1;
 
 
}
 
 
 
.stat span{
 
font-size:12px;
 
}
 
 
 
 
 
 
 
/* ======================================
ADVANTAGES
====================================== */
 
 
 
.advantages{
 
padding:45px 0;
 
}
 
 
 
 
.adv-grid{
 
 
display:grid;
 
grid-template-columns:1fr;
 
gap:20px;
 
 
}
 
 
 
.adv-box{
 
 
background:#f5f5f5;
 
padding:25px 15px;
 
text-align:center;
 
 
}
 
 
 
.adv-icon{
 
 
width:60px;
 
height:60px;
 
background:#151515;
 
color:#fff;
 
display:flex;
 
align-items:center;
 
justify-content:center;
 
border-radius:50%;
 
margin:auto;
 
 
font-size:22px;
 
 
border:3px solid white;
 
outline:2px solid #f59aaa;
 
 
}
 
 
 
 
.adv-box h3{
 
font-size:15px;
 
margin:12px 0;
 
}
 
 
 
.adv-box p{
 
font-size:12px;
 
line-height:2;
 
color:#777;
 
}
 
 
 
 
 
 
 
 
/* ======================================
ARTICLES
====================================== */
 
 
.articles{
 
padding:30px 0 60px;
 
}
 
 
 
.article-grid{
 
 
display:grid;
 
grid-template-columns:1fr;
 
gap:20px;
 
 
}
 
 
 
.article-card{
 
 
height:230px;
 
position:relative;
 
overflow:hidden;
 
 
}
 
 
 
 
.article-card img{
 
 
width:100%;
 
height:100%;
 
object-fit:cover;
 
 
}
 
 
 
 
.article-overlay{
 
 
position:absolute;
 
right:0;
 
bottom:0;
 
left:0;
 
padding:15px;
 
background:
 
linear-gradient(
transparent,
rgba(0,0,0,.85)
);
 
height:100%;
 
display:flex;
 
align-items:flex-end;
 
 
}
 
 
 
 
.article-overlay h3{
 
 
color:white;
 
font-size:14px;
 
line-height:2;
 
 
}
 
 
 
 
 
 
/* ======================================
TABLET
====================================== */
 
 
@media(min-width:768px){
 
 
 
.project-grid{
 
grid-template-columns:repeat(4,1fr);
 
}
 
 
 
.project-item{
 
height:120px;
 
}
 
 
 
.stat-grid{
 
grid-template-columns:repeat(4,1fr);
 
}
 
 
 
.adv-grid{
 
grid-template-columns:repeat(4,1fr);
 
}
 
 
 
.article-grid{
 
grid-template-columns:repeat(4,1fr);
 
}
 
 
 
.article-card{
 
height:200px;
 
}
 
 
 
}
 
 
 
 
 
 
</style>
 
<!-- ==========================================
    CLIENT LOGOS
========================================== -->
 
 
<section class="clients">
 
 
<div class="container">
 
 
<div class="section-title">
 
 
<h2>
 
برخی از ماشین آلات ما
 
</h2>
 
 
<p>
 
همکاری با مجموعه‌های صنعتی معتبر
 
</p>
 
 
</div>
 
 
 
 
 
<div class="client-grid">
 
 
<div class="client-logo">
 
<img src="https://dl.faraghaib.ir/m/260023-01/260023-01-08.jpg"
alt="لوگوی مشتری صنعتی">
 
</div>
 
 
 
<div class="client-logo">
 
<img src="https://dl.faraghaib.ir/m/260023-01/260023-01-10.png"
alt="لوگوی کارخانه">
 
</div>
 
 
 
<div class="client-logo">
 
<img src="https://dl.faraghaib.ir/m/260023-01/260023-01-13.png"
alt="لوگوی شرکت تولیدی">
 
</div>
 
 
 
<div class="client-logo">
 
<img src="https://dl.faraghaib.ir/m/260023-01/260023-01-14.jpg"
alt="لوگوی مجموعه صنعتی">
 
</div>
 
 
<div class="client-logo">
 
<img src="https://dl.faraghaib.ir/m/260023-01/260023-01-25.jpg"
alt="لوگوی مشتری">
 
</div>
 
 
 
</div>
 
 
</div>
 
 
</section>
 
 
 
 
 
 
<!-- ==========================================
    CTA
========================================== -->
 
 
<section class="cta">
 
 
<div class="container">
 
 
<h2>
 
دستگاه صنعتی مورد نیاز خود را سفارش دهید
 
</h2>
 
 
 
<p>
 
طراحی و ساخت دستگاه‌های صنعتی سفارشی
براساس نیاز کارخانه و خط تولید شما.
 
</p>
 
 
 
 
<a href="#" class="main-btn red">
 
دریافت مشاوره رایگان
 
</a>
 
 
 
</div>
 
 
</section>
 
 
 
 
 
 
 
 
<!-- ==========================================
    FOOTER
========================================== -->
 
 
<footer class="footer">
 
 
<div class="container">
 
 
<div class="footer-grid">
 
 
 
<div class="footer-about">
 
 
<h3>
 
درباره شرکت
 
</h3>
 
 
<p>
 
مجموعه ما با تخصص در طراحی و ساخت دستگاه صنعتی،
تولید ماشین‌آلات سفارشی و اجرای پروژه‌های صنعتی،
راهکارهای مهندسی برای صنایع مختلف ارائه می‌دهد.
 
</p>
 
 
 
<div class="social">
 
 
<a href="#">
<i class="fa-brands fa-instagram"></i>
</a>
 
 
<a href="#">
<i class="fa-brands fa-whatsapp"></i>
</a>
 
 
<a href="#">
<i class="fa-brands fa-telegram"></i>
</a>
 
 
</div>
 
 
</div>
 
 
 
 
 
 
<div class="footer-links">
 
 
<h3>
 
خدمات ما
 
</h3>
 
 
<ul>
 
 
<li>
<a href="#">
ساخت دستگاه صنعتی
</a>
</li>
 
 
<li>
<a href="#">
طراحی ماشین آلات صنعتی
</a>
</li>
 
 
<li>
<a href="#">
تجهیزات خطوط تولید
</a>
</li>
 
 
<li>
<a href="#">
اتوماسیون صنعتی
</a>
</li>
 
 
<li>
<a href="#">
مهندسی معکوس
</a>
</li>
 
 
</ul>
 
 
</div>
 
 
 
 
 
 
 
<div class="footer-contact">
 
 
<h3>
 
تماس با ما
 
</h3>
 
 
<p>
<i class="fa-solid fa-location-dot"></i>
 
تهران، شهرک صنعتی
 
</p>
 
 
<p>
<i class="fa-solid fa-phone"></i>
 
021-12345678
 
</p>
 
 
<p>
<i class="fa-solid fa-mobile"></i>
 
09121234567
 
</p>
 
 
<p>
<i class="fa-solid fa-envelope"></i>
 
info@example.com
 
</p>
 
 
 
</div>
</div>


<div class="patogh-grid-2x2">
  {{کارت_مقاله
    | تصویر =https://dl.faraghaib.ir/m/۲۶۰۰۱۲-01/۲۶۰۰۱۲-01-102.png
    | عنوان = چرا چای بخش جدانشدنی دورهمی‌های ایرانی است؟
    | توضیحات = نگاهی کوتاه به فرهنگ چای و جایگاه آن در دورهمی‌های دوستانه.
    | لینک = صفحه_مقاله_اول
  }}


 
  {{کارت_مقاله
 
    | تصویر = https://cdn.example.com/images/breakfast.webp
 
    | عنوان = یک صبحانه سنتی خوب چه ویژگی‌هایی دارد؟
    | توضیحات = صبحانه ساده، گرم و خوشمزه؛ همان چیزی که یک روز خوب نیاز دارد.
    | لینک = صفحه_مقاله_second
  }}
</div>
</div>




 
{{کارت_مقاله
 
    | تصویر = https://dl.faraghaib.ir/m/260009-01/260009-01-102.png
 
    | عنوان = چرا چای بخش جدانشدنی دورهمی‌های ایرانی است؟
 
    | توضیحات = نگاهی کوتاه به فرهنگ چای و جایگاه آن در دورهمی‌های دوستانه.
<div class="copyright">
    | لینک = تست۳
 
  }}
 
تمامی حقوق این سایت متعلق به شرکت طراحی و ساخت دستگاه‌های صنعتی است.
 
 
</div>
 
 
 
</div>
 
 
</footer>
 
 
 
 
 
 
 
<!-- ==========================================
    BACK TO TOP
========================================== -->
 
 
<button class="top-btn"
onclick="window.scrollTo({top:0,behavior:'smooth'})">
 
 
<i class="fa-solid fa-angle-up"></i>
 
 
</button>
 
 
 
 
 
 
 
 
 
<style>
 
 
/* ======================================
CLIENTS
====================================== */
 
 
.clients{
 
 
padding:45px 0;
 
background:#fff;
 
 
}
 
 
 
.client-grid{
 
 
display:grid;
 
grid-template-columns:repeat(2,1fr);
 
gap:20px;
 
 
}
 
 
 
.client-logo{
 
 
height:90px;
 
display:flex;
 
align-items:center;
 
justify-content:center;
 
background:#fafafa;
 
 
}
 
 
 
.client-logo img{
 
 
max-width:130px;
 
max-height:60px;
 
filter:grayscale(100%);
 
opacity:.7;
 
transition:.3s;
 
 
}
 
 
 
.client-logo:hover img{
 
filter:none;
 
opacity:1;
 
}
 
 
 
 
 
 
 
/* ======================================
CTA
====================================== */
 
 
.cta{
 
 
padding:45px 0;
 
text-align:center;
 
background:#f6f6f6;
 
 
}
 
 
 
.cta h2{
 
 
font-size:24px;
 
margin-bottom:15px;
 
 
}
 
 
 
.cta p{
 
 
font-size:13px;
 
color:#777;
 
margin-bottom:25px;
 
 
}
 
 
 
.main-btn.red{
 
 
background:#f52d48;
 
color:white;
 
 
}
 
 
 
 
 
 
/* ======================================
FOOTER
====================================== */
 
 
 
.footer{
 
 
background:
 
linear-gradient(
rgba(20,20,20,.96),
rgba(20,20,20,.96)
),
 
url("images/footer-bg.jpg");
 
 
background-size:cover;
 
color:white;
 
padding:55px 0 20px;
 
 
}
 
 
 
 
.footer-grid{
 
 
display:grid;
 
grid-template-columns:1fr;
 
gap:35px;
 
 
}
 
 
 
 
.footer h3{
 
 
font-size:17px;
 
margin-bottom:18px;
 
 
}
 
 
 
.footer p,
.footer li,
.footer a{
 
 
font-size:12px;
 
color:#bbb;
 
line-height:2.2;
 
 
}
 
 
 
 
.footer ul{
 
 
list-style:none;
 
padding:0;
 
 
}
 
 
 
 
.footer li{
 
 
margin-bottom:5px;
 
 
}
 
 
 
.footer a:hover{
 
color:#f52d48;
 
}
 
 
 
 
.social{
 
 
display:flex;
 
gap:10px;
 
margin-top:20px;
 
 
}
 
 
 
 
.social a{
 
 
width:38px;
 
height:38px;
 
display:flex;
 
align-items:center;
 
justify-content:center;
 
background:#292929;
 
border-radius:50%;
 
font-size:18px;
 
 
}
 
 
 
.copyright{
 
 
margin-top:35px;
 
padding-top:20px;
 
border-top:1px solid #333;
 
text-align:center;
 
font-size:11px;
 
color:#888;
 
 
}
 
 
 
 
 
 
 
 
/* ======================================
TOP BUTTON
====================================== */
 
 
.top-btn{
 
 
position:fixed;
 
bottom:20px;
 
left:20px;
 
width:40px;
 
height:40px;
 
border:none;
 
border-radius:5px;
 
background:#f52d48;
 
color:white;
 
cursor:pointer;
 
z-index:100;
 
 
}
 
 
 
 
 
 
/* ======================================
MOBILE MENU
====================================== */
 
 
 
@media(max-width:767px){
 
 
.nav{
 
 
position:absolute;
 
top:70px;
 
right:4%;
 
left:4%;
 
background:#111;
 
padding:15px;
 
border-radius:5px;
 
flex-direction:column;
 
 
}
 
 
 
.nav.show{
 
display:flex;
 
 
}
 
 
.nav a{
 
border-bottom:1px solid #333;
 
padding:12px;
 
}
 
 
 
}
 
 
 
 
 
 
 
/* ======================================
DESKTOP
====================================== */
 
 
@media(min-width:768px){
 
 
 
.menu-btn{
 
display:none;
 
}
 
 
 
.nav{
 
 
display:flex;
 
align-items:center;
 
gap:18px;
 
 
}
 
 
 
.header-contact{
 
display:block;
 
 
}
 
 
 
.client-grid{
 
 
grid-template-columns:repeat(5,1fr);
 
 
}
 
 
 
.footer-grid{
 
 
grid-template-columns:2fr 1fr 1fr;
 
 
}
 
 
 
.footer-about p{
 
 
max-width:350px;
 
 
}
 
 
 
}
 
 
 
 
</style>
 
 
 
 
 
 
 
 
<script>
 
 
const menuButton =
document.querySelector(".menu-btn");
 
 
const nav =
document.querySelector(".nav");
 
 
 
menuButton.addEventListener("click",()=>{
 
 
nav.classList.toggle("show");
 
 
});
 
 
 
</script>
</HTML>

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

[[{{{لینک}}}|{{{عنوان}}}]]

چای تازه‌دم سنتی، سرو در استکان کمرباریک.

[[{{{لینک}}}|{{{عنوان}}}]]

املت گوجه‌فرنگی داغ با نان سنگک برشته.

چرا چای بخش جدانشدنی دورهمی‌های ایرانی است؟

نگاهی کوتاه به فرهنگ چای و جایگاه آن در دورهمی‌های دوستانه.

یک صبحانه سنتی خوب چه ویژگی‌هایی دارد؟

صبحانه ساده، گرم و خوشمزه؛ همان چیزی که یک روز خوب نیاز دارد.


چرا چای بخش جدانشدنی دورهمی‌های ایرانی است؟

نگاهی کوتاه به فرهنگ چای و جایگاه آن در دورهمی‌های دوستانه.

برگرفته از «https://fa.faraghaib.ir/w/index.php?title=تست_برای_چاپ&oldid=7075»