136 lines
4.8 KiB
HTML
136 lines
4.8 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<meta
|
||
name="description"
|
||
content="Стартовая страница для навигации по личной экосистеме Bratskih Tech."
|
||
/>
|
||
<title>Bratskih Tech Hub</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link
|
||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"
|
||
rel="stylesheet"
|
||
/>
|
||
<link rel="stylesheet" href="styles.css" />
|
||
</head>
|
||
<body>
|
||
<div class="ambient ambient-one"></div>
|
||
<div class="ambient ambient-two"></div>
|
||
|
||
<main class="shell">
|
||
<section class="hero" aria-labelledby="page-title">
|
||
<div class="hero-content">
|
||
<button
|
||
class="settings-button"
|
||
type="button"
|
||
aria-label="Открыть настройки внешнего вида"
|
||
aria-expanded="false"
|
||
data-settings-toggle
|
||
>
|
||
⚙
|
||
</button>
|
||
<p class="eyebrow">Personal ecosystem</p>
|
||
<h1 id="page-title">Bratskih Tech Hub</h1>
|
||
<p class="lead">
|
||
Быстрый старт для твоих сервисов: облако, почта, тестовая сеть и
|
||
репозитории в одном аккуратном месте.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="settings-overlay" data-settings-overlay></div>
|
||
<div class="control-panel" aria-label="Настройки внешнего вида" data-settings-panel>
|
||
<div class="settings-panel-head">
|
||
<div>
|
||
<p class="eyebrow">View settings</p>
|
||
<h2>Настройки</h2>
|
||
</div>
|
||
<button
|
||
class="settings-close"
|
||
type="button"
|
||
aria-label="Закрыть настройки"
|
||
data-settings-close
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
|
||
<div class="control-group">
|
||
<span>Тема</span>
|
||
<button class="segmented is-active" type="button" data-theme="dark">
|
||
Темная
|
||
</button>
|
||
<button class="segmented" type="button" data-theme="light">
|
||
Светлая
|
||
</button>
|
||
</div>
|
||
|
||
<div class="control-group view-group">
|
||
<span>Вид</span>
|
||
<button class="segmented is-active" type="button" data-view="cards">
|
||
Карточки
|
||
</button>
|
||
<button class="segmented" type="button" data-view="list">
|
||
Список
|
||
</button>
|
||
<button class="segmented" type="button" data-view="compact-cards">
|
||
Компакт карточки
|
||
</button>
|
||
<button class="segmented" type="button" data-view="compact-list">
|
||
Компакт список
|
||
</button>
|
||
</div>
|
||
|
||
<div class="control-group accent-group">
|
||
<span>Акцент</span>
|
||
<button
|
||
class="accent-swatch is-active"
|
||
type="button"
|
||
data-accent="violet"
|
||
aria-label="Фиолетовый акцент"
|
||
></button>
|
||
<button
|
||
class="accent-swatch"
|
||
type="button"
|
||
data-accent="cyan"
|
||
aria-label="Голубой акцент"
|
||
></button>
|
||
<button
|
||
class="accent-swatch"
|
||
type="button"
|
||
data-accent="lime"
|
||
aria-label="Лаймовый акцент"
|
||
></button>
|
||
<button
|
||
class="accent-swatch"
|
||
type="button"
|
||
data-accent="rose"
|
||
aria-label="Розовый акцент"
|
||
></button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section
|
||
class="services cards-view"
|
||
aria-label="Сервисы экосистемы"
|
||
data-cards-root
|
||
></section>
|
||
|
||
<section class="about-panel" id="about" aria-labelledby="about-title">
|
||
<p class="eyebrow">About</p>
|
||
<h2 id="about-title">Обо мне</h2>
|
||
<p>
|
||
Bratskih Tech — личное пространство для сервисов, экспериментов,
|
||
инфраструктуры и проектов. Здесь собраны основные точки входа в мою
|
||
цифровую экосистему.
|
||
</p>
|
||
</section>
|
||
</main>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|