Hugging Face's logo

Spaces:
khlitos
/
undefined
Running

App Files Community
khlitos commited on
Commit
fe9752a
·
verified ·
1 Parent(s): 1df8531

ben je dom>

Browse files
Files changed (2) hide show
  1. contact.html +164 -0
  2. index.html +9 -11
contact.html ADDED
@@ -0,0 +1,164 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Rose Petal Paradise | Contact</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;600&display=swap');
12
+
13
+ body {
14
+ font-family: 'Poppins', sans-serif;
15
+ }
16
+
17
+ h1, h2, h3 {
18
+ font-family: 'Playfair Display', serif;
19
+ }
20
+
21
+ .card-hover {
22
+ transition: all 0.3s ease;
23
+ }
24
+
25
+ .card-hover:hover {
26
+ transform: translateY(-5px);
27
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
28
+ }
29
+ </style>
30
+ </head>
31
+ <body class="bg-white">
32
+ <!-- Navigation -->
33
+ <nav class="bg-white shadow-sm">
34
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
35
+ <div class="flex justify-between h-16">
36
+ <div class="flex items-center">
37
+ <div class="flex-shrink-0 flex items-center">
38
+ <i data-feather="heart" class="text-rose-500 h-6 w-6"></i>
39
+ <span class="ml-2 text-xl font-bold text-rose-900">Rose Petal</span>
40
+ </div>
41
+ </div>
42
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
43
+ <a href="index.html" class="text-gray-500 hover:text-rose-700 px-3 py-2 rounded-md text-sm font-medium">Home</a>
44
+ <a href="index.html#features" class="text-gray-500 hover:text-rose-700 px-3 py-2 rounded-md text-sm font-medium">Features</a>
45
+ <a href="index.html#gallery" class="text-gray-500 hover:text-rose-700 px-3 py-2 rounded-md text-sm font-medium">Gallery</a>
46
+ <a href="contact.html" class="text-rose-900 hover:text-rose-700 px-3 py-2 rounded-md text-sm font-medium">Contact</a>
47
+ <a href="dashboard.html" class="text-gray-500 hover:text-rose-700 px-3 py-2 rounded-md text-sm font-medium">Dashboard</a>
48
+ </div>
49
+ <div class="md:hidden flex items-center">
50
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-rose-700">
51
+ <i data-feather="menu"></i>
52
+ </button>
53
+ </div>
54
+ </div>
55
+ </div>
56
+ </nav>
57
+
58
+ <!-- Contact Hero -->
59
+ <div class="bg-rose-50">
60
+ <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
61
+ <div class="text-center">
62
+ <h1 class="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl lg:text-6xl">
63
+ <span class="block text-rose-600">Contact Us</span>
64
+ </h1>
65
+ <p class="mt-6 max-w-lg mx-auto text-xl text-gray-500">
66
+ Have questions about our roses or need assistance with an order? We'd love to hear from you.
67
+ </p>
68
+ </div>
69
+ </div>
70
+ </div>
71
+
72
+ <!-- Contact Form -->
73
+ <div class="py-12 bg-white">
74
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
75
+ <div class="lg:grid lg:grid-cols-2 lg:gap-8">
76
+ <div class="lg:col-span-1">
77
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
78
+ Get in touch
79
+ </h2>
80
+ <p class="mt-3 text-lg text-gray-500">
81
+ Fill out the form and our team will get back to you within 24 hours.
82
+ </p>
83
+
84
+ <div class="mt-8">
85
+ <div class="flex items-start">
86
+ <div class="flex-shrink-0 bg-rose-100 rounded-md p-3">
87
+ <i data-feather="mail" class="h-6 w-6 text-rose-600"></i>
88
+ </div>
89
+ <div class="ml-4">
90
+ <h3 class="text-lg font-medium text-gray-900">Email us</h3>
91
+ <p class="mt-1 text-gray-500">info@rosepetalparadise.com</p>
92
+ </div>
93
+ </div>
94
+
95
+ <div class="mt-6 flex items-start">
96
+ <div class="flex-shrink-0 bg-rose-100 rounded-md p-3">
97
+ <i data-feather="phone" class="h-6 w-6 text-rose-600"></i>
98
+ </div>
99
+ <div class="ml-4">
100
+ <h3 class="text-lg font-medium text-gray-900">Call us</h3>
101
+ <p class="mt-1 text-gray-500">+31 20 123 4567</p>
102
+ </div>
103
+ </div>
104
+
105
+ <div class="mt-6 flex items-start">
106
+ <div class="flex-shrink-0 bg-rose-100 rounded-md p-3">
107
+ <i data-feather="map-pin" class="h-6 w-6 text-rose-600"></i>
108
+ </div>
109
+ <div class="ml-4">
110
+ <h3 class="text-lg font-medium text-gray-900">Visit us</h3>
111
+ <p class="mt-1 text-gray-500">Keizersgracht 123, Amsterdam</p>
112
+ </div>
113
+ </div>
114
+ </div>
115
+ </div>
116
+
117
+ <div class="mt-12 lg:mt-0 lg:col-span-1">
118
+ <div class="bg-white shadow-md rounded-lg p-6">
119
+ <form action="#" method="POST" class="space-y-6">
120
+ <div>
121
+ <label for="name" class="block text-sm font-medium text-gray-700">Full name</label>
122
+ <div class="mt-1">
123
+ <input type="text" name="name" id="name" autocomplete="name" class="py-3 px-4 block w-full border border-gray-300 rounded-md focus:ring-rose-500 focus:border-rose-500">
124
+ </div>
125
+ </div>
126
+
127
+ <div>
128
+ <label for="email" class="block text-sm font-medium text-gray-700">Email address</label>
129
+ <div class="mt-1">
130
+ <input type="email" name="email" id="email" autocomplete="email" class="py-3 px-4 block w-full border border-gray-300 rounded-md focus:ring-rose-500 focus:border-rose-500">
131
+ </div>
132
+ </div>
133
+
134
+ <div>
135
+ <label for="phone" class="block text-sm font-medium text-gray-700">Phone number</label>
136
+ <div class="mt-1">
137
+ <input type="tel" name="phone" id="phone" autocomplete="tel" class="py-3 px-4 block w-full border border-gray-300 rounded-md focus:ring-rose-500 focus:border-rose-500">
138
+ </div>
139
+ </div>
140
+
141
+ <div>
142
+ <label for="message" class="block text-sm font-medium text-gray-700">Message</label>
143
+ <div class="mt-1">
144
+ <textarea id="message" name="message" rows="4" class="py-3 px-4 block w-full border border-gray-300 rounded-md focus:ring-rose-500 focus:border-rose-500"></textarea>
145
+ </div>
146
+ </div>
147
+
148
+ <div class="flex justify-end">
149
+ <button type="submit" class="inline-flex justify-center py-3 px-6 border border-transparent shadow-sm text-base font-medium rounded-md text-white bg-rose-600 hover:bg-rose-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rose-500">
150
+ Send message
151
+ </button>
152
+ </div>
153
+ </form>
154
+ </div>
155
+ </div>
156
+ </div>
157
+ </div>
158
+ </div>
159
+
160
+ <script>
161
+ feather.replace();
162
+ </script>
163
+ </body>
164
+ </html>
index.html CHANGED
@@ -75,12 +75,12 @@
75
  </div>
