-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
383 lines (377 loc) · 20.3 KB
/
index.html
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
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Swiper dla card carousel -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"/>
<!-- Mapy Google -->
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.1.1/model-viewer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@google/model-viewer/dist/model-viewer.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<!-- Nawigacja strony -->
<nav class="navbar navbar-expand-lg navbar-custom">
<button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand ml-5 ms-1" id="logo_text" href="#">
<img src="/images/LOGO.png" alt="logo" class="img-fluid" width="70px">
</a>
<div class="collapse navbar-collapse ms-12" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-md-0 mx-auto">
<li class="nav-item">
<a class="nav-link d-flex align-items-center menu-option" href="#">
<img src="/images/arrow.svg" class="rotate-icon" width="38px" height="38px">
<span class="medium ml-2 mr-sm-5">O firmie</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center menu-option" href="#">
<img src="/images/arrow.svg" class="rotate-icon" width="38px" height="38px">
<span class="medium ml-2 mr-sm-5">Projekty</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center menu-option" href="#">
<img src="/images/arrow.svg" class="rotate-icon" width="38px" height="38px">
<span class="medium ml-2 mr-sm-5">Realizacje</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center menu-option" href="#">
<img src="/images/arrow.svg" class="rotate-icon" width="38px" height="38px">
<span class="medium ml-2 mr-sm-5">Kontakt</span>
</a>
</li>
</ul>
</div>
</nav>
<!-- Duży napis i auto -->
<header>
<div id="spacer-layout">
<div id="spacer"></div>
</div>
<div class="container">
<div>
<div id="header-main-cont">
<h1 id="header-main">Twój ulubiony <a id="header-orange-color">kolor</a> w naszym wykonaniu</h1>
</div>
<div id="header-sub-cont">
<h4 id="header-sub">Lorem Ipsum is simply dummy text of the printing and typesetting</h4>
</div>
<div id="header-buttons-cont">
<button class="header-button">
<svg xmlns="http://www.w3.org/2000/svg" width="27" height="28" viewBox="0 0 27 28" fill="none">
<path d="M25.7027 23.1977L20.8342 18.33C20.6145 18.1103 20.3166 17.9883 20.0041 17.9883H19.2081C20.5559 16.2648 21.3567 14.097 21.3567 11.7389C21.3567 6.12907 16.8105 1.58362 11.1997 1.58362C5.58896 1.58362 1.04272 6.12907 1.04272 11.7389C1.04272 17.3487 5.58896 21.8941 11.1997 21.8941C13.5583 21.8941 15.7264 21.0934 17.4502 19.7459V20.5417C17.4502 20.8542 17.5723 21.152 17.792 21.3717L22.6605 26.2394C23.1195 26.6984 23.8618 26.6984 24.3159 26.2394L25.6978 24.8577C26.1569 24.3988 26.1569 23.6567 25.7027 23.1977ZM11.1997 17.9883C7.74732 17.9883 4.94926 15.1956 4.94926 11.7389C4.94926 8.28707 7.74243 5.48949 11.1997 5.48949C14.6521 5.48949 17.4502 8.28218 17.4502 11.7389C17.4502 15.1907 14.657 17.9883 11.1997 17.9883Z" fill="black"/>
</svg>
Sprawdź
</button>
<button class="header-button">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="26" viewBox="0 0 30 26" fill="none">
<path d="M29.1143 5.68933L28.025 3.34988C27.7482 2.7677 27.2338 2.33553 26.6106 2.1748C23.1496 1.23188 19.1797 0.655052 15.0866 0.583618C10.9041 0.656838 6.93421 1.23188 3.14466 2.25159C2.84999 2.33731 2.33567 2.76948 2.06422 3.33917L0.969504 5.69112C0.835567 5.96257 0.75699 6.28223 0.755204 6.61975V8.17343C0.753418 8.19486 0.753418 8.21987 0.753418 8.24665C0.753418 8.9467 1.32131 9.5146 2.02136 9.5146C2.04101 9.5146 2.06065 9.5146 2.0803 9.51281H6.57704C7.3128 9.49495 7.90213 8.89491 7.90213 8.15558C7.90213 8.12343 7.90035 8.09307 7.89856 8.06093V6.56439C7.89856 6.55725 7.89856 6.55011 7.89856 6.54296C7.89856 6.13401 8.11107 5.77505 8.43074 5.56789C10.1219 4.66069 12.1256 4.12851 14.2526 4.12851C14.5312 4.12851 14.8062 4.13744 15.0812 4.1553C15.2991 4.13565 15.5955 4.12494 15.8955 4.12494C17.9993 4.12494 19.9798 4.64462 21.7192 5.56254C21.9745 5.73934 22.1871 6.09829 22.1871 6.50725V6.53046V8.0645C22.1853 8.09129 22.1835 8.12343 22.1835 8.15379C22.1835 8.89134 22.7728 9.49317 23.5068 9.51103H28.0089C28.025 9.51103 28.0446 9.51281 28.0643 9.51281C28.7643 9.51281 29.3322 8.94492 29.3322 8.24487C29.3322 8.21987 29.3322 8.19308 29.3304 8.16808V6.61797C29.3286 6.28044 29.2501 5.96078 29.1108 5.67683L29.1143 5.68933Z" fill="black"/>
<path d="M22.1852 13.6185C21.0709 12.1952 20.3976 10.3772 20.3976 8.40384C20.3976 8.35384 20.3976 8.30383 20.3994 8.25383V7.72522H18.6136V9.51106H11.4702V7.72522H9.68437V8.31455C9.68437 8.35741 9.68616 8.40741 9.68616 8.45741C9.68616 10.4308 9.0129 12.247 7.88425 13.6899L2.54102 20.2261V25.5836H27.5428V20.2261L22.1852 13.6185ZM15.0419 22.0119C12.0828 22.0119 9.68437 19.6135 9.68437 16.6544C9.68437 13.6953 12.0828 11.2969 15.0419 11.2969C18.001 11.2969 20.3994 13.6953 20.3994 16.6544C20.3994 19.6135 18.001 22.0119 15.0419 22.0119Z" fill="black"/>
<path d="M18.6136 16.6544C18.6136 18.6278 17.0152 20.2261 15.0419 20.2261C13.0685 20.2261 11.4702 18.6278 11.4702 16.6544C11.4702 14.6811 13.0685 13.0828 15.0419 13.0828C17.0152 13.0828 18.6136 14.6811 18.6136 16.6544Z" fill="black"/>
</svg>
Kontakt
</button>
</div>
</div>
<div id="header-right-cont">
<div id="header-right-text">
<img src="/images/car.svg" alt="car-w-text">
</div>
</div>
</div>
</header>
<div class="text-ostatnio-dodane">
<h1>Ostatnie posty</h1>
</div>
<main>
<!-- Kartki z najnowszymi postami -->
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- Twoje karty -->
<div class="swiper-slide">
<div class="swiper-cards">
<img src="images/card.png" class="card_img">
</div>
<div class="cos_tam">
<h4 class="card_header">POST</h4>
<p class="card_header_strong">Bardzo fajny długi tytuł, który jest bradzo fajny</p>
<p class="card_desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores voluptate tempore.</p>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-cards">
<img src="images/card.png" class="card_img">
</div>
<div class="cos_tam">
<h4 class="card_header">POST</h4>
<p class="card_header_strong">Bardzo fajny długi tytuł, który jest bradzo fajny</p>
<p class="card_desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores voluptate tempore.</p>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-cards">
<img src="images/card.png" class="card_img">
</div>
<div class="cos_tam">
<h4 class="card_header">POST</h4>
<p class="card_header_strong">Bardzo fajny długi tytuł, który jest bradzo fajny</p>
<p class="card_desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores voluptate tempore.</p>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-cards">
<img src="images/card.png" class="card_img">
</div>
<div class="cos_tam">
<h4 class="card_header">POST</h4>
<p class="card_header_strong">Bardzo fajny długi tytuł, który jest bradzo fajny</p>
<p class="card_desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores voluptate tempore.</p>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-cards">
<img src="images/card.png" class="card_img">
</div>
<div class="cos_tam">
<h4 class="card_header">POST</h4>
<p class="card_header_strong">Bardzo fajny długi tytuł, który jest bradzo fajny</p>
<p class="card_desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores voluptate tempore.</p>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-cards">
<img src="images/card.png" class="card_img">
</div>
<div class="cos_tam">
<h4 class="card_header">POST</h4>
<p class="card_header_strong">Bardzo fajny długi tytuł, który jest bradzo fajny</p>
<p class="card_desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores voluptate tempore.</p>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-cards">
<img src="images/card.png" class="card_img">
</div>
<div class="cos_tam">
<h4 class="card_header">POST</h4>
<p class="card_header_strong">Bardzo fajny długi tytuł, który jest bradzo fajny</p>
<p class="card_desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores voluptate tempore.</p>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-cards">
<img src="images/card.png" class="card_img">
</div>
<div class="cos_tam">
<h4 class="card_header">POST</h4>
<p class="card_header_strong">Bardzo fajny długi tytuł, który jest bradzo fajny</p>
<p class="card_desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores voluptate tempore.</p>
</div>
</div>
<!-- Dodaj więcej kart, jeśli jest to konieczne -->
</div>
<!-- Paginacja -->
<div class="swiper-pagination"></div>
<!-- Przyciski nawigacyjne -->
<div class="swiper-button-prev-unique"></div>
<div class="swiper-button-next-unique"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
var swiper = new Swiper(".swiper-container", {
slidesPerView: 4,
spaceBetween: 20,
sliderPerGroup: 4,
loop: true,
centerSlide: true,
fade: true,
grabCursor: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
dynamicBullets: true,
},
breakpoints: {
1181: {
slidesPerView: 4
},
1180: {
slidesPerView: 3
},
1020: {
slidesPerView: 2
},
700: {
slidesPerView: 1
}
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
});
});
</script>
</main>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<div class="text-ostatnio-dodane">
<h1>Twój pomysł stanie się rzeczywistością</h1>
</div>
<div class="wiadro">
<div class="Etykiety-produktów">
<div class="container-fluid text-center">
<h1 class="text_in_card">Etykiety produktów</h1>
</div>
</div>
<div class="Wizualizacja-2D">
<div class="container-fluid text-center">
<h1 class="text_in_card">Wizualizacja 2D</h1>
</div>
</div>
<div class="Bannery">
<div class="container-fluid text-center">
<h1 class="text_in_card">Bannery</h1>
</div>
</div>
<div class="Ilustracje">
<div class="container-fluid text-center">
<h1 class="text_in_card">Ilustracje</h1>
</div>
</div>
<div class="Podzial-na-2">
<div class="Projekty-merchowe">
<div class="container-fluid text-center">
<h1 class="text_in_card">Projekty merchowe</h1>
</div>
</div>
<div class="Szaty-graficzne">
<div class="container-fluid text-center">
<h1 class="text_in_card">Szaty graficzne</h1>
</div>
</div>
</div>
</div>
<div class="text-ostatnio-dodane">
<h1>Masz pomysł na swoją stronę? Skontaktuj się z nami!</h1>
</div>
<div class="parent">
<div class="div1">
<form action="">
<input type="text" name="imie" id="imie" placeholder="Imię">
<input type="text" name="nazwisko" id="nazwisko" placeholder="Nazwisko">
<input type="text" name="telefon" id="telefon" placeholder="Telefon">
<input type="text" name="tytul" id="tytul" placeholder="Tytuł">
<textarea name="wiadomosc" id="wiadomosc" cols="23" rows="3" placeholder="Wiadomość"></textarea>
</form>
</div>
<div class="div2">
<iframe id="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2562.3703178815285!2d21.995643975852957!3d50.04189381669751!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x473cfb018c3f4fbd%3A0x5033f39cd685a056!2sGaleria%20Rzesz%C3%B3w!5e0!3m2!1spl!2spl!4v1689852604812!5m2!1spl!2spl" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<div class="div3">
<input type="submit" id="przycisk_wyslij" value="Wyślij">
</div>
<div class="div4">
<div class="k_item">
<div class="k_item_img">
<img src="images/k_telefon.svg">
</div>
<div class="k_item_text">
<div class="k_item_text_big">
<h5>Telefon</h5>
</div>
<div class="k_item_text_small">
<p>+48 888 888 888</p>
</div>
</div>
</div>
<div class="k_item">
<div class="k_item_img">
<img src="images/k_email.svg">
</div>
<div class="k_item_text">
<div class="k_item_text_big">
<h5>E-mail</h5>
</div>
<div class="k_item_text_small">
<p>[email protected]</p>
</div>
</div>
</div>
<div class="k_item">
<div class="k_item_img">
<img src="images/k_facebook.svg">
</div>
<div class="k_item_text">
<div class="k_item_text_big">
<h5>Facebook</h5>
</div>
<div class="k_item_text_small">
<p>facebook.com/CarRev</p>
</div>
</div>
</div>
</div>
</div>
<footer>
<div id="footer_high">
<div id="footer_high_left_cont">
<img src="images/LOGO.png" width="40px" height="40px" alt="logo">
<h4>Car Rev</h4>
<p>Jesteśmy #1 w branży wyrobów graficznych</p>
</div>
<div id="footer_high_right_cont">
<div class="footer_high_right_col">
<p>Firma</p>
<a href="#">O nas</a>
<a href="#">Kariera</a>
<a href="#">Cennik</a>
</div>
<div class="footer_high_right_col">
<p>Zasoby</p>
<a href="#">Projekt</a>
<a href="#">Realizacje</a>
<a href="#">Posty</a>
<a href="#">Kontakt</a>
</div>
<div class="footer_high_right_col">
<p>Prawa</p>
<a href="#">Terms of Service</a>
<a href="#">Privacy Policy</a>
<a href="#">Ciasteczka</a>
<a href="#">Data Processing</a>
</div>
</div>
</div>
<hr>
<div id="footer_low">
<div id="footer_low_left">
© 2023 Aurora IT
</div>
<div id="footer_low_right">
<img src="images/Instagram.svg" alt="ins">
<img src="images/Facebook.svg" alt="fb">
<img src="images/Youtube.svg" alt="yt">
</div>
</div>
</footer>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</script>
</body>
</html>