/
AchDoA
/
lab
Обзор
Документация
Войти
/
AchDoA
/
lab
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
module_1.3/advanced_layout.html
76 строк
3 KB
AoDhcA
add advanced_layout.html
23 мар 2026, 16:27
23 мар 2026, 16:27
0122f25
Код
Авторство
О чём код?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Advanced Layout — Tailwind Grid</title> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="min-h-screen bg-slate-50 font-sans antialiased"> <div class="mx-auto max-w-6xl p-4 sm:p-6 lg:p-8" > <!-- Grid states: - Mobile: 1 column => Header -> Content -> Sidebar -> Footer - Tablet (md>=768): 2 columns => Content | Sidebar (equal) - Desktop (lg>=1024): 3 columns => Content spans 2/3, Sidebar 1/3 --> <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3" > <header class="rounded-xl bg-slate-900 p-5 text-slate-100 md:col-span-2 lg:col-span-3" > <h1 class="text-xl font-semibold">Header</h1> <p class="mt-1 text-sm text-slate-300"> Dark header </p> </header> <main class="rounded-xl bg-slate-100 p-5 text-slate-900 md:col-span-1 lg:col-span-2" > <h2 class="text-lg font-semibold">Main Content</h2> <p class="mt-2 text-sm leading-relaxed text-slate-700"> This is the main area. On mobile it appears directly under the header. On tablets and desktops, it sits alongside the sidebar using only grid utilities (col spans at `lg`). </p> <div class="mt-4 space-y-3"> <p class="text-sm text-slate-700"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <p class="text-sm text-slate-700"> Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div> </main> <aside class="rounded-xl bg-slate-200 p-5 text-slate-900 md:col-span-1 lg:col-span-1" aria-label="Sidebar" > <h3 class="text-lg font-semibold">Sidebar</h3> <p class="mt-2 text-sm leading-relaxed text-slate-700"> Different background shade for clarity. On mobile it comes after the content; on tablet/desktop it becomes the second column. </p> <ul class="mt-4 list-disc pl-5 text-sm text-slate-700"> <li>Links</li> <li>Tips</li> <li>Highlights</li> </ul> </aside> <footer class="rounded-xl bg-slate-900 p-5 text-center text-slate-100 md:col-span-2 lg:col-span-3" > <p class="text-sm"> © 2026 My Page Layout. All rights reserved. </p> </footer> </div> </div> </body> </html>