Назад к портфолио
header, footer
Ниже лучшая практичная версия: минимализм, белый фон, чёткая типографика, мягкие тени, без лишнего шума.
Нажмите для увеличения
×
![Увеличенное изображение]()
О проекте
Концепция дизайна (коротко)
-
❌ Без градиентов
-
✅ Белый фон
-
✅ Серые оттенки (
#f5f6f7,#e5e7eb) -
✅ Акцент — один цвет (например, тёмно-синий или чёрный)
-
✅ Скругления + лёгкая тень
-
✅ Максимум воздуха
Plaintext
воздуха
🧱 Структура страницы
HEADER
├─ логотип
├─ меню
└─ кнопка "Войти"
MAIN
├─ поиск
├─ категории (cards)
└─ последние объявления
FOOTER
🧩 Пример HTML (чисто и красиво)
Html
<main class="container">
<section class="search-box">
<input type="text" placeholder="Поиск объявлений">
<button>Найти</button>
</section>
<section class="categories">
<div class="cat-card">🚗 Авто</div>
<div class="cat-card">🏠 Недвижимость</div>
<div class="cat-card">💼 Работа</div>
<div class="cat-card">📱 Электроника</div>
</section>
<section class="items">
<article class="item-card">
<img src="https://via.placeholder.com/300x200" alt="">
<div class="item-body">
<h3>BMW X5 2020</h3>
<p class="price">€38 500</p>
<span class="city">Wien</span>
</div>
</article>
</section>
</main>
Plaintext
🎯 CSS (ключевая часть — стиль)
Css
:root {
--bg: #ffffff;
--bg-soft: #f5f6f7;
--border: #e5e7eb;
--text: #111827;
--muted: #6b7280;
}
body {
margin: 0;
font-family: Inter, system-ui, sans-serif;
background: var(--bg-soft);
color: var(--text);
}
.container {
max-width: 1200px;
margin: 40px auto;
padding: 0 20px;
}
/* SEARCH */
.search-box {
display: flex;
gap: 10px;
margin-bottom: 30px;
}
.search-box input {
flex: 1;
padding: 14px 16px;
border: 1px solid var(--border);
border-radius: 10px;
font-size: 16px;
}
.search-box button {
padding: 14px 22px;
border-radius: 10px;
border: none;
background: #111;
color: #fff;
cursor: pointer;
}
/* CATEGORIES */
.categories {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 16px;
margin-bottom: 40px;
}
.cat-card {
background: var(--bg);
padding: 20px;
border-radius: 14px;
text-align: center;
border: 1px solid var(--border);
cursor: pointer;
}
.cat-card:hover {
border-color: #111;
}
/* ITEMS */
.items {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}
.item-card {
background: var(--bg);
border-radius: 16px;
overflow: hidden;
border: 1px solid var(--border);
}
.item-card img {
width: 100%;
display: block;
}
.item-body {
padding: 14px 16px;
}
.price {
font-weight: 600;
margin-top: 6px;
}
.city {
font-size: 14px;
color: var(--muted);
}
Plaintext
🔥 Почему это выглядит профессионально
Ничего не отвлекает от контента
Хорошо масштабируется под мобильные
Легко расширять (фильтры, бейджи, VIP)
Подходит под PHP / MySQL проекты
Можно без боли добавить Tailwind или оставить чистый CSS
🚀 Хочешь улучшить ещё?
Могу:
🔹 переделать под твой index.php
🔹 сделать header + menu.php
🔹 адаптировать под dilarsh.com
🔹 добавить VIP / TOP / Срочно
🔹 сделать mobile-first версию
Комментарии (0)