Главная » Дизайны

Полный шаблон доски объявлений на HTML/CSS

Дизайны
Автор На чтение 26 мин Просмотров 8 Комментарии 0 Опубликовано Обновлено

Вот комплексный шаблон для доски объявлений со всеми основными страницами: главная, список объявлений, страница объявления, добавление объявления, личный кабинет.

Содержание
  1. Структура проекта
  2. 1. Главная страница (index.html)
  3. 2. Список объявлений (listings.html)
  4. 3. Страница объявления (single.html)
  5. 4. Добавление объявления (post-ad.html)
  6. 5. Личный кабинет (dashboard.html)
  7. CSS (style.css)

Структура проекта

/classifieds/
├── css/
│   ├── style.css
│   └── responsive.css
├── js/
│   └── main.js
├── images/
├── index.html          # Главная страница
├── listings.html       # Список объявлений
├── single.html         # Страница объявления
├── post-ad.html        # Добавление объявления
└── dashboard.html      # Личный кабинет

1. Главная страница (index.html)

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Доска объявлений | Бесплатные объявления</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <!-- Шапка -->
    <header class="header">
        <div class="container">
            <div class="logo">
                <a href="index.html">Доска Объявлений</a>
            </div>
            <nav class="main-nav">
                <ul>
                    <li><a href="index.html">Главная</a></li>
                    <li><a href="listings.html">Объявления</a></li>
                    <li><a href="post-ad.html">Подать объявление</a></li>
                    <li><a href="dashboard.html">Личный кабинет</a></li>
                </ul>
            </nav>
            <div class="auth-buttons">
                <a href="#" class="btn btn-login">Войти</a>
                <a href="#" class="btn btn-register">Регистрация</a>
            </div>
        </div>
    </header>

    <!-- Поиск -->
    <section class="search-section">
        <div class="container">
            <h1>Найдите что нужно</h1>
            <form class="search-form">
                <input type="text" placeholder="Что ищете?">
                <select>
                    <option value="">Все категории</option>
                    <option value="electronics">Электроника</option>
                    <option value="real-estate">Недвижимость</option>
                    <option value="transport">Транспорт</option>
                </select>
                <select>
                    <option value="">Все города</option>
                    <option value="moscow">Москва</option>
                    <option value="spb">Санкт-Петербург</option>
                </select>
                <button type="submit" class="btn btn-primary">Найти</button>
            </form>
        </div>
    </section>

    <!-- Основной контент -->
    <main class="main-content">
        <div class="container">
            <!-- Категории -->
            <section class="categories-section">
                <h2>Популярные категории</h2>
                <div class="categories-grid">
                    <a href="listings.html?category=electronics" class="category-card">
                        <div class="category-icon">
                            <img src="images/electronics.png" alt="Электроника">
                        </div>
                        <h3>Электроника</h3>
                        <span class="count">1,245 объявлений</span>
                    </a>
                    <a href="listings.html?category=real-estate" class="category-card">
                        <div class="category-icon">
                            <img src="images/real-estate.png" alt="Недвижимость">
                        </div>
                        <h3>Недвижимость</h3>
                        <span class="count">892 объявления</span>
                    </a>
                    <!-- Добавьте другие категории -->
                </div>
            </section>

            <!-- Последние объявления -->
            <section class="latest-listings">
                <h2>Последние объявления</h2>
                <div class="listings-grid">
                    <div class="listing-card">
                        <a href="single.html">
                            <div class="listing-image">
                                <img src="images/item1.jpg" alt="Название товара">
                                <span class="price">25 000 ₽</span>
                            </div>
                            <div class="listing-details">
                                <h3>Продам iPhone 12 Pro Max</h3>
                                <div class="meta">
                                    <span class="location">Москва</span>
                                    <span class="date">Сегодня 14:30</span>
                                </div>
                            </div>
                        </a>
                    </div>
                    <!-- Добавьте другие объявления -->
                </div>
                <a href="listings.html" class="btn btn-secondary">Все объявления</a>
            </section>
        </div>
    </main>

    <!-- Подвал -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h3>О нас</h3>
                    <p>Доска бесплатных объявлений с 2010 года. Помогаем людям находить нужные товары и услуги.</p>
                </div>
                <div class="footer-section">
                    <h3>Ссылки</h3>
                    <ul>
                        <li><a href="#">Правила</a></li>
                        <li><a href="#">Контакты</a></li>
                        <li><a href="#">Помощь</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h3>Контакты</h3>
                    <p>Email: info@doska.ru</p>
                    <p>Телефон: +7 (123) 456-7890</p>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2025 Доска Объявлений. Все права защищены.</p>
            </div>
        </div>
    </footer>

    <script src="js/main.js"></script>
