Abhiruth3

index.html

@@ -25,6 +25,12 @@ <h3>Index</h3>
             <p><button id="oak">Oak</button></p>
             <p><button id="beech">Beech</button></p>
 
+            <p><button id="pine">Pine</button></p>
+
+            <p><button id="maple">Maple</button></p>
+
+            <p><button id="silver">Silver</button></p>
+
         </div>
         <div class="content">
             <iframe id="i_content" src="oak_content.html"
@@ -50,10 +56,30 @@ <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");
+
+        })
+
+        $("#pine").click(function(){
+            $("#i_content").attr("src","pine_content.html");
+            $("#i_summary").attr("src","pine_summary.html");
+
+        })
+
+        $("#maple").click(function(){
+            $("#i_content").attr("src","maple_content.html");
+            $("#i_summary").attr("src","maple_summary.html");
 
 
         })
 
+        $("#silver").click(function(){
+            $("#i_content").attr("src","silver_content.html");
+            $("#i_summary").attr("src","silver_summary.html");
+
+
+        })
         /* This will not be merged !  */
 
 

maple_content.html

@@ -0,0 +1,24 @@
+<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 trees grow in the ground.</p>
+
+<p>I'm pretty sure you make maple syrup with them.</p>
+

maple_summary.html

@@ -0,0 +1,35 @@
+<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>Beech</h3>
+
+<p id="type"> Tree </p>
+<img src="img/maple.jpg" style="width: 200px;">
+
+<p>Family: Mapleo Treeo</p>
+
+

pine_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>Pine</h3>
+
+    <p>A pine is any conifer in the genus Pinus of the family Pinaceae. Pinus is the sole genus in the subfamily Pinoideae. The Plant List compiled by the Royal Botanic Gardens, Kew and Missouri Botanical Garden accepts 126 species names of pines as current, together with 35 unresolved species and many more synonyms.</p>
+
+    <p>Pine may also refer to the lumber derived from pine trees; pine is one of the more extensively used types of wood used as lumber. The modern English name "pine" derives from Latin pinus, which some have traced to the Indo-European base *pīt- ‘resin’ (source of English pituitary).</p>
+
+

pine_summary.html

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

silver_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>The Tree of Silver Wings</h3>
+
+    <p>The Tree of Silver Wings is a mysterious entity referred to by multiple sources, typically in association with either the Black Garden or the metaphorical "garden" allegorically used to describe the state of reality predating the universe.</p>
+
+    <p>The tree once existed alongside the Gardener and Winnower. It was described as "ruinous", "disastrous", the air around it inspiring violence in those who would breathe even a little in. It was later brought down by the two entities fighting with each other, and left to smoke amid the meadows.</p>
+
+

silver_summary.html

@@ -0,0 +1,33 @@
+<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>Silver</h3>
+
+    <p id="type"> Tree </p>
+    <img src="img/silver.jpg" style="width: 200px;">
+
+    <p>Family: N/A</p>