DiabeloDEV commited on
Commit
ee3df2c
verified
1 Parent(s): 19c7bb8

Upload folder using huggingface_hub

Browse files
Files changed (3) hide show
  1. assets/css/styles.css +155 -0
  2. assets/js/script.js +1 -0
  3. index.html +366 -19
assets/css/styles.css ADDED
@@ -0,0 +1,155 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ :root {
2
+ --primary-color: #667eea;
3
+ --secondary-color: #764ba2;
4
+ --text-color: #333;
5
+ --text-light: #666;
6
+ --bg-color: #fff;
7
+ --bg-light: #f8f9fa;
8
+ --border-color: #e0e0e0;
9
+ --shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
10
+ --transition: all 0.3s ease;
11
+ }
12
+
13
+ [data-theme="dark"] {
14
+ --text-color: #e0e0e0;
15
+ --text-light: #b0b0b0;
16
+ --bg-color: #1a1a1a;
17
+ --bg-light: #2a2a2a;
18
+ --border-color: #333;
19
+ --shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
20
+ }
21
+
22
+ * {
23
+ margin: 0;
24
+ padding: 0;
25
+ box-sizing: border-box;
26
+ }
27
+
28
+ html {
29
+ scroll-behavior: smooth;
30
+ }
31
+
32
+ body {
33
+ font-family: 'Inter', sans-serif;
34
+ background-color: var(--bg-color);
35
+ color: var(--text-color);
36
+ line-height: 1.6;
37
+ transition: var(--transition);
38
+ }
39
+
40
+ .container {
41
+ max-width: 1200px;
42
+ margin: 0 auto;
43
+ padding: 0 20px;
44
+ }
45
+
46
+ /* Header */
47
+ .header {
48
+ position: fixed;
49
+ top: 0;
50
+ width: 100%;
51
+ background: rgba(255, 255, 255, 0.95);
52
+ backdrop-filter: blur(10px);
53
+ z-index: 1000;
54
+ transition: var(--transition);
55
+ }
56
+
57
+ [data-theme="dark"] .header {
58
+ background: rgba(26, 26, 26, 0.95);
59
+ }
60
+
61
+ .navbar {
62
+ padding: 1rem 0;
63
+ }
64
+
65
+ .nav-container {
66
+ max-width: 1200px;
67
+ margin: 0 auto;
68
+ padding: 0 20px;
69
+ display: flex;
70
+ justify-content: space-between;
71
+ align-items: center;
72
+ }
73
+
74
+ .nav-logo h2 {
75
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
76
+ -webkit-background-clip: text;
77
+ -webkit-text-fill-color: transparent;
78
+ font-weight: 700;
79
+ }
80
+
81
+ .nav-menu {
82
+ display: flex;
83
+ list-style: none;
84
+ align-items: center;
85
+ gap: 2rem;
86
+ }
87
+
88
+ .nav-link {
89
+ color: var(--text-color);
90
+ text-decoration: none;
91
+ font-weight: 500;
92
+ transition: var(--transition);
93
+ position: relative;
94
+ }
95
+
96
+ .nav-link::after {
97
+ content: '';
98
+ position: absolute;
99
+ bottom: -5px;
100
+ left: 0;
101
+ width: 0;
102
+ height: 2px;
103
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
104
+ transition: width 0.3s ease;
105
+ }
106
+
107
+ .nav-link:hover::after {
108
+ width: 100%;
109
+ }
110
+
111
+ .theme-toggle {
112
+ background: none;
113
+ border: none;
114
+ cursor: pointer;
115
+ font-size: 1.2rem;
116
+ color: var(--text-color);
117
+ transition: var(--transition);
118
+ }
119
+
120
+ .theme-toggle:hover {
121
+ transform: scale(1.1);
122
+ }
123
+
124
+ .hamburger {
125
+ display: none;
126
+ flex-direction: column;
127
+ cursor: pointer;
128
+ }
129
+
130
+ .bar {
131
+ width: 25px;
132
+ height: 3px;
133
+ background: var(--text-color);
134
+ margin: 3px 0;
135
+ transition: var(--transition);
136
+ }
137
+
138
+ /* Hero Section */
139
+ .hero {
140
+ min-height: 100vh;
141
+ display: flex;
142
+ align-items: center;
143
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
144
+ position: relative;
145
+ overflow: hidden;
146
+ }
147
+
148
+ .hero::before {
149
+ content: '';
150
+ position: absolute;
151
+ top: 0;
152
+ left: 0;
153
+ right: 0;
154
+ bottom: 0;
155
+ background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="0.1" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,133.3C960,128,1056,96,1152,90.7C1248,85,1344,107,1392,117.3L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,38
assets/js/script.js ADDED
@@ -0,0 +1 @@
 
 
1
+ // generated stub
index.html CHANGED
@@ -1,19 +1,366 @@
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="pl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <meta name="description" content="Nowoczesna strona internetowa z innowacyjnymi rozwi膮zaniami">
7
+ <meta name="keywords" content="nowoczesna strona, technologia, innowacje">
8
+ <meta name="author" content="Twoja Firma">
9
+ <title>Nowoczesna Strona - Innowacje na Wyci膮gni臋cie R臋ki</title>
10
+ <link rel="stylesheet" href="assets/css/styles.css">
11
+ <link rel="preconnect" href="https://fonts.googleapis.com">
12
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
13
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
14
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
15
+ </head>
16
+ <body>
17
+ <header class="header">
18
+ <nav class="navbar">
19
+ <div class="nav-container">
20
+ <div class="nav-logo">
21
+ <h2>TechFlow</h2>
22
+ </div>
23
+ <ul class="nav-menu">
24
+ <li class="nav-item">
25
+ <a href="#home" class="nav-link">Strona g艂贸wna</a>
26
+ </li>
27
+ <li class="nav-item">
28
+ <a href="#about" class="nav-link">O nas</a>
29
+ </li>
30
+ <li class="nav-item">
31
+ <a href="#services" class="nav-link">Us艂ugi</a>
32
+ </li>
33
+ <li class="nav-item">
34
+ <a href="#portfolio" class="nav-link">Portfolio</a>
35
+ </li>
36
+ <li class="nav-item">
37
+ <a href="#contact" class="nav-link">Kontakt</a>
38
+ </li>
39
+ <li class="nav-item">
40
+ <button class="theme-toggle" id="themeToggle">
41
+ <i class="fas fa-moon"></i>
42
+ </button>
43
+ </li>
44
+ </ul>
45
+ <div class="hamburger">
46
+ <span class="bar"></span>
47
+ <span class="bar"></span>
48
+ <span class="bar"></span>
49
+ </div>
50
+ </div>
51
+ </nav>
52
+ </header>
53
+
54
+ <main>
55
+ <section id="home" class="hero">
56
+ <div class="hero-container">
57
+ <div class="hero-content">
58
+ <h1 class="hero-title">
59
+ Przysz艂o艣膰 <span class="gradient-text">Technologii</span> Dzi艣
60
+ </h1>
61
+ <p class="hero-subtitle">
62
+ Odkryj innowacyjne rozwi膮zania, kt贸re przekszta艂caj膮 艣wiat cyfrowy
63
+ </p>
64
+ <div class="hero-buttons">
65
+ <button class="btn btn-primary">Zacznij teraz</button>
66
+ <button class="btn btn-secondary">Dowiedz si臋 wi臋cej</button>
67
+ </div>
68
+ </div>
69
+ <div class="hero-image">
70
+ <div class="floating-card">
71
+ <i class="fas fa-rocket"></i>
72
+ </div>
73
+ </div>
74
+ </div>
75
+ <div class="scroll-indicator">
76
+ <div class="scroll-arrow"></div>
77
+ </div>
78
+ </section>
79
+
80
+ <section id="about" class="about">
81
+ <div class="container">
82
+ <div class="section-header">
83
+ <h2 class="section-title">O Nas</h2>
84
+ <p class="section-subtitle">Poznaj nasz膮 pasj臋 do innowacji</p>
85
+ </div>
86
+ <div class="about-grid">
87
+ <div class="about-card">
88
+ <div class="card-icon">
89
+ <i class="fas fa-lightbulb"></i>
90
+ </div>
91
+ <h3>Innowacje</h3>
92
+ <p>Stale poszukujemy nowych rozwi膮za艅 i technologii, kt贸re wyznaczaj膮 nowe standardy w bran偶y.</p>
93
+ </div>
94
+ <div class="about-card">
95
+ <div class="card-icon">
96
+ <i class="fas fa-users"></i>
97
+ </div>
98
+ <h3>Do艣wiadczenie</h3>
99
+ <p>Lata praktyki i setki zrealizowanych projekt贸w to gwarancja najwy偶szej jako艣ci us艂ug.</p>
100
+ </div>
101
+ <div class="about-card">
102
+ <div class="card-icon">
103
+ <i class="fas fa-shield-alt"></i>
104
+ </div>
105
+ <h3>Bezpiecze艅stwo</h3>
106
+ <p>Twoje dane s膮 dla nas priorytetem. Stosujemy najnowsze standardy ochrony informacji.</p>
107
+ </div>
108
+ </div>
109
+ </div>
110
+ </section>
111
+
112
+ <section id="services" class="services">
113
+ <div class="container">
114
+ <div class="section-header">
115
+ <h2 class="section-title">Nasze Us艂ugi</h2>
116
+ <p class="section-subtitle">Kompleksowe rozwi膮zania dla Twojego biznesu</p>
117
+ </div>
118
+ <div class="services-grid">
119
+ <div class="service-item">
120
+ <div class="service-number">01</div>
121
+ <h3>Web Development</h3>
122
+ <p>Tworzymy nowoczesne, responsywne strony internetowe dostosowane do Twoich potrzeb.</p>
123
+ <a href="#" class="service-link">Dowiedz si臋 wi臋cej <i class="fas fa-arrow-right"></i></a>
124
+ </div>
125
+ <div class="service-item">
126
+ <div class="service-number">02</div>
127
+ <h3>Mobile Apps</h3>
128
+ <p>Rozwijamy innowacyjne aplikacje mobilne na platformy iOS i Android.</p>
129
+ <a href="#" class="service-link">Dowiedz si臋 wi臋cej <i class="fas fa-arrow-right"></i></a>
130
+ </div>
131
+ <div class="service-item">
132
+ <div class="service-number">03</div>
133
+ <h3>UI/UX Design</h3>
134
+ <p>Projektujemy intuicyjne interfejsy, kt贸re u偶ytkownicy pokochaj膮 od pierwszego wejrzenia.</p>
135
+ <a href="#" class="service-link">Dowiedz si臋 wi臋cej <i class="fas fa-arrow-right"></i></a>
136
+ </div>
137
+ <div class="service-item">
138
+ <div class="service-number">04</div>
139
+ <h3>Cloud Solutions</h3>
140
+ <p>Oferujemy skalowalne rozwi膮zania chmurowe dla firm ka偶dej wielko艣ci.</p>
141
+ <a href="#" class="service-link">Dowiedz si臋 wi臋cej <i class="fas fa-arrow-right"></i></a>
142
+ </div>
143
+ </div>
144
+ </div>
145
+ </section>
146
+
147
+ <section id="portfolio" class="portfolio">
148
+ <div class="container">
149
+ <div class="section-header">
150
+ <h2 class="section-title">Portfolio</h2>
151
+ <p class="section-subtitle">Nasze najnowsze realizacje</p>
152
+ </div>
153
+ <div class="portfolio-filter">
154
+ <button class="filter-btn active" data-filter="all">Wszystko</button>
155
+ <button class="filter-btn" data-filter="web">Strony</button>
156
+ <button class="filter-btn" data-filter="mobile">Aplikacje</button>
157
+ <button class="filter-btn" data-filter="design">Design</button>
158
+ </div>
159
+ <div class="portfolio-grid">
160
+ <div class="portfolio-item" data-category="web">
161
+ <div class="portfolio-image">
162
+ <img src="https://picsum.photos/seed/project1/400/300.jpg" alt="Projekt 1">
163
+ <div class="portfolio-overlay">
164
+ <div class="portfolio-info">
165
+ <h3>E-commerce Platform</h3>
166
+ <p>Nowoczesna platforma sprzeda偶owa</p>
167
+ <a href="#" class="portfolio-link">Zobacz projekt</a>
168
+ </div>
169
+ </div>
170
+ </div>
171
+ </div>
172
+ <div class="portfolio-item" data-category="mobile">
173
+ <div class="portfolio-image">
174
+ <img src="https://picsum.photos/seed/project2/400/300.jpg" alt="Projekt 2">
175
+ <div class="portfolio-overlay">
176
+ <div class="portfolio-info">
177
+ <h3>Fitness App</h3>
178
+ <p>Aplikacja mobilna do trening贸w</p>
179
+ <a href="#" class="portfolio-link">Zobacz projekt</a>
180
+ </div>
181
+ </div>
182
+ </div>
183
+ </div>
184
+ <div class="portfolio-item" data-category="design">
185
+ <div class="portfolio-image">
186
+ <img src="https://picsum.photos/seed/project3/400/300.jpg" alt="Projekt 3">
187
+ <div class="portfolio-overlay">
188
+ <div class="portfolio-info">
189
+ <h3>Brand Identity</h3>
190
+ <p>Pe艂na identyfikacja wizualna</p>
191
+ <a href="#" class="portfolio-link">Zobacz projekt</a>
192
+ </div>
193
+ </div>
194
+ </div>
195
+ </div>
196
+ <div class="portfolio-item" data-category="web">
197
+ <div class="portfolio-image">
198
+ <img src="https://picsum.photos/seed/project4/400/300.jpg" alt="Projekt 4">
199
+ <div class="portfolio-overlay">
200
+ <div class="portfolio-info">
201
+ <h3>Corporate Website</h3>
202
+ <p>Strona korporacyjna z CMS</p>
203
+ <a href="#" class="portfolio-link">Zobacz projekt</a>
204
+ </div>
205
+ </div>
206
+ </div>
207
+ </div>
208
+ <div class="portfolio-item" data-category="mobile">
209
+ <div class="portfolio-image">
210
+ <img src="https://picsum.photos/seed/project5/400/300.jpg" alt="Projekt 5">
211
+ <div class="portfolio-overlay">
212
+ <div class="portfolio-info">
213
+ <h3>Banking App</h3>
214
+ <p>Aplikacja bankowa nowej generacji</p>
215
+ <a href="#" class="portfolio-link">Zobacz projekt</a>
216
+ </div>
217
+ </div>
218
+ </div>
219
+ </div>
220
+ <div class="portfolio-item" data-category="design">
221
+ <div class="portfolio-image">
222
+ <img src="https://picsum.photos/seed/project6/400/300.jpg" alt="Projekt 6">
223
+ <div class="portfolio-overlay">
224
+ <div class="portfolio-info">
225
+ <h3>UI Kit Design</h3>
226
+ <p>Zestaw komponent贸w UI</p>
227
+ <a href="#" class="portfolio-link">Zobacz projekt</a>
228
+ </div>
229
+ </div>
230
+ </div>
231
+ </div>
232
+ </div>
233
+ </div>
234
+ </section>
235
+
236
+ <section id="stats" class="stats">
237
+ <div class="container">
238
+ <div class="stats-grid">
239
+ <div class="stat-item">
240
+ <div class="stat-number" data-target="150">0</div>
241
+ <div class="stat-label">Zrealizowanych projekt贸w</div>
242
+ </div>
243
+ <div class="stat-item">
244
+ <div class="stat-number" data-target="98">0</div>
245
+ <div class="stat-label">Zadowolonych klient贸w</div>
246
+ </div>
247
+ <div class="stat-item">
248
+ <div class="stat-number" data-target="12">0</div>
249
+ <div class="stat-label">Lat do艣wiadczenia</div>
250
+ </div>
251
+ <div class="stat-item">
252
+ <div class="stat-number" data-target="24">0</div>
253
+ <div class="stat-label">Cz艂onk贸w zespo艂u</div>
254
+ </div>
255
+ </div>
256
+ </div>
257
+ </section>
258
+
259
+ <section id="contact" class="contact">
260
+ <div class="container">
261
+ <div class="section-header">
262
+ <h2 class="section-title">Skontaktuj si臋 z nami</h2>
263
+ <p class="section-subtitle">Ch臋tnie odpowiemy na wszystkie pytania</p>
264
+ </div>
265
+ <div class="contact-grid">
266
+ <div class="contact-info">
267
+ <div class="contact-item">
268
+ <div class="contact-icon">
269
+ <i class="fas fa-map-marker-alt"></i>
270
+ </div>
271
+ <div class="contact-details">
272
+ <h4>Adres</h4>
273
+ <p>ul. Warszawska 123<br>00-001 Warszawa</p>
274
+ </div>
275
+ </div>
276
+ <div class="contact-item">
277
+ <div class="contact-icon">
278
+ <i class="fas fa-phone"></i>
279
+ </div>
280
+ <div class="contact-details">
281
+ <h4>Telefon</h4>
282
+ <p>+48 123 456 789</p>
283
+ </div>
284
+ </div>
285
+ <div class="contact-item">
286
+ <div class="contact-icon">
287
+ <i class="fas fa-envelope"></i>
288
+ </div>
289
+ <div class="contact-details">
290
+ <h4>Email</h4>
291
+ <p>kontakt@techflow.pl</p>
292
+ </div>
293
+ </div>
294
+ <div class="social-links">
295
+ <a href="#" class="social-link"><i class="fab fa-facebook-f"></i></a>
296
+ <a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
297
+ <a href="#" class="social-link"><i class="fab fa-linkedin-in"></i></a>
298
+ <a href="#" class="social-link"><i class="fab fa-instagram"></i></a>
299
+ </div>
300
+ </div>
301
+ <div class="contact-form">
302
+ <form id="contactForm">
303
+ <div class="form-group">
304
+ <input type="text" id="name" name="name" placeholder="Twoje imi臋" required>
305
+ </div>
306
+ <div class="form-group">
307
+ <input type="email" id="email" name="email" placeholder="Tw贸j email" required>
308
+ </div>
309
+ <div class="form-group">
310
+ <input type="text" id="subject" name="subject" placeholder="Temat" required>
311
+ </div>
312
+ <div class="form-group">
313
+ <textarea id="message" name="message" rows="5" placeholder="Twoja wiadomo艣膰" required></textarea>
314
+ </div>
315
+ <button type="submit" class="btn btn-primary btn-full">Wy艣lij wiadomo艣膰</button>
316
+ </form>
317
+ </div>
318
+ </div>
319
+ </div>
320
+ </section>
321
+ </main>
322
+
323
+ <footer class="footer">
324
+ <div class="container">
325
+ <div class="footer-content">
326
+ <div class="footer-section">
327
+ <h3>TechFlow</h3>
328
+ <p>Innowacje, kt贸re zmieniaj膮 przysz艂o艣膰</p>
329
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="built-with" target="_blank">Built with anycoder</a>
330
+ </div>
331
+ <div class="footer-section">
332
+ <h4>Szybkie linki</h4>
333
+ <ul>
334
+ <li><a href="#home">Strona g艂贸wna</a></li>
335
+ <li><a href="#about">O nas</a></li>
336
+ <li><a href="#services">Us艂ugi</a></li>
337
+ <li><a href="#portfolio">Portfolio</a></li>
338
+ </ul>
339
+ </div>
340
+ <div class="footer-section">
341
+ <h4>Us艂ugi</h4>
342
+ <ul>
343
+ <li><a href="#">Web Development</a></li>
344
+ <li><a href="#">Mobile Apps</a></li>
345
+ <li><a href="#">UI/UX Design</a></li>
346
+ <li><a href="#">Cloud Solutions</a></li>
347
+ </ul>
348
+ </div>
349
+ <div class="footer-section">
350
+ <h4>Newsletter</h4>
351
+ <p>Zapisz si臋, aby otrzymywa膰 najnowsze informacje</p>
352
+ <form class="newsletter-form">
353
+ <input type="email" placeholder="Tw贸j email">
354
+ <button type="submit"><i class="fas fa-paper-plane"></i></button>
355
+ </form>
356
+ </div>
357
+ </div>
358
+ <div class="footer-bottom">
359
+ <p>&copy; 2024 TechFlow. Wszystkie prawa zastrze偶one.</p>
360
+ </div>
361
+ </div>
362
+ </footer>
363
+
364
+ <script src="assets/js/script.js"></script>
365
+ </body>
366
+ </html>