tarmolov/dabblet.html

## dabblet.html
<html>
<head>
    <meta http-equiv="Content-Security-Policy" content="img-src 'none'">
    <style>
        body {
            position: relative;
            margin: 100px;
            padding: 100px;
        }

        .ymaps {
            position: absolute;
            top: 295px;
            left: 75px;
        }

        .buildings {
            transform: rotate(-40deg);
        }

        .building {
            position: absolute;
            width: 320px;
            height: 80px;
            background: #f5f1e5;
        }

        .building::after {
            position: absolute;
            top: 50px;
            left: 150px;
            content: '';
            width: 40px;
            height: 40px;
            background: #f5f1e5;
            transform: rotate(67deg);
        }

        .building-2 {
            top: 120px;
            left: -120px;
            transform: rotate(-90deg);
        }

        .building-3 {
            top: 190px;
            left: 150px;
            transform: rotate(90deg);
        }

        .building-4 {
            top: 320px;
            width: 470px;
            transform: rotate(-180deg);
        }

        .building-4::after {
            top: 55px;
            left: 288px;
            width: 60px;
            height: 70px;
            transform: rotate(40deg) skewY(-25deg);
        }

        .building-5 {
            position: absolute;
            top: 120px;
            left: 295px;
            width: 300px;
            height: 50px;
            background: #f5f1e5;
            transform: rotate(90deg);
        }

        .building-6 {
            position: absolute;
            top: -50px;
            left: 0;
            width: 75px;
            height: 40px;
            background: #f5f1e5;
        }

        .marker {
            font: 10px arial, sans-serif;
            position: absolute;
            z-index: 10;
            display: box;
        }

        .marker::before {
            position: absolute;
            content: '';
            top: -20px;
            width: 20px;
            height: 20px;
            left: 50%;
            margin-left: -10px;
            border-radius: 10px;
            background: white;
        }

        .marker-starbucks {
            top: 35px;
            left: 85px;
        }

        .marker-starbucks::before {
            background: orange;
        }

        .marker-yandex {
            top: 150px;
            left: 340px;
        }

        .marker-yandex::before {
            text-align: center;
            line-height: 20px;
            font-size: 10px;
            color: red;
            content: 'Я';
        }

        .streets {
            font: 12px arial, sans-serif;
            transform: rotate(50deg);
        }

        .street {
            position: absolute;
            text-align: center;
            width: 450px;
            line-height: 15px;
            color: #737167;
            border-top: solid 1px #dfd9d8;
            border-bottom: solid 1px #dfd9d8;
        }

        .street-timura-frunze {
            width: 400px;
            top: -500px;
        }

        .street-lva-tolstogo {
            top: 15px;
            left: -50px;
        }
    </style>
</head>
<body>
    <div class="ymaps">
        <div class="markers">
            <div class="marker marker-starbucks">Starbucks</div>
            <div class="marker marker-yandex">Яндекс</div>
        </div>
        <div class="buildings">
            <div class="building building-1"></div>
            <div class="building building-2"></div>
            <div class="building building-3"></div>
            <div class="building building-4"></div>
            <div class="building-5"></div>
            <div class="building-6"></div>
        </div>
        <div class="streets">
            <div class="street street-timura-frunze">ул. Тимура Фрунзе</div>
            <div class="street street-lva-tolstogo">ул. Льва Толстого</div>
        </div>
    </div>
</body>
</html>

## dabblet.js
// alert('Hello world!');

## settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}
	<html>
	<head>
	<meta http-equiv="Content-Security-Policy" content="img-src 'none'">
	<style>
	body {
	position: relative;
	margin: 100px;
	padding: 100px;
	}

	.ymaps {
	position: absolute;
	top: 295px;
	left: 75px;
	}

	.buildings {
	transform: rotate(-40deg);
	}

	.building {
	position: absolute;
	width: 320px;
	height: 80px;
	background: #f5f1e5;
	}

	.building::after {
	position: absolute;
	top: 50px;
	left: 150px;
	content: '';
	width: 40px;
	height: 40px;
	background: #f5f1e5;
	transform: rotate(67deg);
	}

	.building-2 {
	top: 120px;
	left: -120px;
	transform: rotate(-90deg);
	}

	.building-3 {
	top: 190px;
	left: 150px;
	transform: rotate(90deg);
	}

	.building-4 {
	top: 320px;
	width: 470px;
	transform: rotate(-180deg);
	}

	.building-4::after {
	top: 55px;
	left: 288px;
	width: 60px;
	height: 70px;
	transform: rotate(40deg) skewY(-25deg);
	}

	.building-5 {
	position: absolute;
	top: 120px;
	left: 295px;
	width: 300px;
	height: 50px;
	background: #f5f1e5;
	transform: rotate(90deg);
	}

	.building-6 {
	position: absolute;
	top: -50px;
	left: 0;
	width: 75px;
	height: 40px;
	background: #f5f1e5;
	}

	.marker {
	font: 10px arial, sans-serif;
	position: absolute;
	z-index: 10;
	display: box;
	}

	.marker::before {
	position: absolute;
	content: '';
	top: -20px;
	width: 20px;
	height: 20px;
	left: 50%;
	margin-left: -10px;
	border-radius: 10px;
	background: white;
	}

	.marker-starbucks {
	top: 35px;
	left: 85px;
	}

	.marker-starbucks::before {
	background: orange;
	}

	.marker-yandex {
	top: 150px;
	left: 340px;
	}

	.marker-yandex::before {
	text-align: center;
	line-height: 20px;
	font-size: 10px;
	color: red;
	content: 'Я';
	}

	.streets {
	font: 12px arial, sans-serif;
	transform: rotate(50deg);
	}

	.street {
	position: absolute;
	text-align: center;
	width: 450px;
	line-height: 15px;
	color: #737167;
	border-top: solid 1px #dfd9d8;
	border-bottom: solid 1px #dfd9d8;
	}

	.street-timura-frunze {
	width: 400px;
	top: -500px;
	}

	.street-lva-tolstogo {
	top: 15px;
	left: -50px;
	}
	</style>
	</head>
	<body>
	<div class="ymaps">
	<div class="markers">
	<div class="marker marker-starbucks">Starbucks</div>
	<div class="marker marker-yandex">Яндекс</div>
	</div>
	<div class="buildings">
	<div class="building building-1"></div>
	<div class="building building-2"></div>
	<div class="building building-3"></div>
	<div class="building building-4"></div>
	<div class="building-5"></div>
	<div class="building-6"></div>
	</div>
	<div class="streets">
	<div class="street street-timura-frunze">ул. Тимура Фрунзе</div>
	<div class="street street-lva-tolstogo">ул. Льва Толстого</div>
	</div>
	</div>
	</body>
	</html>