Hugging Face's logo

Spaces:
jinonet
/
digital-agency-website
Running

App Files Community
jinonet commited on
Commit
0ffd11c
•
1 Parent(s): 9f27eef

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +310 -17
index.html CHANGED
@@ -1,19 +1,312 @@
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>
3
+ <head>
4
+ <title>Jinonet Digital Marketing Agency</title>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ </head>
8
+ <body>
9
+ <nav style="background-color: #333; color: #fff; display: flex; justify-content: space-between; align-items: center; padding: 10px;">
10
+ <div>
11
+ <a href="#" style="color: #fff; text-decoration: none; font-size: 24px;">Jinonet</a>
12
+ </div>
13
+ <div style="display: none;">
14
+ <div style="width: 30px; height: 20px; position: relative;">
15
+ <div style="width: 100%; height: 2px; background-color: #fff; position: absolute; top: 50%; transform: translateY(-50%);"></div>
16
+ <div style="width: 100%; height: 2px; background-color: #fff; position: absolute; top: 50%; transform: translateY(-50%);"></div>
17
+ <div style="width: 100%; height: 2px; background-color: #fff; position: absolute; top: 50%; transform: translateY(-50%);"></div>
18
+ </div>
19
+ </div>
20
+ <ul style="list-style-type: none; display: flex; justify-content: space-between; align-items: center; margin: 0;">
21
+ <li style="padding: 0 10px;"><a href="#" style="color: #fff; text-decoration: none;">Home</a></li>
22
+ <li style="padding: 0 10px;"><a href="#" style="color: #fff; text-decoration: none;">About</a></li>
23
+ <li style="padding: 0 10px;"><a href="#" style="color: #fff; text-decoration: none;">Contact</a></li>
24
+ </ul>
25
+ </nav>
26
+
27
+ <script>
28
+ function toggleMenu() {
29
+ var menu = document.querySelector('nav ul');
30
+ menu.classList.toggle('active');
31
+ }
32
+
33
+ var hamburger = document.querySelector('nav div:nth-of-type(2)');
34
+ hamburger.addEventListener('click', toggleMenu);
35
+ </script>
36
+
37
+ <style>
38
+ @media only screen and (max-width: 600px) {
39
+ nav ul {
40
+ position: absolute;
41
+ top: 60px;
42
+ left: 0;
43
+ width: 100%;
44
+ height: calc(100% - 60px);
45
+ background-color: #333;
46
+ display: flex;
47
+ flex-direction: column;
48
+ justify-content: center;
49
+ align-items: center;
50
+ opacity: 0;
51
+ pointer-events: none;
52
+ transition: opacity 0.5s ease-in-out;
53
+ }
54
+
55
+ nav ul.active {
56
+ opacity: 1;
57
+ pointer-events: auto;
58
+ }
59
+
60
+ nav ul li {
61
+ padding: 10px;
62
+ }
63
+
64
+ nav div:nth-of-type(2) {
65
+ display: block;
66
+ cursor: pointer;
67
+ }
68
+ }
69
+ </style>
70
+
71
+ <header>
72
+ <video src="girl.mp4" autoplay loop muted></video>
73
+ <div class="header-content">
74
+ <h1>Jinonet Digital Marketing Agency</h1>
75
+ <p>Boost your business online with our expert digital marketing services.</p>
76
+ <a href="#" class="cta-btn">Get Started</a>
77
+ </div>
78
+ </header>
79
+
80
+ <style>
81
+ header {
82
+ position: relative;
83
+ height: 100vh;
84
+ overflow: hidden;
85
+ }
86
+ video {
87
+ position: absolute;
88
+ top: 0;
89
+ left: 0;
90
+ width: 100%;
91
+ height: 100%;
92
+ object-fit: cover;
93
+ opacity: 0.8;
94
+ }
95
+ .header-content {
96
+ position: absolute;
97
+ top: 50%;
98
+ left: 50%;
99
+ transform: translate(-50%, -50%);
100
+ text-align: center;
101
+ z-index: 1;
102
+ color: #fff;
103
+ }
104
+ .header-content h1 {
105
+ font-size: 72px;
106
+ font-weight: bold;
107
+ margin-bottom: 30px;
108
+ text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
109
+ }
110
+ .header-content p {
111
+ font-size: 24px;
112
+ margin-bottom: 50px;
113
+ text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
114
+ }
115
+ .cta-btn {
116
+ display: inline-block;
117
+ padding: 15px 40px;
118
+ font-size: 18px;
119
+ font-weight: bold;
120
+ text-decoration: none;
121
+ background-color: #fff;
122
+ color: #333;
123
+ border-radius: 30px;
124
+ transition: all 0.3s ease;
125
+ }
126
+ .cta-btn:hover {
127
+ background-color: #333;
128
+ color: #fff;
129
+ }
130
+ </style>
131
+ <section id="services">
132
+ <h2 class="cta-btn">Our Services</h2>
133
+ <div class="service-container">
134
+ <div class="service-box">
135
+ <img src="seo.jpg" alt="Service 1">
136
+ <h3>Search Engine Optimization (SEO)</h3>
137
+ <p>Improve your website's ranking in search engines and increase traffic to your site with our proven SEO strategies.</p>
138
+ </div>
139
+ <div class="service-box">
140
+ <img src="ppclick.jpg" alt="Service 2">
141
+ <h3>Pay-Per-Click Advertising (PPC)</h3>
142
+ <p>Get immediate visibility for your brand and drive targeted traffic to your site with our PPC advertising campaigns.</p>
143
+ </div>
144
+ <div class="service-box">
145
+ <img src="socialm.jpg" alt="Service 3">
146
+ <h3>Social Media Marketing (SMM)</h3>
147
+ <p>Engage your audience and build your brand on social media platforms with our tailored SMM strategies.</p>
148
+ </div>
149
+ </div>
150
+ </section>
151
+
152
+ <style>
153
+ #services {
154
+ padding: 50px 0;
155
+ background-color: #f9f9f9;
156
+ }
157
+ #services h2 {
158
+ text-align: center;
159
+ font-size: 36px;
160
+ font-weight: bold;
161
+ margin-bottom: 30px;
162
+ }
163
+ .service-container {
164
+ display: flex;
165
+ justify-content: space-around;
166
+ align-items: center;
167
+ flex-wrap: wrap;
168
+ }
169
+ .service-box {
170
+ width: 300px;
171
+ padding: 30px;
172
+ margin-bottom: 30px;
173
+ border: 1px solid #ccc;
174
+ text-align: center;
175
+ }
176
+ .services-box:hover{
177
+ box-shadow: 0px 0px 10px;
178
+ scale: 1.2;
179
+ border-radius: 10px;
180
+ }
181
+ .service-box img {
182
+ width: 100%;
183
+ margin-bottom: 20px;
184
+ }
185
+ .service-box h3 {
186
+ font-size: 24px;
187
+ font-weight: bold;
188
+ margin-bottom: 20px;
189
+ }
190
+ .service-box p {
191
+ font-size: 18px;
192
+ line-height: 1.5;
193
+ color: #777;
194
+ }
195
+ </style>
196
+
197
+ <section class="about">
198
+ <div style="background-color: #f7f7f7; padding: 50px;">
199
+ <h2 style="font-size: 32px; text-align: center; margin-bottom: 30px;" class="cta-btn">About Us</h2>
200
+ <p style="font-size: 18px; line-height: 1.5; margin-bottom: 30px;">
201
+ We are a digital marketing agency dedicated to helping businesses achieve their online goals. With years of experience in the industry, our team of experts knows how to create and execute effective digital marketing strategies that drive results.
202
+ We specialize in helping businesses of all sizes grow and succeed in the digital world. Our team of experts has years of experience in SEO, PPC, social media, email marketing, and content marketing.
203
+ </p>
204
+ <p style="font-size: 18px; line-height: 1.5; margin-bottom: 30px;">
205
+
206
+
207
+ <p style="font-size: 18px; line-height: 1.5;">
208
+ Contact us today to learn more about our services and how we can help your business succeed online.
209
+ </p>
210
+ </div>
211
+ </section>
212
+ <section class="contact">
213
+ <div style="background-color: #f7f7f7; padding: 50px;">
214
+ <h2 style="font-size: 32px; text-align: center; margin-bottom: 30px;" class="cta-btn">Contact Us</h2>
215
+ <form style="max-width: 500px; margin: 0 auto;">
216
+ <div style="display: flex; flex-direction: column; margin-bottom: 20px;">
217
+ <label for="name" style="font-size: 18px; margin-bottom: 10px;">Name:</label>
218
+ <input type="text" id="name" name="name" style="padding: 10px; font-size: 16px;">
219
+ </div>
220
+ <div style="display: flex; flex-direction: column; margin-bottom: 20px;">
221
+ <label for="email" style="font-size: 18px; margin-bottom: 10px;">Email:</label>
222
+ <input type="email" id="email" name="email" style="padding: 10px; font-size: 16px;">
223
+ </div>
224
+ <div style="display: flex; flex-direction: column; margin-bottom: 20px;">
225
+ <label for="message" style="font-size: 18px; margin-bottom: 10px;">Message:</label>
226
+ <textarea id="message" name="message" style="padding: 10px; font-size: 16px; height: 150px;"></textarea>
227
+ </div>
228
+ <button type="submit" class="cta-btn">Submit</button>
229
+ </section>
230
+ </main>
231
+ <footer>
232
+ <div class="footer-container">
233
+ <div class="footer-section">
234
+ <h4>About Us</h4>
235
+ <p>We are a digital marketing agency dedicated to helping businesses grow online. Contact us to learn how we can help your business succeed.</p>
236
+ </div>
237
+ <div class="footer-section">
238
+ <h4>Our Services</h4>
239
+ <ul>
240
+ <li><a href="#">Search Engine Optimization (SEO)</a></li>
241
+ <li><a href="#">Pay-Per-Click Advertising (PPC)</a></li>
242
+ <li><a href="#">Social Media Marketing (SMM)</a></li>
243
+ <li><a href="#">Content Marketing</a></li>
244
+ <li><a href="#">Email Marketing</a></li>
245
+ </ul>
246
+ </div>
247
+ <div class="footer-section">
248
+ <h4>Contact Us</h4>
249
+ <p>123 Main St, Suite 101<br>Anytown, USA 12345</p>
250
+ <p>Email: info@digitalmarketingagency.com<br>Phone: (555) 555-5555</p>
251
+ </div>
252
+ </div>
253
+ <div class="footer-bottom">
254
+ <p>&copy; 2023 Jinonet Digital Marketing Agency. All Rights Reserved.</p>
255
+ </div>
256
+ </footer>
257
+
258
+ <style>
259
+ footer {
260
+ background-color: #f5f5f5;
261
+ padding: 50px 0;
262
+ color: #777;
263
+ }
264
+ .footer-container {
265
+ display: flex;
266
+ justify-content: space-around;
267
+ align-items: flex-start;
268
+ flex-wrap: wrap;
269
+ margin-bottom: 50px;
270
+ }
271
+ .footer-section {
272
+ width: 300px;
273
+ margin-right: 30px;
274
+ margin-bottom: 30px;
275
+ }
276
+ .footer-section h4 {
277
+ font-size: 24px;
278
+ font-weight: bold;
279
+ margin-bottom: 20px;
280
+ }
281
+ .footer-section p {
282
+ font-size: 18px;
283
+ line-height: 1.5;
284
+ margin-bottom: 20px;
285
+ }
286
+ .footer-section ul {
287
+ list-style: none;
288
+ padding: 0;
289
+ margin: 0;
290
+ }
291
+ .footer-section li {
292
+ margin-bottom: 10px;
293
+ }
294
+ .footer-section a {
295
+ color: #777;
296
+ text-decoration: none;
297
+ }
298
+ .footer-section a:hover {
299
+ color: #333;
300
+ }
301
+ .footer-bottom {
302
+ background-color: #ddd;
303
+ padding: 20px;
304
+ text-align: center;
305
+ }
306
+ .footer-bottom p {
307
+ font-size: 16px;
308
+ margin: 0;
309
+ }
310
+ </style>
311
+
312
+ </body>