looking+

abt.html

@@ -14,6 +14,27 @@
     <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
     <style>
     body {background-color:  #F9F2F5;
+
+    }
+
+    .hero-image {
+      /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
+      background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("28-284858_harry-potter-slytherin-wallpaper-hd-harry-potter-wallpaper.JPG");
+
+      /* Position and center the image to scale nicely on all screens */
+      background-position: top;
+      background-repeat: no-repeat;
+      background-size: cover;
+      position: relative;
+    }
+
+    .title {
+
+    color: white;
+    }
+
+    .subtitle {
+    color: white;
     }
 
     </style>
@@ -24,7 +45,7 @@
 
   <!-- Page header -->
   <!-- https://bulma.io/documentation/layout/hero/ -->
-  <section class="hero is-light is-bold">
+  <section class="hero-image">
     <div class="hero-body">
       <div class="container">
         <h1 class="title">About Page</h1>

dts.html

@@ -15,6 +15,27 @@
     <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
     <style>
     body {background-color:  #F9F2F5;
+
+    }
+
+    .hero-image {
+      /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
+      background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("IMG_1496.PNG");
+
+      /* Position and center the image to scale nicely on all screens */
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      position: relative;
+    }
+
+    .title {
+
+    color: white;
+    }
+
+    .subtitle {
+    color: white;
     }
 
     </style>
@@ -24,7 +45,7 @@
 
   <!-- Page header -->
   <!-- https://bulma.io/documentation/layout/hero/ -->
-  <section class="hero is-light is-bold">
+  <section class="hero-image">
     <div class="hero-body">
       <div class="container">
         <h1 class="title">Dataset Page</h1>

finalViz1mapHm.html

@@ -15,6 +15,25 @@
 
 
     <style>
+    .hero-image {
+      /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
+      background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("IMG_3853.JPG");
+
+      /* Position and center the image to scale nicely on all screens */
+      background-position: 30%;
+      background-repeat: no-repeat;
+      background-size: cover;
+      position: relative;
+    }
+
+    .title {
+
+    color: white;
+    }
+
+    .subtitle {
+    color: white;
+    }
 
   #ResetButton {
     font-size: 12px;
@@ -90,7 +109,7 @@
 
   <!-- Page header -->
   <!-- https://bulma.io/documentation/layout/hero/ -->
-  <section class="hero is-light is-bold">
+  <section class="hero-image">
     <div class="hero-body">
       <div class="container">
         <h1 class="title">Final Visualization 1: Distribution Over Time - Materials Used on Art Items in San Francisco</h1>

finalViz2Hierarchical.html

@@ -85,7 +85,25 @@
  <style>
  body {background-color:  #FEF8F4;
  }
+ .hero-image {
+   /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
+   background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("IMG_3854.JPG");
+
+   /* Position and center the image to scale nicely on all screens */
+   background-position: center;
+   background-repeat: no-repeat;
+   background-size: cover;
+   position: relative;
+ }
+
+ .title {
 
+ color: white;
+ }
+
+ .subtitle {
+ color: white;
+ }
 
  </style>
 
@@ -95,10 +113,10 @@
 
   <!-- Page header -->
   <!-- https://bulma.io/documentation/layout/hero/ -->
-  <section class="hero is-light is-bold">
+  <section class="hero-image">
     <div class="hero-body">
       <div class="container">
-        <h1 class="title">Final Visualization 2: Hierarchical Relationship - Types of Materials Used on Art Items in San Francisco</h1>
+        <h1 class="title">Final Visualization 2: </br>Hierarchical Relationship - Types of Materials Used on Art Items in San Francisco</h1>
         <h2 class="subtitle">Visualization in d3.js</h2>
       </div>
     </div>

index.html

@@ -16,16 +16,33 @@
     <style>
 body {background-color:  #F9F2F5;
 }
+.hero-image {
+  /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
+  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(1, 0, 0, 0)), url("IMG_38562.JPG");
+
+  /* Position and center the image to scale nicely on all screens */
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  position: relative;
+}
+
+.title {
 
+color: white;
+}
 
+.subtitle {
+color: white;
+}
     </style>
   </head>
 
   <body>
 
   <!-- Page header -->
   <!-- https://bulma.io/documentation/layout/hero/ -->
-  <section class="hero is-light is-bold" background="palevioletred">
+  <section class="hero-image">
     <div class="hero-body">
       <div class="container">
         <h1 class="title">Final Project: Civic Art Collection in San Francisco</h1>
@@ -126,7 +143,7 @@ <h2> Attribution: </h2>
           Inspiration of hierarchical data visualization: <a href= "https://observablehq.com/@sjengle/java-11-api-hierarchy-visualization" target = _blank>Java 11 API Hierarchy - Visualization </a></br>
           Inspiration of geospatial data visualizaton: <a href= "https://blockbuilder.org/sjengle/1d673a35f2cb304c572a137277d3d150" target = _blank> Template of Lab - Maps</a> </br>
           Inspiration of heatmap: <a href = "https://blockbuilder.org/sjengle/47c5c20a18ec29f4e2b82905bdb7fe95" target = _blank>Zillow Affordability Heatmap</a> </p>
-
+          <p><i> About images used in headers: except the hero-image for About Page was retrieved <a href = "https://www.itl.cat/wallview/imJRTT_harry-potter-slytherin-wallpaper-hd-harry-potter-wallpaper/" target = _blank>here</a>, all other pictures are taken by Alex Wang.</i></p>
       </div>
       <!-- End page content -->
     </div>

pttpAlpha.html

@@ -14,15 +14,33 @@
     <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
     <style>
 body {background-color: #EEF3F6;}
+.hero-image {
+  /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
+  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("IMG_3377.JPG");
 
+  /* Position and center the image to scale nicely on all screens */
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  position: relative;
+}
+
+.title {
+
+color: white;
+}
+
+.subtitle {
+color: white;
+}
     </style>
   </head>
 
   <body>
 
   <!-- Page header -->
   <!-- https://bulma.io/documentation/layout/hero/ -->
-  <section class="hero is-light is-bold">
+  <section class="hero-image">
     <div class="hero-body">
       <div class="container">
         <h1 class="title">Prototype-Alpha : Art Items on Map of San Francisco</h1>

pttpBeta2.html

@@ -15,6 +15,25 @@
 
 
     <style>
+    .hero-image {
+      /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
+      background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("IMG_3857.JPG");
+
+      /* Position and center the image to scale nicely on all screens */
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      position: relative;
+    }
+
+    .title {
+
+    color: white;
+    }
+
+    .subtitle {
+    color: white;
+    }
   #tooltip {
     font-weight: 600;
     text-shadow: 0px 0px 2px white;
@@ -71,7 +90,7 @@
 
   <!-- Page header -->
   <!-- https://bulma.io/documentation/layout/hero/ -->
-  <section class="hero is-light is-bold">
+  <section class="hero-image">
     <div class="hero-body">
       <div class="container">
         <h1 class="title">Prototype Page - Beta : Clustering of Artists that Use Similar Materials?</h1>