Aleksandr/itmo-php-course
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Добавить engine/template/layout/layout.html

Browse Source
This commit is contained in:
Aleksandr 2024-12-24 18:25:39 +03:00
parent dea513e658
commit eeadacc4a5
1 changed files with 52 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
engine/template/layout/layout.html Normal file
View File

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
<title>Resposive Layout</title>
</head>
<body>
<div class="w-full flex h-svh max-h-svh">
<div class="h-full flex-[0.3]">
<!-- Left Sidebar -->
<div class="grid h-full place-content-center bg-green-600">
<h1 class="text-xl">Left</h1>
<h1 class="text-xl">Sidebar</h1>
</div>
</div>
<div class="h-full flex-1">
<!-- Main Content Area-->
<div class="flex h-full flex-col justify-between overflow-y-scroll">
<div class="sticky top-0 w-full">
<!-- Header -->
<div class="bg-orange-500 py-5">
<h1 class="text-center text-xl">Header</h1>
</div>
</div>
<div>
<!-- Content -->
<h1 class="text-center text-xl">Content</h1>
</div>
<div class="w-full">
<!-- Footer -->
<div class="bg-yellow-600 py-12">
<h1 class="text-center text-xl">Footer</h1>
</div>
</div>
</div>
</div>
<div class="h-full flex-[0.3]">
<!-- Right Sidebar -->
<div class="grid h-full place-content-center bg-blue-600">
<h1 class="text-xl">Right</h1>
<h1 class="text-xl">Sidebar</h1>
</div>
</div>
</div>
</body>
</html>