frx/kurious
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

make bootstrap site be more cool

Browse Source
This commit is contained in:
Aleksandr Trushkin
2024-03-03 00:55:43 +03:00
parent af4a4f7840
commit 6d1769ff24
13 changed files with 714 additions and 268 deletions
Download Patch File Download Diff File Expand all files Collapse all files

205
htmlexamples/index.html
View File

@ -1,126 +1,93 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
clifford: '#da373d',
}
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
}
</style>
</head>
<body>
<html lang="en">
<h1 class="text-3xl font-bold underline text-clifford">
Привет мир!
</h1>
<head>
<title>Test page</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="/assets/style.css">
</head>
<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
<div class="shrink-0">
<img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
</div>
<div>
<div class="text-xl font-medium text-black">ChitChat</div>
<p class="text-slate-500">У вас новое сообщение!</p>
</div>
</div>
<div class="py-8 px-8 max-w-sm mx-auto bg-white rounded-xl shadow-lg space-y-2 sm:py-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6">
<img class="block mx-auto h-24 rounded-full sm:mx-0 sm:shrink-0" src="/img/erin-lindford.jpg" alt="Женское лицо" />
<div class="text-center space-y-2 sm:text-left">
<div class="space-y-0.5">
<p class="text-lg text-black font-semibold">
Эрин Линдфорд
</p>
<p class="text-slate-500 font-medium">
Инженер по продукту
</p>
<body data-bs-theme="dark" style="margin: 0;">
<header>
<nav class="navbar navbar-expand-lg bg-body-tertiary w-auto">
<div class="container-fluid">
<a class="navbar-brand" href="/htmlexamples/index.html">Kurious</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/htmlexamples/index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="/htmlexamples/courses.html">Courses</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/htmlexamples/core.html">About us</a>
</li>
</ul>
</div>
<button class="px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2">Сообщение</button>
</div>
</nav>
</header>
<div class="container">
<div class="row upper text-center mb-4" style="min-height: 4rem;">
<p class="justify-content-center">Some header about courses</p>
</div>
<div class="row categories">
<div class="col">
<div class="block"><ul>
<p>Category 1</p>
<li>
<div class="block">item</div>
</li>
<li>
<div class="block">item</div>
</li>
<li>
<div class="block">item</div>
</li>
</ul></div>
</div>
<div class="col">
<div class="block"><ul>
<p>Category 2</p>
<li>
<div class="block">item</div>
</li>
<li>
<div class="block">item</div>
</li>
<li>
<div class="block">item</div>
</li>
</ul></div>
</div>
<div class="col">
<div class="block"><ul>
<p>Category 3</p>
<li>
<div class="block">item</div>
</li>
<li>
<div class="block">item</div>
</li>
<li>
<div class="block">item</div>
</li>
</ul></div>
</div>
</div>
<button class="bg-sky-500 hover:bg-sky-700 px-4 py-1 rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2">
Сохранить изменения
</button>
<button class="dark:md:hover:bg-fuchsia-600 px-4 py-1 rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2">
Сохранить изменения
</button>
<ul role="list" class="p-6 divide-y divide-slate-200">
<li class="flex py-4 first:pt-0 last:pb-0">
<img class="h-10 w-10 rounded-full" src="{person.imageUrl}" alt="" />
<div class="ml-3 overflow-hidden">
<p class="text-sm font-medium text-slate-900">{person.name}</p>
<p class="text-sm text-slate-500 truncate">{person.email}</p>
</div>
</li>
</ul>
<div class="py-8 px-8 max-w-sm max-auto">
<form>
<label class="block">
<span class="block text-sm font-medium text-slate-700">Имя пользователя</span>
<!-- Using form state modifiers, the classes can be identical for every input -->
<input type="text" value="tbone" disabled class="mt-1 block w-full px-3 py-2 bg-white border border-slate-300 rounded-md text-sm shadow-sm placeholder-slate-400
focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500
disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none
invalid:border-pink-500 invalid:text-pink-600
focus:invalid:border-pink-500 focus:invalid:ring-pink-500"
/>
<span class="block text-sm font-medium text-slate-700">Password</span>
<!-- Using form state modifiers, the classes can be identical for every input -->
<input type="text" value="tbone" disabled class="mt-1 block w-full px-3 py-2 bg-white border border-slate-300 rounded-md text-sm shadow-sm placeholder-slate-400
focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500
disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none
invalid:border-pink-500 invalid:text-pink-600
focus:invalid:border-pink-500 focus:invalid:ring-pink-500"
/>
</label>
<!-- ... -->
</form>
</div>
<a href="#" class="group block max-w-xs mx-auto rounded-lg p-6 bg-white ring-1 ring-slate-900/5 shadow-lg space-y-3 hover:bg-sky-500 hover:ring-sky-500">
<div class="flex items-center space-x-3">
<svg class="h-6 w-6 stroke-sky-500 group-hover:stroke-white" fill="none" viewBox="0 0 24 24"><!-- ... --></svg>
<h3 class="text-slate-900 group-hover:text-white text-sm font-semibold">Новый проект</h3>
</div>
<p class="text-slate-500 group-hover:text-white text-sm">Создайте новый проект из множества начальных шаблонов.</p>
</a>
<div class="container mx-auto px-4">
<div class="columns-3 gap-8">
<div class="bg-sky-300 rounded-lg box-content h-32 w-32 p-4 border-4">hello</div>
<div class="bg-sky-300 rounded-lg box-content h-32 w-32 p-4 border-4">hello</div>
<div class="bg-sky-300 rounded-lg box-content h-32 w-32 p-4 border-4">hello</div>
<div class="bg-sky-300 rounded-lg box-content h-32 w-32 p-4 border-4">hello</div>
<div class="bg-sky-300 rounded-lg box-content h-32 w-32 p-4 border-4">hello</div>
<div class="bg-sky-300 rounded-lg box-content h-32 w-32 p-4 border-4">hello</div>
<div class="bg-sky-300 rounded-lg box-content h-32 w-32 p-4 border-4">hello</div>
<div class="bg-sky-300 rounded-lg box-content h-32 w-32 p-4 border-4">hello</div>
<div class="bg-sky-300 rounded-lg box-content h-32 w-32 p-4 border-4">hello</div>
<div class="bg-sky-300 rounded-lg box-content h-32 w-32 p-4 border-4">hello</div>
<div class="bg-sky-300 rounded-lg box-content h-32 w-32 p-4 border-4">hello</div>
<div class="bg-sky-300 rounded-lg box-content h-32 w-32 p-4 border-4">hello</div>
</div>
</div>
</body>
</html>
</div>
</body>