</body>
</html>

2. Список объявлений (listings.html)

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Объявления | Доска объявлений</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <!-- Шапка (аналогичная index.html) -->
    <header class="header">...</header>

    <!-- Фильтры -->
    <section class="listings-filters">
        <div class="container">
            <div class="filters-row">
                <div class="filter-group">
                    <label for="category">Категория:</label>
                    <select id="category">
                        <option value="">Все категории</option>
                        <option value="electronics">Электроника</option>
                        <option value="real-estate">Недвижимость</option>
                    </select>
                </div>
                <div class="filter-group">
                    <label for="location">Город:</label>
                    <select id="location">
                        <option value="">Все города</option>
                        <option value="moscow">Москва</option>
                        <option value="spb">Санкт-Петербург</option>
                    </select>
                </div>
                <div class="filter-group">
                    <label for="price">Цена:</label>
                    <input type="number" id="price-min" placeholder="От">
                    <input type="number" id="price-max" placeholder="До">
                </div>
                <button class="btn btn-primary">Применить</button>
            </div>
            <div class="sort-row">
                <span>Сортировать:</span>
                <select id="sort">
                    <option value="newest">Сначала новые</option>
                    <option value="oldest">Сначала старые</option>
                    <option value="price-low">Цена по возрастанию</option>
                    <option value="price-high">Цена по убыванию</option>
                </select>
            </div>
        </div>
    </section>

    <!-- Список объявлений -->
    <main class="main-content">
        <div class="container">
            <div class="listings-container">
                <div class="listings-grid">
                    <!-- Карточка объявления 1 -->
                    <div class="listing-card">
                        <a href="single.html">
                            <div class="listing-image">
                                <img src="images/item1.jpg" alt="Название товара">
                                <span class="price">25 000 ₽</span>
                                <span class="featured">Премиум</span>
                            </div>
                            <div class="listing-details">
                                <h3>Продам iPhone 12 Pro Max</h3>
                                <p class="description">Отличное состояние, 256 Гб, гарантия до конца года...</p>
                                <div class="meta">
                                    <span class="category">Электроника</span>
                                    <span class="location">Москва</span>
                                    <span class="date">Сегодня 14:30</span>
                                </div>
                            </div>
                        </a>
                    </div>
                    
                    <!-- Карточка объявления 2 -->
                    <div class="listing-card">
                        <a href="single.html">
                            <div class="listing-image">
                                <img src="images/item2.jpg" alt="Название товара">
                                <span class="price">1 200 000 ₽</span>
                            </div>
                            <div class="listing-details">
                                <h3>Сдам 2-комнатную квартиру</h3>
                                <p class="description">Центр, 45 м², мебель, техника, ремонт...</p>
                                <div class="meta">
                                    <span class="category">Недвижимость</span>
                                    <span class="location">Санкт-Петербург</span>
                                    <span class="date">Вчера 18:45</span>
                                </div>
                            </div>
                        </a>
                    </div>
                    
                    <!-- Добавьте другие объявления -->
                </div>
                
                <!-- Пагинация -->
                <div class="pagination">
                    <a href="#" class="page-nav disabled">&laquo;</a>
                    <a href="#" class="page-number active">1</a>
                    <a href="#" class="page-number">2</a>
                    <a href="#" class="page-number">3</a>
                    <a href="#" class="page-nav">&raquo;</a>
                </div>
            </div>
            
            <!-- Боковая панель -->
            <aside class="listings-sidebar">
                <div class="sidebar-widget">
                    <h3>Фильтры</h3>
                    <div class="filter-options">
                        <h4>Цена</h4>
                        <div class="price-range">
                            <input type="range" min="0" max="1000000" value="500000" class="slider">
                            <div class="price-values">
                                <span>0 ₽</span>
                                <span>1 000 000 ₽</span>
                            </div>
                        </div>
                    </div>
                    <div class="filter-options">
                        <h4>Состояние</h4>
                        <label><input type="checkbox" checked> Новое</label>
                        <label><input type="checkbox" checked> Б/у</label>
                    </div>
                </div>
                <div class="sidebar-widget">
                    <h3>Популярные теги</h3>
                    <div class="tags">
                        <a href="#" class="tag">срочно</a>
                        <a href="#" class="tag">обмен</a>
                        <a href="#" class="tag">дешево</a>
                        <!-- Добавьте другие теги -->
                    </div>
                </div>
            </aside>
        </div>
    </main>

    <!-- Подвал (аналогичный index.html) -->
    <footer class="footer">...</footer>
