Hugging Face's logo

Spaces:
caarleexx
/
Sk
Running

App Files Community
caarleexx commited on
Commit
8d1fd77
路
verified 路
1 Parent(s): f5914ec

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +346 -19
index.html CHANGED
@@ -1,19 +1,346 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="pt-BR">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>SK Imobili谩ria</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&family=Inter:wght@400&display=swap" rel="stylesheet">
8
+ <style>
9
+ :root {
10
+ --cor-quente-principal: #C06C41;
11
+ --cor-fundo-quente: #F5F0E8;
12
+ --cor-texto-contraste: #2C2A2A;
13
+ }
14
+ body {
15
+ font-family: 'Inter', sans-serif;
16
+ color: var(--cor-texto-contraste);
17
+ background-color: var(--cor-fundo-quente);
18
+ margin: 0;
19
+ padding: 0;
20
+ line-height: 1.7;
21
+ }
22
+ header {
23
+ background-color: var(--cor-quente-principal);
24
+ color: white;
25
+ padding: 20px 0;
26
+ text-align: center;
27
+ }
28
+ nav {
29
+ background-color: var(--cor-fundo-quente);
30
+ display: flex;
31
+ justify-content: center;
32
+ padding: 10px 0;
33
+ }
34
+ nav a {
35
+ color: var(--cor-quente-principal);
36
+ padding: 14px 20px;
37
+ text-decoration: none;
38
+ transition: all 0.3s ease;
39
+ }
40
+ nav a:hover {
41
+ background-color: var(--cor-quente-principal);
42
+ color: white;
43
+ text-decoration: underline;
44
+ }
45
+ .container {
46
+ padding: 0 20px;
47
+ }
48
+ @media (min-width: 768px) {
49
+ .container {
50
+ max-width: 1100px;
51
+ margin: 0 auto;
52
+ }
53
+ }
54
+ .search-bar {
55
+ display: flex;
56
+ flex-direction: column;
57
+ align-items: center;
58
+ margin-bottom: 80px;
59
+ }
60
+ @media (min-width: 768px) {
61
+ .search-bar {
62
+ flex-direction: row;
63
+ }
64
+ }
65
+ .search-bar input[type="text"],
66
+ .search-bar select {
67
+ padding: 10px;
68
+ margin-right: 10px;
69
+ border: 1px solid var(--cor-quente-principal);
70
+ border-radius: 8px;
71
+ margin-bottom: 10px;
72
+ }
73
+ @media (min-width: 768px) {
74
+ .search-bar input[type="text"],
75
+ .search-bar select {
76
+ margin-bottom: 0;
77
+ }
78
+ }
79
+ .search-bar button {
80
+ padding: 14px 28px;
81
+ background-color: var(--cor-quente-principal);
82
+ color: white;
83
+ border: none;
84
+ border-radius: 8px;
85
+ font-weight: 600;
86
+ text-transform: uppercase;
87
+ letter-spacing: 0.5px;
88
+ cursor: pointer;
89
+ transition: all 0.3s ease;
90
+ }
91
+ .search-bar button:hover {
92
+ filter: brightness(1.1);
93
+ }
94
+ .featured-properties {
95
+ display: grid;
96
+ grid-template-columns: 1fr;
97
+ gap: 20px;
98
+ margin-bottom: 80px;
99
+ }
100
+ @media (min-width: 768px) {
101
+ .featured-properties {
102
+ grid-template-columns: repeat(2, 1fr);
103
+ }
104
+ }
105
+ @media (min-width: 1024px) {
106
+ .featured-properties {
107
+ grid-template-columns: repeat(3, 1fr);
108
+ }
109
+ }
110
+ .imovel-card {
111
+ background-color: #FFFFFF;
112
+ border-radius: 12px;
113
+ box-shadow: 0px 8px 24px rgba(44, 42, 42, 0.1);
114
+ overflow: hidden;
115
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
116
+ }
117
+ .imovel-card:hover {
118
+ transform: translateY(-5px);
119
+ box-shadow: 0px 12px 30px rgba(44, 42, 42, 0.15);
120
+ }
121
+ .imovel-card img {
122
+ width: 100%;
123
+ height: auto;
124
+ }
125
+ .imovel-card .details {
126
+ padding: 20px;
127
+ }
128
+ .imovel-card h3 {
129
+ font-family: 'Poppins', sans-serif;
130
+ font-weight: 600;
131
+ margin-bottom: 10px;
132
+ }
133
+ .imovel-card p {
134
+ margin-bottom: 10px;
135
+ }
136
+ .imovel-card .price {
137
+ font-size: 1.2em;
138
+ color: var(--cor-quente-principal);
139
+ margin-bottom: 10px;
140
+ }
141
+ .imovel-card .btn {
142
+ background-color: var(--cor-quente-principal);
143
+ color: white;
144
+ padding: 14px 28px;
145
+ border: none;
146
+ border-radius: 8px;
147
+ font-weight: 600;
148
+ text-transform: uppercase;
149
+ letter-spacing: 0.5px;
150
+ cursor: pointer;
151
+ transition: all 0.3s ease;
152
+ }
153
+ .imovel-card .btn:hover {
154
+ filter: brightness(1.1);
155
+ }
156
+ .contact-form {
157
+ margin-top: 40px;
158
+ }
159
+ .contact-form label {
160
+ display: block;
161
+ margin-bottom: 5px;
162
+ }
163
+ .contact-form input[type="text"],
164
+ .contact-form input[type="email"],
165
+ .contact-form textarea {
166
+ width: 100%;
167
+ padding: 10px;
168
+ margin-bottom: 10px;
169
+ border: 1px solid var(--cor-quente-principal);
170
+ border-radius: 8px;
171
+ }
172
+ .contact-form button {
173
+ padding: 14px 28px;
174
+ background-color: var(--cor-quente-principal);
175
+ color: white;
176
+ border: none;
177
+ border-radius: 8px;
178
+ font-weight: 600;
179
+ text-transform: uppercase;
180
+ letter-spacing: 0.5px;
181
+ cursor: pointer;
182
+ transition: all 0.3s ease;
183
+ }
184
+ .contact-form button:hover {
185
+ filter: brightness(1.1);
186
+ }
187
+ footer {
188
+ background-color: var(--cor-quente-principal);
189
+ color: white;
190
+ text-align: center;
191
+ padding: 20px 0;
192
+ position: fixed;
193
+ width: 100%;
194
+ bottom: 0;
195
+ }
196
+ footer a {
197
+ color: white;
198
+ margin: 0 10px;
199
+ text-decoration: none;
200
+ transition: all 0.3s ease;
201
+ }
202
+ footer a:hover {
203
+ text-decoration: underline;
204
+ }
205
+ section {
206
+ padding-top: 80px;
207
+ padding-bottom: 80px;
208
+ }
209
+ .about-content {
210
+ display: flex;
211
+ flex-direction: column;
212
+ align-items: center;
213
+ }
214
+ @media (min-width: 768px) {
215
+ .about-content {
216
+ flex-direction: row;
217
+ justify-content: space-between;
218
+ }
219
+ }
220
+ .about-content img {
221
+ max-width: 100%;
222
+ border-radius: 12px;
223
+ margin-bottom: 20px;
224
+ }
225
+ @media (min-width: 768px) {
226
+ .about-content img {
227
+ max-width: 48%;
228
+ margin-bottom: 0;
229
+ }
230
+ }
231
+ .about-content p {
232
+ max-width: 100%;
233
+ }
234
+ @media (min-width: 768px) {
235
+ .about-content p {
236
+ max-width: 48%;
237
+ }
238
+ }
239
+ </style>
240
+ </head>
241
+ <body>
242
+ <header>
243
+ <h1>SK Imobili谩ria</h1>
244
+ <p>Av. Paranagu谩, 803, Matinhos - PR</p>
245
+ </header>
246
+ <nav>
247
+ <a href="#home">Home</a>
248
+ <a href="#properties">Im贸veis</a>
249
+ <a href="#about">Sobre N贸s</a>
250
+ <a href="#contact">Contato</a>
251
+ </nav>
252
+ <div class="container">
253
+ <section id="home">
254
+ <div class="search-bar">
255
+ <input type="text" placeholder="Buscar...">
256
+ <select>
257
+ <option value="comprar">Comprar</option>
258
+ <option value="alugar">Alugar</option>
259
+ </select>
260
+ <select>
261
+ <option value="cidade">Cidade</option>
262
+ <option value="bairro">Bairro</option>
263
+ </select>
264
+ <select>
265
+ <option value="casa">Casa</option>
266
+ <option value="apartamento">Apartamento</option>
267
+ </select>
268
+ <select>
269
+ <option value="preco">Faixa de Pre莽o</option>
270
+ </select>
271
+ <select>
272
+ <option value="quartos">N煤mero de Quartos</option>
273
+ </select>
274
+ <button>Pesquisar</button>
275
+ </div>
276
+ <section class="featured-properties">
277
+ <div class="imovel-card">
278
+ <img src="https://via.placeholder.com/300x200" alt="Im贸vel 1">
279
+ <div class="details">
280
+ <h3>Im贸vel 1</h3>
281
+ <p class="price">R$ 500.000</p>
282
+ <p>Casa, 3 quartos, 2 banheiros</p>
283
+ <button class="btn" onclick="showPropertyDetails()">Ver detalhes</button>
284
+ </div>
285
+ </div>
286
+ <div class="imovel-card">
287
+ <img src="https://via.placeholder.com/300x200" alt="Im贸vel 2">
288
+ <div class="details">
289
+ <h3>Im贸vel 2</h3>
290
+ <p class="price">R$ 350.000</p>
291
+ <p>Apartamento, 2 quartos, 1 banheiro</p>
292
+ <button class="btn" onclick="showPropertyDetails()">Ver detalhes</button>
293
+ </div>
294
+ </div>
295
+ <div class="imovel-card">
296
+ <img src="https://via.placeholder.com/300x200" alt="Im贸vel 3">
297
+ <div class="details">
298
+ <h3>Im贸vel 3</h3>
299
+ <p class="price">R$ 700.000</p>
300
+ <p>Casa, 4 quartos, 3 banheiros</p>
301
+ <button class="btn" onclick="showPropertyDetails()">Ver detalhes</button>
302
+ </div>
303
+ </div>
304
+ </section>
305
+ </section>
306
+ <section id="properties">
307
+ <h2>Resultados da Busca</h2>
308
+ <!-- Aqui viriam os resultados da busca -->
309
+ </section>
310
+ <section id="about">
311
+ <h2>Sobre N贸s</h2>
312
+ <div class="about-content">
313
+ <img src="https://via.placeholder.com/500x300" alt="Sobre N贸s">
314
+ <p>Bem-vindo 脿 SK Imobili谩ria, sua parceira confi谩vel no mercado imobili谩rio. Fundada com o objetivo de fornecer solu莽玫es imobili谩rias de qualidade, nossa equipe especializada est谩 pronta para ajudar voc锚 a encontrar seu pr贸ximo lar ou investimento ideal.</p>
315
+ </div>
316
+ </section>
317
+ <section id="contact">
318
+ <h2>Contato</h2>
319
+ <p>Telefone: (41) 99999-9999</p>
320
+ <p>E-mail: contato@skimobiliaria.com</p>
321
+ <p>Endere莽o: Av. Paranagu谩, 803, Matinhos - PR</p>
322
+ <div class="contact-form">
323
+ <form>
324
+ <label for="name">Nome:</label>
325
+ <input type="text" id="name" name="name" required>
326
+ <label for="email">E-mail:</label>
327
+ <input type="email" id="email" name="email" required>
328
+ <label for="message">Mensagem:</label>
329
+ <textarea id="message" name="message" rows="4" required></textarea>
330
+ <button type="submit">Enviar</button>
331
+ </form>
332
+ </div>
333
+ </section>
334
+ </div>
335
+ <footer>
336
+ <p>&copy; 2023 SK Imobili谩ria. Todos os direitos reservados.</p>
337
+ <p><a href="#home">Home</a> | <a href="#properties">Im贸veis</a> | <a href="#about">Sobre N贸s</a> | <a href="#contact">Contato</a></p>
338
+ </footer>
339
+ <script>
340
+ function showPropertyDetails() {
341
+ alert('Detalhes do im贸vel');
342
+ // Aqui seria o c贸digo para abrir a p谩gina de detalhes do im贸vel
343
+ }
344
+ </script>
345
+ </body>
346
+ </html>