3emibrahim/debugging-testing2
0
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>AIToolkit - Contact Us</title>
7 <style>
8 :root {
9 --primary: #4f46e5;
10 --primary-dark: #4338ca;
11 --secondary: #10b981;
12 --accent: #f97316;
13 --light: #f3f4f6;
14 --dark: #1f2937;
15 --gray: #9ca3af;
16 }
17
18 * {
19 margin: 0;
20 padding: 0;
21 box-sizing: border-box;
22 font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
23 }
24
25 body {
26 background-color: #f9fafb;
27 color: var(--dark);
28 line-height: 1.6;
29 }
30
31 header {
32 background-color: white;
33 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
34 padding: 1rem 2rem;
35 position: sticky;
36 top: 0;
37 z-index: 10;
38 }
39
40 nav {
41 display: flex;
42 justify-content: space-between;
43 align-items: center;
44 max-width: 1200px;
45 margin: 0 auto;
46 }
47
48 .logo {
49 font-size: 1.5rem;
50 font-weight: 700;
51 color: var(--primary);
52 display: flex;
53 align-items: center;
54 gap: 0.5rem;
55 }
56
57 .nav-links {
58 display: flex;
59 gap: 2rem;
60 }
61
62 .nav-links a {
63 text-decoration: none;
64 color: var(--dark);
65 font-weight: 500;
66 transition: color 0.2s;
67 }
68
69 .nav-links a:hover {
70 color: var(--primary);
71 }
72
73 main {
74 max-width: 1200px;
75 margin: 0 auto;
76 padding: 2rem;
77 }
78
79 .page-title {
80 text-align: center;
81 margin-bottom: 3rem;
82 }
83
84 .page-title h1 {
85 font-size: 2.5rem;
86 color: var(--dark);
87 margin-bottom: 1rem;
88 }
89
90 .page-title p {
91 font-size: 1.2rem;
92 color: var(--gray);
93 max-width: 700px;
94 margin: 0 auto;
95 }
96
97 .contact-container {
98 display: flex;
99 justify-content: center;
100 margin-bottom: 4rem;
101 }
102
103 @media (max-width: 768px) {
104 .contact-container {
105 flex-direction: column;
106 }
107
108 .nav-links {
109 display: none;
110 }
111 }
112
113 .social-links {
114 display: flex;
115 flex-direction: row;
116 justify-content: center;
117 gap: 4rem;
118 margin-top: 4rem;
119 padding: 2rem 0;
120 }
121
122 .social-item {
123 display: flex;
124 flex-direction: column;
125 align-items: center;
126 gap: 1rem;
127 }
128
129 .social-link {
130 width: 60px;
131 height: 60px;
132 border-radius: 50%;
133 display: flex;
134 align-items: center;
135 justify-content: center;
136 color: white;
137 font-size: 1.5rem;
138 transition: transform 0.3s;
139 }
140
141 .social-link:hover {
142 transform: translateY(-3px);
143 }
144
145 .social-username {
146 font-size: 1.2rem;
147 color: var(--dark);
148 margin-top: 0.5rem;
149 }
150
151 .facebook {
152 background-color: #1877f2;
153 }
154
155 .github {
156 background-color: #333;
157 }
158
159 .instagram {
160 background: linear-gradient(
161 45deg,
162 #f09433 0%,
163 #e6683c 25%,
164 #dc2743 50%,
165 #cc2366 75%,
166 #bc1888 100%
167 );
168 }
169
170 .linkedin {
171 background-color: #0077b5;
172 }
173
174 footer {
175 background-color: var(--dark);
176 color: white;
177 padding: 2rem;
178 text-align: center;
179 }
180
181 .footer-content {
182 max-width: 1200px;
183 margin: 0 auto;
184 display: flex;
185 flex-wrap: wrap;
186 justify-content: space-between;
187 gap: 2rem;
188 }
189
190 .footer-section {
191 flex: 1;
192 min-width: 200px;
193 }
194
195 .footer-section h3 {
196 margin-bottom: 1rem;
197 font-size: 1.25rem;
198 }
199
200 .footer-section a {
201 display: block;
202 color: var(--gray);
203 text-decoration: none;
204 margin-bottom: 0.5rem;
205 transition: color 0.2s;
206 }
207
208 .footer-section a:hover {
209 color: white;
210 }
211
212 .copyright {
213 margin-top: 2rem;
214 padding-top: 1rem;
215 border-top: 1px solid #374151;
216 color: var(--gray);
217 }
218 </style>
219 </head>
220 <body>
221 <header>
222 <nav>
223 <div class="logo">
224 <span>AIToolkit</span>
225 </div>
226 <div class="nav-links">
227 <a href="/">Home</a>
228 <a href="/features">Features</a>
229 <a href="/contact">Contact us</a>
230 <a href="/about">About</a>
231 </div>
232 </nav>
233 </header>
234
235 <main>
236 <div class="page-title">
237 <h1>Connect With Us</h1>
238 <p>
239 Follow us on social media to stay updated with the latest AI tools and
240 news.
241 </p>
242 </div>
243
244 <div class="contact-container">
245 <div class="social-links">
246 <div class="social-item">
247 <a
248 href="https://github.com"
249 class="social-link github"
250 target="_blank"
251 >
252 <i class="fab fa-github"></i>
253 </a>
254 <span class="social-username">@brahimkhattara</span>
255 </div>
256
257 <div class="social-item">
258 <a
259 href="https://instagram.com"
260 class="social-link instagram"
261 target="_blank"
262 >
263 <i class="fab fa-instagram"></i>
264 </a>
265 <span class="social-username">@brahimkhattara</span>
266 </div>
267
268 <div class="social-item">
269 <a
270 href="https://linkedin.com"
271 class="social-link linkedin"
272 target="_blank"
273 >
274 <i class="fab fa-linkedin-in"></i>
275 </a>
276 <span class="social-username">@brahimkhattara</span>
277 </div>
278
279 <div class="social-item">
280 <a
281 href="https://facebook.com"
282 class="social-link facebook"
283 target="_blank"
284 >
285 <i class="fab fa-facebook-f"></i>
286 </a>
287 <span class="social-username">@brahimkhattara</span>
288 </div>
289 </div>
290 </div>
291 </main>
292
293 <footer>
294 <div class="footer-content">
295 <div class="footer-section">
296 <h3>AIToolkit</h3>
297 <p>Empowering creativity and productivity with advanced AI tools.</p>
298 </div>
299 <div class="footer-section">
300 <h3>Quick Links</h3>
301 <a href="/index">Home</a>
302 <a href="/features.html">Features</a>
303 <a href="#">Pricing</a>
304 <a href="/about">About Us</a>
305 </div>
306 <div class="footer-section">
307 <h3>Resources</h3>
308 <a href="#">Documentation</a>
309 <a href="#">Tutorials</a>
310 <a href="#">Blog</a>
311 <a href="#">API</a>
312 </div>
313 <div class="footer-section">
314 <h3>Support</h3>
315 <a href="/contact">Contact Us</a>
316 <a href="#">FAQs</a>
317 <a href="#">Privacy Policy</a>
318 <a href="#">Terms of Service</a>
319 </div>
320 </div>
321 <div class="copyright">
322 <p>© 2025 AIToolkit. All rights reserved.</p>
323 </div>
324 </footer>
325
326 <script
327 src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js"
328 integrity="sha512-Tn2m0TIpgVyTzzvmxLNuqbSJH3JP8jm+Cy3hvHrW7ndTDcJ1w5mBiksqDBb8GpE2ksktFvDB/ykZ0mDpsZj20w=="
329 crossorigin="anonymous"
330 referrerpolicy="no-referrer"
331 ></script>
332 </body>
333</html>
334