Skip to content

Commit b8d5b0c

Browse files
pradipchaudharypradipchaudhary
committed
fixed footer layout
1 parent e38db5a commit b8d5b0c

1 file changed

Lines changed: 116 additions & 118 deletions

File tree

‎index.html‎

Lines changed: 116 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,6 @@
5757
<body
5858
class="font-inter bg-white text-neutral-900 antialiased leading-relaxed selection:bg-indigo-200/60 overflow-x-hidden">
5959

60-
<<<<<<< HEAD
6160
<!-- Header -->
6261
<header
6362
class="w-full sticky top-0 z-20 backdrop-blur supports-[backdrop-filter]:bg-white/70 border-b border-neutral-200">
@@ -96,10 +95,13 @@
9695

9796
<div class="max-w-3xl mx-auto text-center px-6 lg:px-10 pt-20 sm:pt-28 md:pt-36 space-y-8">
9897
<h1 class="font-space text-4xl sm:text-5xl md:text-6xl font-semibold tracking-tight animate-fade-in opacity-0"
99-
style="animation-delay:.1s;">🚀 100 JavaScript Projects<br />From Beginner&nbsp;→&nbsp;Intermediate</h1>
100-
<p class="text-neutral-600 md:text-lg animate-fade-in opacity-0" style="animation-delay:.2s;">Master modern
98+
style="animation-delay:.1s;">🚀 100 JavaScript Projects<br />From Beginner&nbsp;→&nbsp;Intermediate
99+
</h1>
100+
<p class="text-neutral-600 md:text-lg animate-fade-in opacity-0" style="animation-delay:.2s;">Master
101+
modern
101102
JavaScript by building real-world applications with <strong class="text-neutral-900">zero
102-
frameworks</strong>. Clone&nbsp;the&nbsp;repo, open any project, and start learning through hands-on
103+
frameworks</strong>. Clone&nbsp;the&nbsp;repo, open any project, and start learning through
104+
hands-on
103105
code.</p>
104106
<div class="flex justify-center gap-4 pt-4 animate-fade-in opacity-0" style="animation-delay:.3s;">
105107
<a href="https://github.com/pradipchaudhary/100-js-projects" target="_blank"
@@ -108,51 +110,6 @@
108110
<a href="#projects"
109111
class="bg-white hover:bg-neutral-100 border border-neutral-200 text-neutral-900 px-6 py-3 rounded-lg text-sm transition-colors">Preview
110112
Projects</a>
111-
=======
112-
<!-- Your content goes here -->
113-
<main class="content-container">
114-
<!-- Header Section -->
115-
<header id="header">
116-
<div class="container header">
117-
<h1 class="brand-name">
118-
<a href="#">
119-
<img
120-
src="/assets/images/logo.png"
121-
alt="100 JavaScript Projects Logo"
122-
style="width: 65px; margin-right: 8px;"
123-
/>
124-
</a>
125-
</h1>
126-
<nav aria-label="Main navigation for JavaScript projects">
127-
<ul role="list" class="flex space-x-6 items-center">
128-
<li>
129-
<a href="https://github.com/pradipchaudhary/100-javascript-projects" target="_blank" rel="noopener noreferrer" class="flex items-center text-gray-300 hover:text-white transition-colors duration-200" aria-label="View 100 JavaScript Projects on GitHub">
130-
<i class="ri-github-line text-xl mr-1"></i>
131-
<span class="hidden md:inline">GitHub Repo</span>
132-
</a>
133-
</li>
134-
<li>
135-
<a href="https://www.buymeacoffee.com/pradipchaudhary" target="_blank" rel="noopener noreferrer" class="flex items-center text-gray-300 hover:text-white transition-colors duration-200" aria-label="Support Pradip Chaudhary on Buy Me A Coffee">
136-
<i class="ri-cup-line text-xl mr-1"></i>
137-
<span class="hidden md:inline">Buy Me A Coffee</span>
138-
</a>
139-
</li>
140-
<li>
141-
<div class="repo">
142-
<iframe
143-
src="https://ghbtns.com/github-btn.html?user=pradipchaudhary&repo=100-javascript-projects&type=star&count=true&size=large"
144-
frameborder="0"
145-
scrolling="0"
146-
width="160px"
147-
height="30px"
148-
title="GitHub Star Button for 100-javascript-projects"
149-
style="font-size: 14px; font-weight: 500;"
150-
></iframe>
151-
</div>
152-
</li>
153-
</ul>
154-
</nav>
155-
>>>>>>> a1091ec6294f8081a663f1a75e2b02b891be4f1f
156113
</div>
157114
</div>
158115
</section>
@@ -177,14 +134,16 @@ <h3 class="font-medium mb-2">100 Unique Projects</h3>
177134
<div class="border border-neutral-200 rounded-2xl p-6 hover:shadow-md transition group bg-white">
178135
<i data-lucide="zap" class="w-7 h-7 text-indigo-600 mb-4"></i>
179136
<h3 class="font-medium mb-2">Modern JavaScript (ES6+)</h3>
180-
<p class="text-sm text-neutral-600">Arrow functions, async/await, template literals, modules and more—no
137+
<p class="text-sm text-neutral-600">Arrow functions, async/await, template literals, modules and
138+
more—no
181139
outdated patterns.</p>
182140
</div>
183141

