flexbox.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Map UI - Flexbox</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
    crossorigin="" />
  <link rel="stylesheet" type="text/css" media="screen" href="flexbox.css" />

  <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
    crossorigin=""></script>
</head>

<body>
  <div id="app">
    <div class="header">
      <div class="logo">
        <img src="icons/ac_unit.svg" alt="account" class="icons-logo">
      </div>
      <div class="title">
        A Map UI with Flexbox
      </div>
      <div class="user">
        <img src="icons/account_circle.svg" alt="account" class="icons">
        <img src="icons/exposure_plus_2.svg" alt="account" class="icons">
      </div>

    </div>
    <div class="container">
      <div class="toolbar">
        <div class="tools">
          <img src="icons/public.svg" alt="account" class="icon-toolbar">
          <img src="icons/layers.svg" alt="account" class="icon-toolbar">
          <img src="icons/add_circle.svg" alt="account" class="icon-toolbar">
        </div>
        <div class="help">
          <img src="icons/help_outline.svg" alt="account" class="icon-toolbar">
        </div>
      </div>
      <div id="map"></div>
    </div>
    <div class="footer"></div>
  </div>
</body>
<script>
  var map = L.map('map').setView([18, 0], 3);
  L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);
</script>

</html>