Загрузка...
Многоколоночный футер для сайта академии. Включает логотип, соцсети, навигацию и ссылки. Адаптивный дизайн на Tailwind CSS.
<footer class="bg-[#18181B] border-white/5 border-t mt-0 mb-0 pt-24 pr-6 pb-12 pl-6">
<div class="max-w-7xl mx-auto">
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-12 mb-20">
<div class="col-span-2 lg:col-span-2">
<div class="flex items-center gap-2 mb-6">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24" data-icon="solar:code-square-bold-duotone" class="iconify text-[#9EF0A0] text-2xl iconify--solar"><path fill="currentColor" d="M2 12c0-4.714 0-7.071 1.464-8.536C4.93 2 7.286 2 12 2s7.071 0 8.535 1.464C22 4.93 22 7.286 22 12s0 7.071-1.465 8.535C19.072 22 16.714 22 12 22s-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12" opacity=".5" class=""></path><path fill="currentColor" d="M13.488 6.446a.75.75 0 0 1 .53.918l-2.588 9.66a.75.75 0 0 1-1.449-.389l2.589-9.659a.75.75 0 0 1 .918-.53M14.97 8.47a.75.75 0 0 1 1.06 0l.209.208c.635.635 1.165 1.165 1.529 1.642c.384.504.654 1.036.654 1.68s-.27 1.176-.654 1.68c-.364.477-.894 1.007-1.53 1.642l-.208.208a.75.75 0 1 1-1.06-1.06l.171-.172c.682-.682 1.139-1.14 1.434-1.528c.283-.37.347-.586.347-.77s-.064-.4-.347-.77c-.295-.387-.752-.846-1.434-1.528l-.171-.172a.75.75 0 0 1 0-1.06m-7 0a.75.75 0 0 1 1.06 1.06l-.171.172c-.682.682-1.138 1.14-1.434 1.528c-.283.37-.346.586-.346.77s.063.4.346.77c.296.387.752.846 1.434 1.528l.172.172a.75.75 0 1 1-1.061 1.06l-.208-.208c-.636-.635-1.166-1.165-1.53-1.642c-.384-.504-.653-1.036-.653-1.68s.27-1.176.653-1.68c.364-.477.894-1.007 1.53-1.642z" class=""></path></svg>
<span class="text-xl font-semibold tracking-tight text-white">DevForge</span>
</div>
<p class="text-[#71717A] text-sm leading-relaxed max-w-xs mb-6">
The premier coding academy for ambitious builders. We are committed to transforming the tech landscape one graduate at a time.
</p>
<div class="flex gap-4">
<a href="#" class="text-[#A1A1AA] hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1.23em" height="1em" viewBox="0 0 256 209" data-icon="logos:twitter" class="iconify text-xl iconify--logos"><path fill="#55acee" d="M256 25.45a105 105 0 0 1-30.166 8.27c10.845-6.5 19.172-16.793 23.093-29.057a105.2 105.2 0 0 1-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52c0 4.117.465 8.125 1.36 11.97c-43.65-2.191-82.35-23.1-108.255-54.876c-4.52 7.757-7.11 16.78-7.11 26.404c0 18.222 9.273 34.297 23.365 43.716a52.3 52.3 0 0 1-23.79-6.57q-.004.33-.003.661c0 25.447 18.104 46.675 42.13 51.5a52.6 52.6 0 0 1-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475c-17.975 14.086-40.622 22.483-65.228 22.483c-4.24 0-8.42-.249-12.529-.734c23.243 14.902 50.85 23.597 80.51 23.597c96.607 0 149.434-80.031 149.434-149.435q0-3.417-.152-6.795A106.8 106.8 0 0 0 256 25.45" class=""></path></svg></a>
<a href="#" class="text-[#A1A1AA] hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 256 256" data-icon="logos:linkedin-icon" class="iconify text-xl iconify--logos"><path fill="#0A66C2" d="M218.123 218.127h-37.931v-59.403c0-14.165-.253-32.4-19.728-32.4c-19.756 0-22.779 15.434-22.779 31.369v60.43h-37.93V95.967h36.413v16.694h.51a39.91 39.91 0 0 1 35.928-19.733c38.445 0 45.533 25.288 45.533 58.186zM56.955 79.27c-12.157.002-22.014-9.852-22.016-22.009s9.851-22.014 22.008-22.016c12.157-.003 22.014 9.851 22.016 22.008A22.013 22.013 0 0 1 56.955 79.27m18.966 138.858H37.95V95.967h37.97zM237.033.018H18.89C8.58-.098.125 8.161-.001 18.471v219.053c.122 10.315 8.576 18.582 18.89 18.474h218.144c10.336.128 18.823-8.139 18.966-18.474V18.454c-.147-10.33-8.635-18.588-18.966-18.453" class=""></path></svg></a>
<a href="#" class="text-[#A1A1AA] hover:text-white"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="1.03em" height="1em" viewBox="0 0 256 250" data-icon="logos:github-icon" class="iconify text-xl iconify--logos"><path fill="#161614" d="M128.001 0C57.317 0 0 57.307 0 128.001c0 56.554 36.676 104.535 87.535 121.46c6.397 1.185 8.746-2.777 8.746-6.158c0-3.052-.12-13.135-.174-23.83c-35.61 7.742-43.124-15.103-43.124-15.103c-5.823-14.795-14.213-18.73-14.213-18.73c-11.613-7.944.876-7.78.876-7.78c12.853.902 19.621 13.19 19.621 13.19c11.417 19.568 29.945 13.911 37.249 10.64c1.149-8.272 4.466-13.92 8.127-17.116c-28.431-3.236-58.318-14.212-58.318-63.258c0-13.975 5-25.394 13.188-34.358c-1.329-3.224-5.71-16.242 1.24-33.874c0 0 10.749-3.44 35.21 13.121c10.21-2.836 21.16-4.258 32.038-4.307c10.878.049 21.837 1.47 32.066 4.307c24.431-16.56 35.165-13.12 35.165-13.12c6.967 17.63 2.584 30.65 1.255 33.873c8.207 8.964 13.173 20.383 13.173 34.358c0 49.163-29.944 59.988-58.447 63.157c4.591 3.972 8.682 11.762 8.682 23.704c0 17.126-.148 30.91-.148 35.126c0 3.407 2.304 7.398 8.792 6.14C219.37 232.5 256 184.537 256 128.002C256 57.307 198.691 0 128.001 0m-80.06 182.34c-.282.636-1.283.827-2.194.39c-.929-.417-1.45-1.284-1.15-1.922c.276-.655 1.279-.838 2.205-.399c.93.418 1.46 1.293 1.139 1.931m6.296 5.618c-.61.566-1.804.303-2.614-.591c-.837-.892-.994-2.086-.375-2.66c.63-.566 1.787-.301 2.626.591c.838.903 1 2.088.363 2.66m4.32 7.188c-.785.545-2.067.034-2.86-1.104c-.784-1.138-.784-2.503.017-3.05c.795-.547 2.058-.055 2.861 1.075c.782 1.157.782 2.522-.019 3.08m7.304 8.325c-.701.774-2.196.566-3.29-.49c-1.119-1.032-1.43-2.496-.726-3.27c.71-.776 2.213-.558 3.315.49c1.11 1.03 1.45 2.505.701 3.27m9.442 2.81c-.31 1.003-1.75 1.459-3.199 1.033c-1.448-.439-2.395-1.613-2.103-2.626c.301-1.01 1.747-1.484 3.207-1.028c1.446.436 2.396 1.602 2.095 2.622m10.744 1.193c.036 1.055-1.193 1.93-2.715 1.95c-1.53.034-2.769-.82-2.786-1.86c0-1.065 1.202-1.932 2.733-1.958c1.522-.03 2.768.818 2.768 1.868m10.555-.405c.182 1.03-.875 2.088-2.387 2.37c-1.485.271-2.861-.365-3.05-1.386c-.184-1.056.893-2.114 2.376-2.387c1.514-.263 2.868.356 3.061 1.403" class=""></path></svg></a>
</div>
</div>
<div class="">
<h4 class="text-white font-medium mb-6">Academy</h4>
<ul class="flex flex-col gap-4 text-sm text-[#A1A1AA]">
<li><a href="#" class="hover:text-[#9EF0A0] transition-colors">Curriculum</a></li>
<li><a href="#" class="hover:text-[#9EF0A0] transition-colors">Admissions</a></li>
<li><a href="#" class="hover:text-[#9EF0A0] transition-colors">Tuition & Financing</a></li>
<li><a href="#" class="hover:text-[#9EF0A0] transition-colors">Career Support</a></li>
</ul>
</div>
<div class="">
<h4 class="text-white font-medium mb-6">Resources</h4>
<ul class="flex flex-col gap-4 text-sm text-[#A1A1AA]">
<li class=""><a href="#" class="hover:text-[#9EF0A0] transition-colors">Student Stories</a></li>
<li class=""><a href="#" class="hover:text-[#9EF0A0] transition-colors">Blog</a></li>
<li class=""><a href="#" class="hover:text-[#9EF0A0] transition-colors">Events</a></li>
<li><a href="#" class="hover:text-[#9EF0A0] transition-colors">Free Workshops</a></li>
</ul>
</div>
<div class="">
<h4 class="text-white font-medium mb-6">Company</h4>
<ul class="flex flex-col gap-4 text-sm text-[#A1A1AA]">
<li><a href="#" class="hover:text-[#9EF0A0] transition-colors">About Us</a></li>
<li><a href="#" class="hover:text-[#9EF0A0] transition-colors">Careers</a></li>
<li><a href="#" class="hover:text-[#9EF0A0] transition-colors">Partners</a></li>
<li><a href="#" class="hover:text-[#9EF0A0] transition-colors">Contact</a></li>
</ul>
</div>
</div>
<div class="border-t border-white/5 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
<p class="text-[#52525B] text-sm">© 2024 DevForge Academy Inc. All rights reserved.</p>
<div class="flex gap-8 text-sm text-[#52525B]">
<a href="#" class="hover:text-white transition-colors">Privacy Policy</a>
<a href="#" class="hover:text-white transition-colors">Terms of Service</a>
</div>
</div>
</div>
</footer>