-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtry.html
241 lines (219 loc) · 14.6 KB
/
try.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Sample Page with Footer</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 text-gray-900">
<!-- Header Section -->
<header class="bg-white shadow">
<header class="bg-white shadow-md">
<div class="container mx-auto px-4 py-6 flex justify-between items-center">
<!-- Logo / Company Name -->
<h1 class="text-2xl font-bold text-gray-800">Your Company</h1>
<!-- Primary Navigation -->
<nav class="hidden md:block">
<ul class="flex space-x-6">
<li><a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">Home</a></li>
<li><a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">Services</a></li>
<li><a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">About</a></li>
<li><a href="#" class="text-gray-600 hover:text-blue-600 transition-colors">Contact</a></li>
</ul>
</nav>
<!-- Mobile Menu Icon -->
<div class="md:hidden">
<button id="mobile-menu-btn" class="text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
<!-- Hamburger icon -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
</svg>
</button>
</div>
</div>
<!-- Search Bar Section -->
<nav class="bg-white shadow-sm mt-4">
<div class="container mx-auto flex justify-center items-center py-4 px-6">
<!-- Search Form (Centered) -->
<form class="flex w-full max-w-lg space-x-3">
<input type="text" placeholder="Search" class="w-full py-2 px-4 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" aria-label="Search">
<button class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
Search
</button>
</form>
</div>
</nav>
<!-- Mobile Menu (Toggled) -->
<div id="mobile-menu" class="md:hidden hidden bg-white shadow-lg py-6">
<nav>
<ul class="space-y-4 px-6">
<li><a href="#" class="block text-gray-600 hover:text-blue-600 transition-colors">Home</a></li>
<li><a href="#" class="block text-gray-600 hover:text-blue-600 transition-colors">Services</a></li>
<li><a href="#" class="block text-gray-600 hover:text-blue-600 transition-colors">About</a></li>
<li><a href="#" class="block text-gray-600 hover:text-blue-600 transition-colors">Contact</a></li>
</ul>
</nav>
</div>
</header>
<script>
// Mobile menu toggle functionality
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
const mobileMenu = document.getElementById('mobile-menu');
mobileMenuBtn.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
</script>
<!-- Main Content Section -->
<main class="container mx-auto px-4 py-10">
<!-- Hero Section without Background Image -->
<section class="text-center py-20 bg-gray-100">
<div>
<h1 class="text-5xl font-bold mb-6 text-gray-800">Welcome to Your Company</h1>
<p class="text-lg text-gray-700 mb-8">
Transforming your vision into captivating media. We specialize in video editing, VFX, and color grading to bring your projects to life.
</p>
<a href="#portfolio" class="bg-blue-600 text-white py-3 px-6 rounded-full hover:bg-blue-700 transition-colors">
Explore Our Work
</a>
</div>
</section>
<!-- Services Section with Icons and Clear Layout -->
<section class="container mx-auto py-16" id="services">
<h2 class="text-4xl font-bold text-center mb-12">Our Services</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white shadow-lg p-8 rounded-lg text-center">
<i class="fas fa-video fa-3x text-blue-600 mb-4"></i>
<h3 class="text-xl font-semibold mb-4">Video Editing</h3>
<p class="text-gray-700">High-quality editing for films, ads, and social media content, ensuring your message shines through.</p>
</div>
<div class="bg-white shadow-lg p-8 rounded-lg text-center">
<i class="fas fa-paint-brush fa-3x text-blue-600 mb-4"></i>
<h3 class="text-xl font-semibold mb-4">Color Grading</h3>
<p class="text-gray-700">Expert color correction and grading to give your video a polished, professional look.</p>
</div>
<div class="bg-white shadow-lg p-8 rounded-lg text-center">
<i class="fas fa-magic fa-3x text-blue-600 mb-4"></i>
<h3 class="text-xl font-semibold mb-4">VFX & Motion Graphics</h3>
<p class="text-gray-700">Enhance your footage with eye-catching motion graphics and visual effects for a modern edge.</p>
</div>
</div>
</section>
<!-- Portfolio Section with a Clean Layout -->
<section class="bg-gray-100 py-16" id="portfolio">
<h2 class="text-4xl font-bold text-center mb-12">Portfolio</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white shadow-lg p-6 rounded-lg">
<h3 class="text-xl font-semibold mb-4">Project 1</h3>
<p class="text-gray-700">An engaging social media ad where we incorporated quick cuts, color grading, and VFX to capture the audience’s attention.</p>
<a href="#" class="text-blue-600 hover:underline">Watch Now</a>
</div>
<div class="bg-white shadow-lg p-6 rounded-lg">
<h3 class="text-xl font-semibold mb-4">Project 2</h3>
<p class="text-gray-700">A corporate video where we applied smooth transitions and professional audio syncing to elevate the brand story.</p>
<a href="#" class="text-blue-600 hover:underline">Watch Now</a>
</div>
<div class="bg-white shadow-lg p-6 rounded-lg">
<h3 class="text-xl font-semibold mb-4">Project 3</h3>
<p class="text-gray-700">A short film with extensive use of color grading and special effects to create a dramatic atmosphere.</p>
<a href="#" class="text-blue-600 hover:underline">Watch Now</a>
</div>
</div>
</section>
<!-- About Us Section -->
<section class="py-16">
<div class="container mx-auto text-center">
<h2 class="text-4xl font-bold text-gray-800 mb-12">About Us</h2>
<div class="bg-gray-100 p-8 rounded-lg text-left">
<h3 class="text-2xl font-semibold mb-4">Our Story</h3>
<p class="text-gray-700 mb-4">
Founded by John Doe, a passionate filmmaker and editor, our company has grown from a one-person studio to a leading provider of video editing services. We pride ourselves on delivering creative, high-quality solutions that help brands, businesses, and filmmakers tell their stories effectively.
</p>
<a href="#contact" class="text-blue-600 hover:underline">Learn More</a>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section class="bg-gray-100 py-16">
<div class="container mx-auto text-center">
<h2 class="text-4xl font-bold text-gray-800 mb-12">What Our Clients Say</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white shadow-lg p-6 rounded-lg">
<p class="text-gray-700 italic mb-4">"Their video editing services took our project to the next level. The final product was beyond our expectations!"</p>
<h4 class="text-lg font-semibold">- Client A</h4>
</div>
<div class="bg-white shadow-lg p-6 rounded-lg">
<p class="text-gray-700 italic mb-4">"Professional, timely, and incredibly talented! Our go-to team for all our video content needs."</p>
<h4 class="text-lg font-semibold">- Client B</h4>
</div>
<div class="bg-white shadow-lg p-6 rounded-lg">
<p class="text-gray-700 italic mb-4">"We’ve worked with many editors, but no one matches their creativity and attention to detail."</p>
<h4 class="text-lg font-semibold">- Client C</h4>
</div>
</div>
</div>
</section>
<!-- Call to Action Section -->
<section class="bg-blue-600 text-white py-16">
<div class="container mx-auto text-center">
<h2 class="text-4xl font-bold mb-6">Let's Create Something Amazing</h2>
<p class="text-lg mb-8">Contact us today to start your next project or get a free consultation.</p>
<a href="#contact" class="bg-white text-blue-600 py-3 px-6 rounded-full hover:bg-gray-100 transition-colors">
Request a Free Quote
</a>
</div>
</section>
</main>
<!-- Footer Section -->
<footer class="bg-gray-700 text-gray-200 pt-10">
<div class="container mx-auto grid grid-cols-2 md:grid-cols-4 gap-8 pb-8">
<!-- First Column - Company -->
<div>
<h3 class="text-xl font-semibold text-white mb-4">Company</h3>
<ul>
<li><a href="#" class="hover:text-white transition-colors duration-200">About Us</a></li>
<li><a href="#" class="hover:text-white transition-colors duration-200">Careers</a></li>
<li><a href="#" class="hover:text-white transition-colors duration-200">Blog</a></li>
<li><a href="#" class="hover:text-white transition-colors duration-200">Press</a></li>
</ul>
</div>
<!-- Second Column - Support -->
<div>
<h3 class="text-xl font-semibold text-white mb-4">Support</h3>
<ul>
<li><a href="#" class="hover:text-white transition-colors duration-200">Help Center</a></li>
<li><a href="#" class="hover:text-white transition-colors duration-200">Contact Support</a></li>
<li><a href="#" class="hover:text-white transition-colors duration-200">Privacy Policy</a></li>
<li><a href="#" class="hover:text-white transition-colors duration-200">Terms of Service</a></li>
</ul>
</div>
<!-- Third Column - Services -->
<div>
<h3 class="text-xl font-semibold text-white mb-4">Services</h3>
<ul>
<li><a href="#" class="hover:text-white transition-colors duration-200">Web Design</a></li>
<li><a href="#" class="hover:text-white transition-colors duration-200">Marketing</a></li>
<li><a href="#" class="hover:text-white transition-colors duration-200">App Development</a></li>
<li><a href="#" class="hover:text-white transition-colors duration-200">Consulting</a></li>
</ul>
</div>
<!-- Fourth Column - Follow Us -->
<div>
<h3 class="text-xl font-semibold text-white mb-4">Follow Us</h3>
<ul class="flex space-x-4">
<li><a href="#" class="hover:text-white transition-colors duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h7v-9h-3v-3h3v-2c0-3.313 1.957-5 4.84-5 1.401 0 2.872.224 2.872.224v3h-1.625c-1.578 0-2.087.983-2.087 2.234v2.542h3.513l-.563 3h-2.95v9h5.056c2.761 0 5-2.239 5-5v-14c0-2.761-2.239-5-5-5z"/></svg></a></li>
<li><a href="#" class="hover:text-white transition-colors duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-2.723 0-4.927 2.204-4.927 4.927 0 .386.043.763.127 1.124-4.096-.205-7.725-2.169-10.152-5.151-.424.725-.666 1.569-.666 2.469 0 1.704.868 3.207 2.188 4.092-.807-.026-1.567-.248-2.229-.616v.062c0 2.379 1.693 4.363 3.946 4.816-.412.112-.847.171-1.294.171-.316 0-.625-.031-.928-.088.625 1.951 2.441 3.374 4.59 3.412-1.683 1.32-3.808 2.106-6.115 2.106-.398 0-.79-.023-1.175-.069 2.179 1.397 4.768 2.213 7.557 2.213 9.068 0 14.026-7.511 14.026-14.026 0-.214-.005-.426-.014-.637.962-.695 1.797-1.562 2.457-2.549z"/></svg></a></li>
<li><a href="#" class="hover:text-white transition-colors duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c-5.507 0-9.98 4.473-9.98 9.982 0 4.417 3.018 8.125 7.2 9.447v-6.655h-2.19v-2.6h2.19v-1.994c0-2.167 1.287-3.355 3.253-3.355.943 0 1.964.173 1.964.173v2.16h-1.106c-1.09 0-1.43.678-1.43 1.373v1.643h2.474l-.395 2.6h-2.079v6.655c4.183-1.322 7.201-5.03 7.201-9.447 0-5.509-4.473-9.982-9.98-9.982z"/></svg></a></li>
</ul>
</div>
</div>
<!-- Footer Bottom Section -->
<div class="bg-gray-800 py-4 mt-10">
<div class="container mx-auto text-center">
<p class="text-gray-400">© 2024 Your Company. All rights reserved.</p>
</div>
</div>
</footer>
</body>
</html>