Initializing...
Liveweave
expand_more
home
Home
data_object
CSS Explorer
arrow_outward
Palette
Color Explorer
arrow_outward
Polyline
Graphics Editor
arrow_outward
outbox_alt
Generative AI
arrow_outward
build
Tools
expand_more
restart_alt
Load base template
post_add
Generate Lorem ipsum...
code
Format HTML
code_blocks
Format CSS
data_object
Format JavaScript
library_add
Library
expand_more
A
Algolia JS
Animate CSS
Apex Charts JS
B
Bulma CSS
Bootstrap
C
Chart JS
Chartist
Create JS
D
D3
Dojo
F
Foundation
Fullpage JS
G
Granim JS
Google Charts
H
Halfmoon
J
jQuery
M
Materialize
Moment JS
Masonry JS
Milligram CSS
P
Pure CSS
Primer CSS
Popper JS
Pattern CSS
Picnic CSS
R
React JS
Raphael JS
Raisin CSS
S
Semantic UI
Skeleton CSS
Spectre CSS
Tachyons CSS
T
Tailwind
Three JS
U
UI Kit
Vis JS
W
Water CSS
download
Download
expand_more
developer_mode
Download as HTML
folder_zip
Download as .ZIP
cloud_upload
Save
account_circle
Login
settings
Settings
expand_more
14
px
Live mode
Night mode
Line number
Mini map
Word wrap
sync_alt
Reset Settings
smart_display
Run
<div class="b-page-scroll__container"> <a href="http://drako.ru/about/map/" target="_blank"> <button class="b-page__sitemapNEW">Карта<span class="b-page__sitemap--span">Cайта</span> </button> </a> <button class="b-page-scroll b-page-scroll__top" onclick="window.scrollBy(0, -999999);"> <svg style="position: absolute; height: 24px; width: 22px; margin-left: -11px; margin-top: -16px;"> <polygon points="11,0 0,16 22,16" style="fill:rgb(123, 81, 49);" />начало</svg> <svg style="position: absolute; height: 24px; width: 24px; margin-left: -12px; margin-top: -6px;"> <polygon points="12,0 0,16 24,16" style="fill:rgb(123, 81, 49);" /></svg> </button> <button class="b-page-scroll b-page-scroll__up" onclick="window.scrollBy(0, -350);"> <svg style="position: absolute; height: 24px; width: 16px; margin-left: -8px; margin-top: -14px;"> <polygon points="8,0 0,24 16,24" style="fill:rgb(123, 81, 49);" />вверх</svg> </button> <button class="b-page-scroll b-page-scroll__down" onclick="window.scrollBy(0, 350);"> <svg style="position: absolute; height: 24px; width: 16px; margin-left: -8px; margin-top: -10px;"> <polygon points="0,0 16,0 8,24" style="fill:rgb(123, 81, 49);" />вниз</svg> </button> <button class="b-page-scroll b-page-scroll__bottom" onclick="window.scrollBy(0, 999999);"> <svg style="position: absolute; height: 24px; width: 24px; margin-left: -12px; margin-top: -10px;"> <polygon points="0,0 24,0 12,16" style="fill:rgb(123, 81, 49);" />конец</svg> <svg style="position: absolute; height: 24px; width: 24px; margin-left: -11px; margin-top: 0px;"> <polygon points="0,0 22,0 11,16" style="fill:rgb(123, 81, 49);" /></svg> </button> </div>
body {background-color: rgb(255,222,159);} .b-page-scroll__container {position: fixed; margin-left: 720px; margin-right: 0px;} .b-page-scroll {z-index: 999999; background-color: rgb(239, 174, 90); background-image: linear-gradient(rgb(255, 235, 123), rgb(239, 174, 90)); color: rgb(123, 81, 49); box-shadow: 0 0 0 1px rgb(255, 255, 198), 0 0 0 2px rgb(255, 233, 173), -3px 0 #707070, 0 0 0 3px rgb(176, 154, 132); border: 1px solid rgb(198, 146, 74); cursor: pointer; position: absolute; border-radius: 50%; width: 40px; height: 40px;} .b-page-scroll:hover {background-image: linear-gradient(rgb(239, 174, 190), rgb(255, 235, 123)); color: rgb(123, 81, 49); box-shadow: 0 0 0 1px rgb(255, 215, 123), 0 0 0 2px rgb(189, 146, 82), 0 0 0 3px rgb(132, 101, 57); border: 2px solid rgb(198, 146, 74); transform: translateY(2px);} .b-page-scroll__top {margin-top: 80px;} .b-page-scroll__up {margin-top: 130px;} .b-page-scroll__down {margin-top: 180px;} .b-page-scroll__bottom {margin-top: 230px;} .b-page-scroll:active {transform: scale(1.05,1.05);} .b-page__sitemapNEW { padding-bottom: 6px; border: none; box-shadow: 0 -1px rgb(255, 122, 89), inset 0 -2px rgb(50, 0, 0), 0 0 0 1px rgb(206, 150, 74), 0 0 0 2px rgb(255, 255, 198), -3px 0 #707070, 0 0 0 3px rgb(130, 95, 36); font-size: 13px; text-align: center; z-index: 999999; margin-left: -5px; background-color: rgb(128, 0, 0); background-image: linear-gradient(rgb(255, 62, 29), rgb(120, 25, 13)); color: #fff1ba; font-weight: bold; cursor: pointer; position: absolute; border-radius: 50%; width: 50px; height: 50px;} .b-page__sitemapNEW:hover {padding-bottom: 1px; font-size: 11px; border-radius: 30px; background-color: rgb(128, 0, 0); background-image: linear-gradient(rgb(80, 0, 0), rgb(120, 0, 0), rgb(230, 25, 13)); text-shadow: 0 1px #111111; transform: scale(1.18,1.18);} .b-page__sitemap--span {display: none;} .b-page__sitemapNEW:hover > .b-page__sitemap--span {display: block; text-shadow: 0 1px #111111;} @media only screen and (max-width: 1100px) {.b-page-scroll__container {right: 50px;} .b-page__sitemapNEW {right: -44px;} }