184142
<div class="border border-neutral-200 rounded-2xl p-6 hover:shadow-md transition group bg-white">
185143
<i data-lucide="monitor" class="w-7 h-7 text-indigo-600 mb-4"></i>
186144
<h3 class="font-medium mb-2">Real-World Logic</h3>
187-
<p class="text-sm text-neutral-600">From API calls to LocalStorage, each project mirrors tasks you’ll
145+
<p class="text-sm text-neutral-600">From API calls to LocalStorage, each project mirrors tasks
146+
you’ll
188147
face&nbsp;in&nbsp;production.</p>
189148
</div>
190149

@@ -205,7 +164,8 @@ <h3 class="font-medium mb-2">Detailed READMEs</h3>
205164
<div class="border border-neutral-200 rounded-2xl p-6 hover:shadow-md transition group bg-white">
206165
<i data-lucide="users" class="w-7 h-7 text-indigo-600 mb-4"></i>
207166
<h3 class="font-medium mb-2">Active Community</h3>
208-
<p class="text-sm text-neutral-600">Open source &amp; contribution-friendly. Share ideas, submit PRs, or
167+
<p class="text-sm text-neutral-600">Open source &amp; contribution-friendly. Share ideas, submit
168+
PRs, or
209169
request new challenges!</p>
210170
</div>
211171
</div>
@@ -307,7 +267,6 @@ <h3 class="text-center text-sm font-medium text-neutral-500">Projects by Difficu
307267
</div>
308268
</section>
309269