</body>
</html>

3. Страница объявления (single.html)

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Продам iPhone 12 Pro Max | Доска объявлений</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <!-- Шапка (аналогичная index.html) -->
    <header class="header">...</header>

    <!-- Хлебные крошки -->
    <section class="breadcrumbs">
        <div class="container">
            <a href="index.html">Главная</a> &raquo;
            <a href="listings.html?category=electronics">Электроника</a> &raquo;
            <span>Продам iPhone 12 Pro Max</span>
        </div>
    </section>

    <!-- Основной контент -->
    <main class="main-content">
        <div class="container">
            <div class="single-listing">
                <!-- Галерея изображений -->
                <div class="listing-gallery">
                    <div class="main-image">
                        <img src="images/item1-large.jpg" alt="iPhone 12 Pro Max">
                    </div>
                    <div class="thumbnails">
                        <img src="images/item1-thumb1.jpg" alt="Thumbnail 1">
                        <img src="images/item1-thumb2.jpg" alt="Thumbnail 2">
                        <img src="images/item1-thumb3.jpg" alt="Thumbnail 3">
                    </div>
                </div>
                
                <!-- Информация о товаре -->
                <div class="listing-info">
                    <h1>Продам iPhone 12 Pro Max 256 Гб</h1>
                    <div class="meta">
                        <span class="category">Электроника</span>
                        <span class="location">Москва, Центральный округ</span>
                        <span class="date">Опубликовано: сегодня в 14:30</span>
                        <span class="views">Просмотров: 124</span>
                    </div>
                    
                    <div class="price-section">
                        <span class="price">25 000 ₽</span>
                        <span class="original-price">30 000 ₽</span>
                        <span class="discount">-16%</span>
                    </div>
                    
                    <div class="seller-info">
                        <div class="seller-avatar">
                            <img src="images/avatar.jpg" alt="Продавец">
                        </div>
                        <div class="seller-details">
                            <h3>Александр</h3>
                            <div class="seller-rating">
                                <span class="stars">★★★★☆</span>
                                <span class="reviews">12 отзывов</span>
                            </div>
                            <p>На сайте с 2021 года</p>
                        </div>
                        <button class="btn btn-contact">Показать телефон</button>
                    </div>
                    
                    <div class="actions">
                        <button class="btn btn-primary">Написать сообщение</button>
                        <button class="btn btn-secondary">В избранное</button>
                        <button class="btn btn-report">Пожаловаться</button>
                    </div>
                </div>
                
                <!-- Описание -->
                <div class="listing-description">
                    <h2>Описание</h2>
                    <p>Продаю iPhone 12 Pro Max 256 Гб в идеальном состоянии. Телефон куплен в официальном магазине Apple, гарантия до декабря 2023 года.</p>
                    <p>Комплект полный: наушники, зарядное устройство, кабель, документы, коробка. Никогда не ронялся, не ремонтировался, защитное стекло с первого дня.</p>
                    <p>Причина продажи: перехожу на новую модель.</p>
                    
                    <h3>Характеристики</h3>
                    <ul class="specs">
                        <li><strong>Цвет:</strong> Графитовый</li>
                        <li><strong>Память:</strong> 256 Гб</li>
                        <li><strong>Состояние:</strong> Идеальное</li>
                        <li><strong>Гарантия:</strong> До 15.12.2023</li>
                    </ul>
                </div>
                
                <!-- Карта -->
                <div class="listing-map">
                    <h2>Местоположение</h2>
                    <div class="map-container">
                        <img src="images/map-placeholder.jpg" alt="Карта">
                    </div>
                </div>
            </div>
            
            <!-- Похожие объявления -->
            <section class="related-listings">
                <h2>Похожие объявления</h2>
                <div class="listings-grid">
                    <!-- Добавьте карточки похожих объявлений -->
                </div>
            </section>
        </div>
    </main>

    <!-- Подвал (аналогичный index.html) -->
    <footer class="footer">...</footer>
