104 lines
5.3 KiB
HTML
104 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ar" dir="rtl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>المدونة - ShubraVeil</title>
|
|
<meta name="description" content="اكتشف مقالات حصرية عن الزيوت العطرية وفوائدها وطرق استخدامها">
|
|
<meta name="keywords" content="زيوت عطرية, مدونة, نصائح, فوائد الزيوت">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<!-- نفس الهيدر السابق -->
|
|
</header>
|
|
|
|
<main>
|
|
<section class="blog-section">
|
|
<div class="container">
|
|
<h1 class="section-title">المدونة</h1>
|
|
|
|
<div class="blog-filters">
|
|
<div class="search-box">
|
|
<input type="text" placeholder="ابحث في المقالات...">
|
|
<button><i class="fas fa-search"></i></button>
|
|
</div>
|
|
|
|
<div class="categories">
|
|
<button class="category-btn active" data-category="all">الكل</button>
|
|
<button class="category-btn" data-category="tips">نصائح واستخدامات</button>
|
|
<button class="category-btn" data-category="benefits">فوائد صحية</button>
|
|
<button class="category-btn" data-category="news">أخبار وتحديثات</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="blog-grid">
|
|
<!-- مقال 1 -->
|
|
<article class="blog-card">
|
|
<div class="blog-image">
|
|
<img src="images/blog/lavender-benefits.jpg" alt="فوائد اللافندر">
|
|
<span class="category">فوائد صحية</span>
|
|
</div>
|
|
<div class="blog-content">
|
|
<h2>10 فوائد مذهلة لزيت اللافندر</h2>
|
|
<p>اكتشف الفوائد المتعددة لزيت اللافندر العطري وكيفية استخدامه للحصول على أفضل النتائج...</p>
|
|
<div class="blog-meta">
|
|
<span><i class="far fa-calendar"></i> 8 ديسمبر 2024</span>
|
|
<span><i class="far fa-clock"></i> 5 دقائق قراءة</span>
|
|
</div>
|
|
<a href="blog/lavender-benefits.html" class="read-more">اقرأ المزيد</a>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- مقال 2 -->
|
|
<article class="blog-card">
|
|
<div class="blog-image">
|
|
<img src="images/blog/essential-oils-guide.jpg" alt="دليل الزيوت العطرية">
|
|
<span class="category">نصائح واستخدامات</span>
|
|
</div>
|
|
<div class="blog-content">
|
|
<h2>دليلك الشامل لاستخدام الزيوت العطرية</h2>
|
|
<p>تعرف على الطرق الصحيحة لاستخدام الزيوت العطرية وكيفية مزجها للحصول على أفضل النتائج...</p>
|
|
<div class="blog-meta">
|
|
<span><i class="far fa-calendar"></i> 7 ديسمبر 2024</span>
|
|
<span><i class="far fa-clock"></i> 8 دقائق قراءة</span>
|
|
</div>
|
|
<a href="blog/essential-oils-guide.html" class="read-more">اقرأ المزيد</a>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
|
|
<div class="pagination">
|
|
<button class="prev-page" disabled><i class="fas fa-chevron-right"></i></button>
|
|
<span class="current-page">1</span>
|
|
<button class="next-page"><i class="fas fa-chevron-left"></i></button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- قسم الاشتراك في النشرة البريدية -->
|
|
<section class="blog-newsletter">
|
|
<div class="container">
|
|
<div class="newsletter-content">
|
|
<h2>اشترك في نشرتنا البريدية</h2>
|
|
<p>احصل على أحدث المقالات والنصائح مباشرة إلى بريدك الإلكتروني</p>
|
|
<form id="blog-newsletter-form" class="newsletter-form">
|
|
<div class="form-group">
|
|
<input type="email" placeholder="أدخل بريدك الإلكتروني" required>
|
|
<button type="submit" class="btn">اشترك الآن</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer>
|
|
<!-- نفس الفوتر السابق -->
|
|
</footer>
|
|
|
|
<script src="js/blog.js"></script>
|
|
</body>
|
|
</html>
|