Michael23

index.html

@@ -24,6 +24,8 @@ <h1>The Tree Encyclopedia</h1>
             <h3>Index</h3>
             <p><button id="oak">Oak</button></p>
             <p><button id="beech">Beech</button></p>
+            <p><button id="maple">Maple</button></p>
+            <p><button id="redwood">Redwood</button></p>
 
         </div>
         <div class="content">
@@ -48,11 +50,22 @@ <h3>Index</h3>
         $("#oak").click(function(){
             $("#i_content").attr("src","oak_content.html");
             $("#i_summary").attr("src","oak_summary.html");
-        })
-        $("#beech").click(function(){
-
+        });
 
-        })
+        $("#beech").click(function(){
+          $("#i_content").attr("src","beech_content.html");
+          $("#i_summary").attr("src","beech_summary.html");
+        });
+
+        $("#maple").click(function(){
+          $("#i_content").attr("src","maple_content.html");
+          $("#i_summary").attr("src","maple_summary.html");
+        });
+
+        $("#redwood").click(function(){
+          $("#i_content").attr("src","redwood_content.html");
+          $("#i_summary").attr("src","redwood_summary.html");
+        });
 
         /* This will not be merged !  */
 

maple_content.html

@@ -0,0 +1,21 @@
+<style>
+  @import url('https://fonts.googleapis.com/css2?family=Lato&family=Overlock:wght@700&display=swap');
+  body{font-family: 'Lato', sans-serif;
+  text-align: center;
+  color: white;
+  }
+  h3{
+    font-family: 'Overlock', cursive;
+    font-size: 28px;
+    margin: 0px;
+    padding-top: 10px;
+  }
+  p{
+    font-size: 16px;
+    padding: 0px;
+  }
+  </style>
+
+  <h3>Maple</h3>
+
+  <p>maple</p>

maple_summary.html

@@ -0,0 +1,34 @@
+<style>body{font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+  color: white;}</style>
+  <style>
+  @import url('https://fonts.googleapis.com/css2?family=Lato&family=Overlock:wght@700&display=swap');
+  body{font-family: 'Lato', sans-serif;
+  text-align: center;
+  }
+  h3{
+    font-family: 'Overlock', cursive;
+    font-size: 26px;
+    margin: 0px;
+    padding-top: 10px;
+
+  }
+  p{
+    font-size: 15px;
+    padding: 0px;
+  }
+  #type{
+    font-size: 12px;
+    margin: 0;
+    padding: 0;
+    margin-bottom: 10px;
+  }
+  </style>
+
+
+  <h3>Maple</h3>
+
+  <p id="type"> Tree or shrub </p>
+  <img src="img/maple.jpg" style="width: 200px;">
+  <p>Family: Maple.
+  </p> 
+

redwood_content.html

@@ -0,0 +1,21 @@
+<style>
+  @import url('https://fonts.googleapis.com/css2?family=Lato&family=Overlock:wght@700&display=swap');
+  body{font-family: 'Lato', sans-serif;
+  text-align: center;
+  color: white;
+  }
+  h3{
+    font-family: 'Overlock', cursive;
+    font-size: 28px;
+    margin: 0px;
+    padding-top: 10px;
+  }
+  p{
+    font-size: 16px;
+    padding: 0px;
+  }
+  </style>
+
+  <h3>Redwood</h3>
+
+  <p>redwood</p>

redwood_summary.html

@@ -0,0 +1,34 @@
+<style>body{font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+  color: white;}</style>
+  <style>
+  @import url('https://fonts.googleapis.com/css2?family=Lato&family=Overlock:wght@700&display=swap');
+  body{font-family: 'Lato', sans-serif;
+  text-align: center;
+  }
+  h3{
+    font-family: 'Overlock', cursive;
+    font-size: 26px;
+    margin: 0px;
+    padding-top: 10px;
+
+  }
+  p{
+    font-size: 15px;
+    padding: 0px;
+  }
+  #type{
+    font-size: 12px;
+    margin: 0;
+    padding: 0;
+    margin-bottom: 10px;
+  }
+  </style>
+
+
+  <h3>Redwood</h3>
+
+  <p id="type"> Tree or shrub </p>
+  <img src="img/redwood.jpg" style="width: 200px;">
+  <p>Family: Redwood.
+  </p> 
+