added gallery structure

yet to add javascript, gallery currently doesnt work very well on monitors of odd sizes

Pages/Mainpage.css

@@ -80,9 +80,55 @@ h2, h3{
     grid-template-rows: repeat(10, 1fr);
     grid-template-columns: repeat(10, 1fr);
     height: 70vh;
+    width: 70vw;
 
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 10vh;
+    margin-bottom: 10vh;
+
+    background-color: #ffa500;
+    background: radial-gradient(#E39823 40%, #8D5001);
+    border-radius: 5px;
 }
 
+#programGalleryImage{ /*all images should be 700x700*/
+    grid-row: 2/11;
+    grid-column: 1/7;
+    border-bottom-left-radius: 5px;
+
+    width: 100%;
+    height: 100%;
+}
+
+#programGalleryTitle{
+    grid-row: 1;
+    grid-column: 1/11;
+
+    padding: 5px;
+
+    font-size: 5.4vh;
+}
+
+#programGalleryCaption{
+    grid-column: 7/11;
+    grid-row: 2/11;
+}
+
+#programGalleryLeftArrow{
+    display: inline;
+    float: left;
+    font-size: 7vw;
+}
+
+#programGalleryRightArrow{
+    display: inline;
+    float: right;
+    font-size: 7vw;
+}
+
+
+
 
 @media (orientation:portrait){
 

Pages/index.html

@@ -30,8 +30,12 @@
         <div style = "font-size: 60%;">click a project to find out more</div>
     </div>
     <div id = "programGallery">
-
+        <img src = "gallery\Cat tower defense\projectHeaderImage.png" id = "programGalleryImage">
+        <p id = "programGalleryTitle">Pog Brian</p>
+        <p id = "programGalleryCaption">This is pog brian, he is very polite but he is bullied alot. Please be nice to him</p>
     </div>
+    <p id = "programGalleryLeftArrow">◄</p>
+    <p id = "programGalleryRightArrow">►</p>
     <div id = "programGalleryButton" class = "orangeBorder textBox">programming projects</div>
     <div id = "artGalleryButton" class = " orangeBorder textBox">other projects</div>
 </body>