Вопрос от +79658654100 Имя 24 мая 2025 11:00
Создать макет сайта компьютер-софт
Ответ нейросети
24 мая 2025 11:00
Конечно! Ниже представлен пример макета сайта "Компьютер-софт" (компания, предоставляющая программное обеспечение). Макет можно реализовать на HTML и CSS.
Структура макета сайта "Компьютер-софт"
1. Заголовок (Header)
- Логотип
- Меню навигации:
- Главная
- О нас
- Продукты
- Услуги
- Контакты
2. Главное баннерное изображение (Hero Section)
- Краткое описание компании
- Кнопка "Подробнее" или "Купить сейчас"
3. Раздел "О компании"
- Описание компании
- Почему выбирают нас
4. Раздел "Наши продукты"
- Карточки с описанием программных продуктов
- Название, краткое описание, кнопка "Подробнее"
5. Раздел "Услуги"
- Список предоставляемых услуг
- Краткое описание каждой услуги
6. Контактная информация
- Адрес, телефон, email
- Карта Google Maps
7. Подвал (Footer)
- Повтор навигационного меню
- Социальные сети
- Авторские права
Пример кода (HTML + CSS)
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Компьютер-софт</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
line-height: 1.6;
}
header {
background-color: #2c3e50;
color: #fff;
padding: 20px;
}
header .logo {
font-size: 24px;
font-weight: bold;
}
nav {
margin-top: 10px;
}
nav a {
color: #ecf0f1;
margin-right: 15px;
text-decoration: none;
}
.hero {
background: url('https://via.placeholder.com/1920x600') no-repeat center center/cover;
color: #fff;
padding: 100px 20px;
text-align: center;
}
.section {
padding: 60px 20px;
}
.section h2 {
text-align: center;
margin-bottom: 40px;
}
.about, .products, .services, .contacts {
max-width: 1200px;
margin: 0 auto;
}
.product-card {
border: 1px solid #ccc;
border-radius: 8px;
padding: 20px;
margin: 10px;
flex: 1 1 calc(33% - 40px);
box-sizing: border-box;
display: inline-block;
vertical-align: top;
}
.footer {
background-color: #2c3e50;
color: #bdc3c7;
padding: 20px;
text-align: center;
}
@media(max-width: 768px) {
.product-card {
flex: 1 1 100%;
}
}
</style>
</head>
<body>
<header>
<div class="logo">Компьютер-софт</div>
<nav>
<a href="#">Главная</a>
<a href="#about">О нас</a>
<a href="#products">Продукты</a>
<a href="#services">Услуги</a>
<a href="#contacts">Контакты</a>
</nav>
</header>
<div class="hero">
<h1>Лучшее программное обеспечение для вашего бизнеса</h1>
<p>Обеспечиваем качественные решения для всех сфер деятельности</p>
<button>Подробнее</button>
</div>
<section id="about" class="section">
<div class="about">
<h2>О компании</h2>
<p>Компания "Компьютер-софт" уже более 10 лет разрабатывает и поставляет программное обеспечение для бизнеса и частных клиентов. Наш приоритет - качество и инновации.</p>
</div>
</section>
<section id="products" class="section">
<h2>Наши продукты</h2>
<div style="display:flex; flex-wrap: wrap; justify-content: center;">
<div class="product-card">
<h3>Программа 1</h3>
<p>Описание программного продукта 1.</p>
<button>Подробнее</button>
</div>
<div class="product-card">
<h3>Программа 2</h3>
<p>Описание программного продукта 2.</p>
<button>Подробнее</button>
</div>
<div class="product-card">
<h3>Программа 3</h3>
<p>Описание программного продукта 3.</p>
<button>Подробнее</button>
</div>
</div>
</section>
<section id="services" class="section">
<h2>Услуги</h2>
<ul>
<li>Разработка индивидуальных решений</li>
<li>Техническая поддержка</li>
<li>Обучение сотрудников</li>
</ul>
</section>
<section id="contacts" class="section">
<h2>Контакты</h2>
<p>Адрес: г. Москва, ул. Примерная, д. 1</p>
<p>Телефон: +7 495 123-45-67</p>
<p>Email: info@computersoftware.ru</p>
<!-- Можно добавить карту Google Maps -->
</section>
<div class="footer">
<p>© 2024 Компьютер-софт. Все права сохранены.</p>
</div>
</body>
</html>
Если нужно более подробно проработать дизайн, добавить интерактивность или оформить современный адаптивный сайт, могу помочь с этим. Какие конкретные требования или пожелания у вас есть?
Понравился ответ?
Задай свой вопрос
Напиши любую задачу или вопрос, а нейросеть её решит
