-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
217 lines (210 loc) · 14.1 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="NETSHELL EOOD; https://net-shell.org/">
<title>Лазерно гравиране | gravir.pro</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;700&display=swap">
<link rel="stylesheet" href="./app.css">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gradient-to-br select-none from-white to-gray-200">
<nav class="fixed p-2 w-full bg-orange-600/80 backdrop-blur-md flex flex-wrap gap-x-6 items-center justify-center uppercase font-bold text-xl z-50">
<a href="." class="w-full sm:w-auto text-2xl text-center bg-white text-orange-500 pt-1 px-2 rounded-md">gravir.pro</a>
<a href="#services" class="p-2 text-gray-100 hover:text-white hover:underline transition" href="">Услуги</a>
<a href="#order" class="p-2 text-gray-100 hover:text-white hover:underline transition" href="">Поръчка</a>
<a href="#gallery" class="p-2 text-gray-100 hover:text-white hover:underline transition" href="">Галерия</a>
<a href="#contact" class="p-2 text-gray-100 hover:text-white hover:underline transition" href="">Контакти</a>
</nav>
<main id="content">
<div class="bg-pattern-diamonds lg:pt-24 bg-gray-300">
<div class="flex flex-wrap items-end">
<header class="w-full lg:w-1/3 p-8 pt-40 text-right">
<h1 class="border-b-4 border-orange-500 inline-block text-5xl lg:text-6xl text-black">
Лазерно гравиране
</h1>
</header>
<aside class="w-full lg:w-2/3 px-6">
<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-x-8 gap-y-0 sm:text-xl text-orange-900 items-center">
<p class="p-4 hover:bg-white/50 transition-colors">
<span class="inline-block animate-bounce font-2xl">✔</span>
Лазерно гравиране върху всякакви материали
</p>
<p class="p-4 hover:bg-white/50 transition-colors">
<span class="inline-block animate-bounce font-2xl">✔</span>
Изработка на табелки със серийни номера и изображения
</p>
<p class="p-4 hover:bg-white/50 transition-colors">
<span class="inline-block animate-bounce font-2xl">✔</span>
Доставка от 2 до 5 дни с куриер до адрес
</p>
<p class="p-4 hover:bg-white/50 transition-colors">
<span class="inline-block animate-bounce font-2xl">✔</span>
Отстъпки за големи количества
</p>
<p class="p-4 hover:bg-white/50 transition-colors">
<span class="inline-block animate-bounce font-2xl">✔</span>
Намаления за редовни клиенти
</p>
<p class="p-4 hover:bg-white/50 transition-colors">
<span class="inline-block animate-bounce font-2xl">✔</span>
Партньорска програма за агенции
</p>
</div>
</aside>
</div>
<div id="contact" class="py-16 bg-gradient-to-br select-none from-transparent to-gray-400">
<div class="px-4 flex flex-wrap gap-x-8 gap-y-16 justify-center items-center">
<p class="flex-1 text-center">
ИЗВЪРШВАМЕ ЕКСПРЕСНО ЛАЗЕРНО ГРАВИРАНЕ В РАМКИТЕ НА ДЕНЯ ЗА ЕДИНИЧНИ ПОРЪЧКИ.
<b>ПОЗВЪНЕТЕ ПРЕДВАРИТЕЛНО! НЕОБХОДИМО Е ДА ЗАПАЗИТЕ ЧАС.</b>
</p>
<a href="tel:+359879951378" class="flex-none rounded-full px-8 py-4 text-2xl text-white drop-shadow-lg font-bold bg-gradient-to-t from-orange-500 to-orange-300 hover:to-orange-200 transition-colors">
📞
<span class="drop-shadow-md">087 995 1378</span>
</a>
<a href="mailto:[email protected]" class="flex-none rounded-full px-8 py-4 text-2xl text-white font-bold bg-gray-500 hover:bg-orange-500 transition-colors">
</a>
</div>
<p class="px-4 mt-4 select-none">
<span class="inline-block animate-bounce font-2xl">✔</span>
Гравираме артикули, донесени от клиента, или по избор от нашия каталог.
<br>
<span class="inline-block animate-bounce font-2xl">✔</span>
Надписваме единични бройки експресно.
<br>
<span class="inline-block animate-bounce font-2xl">✔</span>
Предлагаме галерия с готови изображения.
<br>
<span class="inline-block animate-bounce font-2xl">✔</span>
Векторизираме изображения по поръчка. Изпратете ги на нашия мейл и ще Ви върнем възможните варианти за изработка.
</p>
</div>
</div>
<div id="gallery" class="pb-8 bg-pattern-bubbles">
<iframe src="https://albumizr.com/a/wSrK" scrolling="no" frameborder="0" allowfullscreen width="100%" height="500"></iframe>
</div>
<div id="services" class="flex flex-wrap py-8 gap-y-8">
<div class="flex-1 px-4">
<h2 class="pb-4">
<p class="text-4xl text-black text-center">Услуги</p>
</h2>
<div>
<a href="#contact" class="w-full mb-4 flex flex-wrap rounded transition-colors hover:bg-white/50">
<img class="rounded-l w-1/3 aspect-video flex-none" src="./img/1_wood.jpg">
<div class="flex-1 px-4">
<p class="text-2xl font-bold py-2">
Лазерно гравиране на дърво и кожа
</p>
<div class="text-orange-900">
Надписваме всички видове дърво и кожа - изделия с различни форми и размери.
Работим с изделия от естествена и изкуствена кожа, гума и силикон, пластмаса.
</div>
</div>
</a>
<a href="#contact" class="w-full mb-4 flex flex-wrap rounded transition-colors hover:bg-white/50">
<img class="rounded-l w-1/3 aspect-video flex-none" src="./img/2_metal.jpg">
<div class="flex-1 px-4">
<p class="text-2xl font-bold py-2">
Лазерно гравиране на метал
</p>
<div class="text-orange-900">
Гравираме всички видове метални изделия, като химикалки, часовници, халки, ръкавели, запалки, ножове, бижута, термоси и много други.
Работим с индивидуални бройки и количества, донесени от клиента.
</div>
</div>
</a>
<a href="#contact" class="w-full mb-4 flex flex-wrap rounded transition-colors hover:bg-white/50">
<img class="rounded-l w-1/3 aspect-video flex-none" src="./img/3_glass.jpg">
<div class="flex-1 px-4">
<p class="text-2xl font-bold py-2">
Лазерно гравиране на стъкло
</p>
<div class="text-orange-900">
Надписваме изделия от стъкло и кристал.
Гравираме чаши, пепелници, гарафи, кани, парфюми и много други.
</div>
</div>
</a>
<a href="#contact" class="w-full mb-4 flex flex-wrap rounded transition-colors hover:bg-white/50">
<img class="rounded-l w-1/3 aspect-video flex-none" src="./img/4_weapons.jpg">
<div class="flex-1 px-4">
<p class="text-2xl font-bold py-2">
Лазерно гравиране на оръжия
</p>
<div class="text-orange-900">
Надписваме ножове, мечове, пистолети и пушки.
Поставяме текст и изображения.
</div>
</div>
</a>
<a href="#contact" class="w-full mb-4 flex flex-wrap rounded transition-colors hover:bg-white/50">
<img class="rounded-l w-1/3 aspect-video flex-none" src="./img/5_rings.jpg">
<div class="flex-1 px-4">
<p class="text-2xl font-bold py-2">
Лазерно гравиране на пръстени и халки
</p>
<div class="text-orange-900">
Надписваме злато, сребро, стомана, родирани, позлатени, боядисани метали.
Богат избор от шрифтове за текста.
</div>
</div>
</a>
<a href="#contact" class="w-full mb-4 flex flex-wrap rounded transition-colors hover:bg-white/50">
<img class="rounded-l w-1/3 aspect-video flex-none" src="./img/6_watches.jpg">
<div class="flex-1 px-4">
<p class="text-2xl font-bold py-2">
Лазерно гравиране на часовници
</p>
<div class="text-orange-900">
Предлагаме лазерно гравиране на ръчни часовници.
Гравирането е прецизно, без необходимост от разглобяване на часовника (сваляне на капака) и по никакъв начин не нарушава работата на часовника.
</div>
</div>
</a>
</div>
</div>
<div class="flex-none w-full sm:w-1/2 lg:w-1/3">
<iframe id="order" src="https://docs.google.com/forms/d/e/1FAIpQLSd2g8qbY7grEN0piOLGeqMr3yoopyo8UomziUjNg9Zjii05sw/viewform?embedded=true" width="100%" height="1150" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
</div>
</div>
<div id="contact_end" class="flex flex-wrap py-8 bg-pattern-circuit border-t border-b">
<div class="flex-1 px-4">
<h2 class="pb-2">
<p class="text-4xl text-black text-center">
За връзка с нас
</p>
</h2>
<div class="py-20 flex flex-wrap gap-x-8 gap-y-16 justify-center">
<a href="mailto:[email protected]" class="rounded-full px-8 py-4 text-2xl text-white font-bold bg-gray-500 hover:bg-orange-500 transition-colors">
</a>
<a href="tel:+359879951378" class="rounded-full px-8 py-4 text-2xl text-white drop-shadow-lg font-bold bg-gradient-to-t from-orange-500 to-orange-300 hover:to-orange-200 transition-colors">
📞
<span class="drop-shadow-md">087 995 1378</span>
</a>
</div>
</div>
</div>
</main>
<footer class="py-8 text-center">
<div class="py-4">
<a href="#contact" class="rounded-full px-4 py-2 uppercase text-white font-bold bg-gray-500 hover:bg-orange-500 transition-colors">
Лазерно гравиране | © gravir.pro
</a>
</div>
<p>
© 2023
<a class="font-bold text-gray-500 hover:text-orange-500 transition-colors" href="https://net-shell.org" target="_blank">
<img draggable="false" role="img" class="w-4 h-4 inline-block" alt="🇧🇬"
src="https://s.w.org/images/core/emoji/14.0.0/svg/1f1e7-1f1ec.svg">
НЕТШЕЛ EООД
</a>
</p>
</footer>
</body>
</html>