76
  </div>
77
  <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
78
- <a href="#" class="text-rose-900 hover:text-rose-700 px-3 py-2 rounded-md text-sm font-medium">Home</a>
79
- <a href="#" class="text-gray-500 hover:text-rose-700 px-3 py-2 rounded-md text-sm font-medium">Features</a>
80
- <a href="#" class="text-gray-500 hover:text-rose-700 px-3 py-2 rounded-md text-sm font-medium">Gallery</a>
81
- <a href="#" class="text-gray-500 hover:text-rose-700 px-3 py-2 rounded-md text-sm font-medium">Contact</a>
82
  <a href="dashboard.html" class="text-gray-500 hover:text-rose-700 px-3 py-2 rounded-md text-sm font-medium">Dashboard</a>
83
- </div>
84
  <div class="md:hidden flex items-center">
85
  <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-rose-700">
86
  <i data-feather="menu"></i>
@@ -121,10 +121,9 @@
121
  </div>
122
  </div>
123
  </div>
124
-
125
  <!-- Features Section -->
126
- <div class="py-12 bg-white">
127
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
128
  <div class="lg:text-center">
129
  <h2 class="text-base text-rose-600 font-semibold tracking-wide uppercase">Features</h2>
130
  <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
@@ -176,10 +175,9 @@
176
  </div>
177
  </div>
178
  </div>
179
-
180
  <!-- Gallery Section -->
181
- <div class="bg-gray-50 py-12">
182
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
183
  <div class="lg:text-center">
184
  <h2 class="text-base text-rose-600 font-semibold tracking-wide uppercase">Gallery</h2>
185
  <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
 
75
  </div>
76
  </div>
77
  <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
78
+ <a href="index.html" class="text-rose-900 hover:text-rose-700 px-3 py-2 rounded-md text-sm font-medium">Home</a>
79
+ <a href="#features" class="text-gray-500 hover:text-rose-700 px-3 py-2 rounded-md text-sm font-medium">Features</a>
80
+ <a href="#gallery" class="text-gray-500 hover:text-rose-700 px-3 py-2 rounded-md text-sm font-medium">Gallery</a>
81
+ <a href="contact.html" class="text-gray-500 hover:text-rose-700 px-3 py-2 rounded-md text-sm font-medium">Contact</a>
82
  <a href="dashboard.html" class="text-gray-500 hover:text-rose-700 px-3 py-2 rounded-md text-sm font-medium">Dashboard</a>
83
+ </div>
84
  <div class="md:hidden flex items-center">
85
  <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-rose-700">
86
  <i data-feather="menu"></i>
 
121
  </div>
122
  </div>
123
  </div>
 
124
  <!-- Features Section -->
125
+ <div id="features" class="py-12 bg-white">
126
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
127
  <div class="lg:text-center">
128
  <h2 class="text-base text-rose-600 font-semibold tracking-wide uppercase">Features</h2>
129
  <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
 
175
  </div>
176
  </div>
177
  </div>
 
178
  <!-- Gallery Section -->
179
+ <div id="gallery" class="bg-gray-50 py-12">
180
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
181
  <div class="lg:text-center">
182
  <h2 class="text-base text-rose-600 font-semibold tracking-wide uppercase">Gallery</h2>
183
  <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">