first commit

apple_content.html

@@ -0,0 +1,25 @@
+<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>Apple</h3>
+
+    <p>The common apple is native to Central Asia and Afghanistan, now grown worldwide for its crisp, crunchy fruit.  Many cultivars exist with differences in color, flavor, and recommended food use. </p>
+
+    <p>While they grow tall from seed, many apple trees you can buy are grafted with dwarfing rootstocks so they maintain a much smaller size. Varieties have different chilling hour requirements so be sure to choose the right one for your area.</p>
+
+

apple_summary.html

@@ -0,0 +1,36 @@
+<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>Apple</h3>
+
+    <p id="type"> Tree </p>
+    <img src="img/apple.jpg" style="width: 200px;">
+
+    <p>Family: Rosaceae</p>
+
+
+

index.html

@@ -24,6 +24,7 @@ <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="apple">Apple</button></p>
 
         </div>
         <div class="content">
@@ -50,7 +51,13 @@ <h3>Index</h3>
             $("#i_summary").attr("src","oak_summary.html");
         })
         $("#beech").click(function(){
+            $("#i_content").attr("src","beech_content.html");
+            $("#i_summary").attr("src","beech_summary.html");
 
+        })
+        $("#apple").click(function(){
+            $("#i_content").attr("src","apple_content.html");
+            $("#i_summary").attr("src","apple_summary.html");
 
         })