310-
<<<<<<< HEAD
311270
<!-- Get started -->
312271
<section class="mx-auto max-w-7xl px-6 lg:px-10 mt-32 space-y-14">
313272
<div class="text-center max-w-2xl mx-auto space-y-4">
@@ -337,55 +296,60 @@ <h4 class="font-medium">3. Run & Learn</h4>
337296
</div>
338297
</div>
339298
</section>
340-
=======
341-
<!-- Project Showcase Section -->
342-
<!-- FAQ Section -->
343-
<section id="faq" class="py-28">
344-
<div class="max-w-3xl mx-auto px-6">
345-
<h2 class="text-3xl font-semibold tracking-tight text-center mb-12" data-animate>
346-
Frequently Asked Questions
347-
</h2>
348-
349-
<div class="divide-y divide-white/10 border border-white/10 rounded-2xl" data-animate>
350-
351-
<!-- FAQ Item 1 -->
352-
<button class="w-full text-left px-6 py-5 flex items-center justify-between hover:bg-white/5 faq-toggle" aria-expanded="false">
353-
<span class="font-medium">Are these projects beginner friendly?</span>
354-
<i data-lucide="chevron-down" class="w-5 h-5 transition-transform"></i>
355-
</button>
356-
<div class="faq-content px-6 text-sm text-slate-400">
357-
Yes! Projects are tagged by difficulty, starting from very basic to advanced.
358-
</div>
359-
360-
<!-- FAQ Item 2 -->
361-
<button class="w-full text-left px-6 py-5 flex items-center justify-between hover:bg-white/5 faq-toggle" aria-expanded="false">
362-
<span class="font-medium">Can I contribute my own project?</span>
363-
<i data-lucide="chevron-down" class="w-5 h-5 transition-transform"></i>
364-
</button>
365-
<div class="faq-content px-6 text-sm text-slate-400">
366-
Absolutely. Fork the repo, add your project, and open a pull request. Guidelines are in the README.
367-
</div>
368-
369-
<!-- FAQ Item 3 -->
370-
<button class="w-full text-left px-6 py-5 flex items-center justify-between hover:bg-white/5 faq-toggle" aria-expanded="false">
371-
<span class="font-medium">Do I need any frameworks?</span>
372-
<i data-lucide="chevron-down" class="w-5 h-5 transition-transform"></i>
373-
</button>
374-
<div class="faq-content px-6 text-sm text-slate-400">
375-
No frameworks are required. Pure JavaScript is all you need, though you’re welcome to explore libraries.
376-
</div>
377-
378-
</div>
379-
</div>
380-
</section>
381-
382-
>>>>>>> a1091ec6294f8081a663f1a75e2b02b891be4f1f
299+
300+
<!-- Project Showcase Section -->
301+
<!-- FAQ Section -->
302+
<section id="faq" class="py-28">
303+
<div class="max-w-3xl mx-auto px-6">
304+
<h2 class="text-3xl font-semibold tracking-tight text-center mb-12" data-animate>
305+
Frequently Asked Questions
306+
</h2>
307+
308+
<div class="divide-y divide-white/10 border border-white/10 rounded-2xl" data-animate>
309+
310+
<!-- FAQ Item 1 -->
311+
<button class="w-full text-left px-6 py-5 flex items-center justify-between hover:bg-white/5 faq-toggle"
312+
aria-expanded="false">
313+
<span class="font-medium">Are these projects beginner friendly?</span>
314+
<i data-lucide="chevron-down" class="w-5 h-5 transition-transform"></i>
315+
</button>
316+
<div class="faq-content px-6 text-sm text-slate-400">
317+
Yes! Projects are tagged by difficulty, starting from very basic to advanced.
318+
</div>
319+
320+
<!-- FAQ Item 2 -->
321+
<button class="w-full text-left px-6 py-5 flex items-center justify-between hover:bg-white/5 faq-toggle"
322+
aria-expanded="false">
323+
<span class="font-medium">Can I contribute my own project?</span>
324+
<i data-lucide="chevron-down" class="w-5 h-5 transition-transform"></i>
325+
</button>
326+
<div class="faq-content px-6 text-sm text-slate-400">
327+
Absolutely. Fork the repo, add your project, and open a pull request. Guidelines are in the
328+
README.
329+
</div>
330+
331+
<!-- FAQ Item 3 -->
332+
<button class="w-full text-left px-6 py-5 flex items-center justify-between hover:bg-white/5 faq-toggle"
333+
aria-expanded="false">
334+
<span class="font-medium">Do I need any frameworks?</span>
335+
<i data-lucide="chevron-down" class="w-5 h-5 transition-transform"></i>
336+
</button>
337+
<div class="faq-content px-6 text-sm text-slate-400">
338+
No frameworks are required. Pure JavaScript is all you need, though you’re welcome to
339+
explore libraries.
340+
</div>
341+
342+
</div>
343+
</div>
344+
</section>
345+
383346

384347
<!-- Contribute -->
385348
<section id="contribute" class="mx-auto max-w-7xl px-6 lg:px-10 mt-32 space-y-16">
386349
<div class="text-center max-w-2xl mx-auto space-y-4">
387350
<h2 class="text-3xl sm:text-4xl font-space font-semibold tracking-tight">Contribute &amp; Grow</h2>
388-
<p class="text-neutral-600">Have ideas or improvements? Open a PR and join hundreds of developers building
351+
<p class="text-neutral-600">Have ideas or improvements? Open a PR and join hundreds of developers
352+
building
389353
together.</p>
390354
</div>
391355

@@ -403,38 +367,72 @@ <h2 class="text-3xl sm:text-4xl font-space font-semibold tracking-tight">Contrib
403367
</div>
404368
</section>
405369

