93 lines
5.2 KiB
HTML
Executable File
93 lines
5.2 KiB
HTML
Executable File
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>be1.ru</title>
|
||
<link rel="stylesheet" href="index_style.css">
|
||
<link rel="icon" href="favicon.ico" />
|
||
<script src="index_script.js"></script>
|
||
</head>
|
||
|
||
<body>
|
||
<input type="checkbox" id="nav-toggle" hidden>
|
||
<nav class="nav">
|
||
<label for="nav-toggle" class="nav-toggle" onclick></label>
|
||
<!-- <h2 class="logo"> -->
|
||
<p style="text-align:center"> ATE0004
|
||
<!-- </h2> -->
|
||
<ul>
|
||
<li><a href="#1">About</a>
|
||
<li><a href="#2">Statistics</a>
|
||
<li><a href="#3">Update</a>
|
||
<li><a href="#3">Manual</a>
|
||
<!-- <li><a href="#4">Четыре</a>
|
||
<li><a href="#5">Пять</a>
|
||
<li><a href="#6">Шесть</a>
|
||
<li><a href="#7">Семь</a> -->
|
||
</ul>
|
||
</nav>
|
||
|
||
<!-- Маска (затемнение) основного контента при включенной панели
|
||
по-умолчанию данная фишка не используется, если оно вам надо,
|
||
просто расккоментируйте div-контейнер ниже -->
|
||
|
||
<div class="mask-content"></div>
|
||
|
||
<p class="aligncenter"><img alt="logo" src="logo.png" style="height:120px; width:300px" /></p>
|
||
<p style="text-align:center"><span style="font-size:24px">ATE0004</span></p>
|
||
<p style="text-align:center">Honeywell Retractable Landing Light CMM 33-42-07 P/N 45-0351-X Motor Test Box by
|
||
@rick_professor</p>
|
||
|
||
</div>
|
||
<div class="content">
|
||
<div class="card">
|
||
<h2>ONBOARD LED GPIO2</h2>
|
||
<p style="text-align:center" class="no-select"> <button id="button" class="button">Toggle LED</button></p>
|
||
<p class="state">State: <span id="state">%s</span></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<main role="main">
|
||
<div class="content">
|
||
<div class="card">
|
||
<!-- <h2>ONBOARD LED GPIO2</h2> -->
|
||
<p style="text-align:center" class="no-select"> <button id="button" class="button">Thermostat</button>
|
||
<p style="text-align:center" class="no-select"> <button id="button" class="button">Retract</button>
|
||
<p style="text-align:center" class="no-select"> <button id="button" class="button">Extend</button>
|
||
<!-- </p> -->
|
||
<!-- <p class="state">State: <span id="state">%s</span></p> -->
|
||
</div>
|
||
</div>
|
||
<!-- <article>
|
||
<header>
|
||
<h1 class="header__title">Просто Демо:</h1>
|
||
<h2>Выдвигающееся боковое меню на чистом CSS</h2>
|
||
</header>
|
||
<section>
|
||
<p style="text-align: center;">
|
||
<a href="index.html" class="btn btn-primary">Меню Слева</a>
|
||
<a href="right-slide-panel.html" class="btn btn-secondary">Меню Справа</a>
|
||
<p>Нажмите на "гамбургер-иконку" в левом или правом верхнем углу, в зависимости от выбранного вами
|
||
варианта, и вы увидите выдвигающуюся боковую панель в действии. Чаще всего в таких панельках
|
||
размещают меню навигации по сайту, что собственно мы и сделали. Вы же можете использовать боковую
|
||
панель, для любого другого элемента, который по вашему разумению, должен быть изначально скрыт,
|
||
например, форму подписки, блок кнопок социальных сетей, и т.д. и т.п...
|
||
<p>Работа данного меню построена на чистом CSS, без подключения javascript. Переключение осуществляется
|
||
с помощью скрытого флажка (checkbox) с использованием псевдокласса :checked из обоймы CSS3</p>
|
||
<p>С переклюателем панели особо не стал заморачиваться и использовал символ Unicode 'TRIGRAM FOR HEAVEN'
|
||
(U+2630), с простейшей заменой символа на 'Знак Умножения' (U+2715), когда панель раскрыта. Вам
|
||
ничего не мешает испльзовать любой другой значок, иконку или просто текст.
|
||
</section>
|
||
<hr>
|
||
<footer>
|
||
<p><a href="http://dbmast.ru/vydvigayushheesya-bokovoe-menyu-na-chistom-css">← Изучить Детали</a>
|
||
<p>сделано с любовью - <a href="https://twitter.com/dobrovoi">@dobrovoi</a>
|
||
</footer>
|
||
</article> -->
|
||
</main>
|
||
</body>
|
||
|
||
</html> |