</body>
</html>

4. Добавление объявления (post-ad.html)

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Подать объявление | Доска объявлений</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <!-- Шапка (аналогичная index.html) -->
    <header class="header">...</header>

    <!-- Хлебные крошки -->
    <section class="breadcrumbs">
        <div class="container">
            <a href="index.html">Главная</a> &raquo;
            <span>Подать объявление</span>
        </div>
    </section>

    <!-- Основной контент -->
    <main class="main-content">
        <div class="container">
            <h1>Подать объявление</h1>
            
            <form class="ad-form">
                <div class="form-section">
                    <h2>Основная информация</h2>
                    <div class="form-group">
                        <label for="ad-title">Заголовок объявления *</label>
                        <input type="text" id="ad-title" required placeholder="Например: Продам iPhone 12 Pro Max">
                    </div>
                    
                    <div class="form-group">
                        <label for="ad-category">Категория *</label>
                        <select id="ad-category" required>
                            <option value="">Выберите категорию</option>
                            <option value="electronics">Электроника</option>
                            <option value="real-estate">Недвижимость</option>
                            <option value="transport">Транспорт</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="ad-description">Описание *</label>
                        <textarea id="ad-description" required rows="6" placeholder="Подробно опишите товар или услугу"></textarea>
                    </div>
                </div>
                
                <div class="form-section">
                    <h2>Фотографии</h2>
                    <div class="upload-area">
                        <input type="file" id="ad-images" multiple accept="image/*" style="display: none;">
                        <label for="ad-images" class="upload-label">
                            <span class="upload-icon">+</span>
                            <span>Добавить фото (макс. 10)</span>
                        </label>
                        <div class="upload-preview"></div>
                        <p class="upload-hint">Первое фото будет на обложке. Перетащите для изменения порядка.</p>
                    </div>
                </div>
                
                <div class="form-section">
                    <h2>Цена и местоположение</h2>
                    <div class="form-row">
                        <div class="form-group half">
                            <label for="ad-price">Цена *</label>
                            <input type="number" id="ad-price" required placeholder="0">
                            <select id="ad-currency">
                                <option value="RUB">₽</option>
                                <option value="USD">$</option>
                                <option value="EUR">€</option>
                            </select>
                        </div>
                        <div class="form-group half">
                            <label for="ad-price-type">Тип цены</label>
                            <select id="ad-price-type">
                                <option value="fixed">Фиксированная</option>
                                <option value="negotiable">Договорная</option>
                                <option value="free">Бесплатно</option>
                                <option value="swap">Обмен</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group half">
                            <label for="ad-location">Город *</label>
                            <select id="ad-location" required>
                                <option value="">Выберите город</option>
                                <option value="moscow">Москва</option>
                                <option value="spb">Санкт-Петербург</option>
                            </select>
                        </div>
                        <div class="form-group half">
                            <label for="ad-address">Адрес (необязательно)</label>
                            <input type="text" id="ad-address" placeholder="Улица, дом">
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="ad-map">Укажите на карте</label>
                        <div class="map-selector" id="ad-map">
                            <img src="images/map-placeholder.jpg" alt="Карта">
                        </div>
                    </div>
                </div>
                
                <div class="form-section">
                    <h2>Контактная информация</h2>
                    <div class="form-row">
                        <div class="form-group half">
                            <label for="ad-contact-name">Ваше имя *</label>
                            <input type="text" id="ad-contact-name" required>
                        </div>
                        <div class="form-group half">
                            <label for="ad-contact-email">Email *</label>
                            <input type="email" id="ad-contact-email" required>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="ad-contact-phone">Телефон *</label>
                        <input type="tel" id="ad-contact-phone" required>
                    </div>
                    
                    <div class="form-group">
                        <label>
                            <input type="checkbox" id="ad-whatsapp">
                            Показывать WhatsApp
                        </label>
                        <label>
                            <input type="checkbox" id="ad-telegram">
                            Показывать Telegram
                        </label>
                    </div>
                </div>
                
                <div class="form-actions">
                    <button type="submit" class="btn btn-primary">Опубликовать объявление</button>
                    <button type="button" class="btn btn-secondary">Сохранить черновик</button>
                </div>
            </form>
        </div>
    </main>

    <!-- Подвал (аналогичный index.html) -->
    <footer class="footer">...</footer>
