Initial commit

1 files changed, 100 insertions, 0 deletions

diff --git a/index.html b/index.html
new file mode 100644
index 0000000..c512c4e
--- /dev/null
+++ b/index.html
@@ -0,0 +1,100 @@
+<div class="container">
+  
+  <header><big>🛠️ WebIF 2.0</big></header>
+  <main>
+    <nav>
+      <label for="showmenu"><big>≡ Меню</big></label>
+      <input type="checkbox" id="showmenu" /> 
+
+      <a class="active" href="#home">Начало</a>
+      <a href="#network">Мрежа</a>
+      <a href="#config">Настройки</a>
+      <a href="#tools">Инструменти</a>
+    </nav>
+
+    <section>
+      <h2>Lorem Ipsum</h2>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
+      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+      <h3>Ipsum Lorem</h3>
+      <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
+      <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
+    </section>
+  </main>
+</div>
+
+
+<style>
+body {
+  margin: 0;
+  font-family: "Lato", sans-serif;
+}
+
+.container {
+  width: 900px;
+  margin: 0 auto;
+}
+
+main, nav, section, nav a, nav label {
+  box-sizing: border-box;
+}
+
+header, section, footer {
+  padding: 0.5em;
+}
+
+main {
+  display: flex;
+}
+
+nav {
+  display: inline-block;
+  background-color: #f1f1f1;
+  width: 250px;
+}
+
+nav a, nav label {
+  width: 100%;  
+  display: block;
+  color: #000;
+  padding: 16px;
+  text-decoration: none;
+  user-select: none;
+}
+
+nav label {
+  font-size: 1.2em;
+  background-color: #000;
+  color: #fff;
+  cursor: pointer;
+}
+
+nav input, nav label {
+  display: none;
+}
+ 
+nav a.active {
+  background-color: #07a2a0;
+  color: #fff;
+}
+
+nav a:hover:not(.active) {
+  background-color: #555;
+  color: white;
+}
+
+@media screen and (max-width: 900px) {
+  .container, nav {width: 100%}
+  main {
+    flex-direction: column;
+  }
+  nav label {display: block; }
+  nav, nav a, nav label {width:100%;}
+  nav > input:not(:checked) ~ a:not(.active) {
+    display: none;
+  }
+}
+</style>
+