London_mockup/8.html at master · EttoreM/London_mockup · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<html>
  <head>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="PageContainer bkg_map_2">

      <!-- Top logos -->
      <img
        src="./imgs/DSH_logo_3.png"
        onclick="location.href = 'index.html'"
        class="DHSlogo"
      />
      <div class="NERClogo">
        <img src="./imgs/NERC_logo.png" style="width: 9vw;" />
        <div style="width: 0.835rem; display: flex;"></div>
        <img src="./imgs/UOM_logo.png" style="width: 6.5vw; height: auto;" />
      </div>

      <!-- Search Bar -->
      <div class="SearchBar">
        <input class="InputSearch" placeholder="Search..." />
        <div class="SearchIcon">
          <img src="./imgs/search.svg" style="width: 1.0855vw;" />
        </div>
      </div>

       <!-- Login / Register / Logout -->
       <div class="LoginButtonSmall">Login</div>

      <!-- Options -->
      <div class="Option1_up" onclick="location.href = '2.html'">
        <span style="display: block; font-size: 0.8vw;">I want to</span> Know more about
      </div>
      <div class="Option2_up">
        <span style="display: block; font-size: 0.8vw;">I want to</span> Explore more
      </div>

      <!-- Green Panel-->
      <div class="GreenPanel">
        <div style="width: 100%; margin: 0.5vw;">Data Domains</div>
        <div class="BlueDS">Flooding</div>
        <div class="GreenDS" onclick="location.href = '9.html'">Heat</div>
        <div class="GreenDS">Air Quality</div>
        <div class="GreenDS">Pollutants</div>
        <div class="GreenDS">Gov maps</div>
        <div class="GreenDS">Admin</div>
        <div style="width:100%; height: 0.5vw;"></div>
        <div style="width: 100%; margin: 0.3vw 0.5vw; font-size:0.8vw;">Flooding</div>
        <div class="GreenPanelItem">
          <img src="./imgs/switch_off.svg" style="width: 1.3vw; cursor: pointer;" onclick="location.href = '10.html'"/>
          <div style="width: 0.835vw;"></div>
          <p style="width: 100%;">Neighbourhood Flood Vulnerability Index</p>
          <div style="width: 0.835vw;"></div>
          <img src="./imgs/info.png" style="width: 0.835vw;" />
        </div>
        <div class="GreenPanelItem">
          <img src="./imgs/switch_off.svg" style="width: 1.3vw;" />
          <div style="width: 0.835vw;"></div>
          <p style="width: 100%;">Susceptibility</p>
          <div style="width: 0.835vw;"></div>
          <img src="./imgs/info.png" style="width: 0.835vw;" />
        </div>
        <div class="GreenPanelItem">
          <img src="./imgs/switch_off.svg" style="width: 1.3vw;" />
          <div style="width: 0.835vw;"></div>
          <p style="width: 100%;">Vulnerability due to health</p>
          <div style="width: 0.835vw;"></div>
          <img src="./imgs/info.png" style="width: 0.835vw;" />
        </div>
        <div class="GreenPanelItem">
          <img src="./imgs/switch_off.svg" style="width: 1.3vw;" />
          <div style="width: 0.835vw;"></div>
          <p style="width: 100%;">Young children (% of people under 5 years)</p>
          <div style="width: 0.835vw;"></div>
          <img src="./imgs/info.png" style="width: 0.835vw;" />
        </div>

        <div style="width: 100%; margin: 0.8vw 0.5vw 0.5vw 0.5vw;">Services</div>
        <div class="Service"><img src="./imgs/climate_just_short.png" style="width: 5.5vw" /></div>
        <div class="Service"><img src="./imgs/britain_breathing.png" style="width: 5.5vw" /></div>
      </div>


    </div>
  </body>
</html>