Initial commit

This commit is contained in:
2026-07-25 12:00:17 +03:30
commit fce4b99df1
+293
View File
@@ -0,0 +1,293 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/5148003471.js" crossorigin="anonymous"></script>
<title>Iran Motor</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://lib.arvancloud.ir/vazir-font/33.003/UI/Vazirmatn-UI-font-face.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/style.css">
<link rel="icon" href="img/ChatGPT Image Jul 18, 2026, 03_03_11 PM.png">
</head>
<body>
<header>
<div class="header">
<div class="left" dir="rtl">
<div class="category">
<div class="category-btn" id="categoryBtn">
<i class="fa-solid fa-bars"></i>
<span>دسته‌بندی‌ها</span>
<i class="fa-solid fa-chevron-down" id="i"></i>
</div>
<div class="category-menu" id="categoryMenu">
<a href="#">روغن موتور</a>
<a href="#">لنت ترمز</a>
<a href="#">باتری</a>
<a href="#">چراغ</a>
<a href="#">کلاه ایمنی</a>
</div>
</div>
<div class="login">
<i class="fa-regular fa-user" id="usericon"></i>
<span>ورود / عضویت </span>
</div>
<div class="cart">
<i class="fa-solid fa-cart-shopping"></i>
</div>
</div>
<div class="center">
<div class="search">
<button>
<i class="fa-solid fa-magnifying-glass"></i>
</button>
<input type="text" placeholder="جست و جو کردن " dir="rtl">
</div>
</div>
<div class="right" dir="ltr">
<img src="img/logo.png" alt="ایران موتور" class="logo">
</div>
</div>
</header>
<div class="main">
<div class="hero">
<div class="txthero" dir="rtl">
<p>
ارسال سریع به تمام نقاط کشور
<i class="fa-solid fa-truck-fast"></i>
</p>
<p>
ضمانت اصالت کالا
<i class="fa-solid fa-award"></i>
</p>
<p>
پشتیبانی فنی
<i class="fa-solid fa-headset"></i>
</p>
<p>
پرداخت امن
<i class="fa-solid fa-shield-halved"></i>
</p>
</div>
<div class="btnhero">
<button class="stuffbtn">محصولات</button>
<button class="offs">تخفیفات</button>
<button class="khadamatbtn">خدمات</button>
</div>
</div>
<section class="categories">
<div class="section-title">
<h2>دسته‌بندی محصولات</h2>
<p>همه محصولات ایران موتور</p>
</div>
</section>
<h2 class="slider-title" style="text-align:center; padding: 0 0 20px;">محصولات پرفروش</h2>
<div class="categories-wrapper">
<!-- دسته: روغن موتور -->
<section class="products-slider" dir="rtl">
<h2 class="slider-title">روغن موتور</h2>
<div class="slider-wrapper">
<button class="slider-btn slider-btn-right" data-slider="oilSlider">
<i class="fa-solid fa-chevron-right"></i>
</button>
<div class="slider-track" id="oilSlider">
<div class="product-card">
<img src="img/oil/aidlob-oil-10w40sn.png" alt="روغن موتور ایدلوب 10w40sn">
<h3>روغن موتور ایدلوب</h3>
<h3>10W40 SN</h3>
<p class="price">۴۵۰,۰۰۰ تومان</p>
</div>
<div class="product-card">
<img src="img/oil/aidlob-10w40sl" alt="روغن موتور ایدلوب 10w40sl">
<h3>روغن موتور ایدلوب</h3>
<h3>10W40 SL</h3>
<p class="price">۵۲۰,۰۰۰ تومان</p>
</div>
<div class="product-card">
<img src="img/oil/aidlob-10w40slblues.png" alt="روغن موتور ایدلوب 10w40sl Blue">
<h3>روغن موتور ایدلوب</h3>
<h3>10W40 Sl Blue</h3>
<p class="price">۴۹۰,۰۰۰ تومان</p>
</div>
<div class="product-card">
<img src="img/oil/aidlob-20w50.png" alt="روغن موتور ایدلوب 20w40">
<h3>روغن موتور ایدلوب</h3>
<h3>20W40</h3>
<p class="price">۴۹۰,۰۰۰ تومان</p>
</div>
<div class="product-card">
<img src="img/oil/niromotor-10w40sl.png" alt="روغن موتور نیرو موتور 10w40sl">
<h3>روغن موتور نیرو موتور</h3>
<h3>10W40 Sl</h3>
<p class="price">۴۹۰,۰۰۰ تومان</p>
</div>
<div class="product-card">
<img src="img/oil/niromotor020w50sl.png" alt="روغن موتور نیرو موتور 20w50sl">
<h3>روغن موتور نیرو موتور</h3>
<h3>20W50 SL</h3>
<p class="price">۴۹۰,۰۰۰ تومان</p>
</div>
<div class="product-card">
<img src="img/oil/niromotor-10w30sl.png" alt="روغن موتور نیرو موتور 10-30">
<h3>روغن موتور نیرو موتور</h3>
<h3>10W30</h3>
<p class="price">۴۹۰,۰۰۰ تومان</p>
</div>
<div class="product-card">
<img src="img/oil/honda.png" alt="روغن موتور نیرو موتور 10-30">
<h3>روغن موتور هندا اصلی</h3>
<p class="price">۴۹۰,۰۰۰ تومان</p>
</div>
<div class="product-card">
<img src="img/oil/yamalob.png" alt="روغن موتور نیرو موتور 10-30">
<h3>روغن موتور یامالوب اصلی</h3>
<p class="price">۴۹۰,۰۰۰ تومان</p>
</div>
</div>
<button class="slider-btn slider-btn-left" data-slider="oilSlider">
<i class="fa-solid fa-chevron-left"></i>
</button>
</div>
</section>
<!-- دسته: لنت ترمز -->
<section class="products-slider" dir="rtl">
<h2 class="slider-title">لنت ترمز</h2>
<div class="slider-wrapper">
<button class="slider-btn slider-btn-right" data-slider="brakeSlider">
<i class="fa-solid fa-chevron-right"></i>
</button>
<div class="slider-track" id="brakeSlider">
<div class="product-card">
<img src="img/lent/jolo-appache.webp" alt="لنت ترمز بوش">
<h3>لنت جلو آپاچی</h3>
<h3>غیر اصلی</h3>
<p class="price">۶۸۰,۰۰۰ تومان</p>
</div>
<div class="product-card">
<img src="img/lent/jolo-click.png" alt="لنت ترمز برمبو">
<h3>لنت جلو کلیک</h3>
<h3>غیر اصلی</h3>
<p class="price">۹۵۰,۰۰۰ تومان</p>
</div>
<div class="product-card">
<img src="img/lent/aghab-ns.png" alt="لنت ترمز برمبو">
<h3>لنت عقب Ns200</h3>
<h3>غیر اصلی</h3>
<p class="price">۹۵۰,۰۰۰ تومان</p>
</div>
<div class="product-card">
<img src="img/lent/jolo-tnt25.png" alt="لنت ترمز برمبو">
<h3>لنت جلو بنلی TNT25</h3>
<h3>غیر اصلی</h3>
<p class="price">۹۵۰,۰۰۰ تومان</p>
</div>
<div class="product-card">
<img src="img/lent/jolo-cgl125.png" alt="لنت ترمز برمبو">
<h3>لنت جلو CGL 125</h3>
<h3>غیر اصلی</h3>
<p class="price">۹۵۰,۰۰۰ تومان</p>
</div>
<div class="product-card">
<img src="img/lent/jolo-j200.png" alt="لنت ترمز برمبو">
<h3>لنت جلو j200</h3>
<h3>غیر اصلی</h3>
<p class="price">۹۵۰,۰۰۰ تومان</p>
</div>
<div class="product-card">
<img src="img/lent/aghab-cf125.png" alt="لنت ترمز برمبو">
<h3>لنت عقب CF 125</h3>
<h3>غیر اصلی</h3>
<p class="price">۹۵۰,۰۰۰ تومان</p>
</div>
<div class="product-card">
<img src="img/lent/agghab-beneli180.png" alt="لنت ترمز برمبو">
<h3>لنت عقب Benelli 180</h3>
<h3>غیر اصلی</h3>
<p class="price">۹۵۰,۰۰۰ تومان</p>
</div>
</div>
<button class="slider-btn slider-btn-left" data-slider="brakeSlider">
<i class="fa-solid fa-chevron-left"></i>
</button>
</div>
</section>
<!-- دسته: باتری -->
<section class="products-slider" dir="rtl">
<h2 class="slider-title">باتری</h2>
<div class="slider-wrapper">
<button class="slider-btn slider-btn-right" data-slider="batterySlider">
<i class="fa-solid fa-chevron-right"></i>
</button>
<div class="slider-track" id="batterySlider">
<div class="product-card">
<img src="img/product3.jpg" alt="باتری واریان">
<h3>باتری واریان</h3>
<p class="price">۲,۱۰۰,۰۰۰ تومان</p>
</div>
</div>
<button class="slider-btn slider-btn-left" data-slider="batterySlider">
<i class="fa-solid fa-chevron-left"></i>
</button>
</div>
</section>
<!-- دسته: چراغ -->
<section class="products-slider" dir="rtl">
<h2 class="slider-title">چراغ</h2>
<div class="slider-wrapper">
<button class="slider-btn slider-btn-right" data-slider="lightSlider">
<i class="fa-solid fa-chevron-right"></i>
</button>
<div class="slider-track" id="lightSlider">
<div class="product-card">
<img src="img/product4.jpg" alt="چراغ جلو">
<h3>چراغ جلو</h3>
<p class="price">۳۵۰,۰۰۰ تومان</p>
</div>
</div>
<button class="slider-btn slider-btn-left" data-slider="lightSlider">
<i class="fa-solid fa-chevron-left"></i>
</button>
</div>
</section>
<!-- دسته: کلاه ایمنی -->
<section class="products-slider" dir="rtl">
<h2 class="slider-title">کلاه ایمنی</h2>
<div class="slider-wrapper">
<button class="slider-btn slider-btn-right" data-slider="helmetSlider">
<i class="fa-solid fa-chevron-right"></i>
</button>
<div class="slider-track" id="helmetSlider">
<div class="product-card">
<img src="img/product5.jpg" alt="کلاه ایمنی AGV">
<h3>کلاه ایمنی AGV</h3>
<p class="price">۱,۲۰۰,۰۰۰ تومان</p>
</div>
</div>
<button class="slider-btn slider-btn-left" data-slider="helmetSlider">
<i class="fa-solid fa-chevron-left"></i>
</button>
</div>
</section>
</div><!-- پایان categories-wrapper -->
</div><!-- پایان main -->
<footer>
<div class="footer"></div>
</footer>
<script src="js/scipt.js"></script>
</body>
</html>