Skip to content

Instantly share code, notes, and snippets.

@tarmolov

tarmolov/dabblet.html

Created March 13, 2019 14:26
Show Gist options
  • Save tarmolov/c1e269b0d26ea7da4e72728aff037055 to your computer and use it in GitHub Desktop.
Save tarmolov/c1e269b0d26ea7da4e72728aff037055 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
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>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment