Spaces:
Running
Running
| <html lang="ru"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <link | |
| rel="icon" | |
| href="https://cdn.glitch.global/5c1ad9f2-b645-4eeb-9cad-c3b84c688c4a/Inspector-1.jpg?v=1706018893085" | |
| /> | |
| <title>Страница только из кастомных тэгов</title> | |
| </head> | |
| <style> | |
| html, | |
| body { | |
| margin: 0; | |
| border: 0; | |
| min-height: 100% ; | |
| height: 100%; | |
| overflow: hidden; | |
| } | |
| /* Basic page style resets */ | |
| * { | |
| box-sizing: border-box; | |
| } | |
| [hidden] { | |
| display: none ; | |
| } | |
| /* Просто напишите имя тега, и оно работает. */ | |
| my-layout { | |
| display: grid; | |
| grid-template-columns: auto 1fr auto; | |
| /*grid-template-columns: auto 5fr 1fr;*/ | |
| grid-template-rows: auto auto 1fr auto auto; | |
| row-gap: 0.2em; | |
| column-gap: 0.3em; | |
| padding: 0.2em; | |
| font-family: Roboto, Tahoma, Arial, Verdana, Helvetica, sans-serif; | |
| background: linear-gradient( | |
| hsla(100, 90%, 20%, 0.1), | |
| hsla(270, 90%, 20%, 0.1) | |
| ); | |
| height: 100%; | |
| my-header, | |
| my-block-main, | |
| my-nav-menu, | |
| my-nav-left, | |
| my-nav-right, | |
| my-footer { | |
| box-shadow: inset 0 0 9px #0005; | |
| border-radius: 0.4em; | |
| padding: 0.3em; | |
| } | |
| my-header { | |
| grid-column: 1 / span 3; | |
| grid-row: 1; | |
| } | |
| my-nav-menu { | |
| background-color: hsl(270, 34%, 85%); | |
| grid-column: 1 / span 3; | |
| grid-row: 2; | |
| } | |
| my-nav-left { | |
| grid-column: 1; | |
| grid-row: 3; | |
| padding: 0.5em; | |
| word-break: break-word; /*на будущее*/ | |
| } | |
| my-block-main { | |
| grid-column: 2; | |
| grid-row: 3; | |
| height: 100%; | |
| } | |
| my-nav-right { | |
| grid-column: 3; | |
| grid-row: 3; | |
| padding: 0.5em; | |
| overflow: auto; | |
| } | |
| my-footer { | |
| grid-column: 1 / span 3; | |
| grid-row: 5; | |
| } | |
| my-block-title { | |
| font-size: 19px; | |
| background: linear-gradient( | |
| hsla(270, 90%, 20%, 0.2), | |
| hsla(100, 90%, 20%, 0.2) | |
| ); | |
| } | |
| } | |
| sp-an { | |
| display: inline; | |
| background: #0001; | |
| } | |
| p-p { | |
| display: block; | |
| background: #0001; | |
| } | |
| centered-content { | |
| text-align: center; | |
| margin: auto; | |
| } | |
| </style> | |
| <body> | |
| <!-- Смело используйте атрибуты без data- префикса, так можно. --> | |
| <my-layout block-number="15"> | |
| <my-header> | |
| <my-block-title> ﷺ my-block-title</my-block-title> | |
| <my-nav-menu>my-nav-menu</my-nav-menu> | |
| </my-header> | |
| <my-nav-left>my-nav-left</my-nav-left> | |
| <my-block-main> | |
| <p-p id="qq0">START my-block-main </p-p> | |
| <centered-content> | |
| <p-p id="qq1"> | |
| Много-много-много текста, совсем много, мне лень его писать. | |
| </p-p> | |
| <my-block-decor>ΫΫΫ</my-block-decor> | |
| </centered-content> | |
| <my-chat-area id="output"></my-chat-area> | |
| <section class="locked"> | |
| <textarea | |
| id="textNew" | |
| rows="11" | |
| placeholder="текст описания товара графа 31.1 и текст описания товарных групп ..." | |
| ></textarea> | |
| <button id="buttonSend" title="S E N D">✉️</button> | |
| </section> | |
| <p-p id="qq2">END my-block-main</p-p> | |
| </my-block-main> | |
| <my-nav-right> | |
| my-nav-right | |
| <sp-an> ﷽ </sp-an> | |
| <sp-an>In the name of Allah, the Most Gracious, the Most Merciful</sp-an> | |
| </my-nav-right> | |
| <my-footer> | |
| my-footer <sp-an> ﷽ </sp-an> | |
| <a href="https://habr.com/ru/articles/786284/" | |
| >О кастомных HTML-тегах | |
| </a> | |
| </my-footer> | |
| </my-layout> | |
| </body> | |
| </html> | |