Sim City Map

Developer
Ash
Size
13,470 Kb
Views
16,192
  1. Sim City Map Previews
  2. Sim City Map HTML Codes
  3. Sim City Map CSS Codes
  4. Sim City Map JS Codes

How do I make an sim city map?

What is a sim city map? How do you make a sim city map? This script and codes were developed by Ash on 03 November 2022, Thursday.

Sim City Map Previews
IQ Test

Sim City Map - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sim City Map</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <div class="container"> <div class="row"> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> </div> <div class="row"> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> </div> <div class="row"> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> </div> <div class="row"> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> </div> <div class="row"> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> </div> <div class="row"> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> </div> <div class="row"> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> </div> <div class="row"> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> </div> <div class="row"> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> </div> <div class="row"> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> </div> <div class="row"> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> </div> <div class="row"> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> </div> <div class="row"> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> </div> <div class="row"> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> </div> <div class="row"> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> </div> <div class="row"> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> </div> <div class="row"> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> </div> <div class="row"> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> </div> <div class="row"> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> </div> <div class="row"> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> <div class="cube"> <div class="building"></div> <div class="tree"></div> <div class="tree-sm"></div> </div> </div> </div>
</div>
<nav> <div class="nav-left"> <span>Tiles:</span> <div class="button button-tile" data-tile="res" title="residential"></div> <div class="button button-tile" data-tile="ind" title="industrial"></div> <div class="button button-tile" data-tile="com" title="commercial"></div> <div class="button button-tile" data-tile="road" title="road"></div> <div class="button button-tile" data-tile="road-hor" title="road"></div> <div class="button button-tile" data-tile="road-cross" title="road"> </div> <div class="button button-tile" data-tile="water" title="water"> <div class="tree"></div> </div> </div> <div class="nav-right"> <span>Actions:</span> <div class="button action-del" data-tile="cube" title="delete"> delete </div> </div>
</nav> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Sim City Map - Script Codes CSS Codes

