<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ListHub - Premium Listing Platform</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* Global Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #f5f5f5;
color: #333;
line-height: 1.6;
}
a {
text-decoration: none;
color: #0066c0;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
.btn {
display: inline-block;
padding: 8px 16px;
background-color: #0066c0;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: 500;
transition: background-color 0.3s;
}
.btn:hover {
background-color: #0052a3;
}
.btn-outline {
background-color: transparent;
border: 1px solid #0066c0;
color: #0066c0;
}
.btn-outline:hover {
background-color: #0066c0;
color: white;
}
/* Header Styles */
header {
background-color: white;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
position: sticky;
top: 0;
z-index: 100;
}
.top-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
}
.logo {
font-size: 24px;
font-weight: 700;
color: #0066c0;
display: flex;
align-items: center;
}
.logo i {
margin-right: 10px;
}
.search-bar {
flex-grow: 1;
margin: 0 20px;
position: relative;
}
.search-bar input {
width: 100%;
padding: 10px 15px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
}
.search-bar button {
position: absolute;
right: 5px;
top: 5px;
background: #0066c0;
color: white;
border: none;
border-radius: 4px;
padding: 5px 10px;
cursor: pointer;
}
.user-actions a {
margin-left: 15px;
}
/* Navigation */
nav {
background-color: #f8f9fa;
border-top: 1px solid #eee;
}
.nav-menu {
display: flex;
list-style: none;
}
.nav-menu li {
padding: 12px 15px;
position: relative;
}
.nav-menu li:hover {
background-color: #e9ecef;
}
.nav-menu li a {
color: #495057;
font-weight: 500;
}
/* Hero Section */
.hero {
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1560518883-ce09059eeffa?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1173&q=80');
background-size: cover;
background-position: center;
color: white;
padding: 60px 0;
text-align: center;
margin-bottom: 30px;
}
.hero h1 {
font-size: 2.5rem;
margin-bottom: 20px;
}
.hero p {
font-size: 1.2rem;
max-width: 700px;
margin: 0 auto 30px;
}
/* Categories Section */
.categories {
margin: 30px 0;
}
.section-title {
font-size: 1.8rem;
margin-bottom: 20px;
color: #333;
padding-bottom: 10px;
border-bottom: 2px solid #0066c0;
}
.category-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}
.category-card {
background-color: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s;
}
.category-card:hover {
transform: translateY(-5px);
}
.category-img {
height: 150px;
background-color: #ddd;
display: flex;
align-items: center;
justify-content: center;
color: #666;
font-size: 3rem;
}
.category-content {
padding: 15px;
}
.category-content h3 {
margin-bottom: 10px;
}
/* Listings Section */
.listings {
margin: 40px 0;
}
.listing-filters {
background-color: white;
padding: 15px;
border-radius: 8px;
margin-bottom: 20px;
display: flex;
flex-wrap: wrap;
gap: 15px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.filter-group {
flex: 1;
min-width: 200px;
}
.filter-group label {
display: block;
margin-bottom: 5px;
font-weight: 500;
}
.filter-group select, .filter-group input {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
}
.listing-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
.listing-card {
background-color: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.listing-img {
height: 200px;
background-color: #ddd;
position: relative;
}
.listing-badge {
position: absolute;
top: 10px;
right: 10px;
background-color: #ff4d4d;
color: white;
padding: 5px 10px;
border-radius: 4px;
font-size: 0.8rem;
}
.listing-content {
padding: 15px;
}
.listing-price {
font-size: 1.5rem;
font-weight: 700;
color: #0066c0;
margin-bottom: 10px;
}
.listing-title {
font-size: 1.1rem;
margin-bottom: 10px;
}
.listing-details {
display: flex;
justify-content: space-between;
color: #666;
font-size: 0.9rem;
margin-bottom: 15px;
}
.listing-location {
color: #666;
margin-bottom: 15px;
display: flex;
align-items: center;
}
.listing-location i {
margin-right: 5px;
}
/* Footer */
footer {
background-color: #2d2d2d;
color: #fff;
padding: 40px 0 20px;
margin-top: 40px;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin-bottom: 30px;
}
.footer-column h3 {
font-size: 1.2rem;
margin-bottom: 20px;
color: #fff;
}
.footer-column ul {
list-style: none;
}
.footer-column ul li {
margin-bottom: 10px;
}
.footer-column ul li a {
color: #ccc;
transition: color 0.3s;
}
.footer-column ul li a:hover {
color: #fff;
}
.footer-bottom {
text-align: center;
padding-top: 20px;
border-top: 1px solid #444;
color: #ccc;
font-size: 0.9rem;
}
/* Responsive Design */
@media (max-width: 768px) {
.top-header {
flex-direction: column;
}
.search-bar {
margin: 15px 0;
width: 100%;
}
.nav-menu {
flex-wrap: wrap;
}
.hero h1 {
font-size: 2rem;
}
.hero p {
font-size: 1rem;
}
}
</style>
</head>
<body>
<!-- Header -->
<header>
<div class="container">
<div class="top-header">
<div class="logo">
<i class="fas fa-home"></i>
ListHub
</div>
<div class="search-bar">
<input type="text" placeholder="Search for anything...">
<button><i class="fas fa-search"></i> Search</button>
</div>
<div class="user-actions">
<a href="#" class="btn-outline"><i class="fas fa-plus"></i> Post Ad</a>
<a href="#"><i class="fas fa-user"></i> Login</a>
</div>
</div>
</div>
<nav>
<div class="container">
<ul class="nav-menu">
<li><a href="#">Home</a></li>
<li><a href="#">Real Estate</a></li>
<li><a href="#">Vehicles</a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Electronics</a></li>
<li><a href="#">Furniture</a></li>
</ul>
</div>
</nav>
</header>
<!-- Hero Section -->
<section class="hero">
<div class="container">
<h1>Find Your Dream Home or Perfect Vehicle</h1>
<p>Browse thousands of listings for real estate, vehicles, jobs, and more</p>
<a href="#" class="btn">Start Exploring</a>
</div>
</section>
<!-- Main Content -->
<main class="container">
<!-- Categories Section -->
<section class="categories">
<h2 class="section-title">Browse Categories</h2>
<div class="category-grid">
<div class="category-card">
<div class="category-img">
<i class="fas fa-building"></i>
</div>
<div class="category-content">
<h3>Real Estate</h3>
<p>Apartments, houses, commercial properties</p>
</div>
</div>
<div class="category-card">
<div class="category-img">
<i class="fas fa-car"></i>
</div>
<div class="category-content">
<h3>Vehicles</h3>
<p>Cars, motorcycles, trucks, spare parts</p>
</div>
</div>
<div class="category-card">
<div class="category-img">
<i class="fas fa-briefcase"></i>
</div>
<div class="category-content">
<h3>Jobs</h3>
<p>Find your next career opportunity</p>
</div>
</div>
<div class="category-card">
<div class="category-img">
<i class="fas fa-couch"></i>
</div>
<div class="category-content">
<h3>Furniture</h3>
<p>Home and office furniture</p>
</div>
</div>
</div>
</section>
<!-- Featured Listings -->
<section class="listings">
<h2 class="section-title">Featured Listings</h2>
<div class="listing-filters">
<div class="filter-group">
<label for="category">Category</label>
<select id="category">
<option>All Categories</option>
<option>Real Estate</option>
<option>Vehicles</option>
<option>Electronics</option>
</select>
</div>
<div class="filter-group">
<label for="location">Location</label>
<select id="location">
<option>All Locations</option>
<option>Istanbul</option>
<option>Ankara</option>
<option>Izmir</option>
</select>
</div>
<div class="filter-group">
<label for="price">Price Range</label>
<input type="range" id="price" min="0" max="1000000">
</div>
<div class="filter-group">
<label> </label>
<button class="btn">Apply Filters</button>
</div>
</div>
<div class="listing-grid">
<!-- Listing 1 -->
<div class="listing-card">
<div class="listing-img">
<div class="listing-badge">Featured</div>
</div>
<div class="listing-content">
<div class="listing-price">$250,000</div>
<h3 class="listing-title">Modern Apartment in City Center</h3>
<div class="listing-details">
<span>3 Rooms</span>
<span>120 m²</span>
</div>
<div class="listing-location">
<i class="fas fa-map-marker-alt"></i> Istanbul, Kadıköy
</div>
<a href="#" class="btn-outline">View Details</a>
</div>
</div>
<!-- Listing 2 -->
<div class="listing-card">
<div class="listing-img">
<div class="listing-badge">New</div>
</div>
<div class="listing-content">
<div class="listing-price">$35,000</div>
<h3 class="listing-title">2020 Model Sedan - Low Mileage</h3>
<div class="listing-details">
<span>Automatic</span>
<span>25,000 km</span>
</div>
<div class="listing-location">
<i class="fas fa-map-marker-alt"></i> Ankara, Çankaya
</div>
<a href="#" class="btn-outline">View Details</a>
</div>
</div>
<!-- Listing 3 -->
<div class="listing-card">
<div class="listing-img">
</div>
<div class="listing-content">
<div class="listing-price">$180,000</div>
<h3 class="listing-title">Family House with Garden</h3>
<div class="listing-details">
<span>4 Rooms</span>
<span>200 m²</span>
</div>
<div class="listing-location">
<i class="fas fa-map-marker-alt"></i> Izmir, Karşıyaka
</div>
<a href="#" class="btn-outline">View Details</a>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-column">
<h3>About ListHub</h3>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">How It Works</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
<div class="footer-column">
<h3>Help & Support</h3>
<ul>
<li><a href="#">Help Center</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Safety Tips</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div class="footer-column">
<h3>Legal</h3>
<ul>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Cookie Policy</a></li>
<li><a href="#">GDPR</a></li>
</ul>
</div>
<div class="footer-column">
<h3>Connect With Us</h3>
<ul>
<li><a href="#"><i class="fab fa-facebook"></i> Facebook</a></li>
<li><a href="#"><i class="fab fa-twitter"></i> Twitter</a></li>
<li><a href="#"><i class="fab fa-instagram"></i> Instagram</a></li>
<li><a href="#"><i class="fab fa-youtube"></i> YouTube</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2023 ListHub. All rights reserved.</p>
</div>
</div>
</footer>
<script>
// Simple JavaScript for interactive elements
document.addEventListener('DOMContentLoaded', function() {
// Simulate loading of listings
const listingImages = document.querySelectorAll('.listing-img');
const colors = ['#6c757d', '#495057', '#343a40', '#212529'];
listingImages.forEach((img, index) => {
img.style.backgroundColor = colors[index % colors.length];
img.innerHTML += `<i class="fas fa-home" style="font-size: 48px; color: #fff;"></i>`;
});
// Category icons
const categoryIcons = document.querySelectorAll('.category-img');
categoryIcons.forEach(icon => {
icon.style.backgroundColor = '#e9ecef';
});
// Price range display
const priceSlider = document.getElementById('price');
if (priceSlider) {
priceSlider.addEventListener('input', function() {
// In a real app, this would update a label showing the selected price
console.log('Price range selected:', this.value);
});
}
});
</script>
</body>
</html>