Hugging Face's logo

Spaces:
70pher703
/
websie
Running

App Files Community
70pher703 commited on
Commit
257c430
·
verified ·
1 Parent(s): d3afd2e

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +281 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Websie
3
- emoji: 👀
4
- colorFrom: pink
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: websie
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,281 @@
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="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>703 Nailed It - Professional Remodeling Services in Culpeper, VA</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ /* Custom CSS */
11
+ .hero {
12
+ background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
13
+ background-size: cover;
14
+ background-position: center;
15
+ min-height: 80vh;
16
+ }
17
+
18
+ .service-card:hover {
19
+ transform: translateY(-10px);
20
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
21
+ }
22
+
23
+ .testimonial-card {
24
+ transition: all 0.3s ease;
25
+ }
26
+
27
+ .testimonial-card:hover {
28
+ transform: scale(1.03);
29
+ }
30
+
31
+ .contact-form input, .contact-form textarea {
32
+ transition: all 0.3s ease;
33
+ }
34
+
35
+ .contact-form input:focus, .contact-form textarea:focus {
36
+ border-color: #f59e0b;
37
+ box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.5);
38
+ }
39
+
40
+ .nav-link {
41
+ position: relative;
42
+ }
43
+
44
+ .nav-link:after {
45
+ content: '';
46
+ position: absolute;
47
+ width: 0;
48
+ height: 2px;
49
+ bottom: -2px;
50
+ left: 0;
51
+ background-color: #f59e0b;
52
+ transition: width 0.3s ease;
53
+ }
54
+
55
+ .nav-link:hover:after {
56
+ width: 100%;
57
+ }
58
+
59
+ .mobile-menu {
60
+ max-height: 0;
61
+ overflow: hidden;
62
+ transition: max-height 0.3s ease-out;
63
+ }
64
+
65
+ .mobile-menu.open {
66
+ max-height: 500px;
67
+ }
68
+ </style>
69
+ </head>
70
+ <body class="font-sans text-gray-800">
71
+ <!-- Header/Navigation -->
72
+ <header class="bg-white shadow-md sticky top-0 z-50">
73
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
74
+ <div class="flex items-center">
75
+ <div class="bg-amber-500 p-2 rounded-lg mr-3">
76
+ <i class="fas fa-hammer text-white text-2xl"></i>
77
+ </div>
78
+ <h1 class="text-2xl font-bold text-gray-800">703 Nailed It</h1>
79
+ </div>
80
+
81
+ <!-- Desktop Navigation -->
82
+ <nav class="hidden md:flex space-x-8">
83
+ <a href="#home" class="nav-link text-gray-700 hover:text-amber-500 font-medium">Home</a>
84
+ <a href="#services" class="nav-link text-gray-700 hover:text-amber-500 font-medium">Services</a>
85
+ <a href="#projects" class="nav-link text-gray-700 hover:text-amber-500 font-medium">Projects</a>
86
+ <a href="#testimonials" class="nav-link text-gray-700 hover:text-amber-500 font-medium">Testimonials</a>
87
+ <a href="#contact" class="nav-link text-gray-700 hover:text-amber-500 font-medium">Contact</a>
88
+ </nav>
89
+
90
+ <!-- Mobile Menu Button -->
91
+ <button id="mobile-menu-button" class="md:hidden text-gray-700 focus:outline-none">
92
+ <i class="fas fa-bars text-2xl"></i>
93
+ </button>
94
+ </div>
95
+
96
+ <!-- Mobile Navigation -->
97
+ <div id="mobile-menu" class="mobile-menu md:hidden bg-white">
98
+ <div class="px-4 py-2 space-y-3">
99
+ <a href="#home" class="block py-2 text-gray-700 hover:text-amber-500 font-medium">Home</a>
100
+ <a href="#services" class="block py-2 text-gray-700 hover:text-amber-500 font-medium">Services</a>
101
+ <a href="#projects" class="block py-2 text-gray-700 hover:text-amber-500 font-medium">Projects</a>
102
+ <a href="#testimonials" class="block py-2 text-gray-700 hover:text-amber-500 font-medium">Testimonials</a>
103
+ <a href="#contact" class="block py-2 text-gray-700 hover:text-amber-500 font-medium">Contact</a>
104
+ <div class="py-2">
105
+ <a href="tel:5716833169" class="block bg-amber-500 text-white py-2 px-4 rounded-lg text-center font-medium hover:bg-amber-600 transition">
106
+ <i class="fas fa-phone mr-2"></i> Call Now
107
+ </a>
108
+ </div>
109
+ </div>
110
+ </div>
111
+ </header>
112
+
113
+ <!-- Hero Section -->
114
+ <section id="home" class="hero flex items-center justify-center text-white">
115
+ <div class="container mx-auto px-4 text-center">
116
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">Transform Your Space With Excellence</h1>
117
+ <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Professional remodeling services in Culpeper, VA that you can trust. Quality craftsmanship for your home or business.</p>
118
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
119
+ <a href="#contact" class="bg-amber-500 hover:bg-amber-600 text-white py-3 px-6 rounded-lg text-lg font-medium transition duration-300">
120
+ <i class="fas fa-envelope mr-2"></i> Get a Free Quote
121
+ </a>
122
+ <a href="tel:5716833169" class="bg-white hover:bg-gray-100 text-amber-600 py-3 px-6 rounded-lg text-lg font-medium transition duration-300">
123
+ <i class="fas fa-phone mr-2"></i> (571) 683-3169
124
+ </a>
125
+ </div>
126
+ </div>
127
+ </section>
128
+
129
+ <!-- Services Section -->
130
+ <section id="services" class="py-16 bg-gray-50">
131
+ <div class="container mx-auto px-4">
132
+ <div class="text-center mb-12">
133
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Our Professional Services</h2>
134
+ <div class="w-24 h-1 bg-amber-500 mx-auto"></div>
135
+ <p class="text-gray-600 mt-4 max-w-2xl mx-auto">We offer a comprehensive range of remodeling services to transform your space into something extraordinary.</p>
136
+ </div>
137
+
138
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
139
+ <!-- Service Card 1 -->
140
+ <div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300">
141
+ <div class="h-48 bg-gray-200 flex items-center justify-center">
142
+ <i class="fas fa-home text-6xl text-amber-500"></i>
143
+ </div>
144
+ <div class="p-6">
145
+ <h3 class="text-xl font-bold mb-3">Home Remodeling</h3>
146
+ <p class="text-gray-600 mb-4">Complete home transformations including kitchens, bathrooms, basements, and whole-house renovations.</p>
147
+ <a href="#contact" class="text-amber-500 font-medium hover:text-amber-600 flex items-center">
148
+ Learn More <i class="fas fa-arrow-right ml-2"></i>
149
+ </a>
150
+ </div>
151
+ </div>
152
+
153
+ <!-- Service Card 2 -->
154
+ <div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300">
155
+ <div class="h-48 bg-gray-200 flex items-center justify-center">
156
+ <i class="fas fa-tools text-6xl text-amber-500"></i>
157
+ </div>
158
+ <div class="p-6">
159
+ <h3 class="text-xl font-bold mb-3">Custom Carpentry</h3>
160
+ <p class="text-gray-600 mb-4">Bespoke woodworking solutions including custom cabinets, built-ins, trim work, and furniture.</p>
161
+ <a href="#contact" class="text-amber-500 font-medium hover:text-amber-600 flex items-center">
162
+ Learn More <i class="fas fa-arrow-right ml-2"></i>
163
+ </a>
164
+ </div>
165
+ </div>
166
+
167
+ <!-- Service Card 3 -->
168
+ <div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300">
169
+ <div class="h-48 bg-gray-200 flex items-center justify-center">
170
+ <i class="fas fa-paint-roller text-6xl text-amber-500"></i>
171
+ </div>
172
+ <div class="p-6">
173
+ <h3 class="text-xl font-bold mb-3">Interior Finishing</h3>
174
+ <p class="text-gray-600 mb-4">Professional painting, drywall installation, flooring, and all interior finishing touches.</p>
175
+ <a href="#contact" class="text-amber-500 font-medium hover:text-amber-600 flex items-center">
176
+ Learn More <i class="fas fa-arrow-right ml-2"></i>
177
+ </a>
178
+ </div>
179
+ </div>
180
+
181
+ <!-- Service Card 4 -->
182
+ <div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300">
183
+ <div class="h-48 bg-gray-200 flex items-center justify-center">
184
+ <i class="fas fa-door-open text-6xl text-amber-500"></i>
185
+ </div>
186
+ <div class="p-6">
187
+ <h3 class="text-xl font-bold mb-3">Room Additions</h3>
188
+ <p class="text-gray-600 mb-4">Expand your living space with seamless room additions that match your existing structure.</p>
189
+ <a href="#contact" class="text-amber-500 font-medium hover:text-amber-600 flex items-center">
190
+ Learn More <i class="fas fa-arrow-right ml-2"></i>
191
+ </a>
192
+ </div>
193
+ </div>
194
+
195
+ <!-- Service Card 5 -->
196
+ <div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300">
197
+ <div class="h-48 bg-gray-200 flex items-center justify-center">
198
+ <i class="fas fa-vector-square text-6xl text-amber-500"></i>
199
+ </div>
200
+ <div class="p-6">
201
+ <h3 class="text-xl font-bold mb-3">Commercial Remodeling</h3>
202
+ <p class="text-gray-600 mb-4">Transform your business space with professional commercial remodeling services.</p>
203
+ <a href="#contact" class="text-amber-500 font-medium hover:text-amber-600 flex items-center">
204
+ Learn More <i class="fas fa-arrow-right ml-2"></i>
205
+ </a>
206
+ </div>
207
+ </div>
208
+
209
+ <!-- Service Card 6 -->
210
+ <div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300">
211
+ <div class="h-48 bg-gray-200 flex items-center justify-center">
212
+ <i class="fas fa-hand-holding-usd text-6xl text-amber-500"></i>
213
+ </div>
214
+ <div class="p-6">
215
+ <h3 class="text-xl font-bold mb-3">Consultation & Design</h3>
216
+ <p class="text-gray-600 mb-4">Expert advice and design solutions to help plan your perfect remodeling project.</p>
217
+ <a href="#contact" class="text-amber-500 font-medium hover:text-amber-600 flex items-center">
218
+ Learn More <i class="fas fa-arrow-right ml-2"></i>
219
+ </a>
220
+ </div>
221
+ </div>
222
+ </div>
223
+ </div>
224
+ </section>
225
+
226
+ <!-- Why Choose Us Section -->
227
+ <section class="py-16 bg-white">
228
+ <div class="container mx-auto px-4">
229
+ <div class="flex flex-col lg:flex-row items-center">
230
+ <div class="lg:w-1/2 mb-8 lg:mb-0 lg:pr-12">
231
+ <img src="https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Remodeling work" class="rounded-lg shadow-lg w-full">
232
+ </div>
233
+ <div class="lg:w-1/2">
234
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Why Choose 703 Nailed It?</h2>
235
+ <div class="w-24 h-1 bg-amber-500 mb-6"></div>
236
+
237
+ <div class="space-y-6">
238
+ <div class="flex">
239
+ <div class="mr-4">
240
+ <div class="bg-amber-100 text-amber-600 rounded-full w-12 h-12 flex items-center justify-center">
241
+ <i class="fas fa-medal text-xl"></i>
242
+ </div>
243
+ </div>
244
+ <div>
245
+ <h3 class="text-xl font-bold mb-2">Quality Craftsmanship</h3>
246
+ <p class="text-gray-600">We take pride in our attention to detail and commitment to excellence in every project we undertake.</p>
247
+ </div>
248
+ </div>
249
+
250
+ <div class="flex">
251
+ <div class="mr-4">
252
+ <div class="bg-amber-100 text-amber-600 rounded-full w-12 h-12 flex items-center justify-center">
253
+ <i class="fas fa-user-tie text-xl"></i>
254
+ </div>
255
+ </div>
256
+ <div>
257
+ <h3 class="text-xl font-bold mb-2">Experienced Professionals</h3>
258
+ <p class="text-gray-600">Our team brings years of experience and specialized skills to ensure your project is completed to the highest standards.</p>
259
+ </div>
260
+ </div>
261
+
262
+ <div class="flex">
263
+ <div class="mr-4">
264
+ <div class="bg-amber-100 text-amber-600 rounded-full w-12 h-12 flex items-center justify-center">
265
+ <i class="fas fa-handshake text-xl"></i>
266
+ </div>
267
+ </div>
268
+ <div>
269
+ <h3 class="text-xl font-bold mb-2">Customer Satisfaction</h3>
270
+ <p class="text-gray-600">Your satisfaction is our top priority. We work closely with you to bring your vision to life.</p>
271
+ </div>
272
+ </div>
273
+
274
+ <div class="flex">
275
+ <div class="mr-4">
276
+ <div class="bg-amber-100 text-amber-600 rounded-full w-12 h-12 flex items-center justify-center">
277
+ <i class="fas fa-dollar-sign text-xl"></i>
278
+ </div>
279
+ </div>
280
+
281
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Build me a fully functional website for my remodeling company located in culpeper va cell 5716833169 [email protected]