</body>
</html>

5. Личный кабинет (dashboard.html)

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Личный кабинет | Доска объявлений</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <!-- Шапка (аналогичная index.html) -->
    <header class="header">...</header>

    <!-- Хлебные крошки -->
    <section class="breadcrumbs">
        <div class="container">
            <a href="index.html">Главная</a> &raquo;
            <span>Личный кабинет</span>
        </div>
    </section>

    <!-- Основной контент -->
    <main class="main-content">
        <div class="container dashboard">
            <!-- Боковое меню -->
            <aside class="dashboard-sidebar">
                <div class="user-profile">
                    <div class="user-avatar">
                        <img src="images/avatar.jpg" alt="Пользователь">
                    </div>
                    <h3>Александр</h3>
                    <p>На сайте с 12.05.2021</p>
                </div>
                
                <nav class="dashboard-menu">
                    <ul>
                        <li class="active"><a href="dashboard.html">Мои объявления</a></li>
                        <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>
                </nav>
            </aside>
            
            <!-- Основная область -->
            <div class="dashboard-content">
                <div class="dashboard-header">
                    <h1>Мои объявления</h1>
                    <a href="post-ad.html" class="btn btn-primary">Подать новое объявление</a>
                </div>
                
                <div class="dashboard-tabs">
                    <button class="tab-btn active">Активные (3)</button>
                    <button class="tab-btn">На модерации (1)</button>
                    <button class="tab-btn">Архивные (5)</button>
                    <button class="tab-btn">Черновики (2)</button>
                </div>
                
                <div class="dashboard-listings">
                    <!-- Объявление 1 -->
                    <div class="dashboard-listing">
                        <div class="listing-image">
                            <img src="images/item1-thumb.jpg" alt="Объявление">
                        </div>
                        <div class="listing-info">
                            <h3><a href="single.html">Продам iPhone 12 Pro Max 256 Гб</a></h3>
                            <div class="meta">
                                <span class="category">Электроника</span>
                                <span class="date">Опубликовано: сегодня в 14:30</span>
                                <span class="views">Просмотров: 124</span>
                            </div>
                            <div class="price">25 000 ₽</div>
                        </div>
                        <div class="listing-actions">
                            <button class="btn btn-small">Редактировать</button>
                            <button class="btn btn-small btn-danger">Удалить</button>
                            <div class="status active">Активно</div>
                        </div>
                    </div>
                    
                    <!-- Объявление 2 -->
                    <div class="dashboard-listing">
                        <div class="listing-image">
                            <img src="images/item2-thumb.jpg" alt="Объявление">
                        </div>
                        <div class="listing-info">
                            <h3><a href="single.html">Сдам 2-комнатную квартиру</a></h3>
                            <div class="meta">
                                <span class="category">Недвижимость</span>
                                <span class="date">Опубликовано: вчера в 18:45</span>
                                <span class="views">Просмотров: 89</span>
                            </div>
                            <div class="price">1 200 000 ₽</div>
                        </div>
                        <div class="listing-actions">
                            <button class="btn btn-small">Редактировать</button>
                            <button class="btn btn-small btn-danger">Удалить</button>
                            <div class="status active">Активно</div>
                        </div>
                    </div>
                    
                    <!-- Добавьте другие объявления -->
                </div>
                
                <!-- Статистика -->
                <div class="dashboard-stats">
                    <div class="stat-card">
                        <div class="stat-value">3</div>
                        <div class="stat-label">Активных объявлений</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value">1 245</div>
                        <div class="stat-label">Всего просмотров</div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-value">18</div>
                        <div class="stat-label">Сообщений</div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- Подвал (аналогичный index.html) -->
    <footer class="footer">...</footer>
</body>
</html>

CSS (style.css)