406-
<!-- Contact -->
407-
<section id="contact" class="mx-auto max-w-7xl px-6 lg:px-10 mt-32">
408-
<div class="border-t border-neutral-200 pt-16 flex flex-col md:flex-row md:justify-between gap-10">
409-
<div class="space-y-4 max-w-lg">
410-
<h2 class="text-2xl font-space font-semibold tracking-tight">Let’s Connect</h2>
411-
<p class="text-neutral-600">Questions, feedback or ideas? Reach out anytime.</p>
412-
<div class="flex items-center gap-3 text-sm">
370+
<!-- Contact Section -->
371+
<section id="contact" class="max-w-7xl mx-auto px-6 lg:px-10 mt-32">
372+
<div class="border-t border-gray-200 pt-16 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
373+
374+
<!-- Column 1: Let's Connect -->
375+
<div class="space-y-5">
376+
<h2 class="text-2xl font-semibold text-gray-900 tracking-tight">Let’s Connect</h2>
377+
<p class="text-gray-600">Have a question, feedback, or idea? Feel free to reach out anytime.</p>
378+
<div class="flex items-center gap-3 text-sm text-gray-700">
413379
<i data-lucide="mail" class="w-4 h-4 text-indigo-600"></i>
414-
<a href="mailto:chaudharypradip678@gmail.com"
415-
class="hover:text-indigo-600 transition-colors">chaudharypradip678@gmail.com</a>
380+
<a href="mailto:chaudharypradip678@gmail.com" class="hover:text-indigo-600 transition-colors">
381+
chaudharypradip678@gmail.com
382+
</a>
416383
</div>
417384
</div>
418385

419-
<div class="space-y-4">
420-
<h3 class="text-sm font-semibold text-neutral-500 uppercase tracking-wide">Links</h3>
421-
<ul class="text-sm space-y-2">
422-
<li><a href="https://github.com/pradipchaudhary" target="_blank"
423-
class="hover:text-indigo-600 transition-colors flex items-center gap-2"><i
424-
data-lucide="github" class="w-4 h-4"></i> GitHub Profile</a></li>
425-
<li><a href="https://github.com/pradipchaudhary/100-js-projects" target="_blank"
426-
class="hover:text-indigo-600 transition-colors flex items-center gap-2"><i
427-
data-lucide="book-open" class="w-4 h-4"></i> Repository README</a></li>
386+
<!-- Column 2: Quick Links -->
387+
<div class="space-y-5">
388+
<h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wide">Quick Links</h3>
389+
<ul class="text-sm space-y-3 text-gray-700">
390+
<li>
391+
<a href="https://github.com/pradipchaudhary" target="_blank"
392+
class="flex items-center gap-2 hover:text-indigo-600 transition">
393+
<i data-lucide="github" class="w-4 h-4"></i> GitHub Profile
394+
</a>
395+
</li>
396+
<li>
397+
<a href="https://github.com/pradipchaudhary/100-js-projects" target="_blank"
398+
class="flex items-center gap-2 hover:text-indigo-600 transition">
399+
<i data-lucide="book-open" class="w-4 h-4"></i> 100 JS Projects Repo
400+
</a>
401+
</li>
428402
</ul>
429403
</div>
404+
405+
<!-- Column 3: Social Media (Optional or Replace) -->
406+
<div class="space-y-5">
407+
<h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wide">Follow Me</h3>
408+
<ul class="flex gap-5 text-gray-500">
409+
<li>
410+
<a href="#" class="hover:text-indigo-600 transition" aria-label="Twitter">
411+
<i data-lucide="twitter" class="w-5 h-5"></i>
412+
</a>
413+
</li>
414+
<li>
415+
<a href="#" class="hover:text-indigo-600 transition" aria-label="Facebook">
416+
<i data-lucide="facebook" class="w-5 h-5"></i>
417+
</a>
418+
</li>
419+
<li>
420+
<a href="#" class="hover:text-indigo-600 transition" aria-label="LinkedIn">
421+
<i data-lucide="linkedin" class="w-5 h-5"></i>
422+
</a>
423+
</li>
424+
</ul>
425+
</div>
426+
430427
</div>
431428
</section>
432429

433430
<!-- Footer -->
434-
<footer class="mt-20 mb-12 px-6 lg:px-10 text-center text-xs text-neutral-500">
435-
© 2024 100 JS Projects&nbsp;•&nbsp;MIT&nbsp;License
431+
<footer class="mt-20 mb-12 px-6 lg:px-10 text-center text-xs text-gray-500">
432+
&copy; 2024 <span class="font-medium">100 JS Projects</span> &bull; MIT License
436433
</footer>
437434

435+
438436
<!-- Scripts -->
439437
<script>
440438
// Icons
@@ -478,4 +476,4 @@ <h3 class="text-sm font-semibold text-neutral-500 uppercase tracking-wide">Links
478476
</script>
479477
</body>
480478

481-
</html>
479+
</html>

0 commit comments

Comments
 (0)