almost finished

09/photos.html

@@ -63,13 +63,50 @@
     		</div>
     		<div class="vl"></div>
 			<div id="left">
-				<section id="pdf">
-					<iframe src="./ViewerJS/?zoom=page-width#../media/pdfs/mc_reader.pdf" alt="pdf" width="100%" height="100%">
+				<section id="photos">
+					<div class="row">
+					  <div class="column">
+					    <img src="./media/imgs/01-min.jpg">
+					    <img src="./media/imgs/02-min.jpg">
+					    <img src="./media/imgs/03-min.jpg">
+					    <img src="./media/imgs/04-min.jpg">
+					    <img src="./media/imgs/05-min.jpg">
+					    <img src="./media/imgs/06-min.jpg">
+					    <img src="./media/imgs/07-min.jpg">
+					    <img src="./media/imgs/08-min.jpg">
+					    <img src="./media/imgs/09-min.jpg">
+					    <img src="./media/imgs/10-min.jpg">
+					    <img src="./media/imgs/11-min.jpg">
+					    <img src="./media/imgs/12-min.jpg">
+					    <img src="./media/imgs/13-min.jpg">
+					    <img src="./media/imgs/14-min.jpg">
+					    <img src="./media/imgs/15-min.jpg">
+					    <img src="./media/imgs/16-min.jpg">
+					    <img src="./media/imgs/17-min.jpg">
+					    <img src="./media/imgs/18-min.jpg">
+					  </div>
+					</div>
 				</section>
     		</div>
 		</article>
 
 	</main>
+<script>
+	// Get the elements with class="column"
+	var elements = document.getElementsByClassName("column");
 
+	// Declare a "loop" variable
+	var i;
+
+	// Full-width images
+	function one() {
+	  for (i = 0; i < elements.length; i++) {
+	    elements[i].style.flex = "100%";
+	  }
+	}
+
+	one();
+
+</script>
 </body>
 </html>

09/style.css

@@ -18,6 +18,8 @@ main {
   margin: auto;
 }
 
+/* HEADER */
+
 header {
   z-index: 101;
   background-color: white;
@@ -41,6 +43,7 @@ article {
 
 nav {
   background-color: white;
+  margin-top: -5px;
 }
 
 ul {
@@ -52,6 +55,8 @@ ul {
   line-height: 19px;
 }
 
+/* MAIN CONTENT */
+
 #left {
   float: left;
   width: 50%;
@@ -99,6 +104,31 @@ section {
   font-style: italic;
 }
 
+/* IMGS */
+
+.row {
+  display: -ms-flexbox; /* IE 10 */
+  display: flex;
+  -ms-flex-wrap: wrap; /* IE 10 */
+  flex-wrap: wrap;
+  padding: 0 4px;
+}
+
+/* Create two equal columns that sits next to each other */
+.column {
+  -ms-flex: 50%; /* IE 10 */
+  flex: 50%;
+  padding: 0 4px;
+}
+
+.column img {
+  margin-top: 8px;
+  vertical-align: middle;
+}
+
+
+/* RESPONSIVE */
+
 @media only screen and (max-width: 600px) {
 
   header {