My_First_Webpage-/Webpage_Coding.html at main · CharcoalF/My_First_Webpage- · 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
88
89
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta name="description" content="Data Visualization Using Vega-Lite">
    <meta name="author" content="Bocong Zhao">
    <meta name="keywords" content="Australia Fires & Historical Rainfall, Temperature">
    <title> Bocong's Web Design | Welcome </title>
    <link rel="stylesheet" href="./CSS/style.css">
    <script src="https://cdn.jsdelivr.net/npm/vega@5.16.1"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite@4.16.8"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.12.2"></script>

    <style media="screen">
      /* Add space between Vega-Embed links  */
      .vega-actions a {
        margin-right: 5px;
      }
    </style>

  </head>

  <body>
   <header>
     <div class="container">
       <div id="branding">
         <h1> <span class="highlight">Bocong</span> Visualization </h1>
       </div>
       <nav>
         <ul>
         <li class="current"><a href="Webpage_Coding.html">Home</a></li>
         <li><a href="Fires.html">Fires</a></li>
         <li><a href="Rainfall.html">Rainfall</a></li>
         <li><a href="Temp.html">Temperature</a></li>
         <li><a href="services.html">About</a></li>
         </ul>
       </nav>
     </div>
   </header>

   <section id="showcase">
     <div class="container">
       <h1> Australian Bush Fire & Historical Rainfall, Temperature</h1>
       <p> Between the second half of 2019 and the beginning of 2020, Australia experienced exceptionally strong forest fires [1]. This visualized site shows what the fire was like at the time, and gives a rough idea of the impact of the fire on rainfall and temperature by comparing historical rainfall and temperature.</p>
       </div>
   </section>

   <section id="newsletter">
    <a name="top"></a>
     <div class="container">
       <h1> See scource code on github</h1>
     </div>
   </section>

   <section id="boxes">
     <div class="container">

     <div class="box">
      <a href="Fires.html">
       <img src="./img/fires.jpg">
       <h3>Section 1: Australian Bush Fire</h3>
      </a>
     </div>

     <div class="box">
      <a href="Rainfall.html">
      <img src="./img/rainfall.jpg">
       <h3>Section 2: Historical Rainfall</h3>
      </a>
     </div>

     <div class="box">
      <a href="Temp.html">
      <img src="./img/temp.jpg">
      <h3>Section 3: Historical Temperature</h3>
      </a>
    </div>

     </div>
   </section>


   <footer>
     <p>Bocong Web Design, Copyright &copy;2020</p>
   </footer>

  </body>
</html>