-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
220 lines (200 loc) · 12.2 KB
/
index.html
File metadata and controls
220 lines (200 loc) · 12.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Domicode</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@200..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="Assets/css/Components/navbar.css">
<link rel="stylesheet" href="Assets/css/Components/buttons.css">
<link rel="stylesheet" href="Assets/css/Components/card.css">
<link rel="stylesheet" href="Assets/css/Components/counter.css">
<link rel="stylesheet" href="Assets/css/main.css">
<link rel="shortcut icon" href="Assets/img/f-icon.ico" type="image/x-icon">
</head>
<body>
<div class="wrapper">
<header class="header d-flex flex-column align-items-center p-3">
<nav class="nav-glass w-50">
<div class="nav-indicator" id="navIndicator"></div>
<a href="index.html" class="nav-link active" data-index="0">
<div class="nav-content">
<svg xmlns="http://www.w3.org/2000/svg" class="nav-icon" fill="currentColor" viewBox="0 0 24 24">
<path d="M20 19v-8.5a1 1 0 0 0-.4-.8l-7-5.25a1 1 0 0 0-1.2 0l-7 5.25a1 1 0 0 0-.4.8V19a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1z"/>
</svg>
<span class="nav-text">Главная</span>
</div>
</a>
<a href="specialists.html" class="nav-link" data-index="1">
<div class="nav-content">
<svg xmlns="http://www.w3.org/2000/svg" class="nav-icon" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 6a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7Zm-1.5 8a4 4 0 0 0-4 4 2 2 0 0 0 2 2h7a2 2 0 0 0 2-2 4 4 0 0 0-4-4h-3Zm6.82-3.096a5.51 5.51 0 0 0-2.797-6.293 3.5 3.5 0 1 1 2.796 6.292ZM19.5 18h.5a2 2 0 0 0 2-2 4 4 0 0 0-4-4h-1.1a5.503 5.503 0 0 1-.471.762A5.998 5.998 0 0 1 19.5 18ZM4 7.5a3.5 3.5 0 0 1 5.477-2.889 5.5 5.5 0 0 0-2.796 6.293A3.501 3.501 0 0 1 4 7.5ZM7.1 12H6a4 4 0 0 0-4 4 2 2 0 0 0 2 2h.5a5.998 5.998 0 0 1 3.071-5.238A5.505 5.505 0 0 1 7.1 12Z"/>
</svg>
<span class="nav-text">Специалисты</span>
</div>
</a>
<a href="contacts.html" class="nav-link" data-index="2">
<div class="nav-content">
<svg xmlns="http://www.w3.org/2000/svg" class="nav-icon" fill="currentColor" viewBox="0 0 24 24">
<path d="M7.978 4a2.553 2.553 0 0 0-1.926.877C4.233 6.7 3.699 8.751 4.153 10.814c.44 1.995 1.778 3.893 3.456 5.572 1.68 1.679 3.577 3.018 5.57 3.459 2.062.456 4.115-.073 5.94-1.885a2.556 2.556 0 0 0 .001-3.861l-1.21-1.21a2.689 2.689 0 0 0-3.802 0l-.617.618a.806.806 0 0 1-1.14 0l-1.854-1.855a.807.807 0 0 1 0-1.14l.618-.62a2.692 2.692 0 0 0 0-3.803l-1.21-1.211A2.555 2.555 0 0 0 7.978 4Z"/>
</svg>
<span class="nav-text">Контакты</span>
</div>
</a>
<a href="about.html" class="nav-link" data-index="3">
<div class="nav-content">
<svg xmlns="http://www.w3.org/2000/svg" class="nav-icon" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1h2a2 2 0 0 1 2 2v15a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h2Zm6 1h-4v2H9a1 1 0 0 0 0 2h6a1 1 0 1 0 0-2h-1V4Z"/>
</svg>
<span class="nav-text">О нас</span>
</div>
</a>
</nav>
</header>
<main class="main">
<div class="preview">
<h1>DOMICODE</h1>
<h3 style="color: #d0b6a0;">Превращаем мечты в архитектуру</h3>
<p>Наши архитекторы и дизайнеры работают в одной команде. Мы проектируем дом так, чтобы в нем было идеальное место для всего: от дивана до кофейной чашки. С нами вы получаете готовый к заезду дом с продуманными интерьерами.</p>
<a href="#" class="btn-glass" data-bs-toggle="modal" data-bs-target="#orderModal">Заказать звонок</a>
</div>
<div class="content-container">
<div class="content">
<div class="card">
<img src="Assets/img/example/house.jpg" alt="Image 1" class="card-image">
<div class="card-content">
<h3>Современные дома в стиле хай-тек</h3>
<p>Мы создаём современные дома в стиле хай-тек, где сочетаются минимализм, технологии и комфорт. Каждый проект индивидуален и разрабатывается с учётом всех ваших пожеланий. Используем инновационные материалы и энергоэффективные технологии.</p>
</div>
</div>
<div class="card">
<img src="Assets/img/example/gotic-house.jpg" alt="Image 2" class="card-image">
<div class="card-content">
<h3>Неоготические проекты</h3>
<p>Для ценителей классики мы создаём дома в готическом стиле. Кованые элементы, арочные окна и высокие своды — создаём атмосферу величия и уюта. Современные интерпретации классической архитектуры с сохранением исторического духа.</p>
</div>
</div>
<div class="card">
<img src="Assets/img/example/room.jpg" alt="Image 3" class="card-image">
<div class="card-content">
<h3>Интерьеры</h3>
<p>Мы создаём функциональные интерьеры, подбираем цвета, мебель и материалы, чтобы каждый уголок дома был уютным, современным и удобным. Наша команда дизайнеров разрабатывает индивидуальные проекты, отражающие характер и потребности каждого клиента.</p>
</div>
</div>
<div class="card">
<img src="Assets/img/example/bed.jpg" alt="Image 4" class="card-image">
<div class="card-content">
<h3>Спальни</h3>
<p>Мы создаём спальни с уникальным дизайном, естественным светом и уютной атмосферой. Каждая деталь тщательно продумана для вашего комфорта и релаксации. От выбора цветовой палитры до расположения мебели — всё направлено на создание идеального места для отдыха.</p>
</div>
</div>
</div>
</div>
<div class="counters ">
<h2 class="counters-title">Наш путь в цифрах</h2>
<div class="counters-grid">
<div class="counter-item">
<i class="fas fa-building counter-icon"></i>
<div class="counter-number" data-target="487">0</div>
<div class="counter-text">Завершённых проектов</div>
</div>
<div class="counter-item">
<i class="fas fa-network-wired counter-icon"></i>
<div class="counter-number" data-target="18">0</div>
<div class="counter-text">Филиалов</div>
</div>
<div class="counter-item">
<i class="fas fa-calendar-check counter-icon"></i>
<div class="counter-number" data-target="12">0</div>
<div class="counter-text">Лет на рынке</div>
</div>
<div class="counter-item">
<i class="fas fa-handshake counter-icon"></i>
<div class="counter-number" data-target="92">0</div>
<div class="counter-text">Партнёрских компаний</div>
</div>
<div class="counter-item">
<i class="fas fa-globe-europe counter-icon"></i>
<div class="counter-number" data-target="11">0</div>
<div class="counter-text">Стран-партнёров</div>
</div>
<div class="counter-item">
<i class="fas fa-shield-alt counter-icon"></i>
<div class="counter-number" data-target="10">0</div>
<div class="counter-text">Лет гарантии</div>
</div>
</div>
</div>
</main>
<footer class="footer">
<div class="footer-content">
<img src="Assets/img/f-icon.ico" alt="Domicode" class="footer-logo">
<span>© 2013-2025 Domicode. Все права защищены.</span>
</div>
</footer>
</div>
<div class="modal fade" id="orderModal" tabindex="-1" aria-labelledby="orderModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header border-0">
<h5 class="modal-title" id="orderModalLabel">Оставьте заявку</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form id="orderForm">
<div class="mb-3">
<label for="firstName" class="form-label">Имя</label>
<input type="text" class="form-control" id="firstName" name="firstName" maxlength="30" required>
<div class="error-text"></div>
</div>
<div class="mb-3">
<label for="lastName" class="form-label">Фамилия</label>
<input type="text" class="form-control" id="lastName" name="lastName" maxlength="30" required>
<div class="error-text"></div>
</div>
<div class="mb-3">
<label for="phone" class="form-label">Номер телефона</label>
<input type="tel" class="form-control" id="phone" name="phone" maxlength="19" placeholder="+375 (__) ___-__-__" required>
<div class="error-text"></div>
</div>
<div class="mb-3">
<label for="email" class="form-label">Электронная почта</label>
<input type="email" class="form-control" id="email" name="email" maxlength="50" required>
<div class="error-text"></div>
</div>
<div class="mb-3">
<label for="city" class="form-label">Город</label>
<input type="text" class="form-control" id="city" name="city" maxlength="50">
<div class="error-text"></div>
</div>
<div class="mb-3">
<label for="address" class="form-label">Адрес</label>
<textarea class="form-control" id="address" name="address" rows="2" maxlength="100" placeholder="Улица, дом, квартира"></textarea>
<div class="error-text"></div>
</div>
<button type="submit" class="btn-glass w-100 btn-p-25">Отправить</button>
</form>
</div>
</div>
</div>
</div>
<div class="success-modal" id="SuccessModal">
<div class="success-modal-content">
<div class="success-modal-icon">
<i class="fas fa-check-circle"></i>
</div>
<h3 class="success-modal-title">Успешно!</h3>
<p class="success-modal-message">Ваша заявка успешно отправлена! Мы свяжемся с вами в ближайшее время.</p>
<button class="btn-glass w-100 p-2" onclick="hideSuccessModal()">Понятно</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
<script src="Assets/js/navbar.js"></script>
<script src="Assets/js/main.js"></script>
</body>
</html>