مجموعة مميزة
اعثر على كل ما تريد
المنتج الخامس
المنتج-الرابع
المنتج الثاني
المنتج الثالث
عروض خاصة
اعثر على كل ما تريد
المنتج الخامس
المنتج-الرابع
المنتج الثاني
المنتج الثالث
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Golden Bazzar</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, sans-serif; }
body { background: #f4f4f4; color: #333; }
/* Header */
header { background: #fff; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.logo { font-size: 24px; font-weight: bold; color: #ffbf00; }
.lang-switch { cursor: pointer; }
.search-box input { padding: 5px; }
/* Navigation */
nav { background: #ffbf00; padding: 10px 20px; }
nav a { color: #fff; margin-right: 15px; text-decoration: none; font-weight: bold; }
nav a:hover { text-decoration: underline; }
/* Banner */
.banner { position: relative; background: url('https://via.placeholder.com/1200x400') center/cover no-repeat; height: 400px; display: flex; justify-content: center; align-items: center; color: #fff; text-align: center; }
.banner button { background: #ff0000; color: #fff; padding: 12px 25px; border: none; cursor: pointer; font-size: 18px; margin-top: 15px; transition: 0.3s; }
.banner button:hover { background: #cc0000; }
/* Featured Products */
.products { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; padding: 20px; }
.product { background: #fff; padding: 15px; text-align: center; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.product img { width: 100%; height: 200px; object-fit: cover; border-radius: 5px; }
.product button { background: #ffbf00; color: #fff; border: none; padding: 10px 15px; cursor: pointer; margin-top: 10px; font-weight: bold; }
.product button:hover { background: #e6ac00; }
/* Footer */
footer { background: #333; color: #fff; padding: 20px; text-align: center; }
footer a { color: #ffbf00; text-decoration: none; margin: 0 10px; }
footer a:hover { text-decoration: underline; }
</style>
</head>
<body>
<!-- Header -->
<header>
<div class="logo">Golden Bazzar</div>
<div class="lang-switch">🇲🇦 عربي | 🇬🇧 English</div>
<div class="search-box"><input type="text" placeholder="Search..."></div>
</header>
<!-- Navigation -->
<nav>
<a href="#">الرئيسية / Home</a>
<a href="#">المنتجات / Products</a>
<a href="#">العروض / Offers</a>
<a href="#">اتصل بنا / Contact</a>
</nav>
<!-- Banner -->
<div class="banner">
<div>
<h1>تسوق أجود المنتجات بسهولة / Shop the Best Products Easily</h1>
<button>تسوق الآن / Shop Now</button>
</div>
</div>
<!-- Featured Products -->
<div class="products">
<div class="product">
<img src="https://via.placeholder.com/300x200" alt="Product 1">
<h3>منتج 1 / Product 1</h3>
<p>100 درهم / $10</p>
<button>اشتري الآن / Buy Now</button>
</div>
<div class="product">
<img src="https://via.placeholder.com/300x200" alt="Product 2">
<h3>منتج 2 / Product 2</h3>
<p>150 درهم / $15</p>
<button>اشتري الآن / Buy Now</button>
</div>
<div class="product">
<img src="https://via.placeholder.com/300x200" alt="Product 3">
<h3>منتج 3 / Product 3</h3>
<p>200 درهم / $20</p>
<button>اشتري الآن / Buy Now</button>
</div>
<div class="product">
<img src="https://via.placeholder.com/300x200" alt="Product 4">
<h3>منتج 4 / Product 4</h3>
<p>250 درهم / $25</p>
<button>اشتري الآن / Buy Now</button>
</div>
</div>
<!-- Footer -->
<footer>
© 2025 Golden Bazzar |
<a href="#">سياسة الخصوصية / Privacy Policy</a> |
<a href="#">الشحن / Shipping</a> |
<a href="#">تواصل معنا / Contact</a>
</footer>
</body>
</html>