html { box-sizing: border-box;
}
*, *:before, *:after { box-sizing: inherit;
}
body { font-size: 0px; font-family: 'Open Sans Condensed', sans-serif; background: #B4E1D9;
}
.wrapper { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
.container { -webkit-transform: rotateX(55deg) rotateZ(45deg); transform: rotateX(55deg) rotateZ(45deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; height: 50vw; width: 50vw;
}
.row { width: 50vw; height: 2.5vw; z-index: -999;
}
.cube { display: inline-block; width: 2.5vw; height: 2.5vw; padding: 0; margin: 0; border: 0px solid #5c6e10; box-shadow: 0px 0px 1px 0px #5c6e10; background-color: #a6c71d; -webkit-transform: translateZ(0px); transform: translateZ(0px); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;
}
.cube:hover { -webkit-transform: translate3d(0vw, 0vw, 0.25vw); transform: translate3d(0vw, 0vw, 0.25vw); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;
}
.cube:before, .cube:after { width: 2.5vw; height: 2.5vw; position: absolute; left: -1px; top: -1px;
}
.cube:before { content: ""; background-color: #6A512E; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transform: rotateX(-90deg) translateY(2.6vw); transform: rotateX(-90deg) translateY(2.6vw);
}
.cube:after { content: ""; -webkit-transform-origin: 100% 0; transform-origin: 100% 0; background-color: #987543; -webkit-transform: rotateY(90deg) translateX(2.6vw); transform: rotateY(90deg) translateX(2.6vw);
}
.cube .tree { display: none; position: absolute; width: 0; top: -1vw; left: 0vw; z-index: 99; height: 10px; border-left: 0.4vw solid transparent; border-right: 0.4vw solid transparent; border-bottom: 3vw solid #648c1c; -webkit-transform: rotateX(0deg) rotateZ(-45deg); transform: rotateX(0deg) rotateZ(-45deg); box-shadow: #987543 0px 7px 0 -3px;
}
.cube .tree-sm { content: ''; display: none; position: absolute; width: 0; top: -0vw; left: 0.4vw; z-index: 99; height: 10px; border-left: 0.3vw solid transparent; border-right: 0.3vw solid transparent; border-bottom: 2vw solid #648c1c; -webkit-transform: rotateX(0deg) rotateZ(-45deg); transform: rotateX(0deg) rotateZ(-45deg); box-shadow: #987543 0px 7px 0 -3px;
}
nav { position: fixed; top: 0px; width: 100%; background: #222; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 3vw;
}
nav .nav-left, nav .nav-right { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
nav span { color: #eee; font-size: 1.5vw; line-height: 1.5vw;
}
nav .selected { border: 2px solid #E74C3C;
}
nav .action-del { display: inline-block; line-height: 3.75vw; width: auto; padding: 0px 5px; border: 0px solid #000; background-color: #333;
}
.button { color: #fff; font-size: 1vw; padding: 5px; margin: 5px; height: 3.75vw; width: 3.75vw; background: #333; display: inline-block; cursor: pointer; margin-left: 2vw;
}
.button-tile { -webkit-transform: rotateX(55deg) rotateZ(45deg); transform: rotateX(55deg) rotateZ(45deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
}
.res { background-image: -webkit-linear-gradient(45deg, #229954 25%, transparent 25%, transparent 75%, #229954 75%), -webkit-linear-gradient(45deg, #229954 25%, transparent 25%, transparent 75%, #229954 75%); background-image: linear-gradient(45deg, #229954 25%, transparent 25%, transparent 75%, #229954 75%), linear-gradient(45deg, #229954 25%, transparent 25%, transparent 75%, #229954 75%); background-size: 4px 4px; background-position: 0 0, 2px 2px;
}
.ind { background-image: -webkit-linear-gradient(45deg, #F1C40F 25%, transparent 25%, transparent 75%, #F1C40F 75%), -webkit-linear-gradient(45deg, #F1C40F 25%, transparent 25%, transparent 75%, #F1C40F 75%); background-image: linear-gradient(45deg, #F1C40F 25%, transparent 25%, transparent 75%, #F1C40F 75%), linear-gradient(45deg, #F1C40F 25%, transparent 25%, transparent 75%, #F1C40F 75%); background-size: 4px 4px; background-position: 0 0, 2px 2px;
}
.com { background-image: -webkit-linear-gradient(45deg, #2980B9 25%, transparent 25%, transparent 75%, #2980B9 75%), -webkit-linear-gradient(45deg, #2980B9 25%, transparent 25%, transparent 75%, #2980B9 75%); background-image: linear-gradient(45deg, #2980B9 25%, transparent 25%, transparent 75%, #2980B9 75%), linear-gradient(45deg, #2980B9 25%, transparent 25%, transparent 75%, #2980B9 75%); background-size: 4px 4px; background-position: 0 0, 2px 2px;
}
.road { background-color: #a6c71d; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAECAYAAABcDxXOAAAAKklEQVQYV2NsiHf8z6ITwIAL/LmygYERXVF1SR5Da88kuB6sitBNJNokADQxGoGmJQpkAAAAAElFTkSuQmCC); background-repeat: repeat-y; background-size: calc(2.5vw - 0.5vw); background-position: center; -ms-interpolation-mode: nearest-neighbor; image-rendering: -webkit-optimize-contrast; image-rendering: -moz-crisp-edges; image-rendering: pixelated;
}
.road-hor { background-color: #a6c71d; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAJCAYAAAAVb42gAAAAKUlEQVQYV2NsiHf8z4AEGFu6J5Iq8P////+tPZMYqkvyGEA0OWaguwMAEi8cofJ1QfgAAAAASUVORK5CYII=); background-repeat: repeat-x; background-size: calc(2.5vw - 1.65vw); background-position: center; -ms-interpolation-mode: nearest-neighbor; image-rendering: -webkit-optimize-contrast; image-rendering: -moz-crisp-edges; image-rendering: pixelated;
}
.road-cross { background-color: #a6c71d; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAVklEQVQoU2NkYGBgaIh3/M+iEwBiMlSX5DG09kwCs/9c2cDQsHA/IyNIAUgApggsCwUgRSDA2NI9EawIHyBO0f/////D3IDNNJAbiTOJKDcR5TtiwgkAwpUvwA91R7cAAAAASUVORK5CYII=); background-repeat: no-repeat; background-size: 2.5vw; background-position: center; -ms-interpolation-mode: nearest-neighbor; image-rendering: -webkit-optimize-contrast; image-rendering: -moz-crisp-edges; image-rendering: pixelated;
}
.water { background: #2CD7AD; box-shadow: #fff 1px 2px -1px -2px; overflow: hidden;
}
.water > .tree, .water ~ .tree { display: block !important; top: 0.1vw; border-left: 1px solid transparent; border-right: 1pxsolid transparent; border-bottom: 2px solid transparent; border-radius: 50%; -webkit-transform: rotateX(0deg) rotateZ(0deg); transform: rotateX(0deg) rotateZ(0deg); box-shadow: transparent 0px 0px 0 0;
}
.water > .tree:before, .water ~ .tree:before { content: ''; position: absolute; margin-top: 0vw; left: 1.3vw; width: 0.2vw; height: 0.2vw; background: #fff; border-radius: 50%; box-shadow: #fff 0.5vw 0vw 0 0, #fff 1vw 1vw 0 0 , #fff 0.2vw 0.6vw 0 0; -webkit-animation: flow 5s ease-in-out infinite; animation: flow 5s ease-in-out infinite; -webkit-animation-direction: alternate; animation-direction: alternate;
}
.water > .tree:after, .water ~ .tree:after { content: ''; position: absolute; margin-top: 0vw; left: 0.5vw; width: 0.2vw; height: 0.2vw; background: #fff; border-radius: 50%; box-shadow: #fff 0.5vw 1.5vw 0 0, #fff 0vw 1vw 0 0; -webkit-animation: flow 5s ease-in-out infinite; animation: flow 5s ease-in-out infinite; -webkit-animation-direction: alternate; animation-direction: alternate;
}
.building { width: 2.5vw; height: 2.5vw; z-index: 9999;
}
.building:hover { cursor: crosshair; -webkit-transform: translate3d(0vw, 0vw, 0vw); transform: translate3d(0vw, 0vw, 0vw);
}
.building:after { content: ''; width: 3.5vw; background-position: center center; height: 3.5vw; position: absolute; top: -1.5vw; left: -2.5vw; -webkit-transform: rotateX(0deg) rotateZ(-45deg); transform: rotateX(0deg) rotateZ(-45deg); overflow: visible; -ms-interpolation-mode: nearest-neighbor; image-rendering: -webkit-optimize-contrast; image-rendering: -moz-crisp-edges; image-rendering: pixelated; display: none; background-color: transparent;
}
.building-res-1:after { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAmCAYAAAB0xJ2ZAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QcLDBoMxGx2AgAAAnRJREFUaN7tmK1P5EAYxp8SkjuBOElyS0IComJFxQnEJSAQm6BIWoc4gUBWIIvalU12JSSICsQlLGEFm5yABNyKExWIFayiJIj7A0D1xHQWZph22rLdJeF9zaTTna99fu/H1IjjGB/BOp2OsBHXdY1prDuHT27GrAiQFedm27bw3O12KyXi0xMwP2vFdTYcDiuNERQDphUDoiiKVb6dpngURUJ/rVYDAJimqRxXlggiYNoEWJYFAAjDEEWI4JZGQFkiKAtUNfHXfUNA6869VyqvIyKv4jIpFAOmTYCsuM5eVXiFiEhTnL+XK0kioCoC3ii+mLSPxeZpXR8Irec2M4lotVrvUpwIKEuAVvGkfd5l7Zdjcfx1j/m65/9V+v7J3qlQAa7+WmLZI7zPtb+yJBABk1Z8xVxhSv4YsQ5OwrJ6necr1jpXDgCg3W5PRHF5/09+bBABWQSkKo5iikebI+VCu70zAMDv5e+so+cDAM7X2fP2zUOpA/ys/xNiS6PRYC/CfEQQAfyfOVk7FV7sDBzlAJ3i3kYzc8Fb6bl+eSiQwMngbMrZY6xwigV3R8p++Xz83EQA9wXZR9KI0Cme9/b2QsQeAGAwGAAALp/6ucYFC0zpoJd0rEJZV8j75+e17ZiyQOYXIR0Rui814xjCo7GlnmesaBAAAPp+X6wkw3wH0SlOlWDRSlD+5/ISwW91XPFxK/2OE+PUmVLNNRZLhmbyVXhx9C7FuY/TXaBsDCh6O9TVEd43pvCBzQjZ2t9iil8kivuJ4n+khazs+XU+TgRURUDZrBF4wUwVJwKqIqBwjDh0JpLHiYCPSkDZrFG14kSAZP8BgZBKTN+BIgkAAAAASUVORK5CYII="); background-size: 3.5vw 3.5vw; background-repeat: no-repeat; display: block;
}
.building-res-2:after { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAoCAYAAABOzvzpAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QcKDCYRbCUEQQAAApJJREFUaN7tmLFrE3EUx78nBw3oINihg6BCwfsDAjnokj8gg5IUMtyQVVCqRDCDWx0qXhGJoEOHQjIIbaGD3RUUrpChg8MJhRKocINCxgiFOPz6o74fv7vkd/5IGnxvyf3uLncv9/2873sXB9OLkbJ2cAniCv7zcKao+CxzYQLSwp2V4u/u3iDrB99/sQfMNQEnayWyvvPmcCLF1f1MwLx2gZO1ktYDjo5OAQD3P//IVFzjAQ4TMGddgNS+6gk5XH8qkyMTkPeLr5+tjADgycuvWtefoMYz54PhPQ9/X1+9ny0iuAvkVdxWpHWFxxVKzIa7ohIBG0SwB+RVfNzkZ/oOkEZCLxBKX9s+AwC0mhPn6zABOQnQTnStRfFkF16d7zjVE2H6DiA/jysNcl7X9wEA292IZNoLXKtEcBeQG512dQQAz8MeACB52Kdn3qTLOCppJz85+yfJMLPGVcX9c8XHRRzHAIDBYAAAaAQRIcJzD426BntA2oGtQhWZRBj2+XGKS2WjKCLHPc8j56nr/Y/XBRHuwMgj2ANkHSw0het3/R1yYJh8IAS8eFqkRNQoEfEZ9YAvxbqR4jIODgJtouvrx1oC0vKt1WoAgLfYhO73BdEqE0C6gCThog+bESGf+L8qfrVaAQAs7hXI/j52ybrT3s3MJwxDreK/N+k8wF1AbqhPJmiuaokIwzohwrbiSVnUOvaWAQA/q2Ke6JSp4kCRXKewVCf5pSnOXSDv/wHjPEIqLV136zadI/r9DQDALQivSNpC6aVHy+Q6UvH35YaVGue3wbyToBqTeoSPHa1HXLh2S9z407dMxVG2U+NMgC0C8hKR1jVmpTgTkLcLmIbpZGnL1ZmAy0KAKRHTUpwJUOIPz2FcwK+jljIAAAAASUVORK5CYII="); background-size: 3.5vw 3.5vw; background-repeat: no-repeat; display: block;
}
.building-com-1:after { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAmCAYAAAB0xJ2ZAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QcKDCIQf07x0wAAAwtJREFUaN7tmTFoE1EYx/+RwDkELCg0Q8YOBTPckMGhQ0ECDhkcXEqXDEJWS1PoUJBugTS0gw6CQ5dQ3RxuKGjQwbHiDREdHTJEMBChQw8CcfjeO/p9ucvdJRcN9L3l9TXv3bu7/+/7v+9LMliyZu1iDADo09hrI7PI/W7hhrfMsirvt7wiobWYe73xBGQTK3VGSnlbKSuSF73rKw/jActAgNVUMeqkHPPgiqMixnr+tiIv5VPBEJB0gdeezQuk4vsrHIDDVp3m2S22j9w3cp+EpBgCYs88p+75qgUAaDjeTIo3fpAwG48+AACGwyEAoFa7BAAU9r4CAEarD2j+idrnwr/UeFpe4PUfqr86xgNSIcCP9df0Zg9/qTfb5opYu3xdmOKN3DGZfbZME3+qBWvUVWvUn25y5XU+YG3zfa9ls3QfdkfnE7G8wBAQOUMpoN9szr0LABjYtgo1Wyl+FE/xEb8uCqrvKeXXXrGxrg2092D9ikhEnRN4pk6PLd+DjAekUg1qD9CK5U4VAYMBi0mn+h4A0O12iQh7ByxzzAvFZQ2g6/8tP/PkTaxr9Ims4eUzGg/pUTxXnQKdDru/MC8wBCTN1T2IN9wUCuWnxzhKXPGJ+bImkK0nxm5YxihNoGUImEpAVOYGZfrVA+XW58FKeqq3ZNUYprweO6E1RzABQvmJ+3uinmN9zDzCv77KJA0BWvkJxcWb1e3xmzsAgLdf/pBCOvV+GhKjhRAF5f+d4KrP+ihIEfmJnyE2p3uDT7YgwhAQ2wMkEYWQWO5FfB7i+vXsfbbN0b1vfF0lWPlr3wME5hf+cxgPmDMPkETozE+3ilvmbn8R4QUOV36jssk+/ux8YiTIWHdskXmOKPPcv5quuMkDktYCcYlolCg3LxaLnAgEu7N78J2+Dui+oNPl3ctAr/H2RHVX4l6TVHFDwKwExCbitiIiK4j4XeangK7q3GMWw75FpBTjhoBFETA3EcIjJhTv7cQ6x+dthoBFXTjql6CV3AnP0RcU44aA/0VAUiL+leKGANH+AuggRXr6h3N5AAAAAElFTkSuQmCC"); background-size: 3.5vw 3.5vw; background-repeat: no-repeat; display: block;
}
.building-ind-1:after { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAmCAYAAAB0xJ2ZAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QcKDCAJKRM7kQAAAg1JREFUaN7tmi9Pw0AYh58SEhATE0sgoWJyopYEkgkcyIkKJAKHWqZQjE8whViC4ANMYCpIkBPIiYpJxBAkiIkJSEiK6F5Cj3Zru9u6ZPdTd7uubfZ73j/XzqJgtVqtAMBxnNj18XgMwGg0AmAymQDQ7XYtHdffYsNlFeW4bdszjxsOhwCUSqWI8+p8URIMAesS4+K4aJ7zukgwBKx7jLuuC0C73Y58XqvVACiXy5HzZiXBELDuMa5K1tXzqOtpSTAEFB3j8+YiNReIVPLk+3J9z/MsQ0AeAsRp1Ym0WtT5rHPZK3iel4nyjSdgO2nh3K2EWXxyBoDv+5GYU+e9Xm+lzv+J8dj7vzo9AODu6c1UgVwE/B7w/QxA/SjsuL4JHZAqII5IZ6Yr+2eI8UyOGwKyEqDqc/wIQNUWIuwIEbpygq4YB4JZ1cAQIINOpxMoXuck4iRXTlhWjN/s7QBw+/4VxPUHhoD/zi8mIUKqhuO4sTlBY4zHO54yNxgCms2mFZcD+i+709H+1NFoTrh/eA07xkY5VR9xeVEF4PD4uijHY/cGhgAZCAlJVUElwvf74bRRz3Xhohw3fUDaTnAeEfKEZjB91KfmCF3S7bghIO9eIGuOyEvEsh03BOj89WYRoUqIkD5AqkBl8CG9+srv2RDAEt8OJxGhviGaJ13/BDEErJqArDkiqdosWxtPwA8jDGUNsycg/gAAAABJRU5ErkJggg=="); background-size: 3.5vw 3.5vw; background-repeat: no-repeat; display: block;
}
@-webkit-keyframes flow { 0% { opacity: 0.5; top: 0px; } 20% { opacity: 0.9; top: 2px; } 21% { opacity: 0.5; top: 1px; } 40% { opacity: 0.8; top: 4px; } 41% { opacity: 0.5; top: 3px; } 60% { opacity: 0.8; top: 6px; } 61% { opacity: 0.5; top: 5px; } 80% { opacity: 0.7; top: 7px; } 81% { opacity: 0.5; top: 6px; } 100% { opacity: 0.3; top: 8px; }
}
@keyframes flow { 0% { opacity: 0.5; top: 0px; } 20% { opacity: 0.9; top: 2px; } 21% { opacity: 0.5; top: 1px; } 40% { opacity: 0.8; top: 4px; } 41% { opacity: 0.5; top: 3px; } 60% { opacity: 0.8; top: 6px; } 61% { opacity: 0.5; top: 5px; } 80% { opacity: 0.7; top: 7px; } 81% { opacity: 0.5; top: 6px; } 100% { opacity: 0.3; top: 8px; }
}

Sim City Map - Script Codes JS Codes

var City = { active : $(this).data('tile'), array_res: [1,2], array_com: [1], array_ind: [1], array_site: [], init: function(){ City.choose() City.click() City.tree() }, choose: function(){ $('.button').each(function(){ $(this).addClass($(this).data('tile')) $(this).on('click', function(){ $(this).addClass('selected').siblings().removeClass('selected'); City.active = $(this).data('tile'); }); }); }, click: function(){ $('.row > .cube > .building').each(function(){ $(this).on('click', function(){ $(this).removeClass().removeData('zone'); $(this).addClass('building cube ' + City.active); $(this).siblings('.tree, .tree-sm').css('display','none'); //$(this).addClass('building building-'+City.active); var selectedTile = $(this) City.build(selectedTile) }); }); }, build: function(selectedTile){ //$('.row > .cube').each(function(){ if($(selectedTile).hasClass('res')||$(selectedTile).hasClass('ind')||$(selectedTile).hasClass('com')){ $(selectedTile).attr('data-zone',City.active); var zoneSel = $(selectedTile).attr('data-zone'); var rand = Math.floor(Math.random()*9000+1000); var selArray = eval('City.array_'+zoneSel); var num = selArray[Math.floor(Math.random() * +selArray.length)] $(selectedTile).delay(rand).queue(function(){$(selectedTile).addClass('building building-'+zoneSel+'-'+num)}); } //}); }, tree: function(){ $('.row > .cube').each(function(){ var random_tree = Math.random() >= 0.8 if (random_tree){ $(this).find('.tree').css('display','block'); } var random_tree_sm = Math.random() >= 0.9 if (random_tree_sm){ $(this).find('.tree-sm').css('display','block'); } }); }
}
City.init();
Sim City Map - Script Codes
Sim City Map - Script Codes
Home Page Home
Developer Ash
Username littleginger
Uploaded November 03, 2022
Rating 3
Size 13,470 Kb
Views 16,192
Do you need developer help for Sim City Map?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ash (littleginger) Script Codes
Name
Travel Site Demo
Window
Emoji
RSS Feed
To Do List with jQuery
Cute Tags
PKMN
Cute Bunny
A Pen by Ash
Drag and Drop Pixel Garden
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!