/* Базовые стили */
:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --danger-color: #e74c3c;
    --dark-color: #2c3e50;
    --light-color: #ecf0f1;
    --gray-color: #95a5a6;
    --text-color: #333;
    --text-light: #7f8c8d;
    --border-color: #ddd;
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', Arial, sans-serif;
    color: var(--text-color);
    line-height: 1.6;
    background-color: #f9f9f9;
}

a {
    text-decoration: none;
    color: var(--primary-color);
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Кнопки */
.btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.btn-primary {
    background-color: var(--primary-color);
    color: white;
}

.btn-primary:hover {
    background-color: #2980b9;
}

.btn-secondary {
    background-color: var(--secondary-color);
    color: white;
}

.btn-secondary:hover {
    background-color: #27ae60;
}

.btn-danger {
    background-color: var(--danger-color);
    color: white;
}

.btn-danger:hover {
    background-color: #c0392b;
}

.btn-small {
    padding: 5px 10px;
    font-size: 14px;
}

/* Шапка */
.header {
    background-color: white;
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
}

.logo a {
    font-size: 24px;
    font-weight: bold;
    color: var(--dark-color);
}

.main-nav ul {
    display: flex;
    list-style: none;
}

.main-nav li {
    margin-left: 20px;
}

.main-nav a {
    color: var(--dark-color);
    font-weight: 500;
}

.main-nav a:hover {
    color: var(--primary-color);
}

.auth-buttons .btn {
    margin-left: 10px;
}

.btn-login {
    background: none;
    color: var(--dark-color);
    border: 1px solid var(--border-color);
}

.btn-register {
    background-color: var(--primary-color);
    color: white;
}

/* Поиск */
.search-section {
    background-color: var(--dark-color);
    color: white;
    padding: 40px 0;
    text-align: center;
}

.search-section h1 {
    margin-bottom: 20px;
    font-size: 32px;
}

.search-form {
    display: flex;
    max-width: 800px;
    margin: 0 auto;
}

.search-form input[type="text"],
.search-form select {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 4px 0 0 4px;
}

.search-form select {
    border-radius: 0;
    border-left: 1px solid var(--border-color);
}

.search-form button {
    border-radius: 0 4px 4px 0;
}

/* Категории */
.categories-section {
    margin: 40px 0;
}

.categories-section h2 {
    margin-bottom: 20px;
    font-size: 24px;
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.category-card {
    background: white;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    box-shadow: var(--shadow);
    transition: transform 0.3s ease;
}

.category-card:hover {
    transform: translateY(-5px);
}

.category-icon img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    margin-bottom: 10px;
}

.category-card h3 {
    margin-bottom: 5px;
}

.count {
    color: var(--text-light);
    font-size: 14px;
}

/* Объявления */
.latest-listings {
    margin: 40px 0;
}

.latest-listings h2 {
    margin-bottom: 20px;
    font-size: 24px;
}

.listings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.listing-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform 0.3s ease;
}

.listing-card:hover {
    transform: translateY(-5px);
}

.listing-image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.listing-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.listing-card:hover .listing-image img {
    transform: scale(1.05);
}

.price {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-weight: bold;
}

.listing-details {
    padding: 15px;
}

.listing-details h3 {
    margin-bottom: 10px;
    font-size: 18px;
}

.meta {
    display: flex;
    justify-content: space-between;
    color: var(--text-light);
    font-size: 14px;
}

/* Подвал */
.footer {
    background-color: var(--dark-color);
    color: white;
    padding: 40px 0 20px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-bottom: 30px;
}

.footer-section h3 {
    margin-bottom: 20px;
    font-size: 18px;
}

.footer-section ul {
    list-style: none;
}

.footer-section li {
    margin-bottom: 10px;
}

.footer-section a {
    color: var(--light-color);
}

.footer-section a:hover {
    color: white;

administrator

Свободен!

Оцените автора
( Пока оценок нет )
Osclass
Добавить комментарий
Мы используем cookie-файлы, чтобы получить статистику, которая помогает нам улучшить сервис для Вас с целью персонализации сервисов и предложений. Вы можете прочитать подробнее о cookie-файлах или изменить настройки браузера. Продолжая пользоваться сайтом без изменения настроек, вы даёте согласие на использование ваших cookie-файлов.