add designs

index.html

@@ -106,6 +106,26 @@ <h2><i class="fab fa-wordpress-simple"></i> WordPress Sites</h2>
           </ul>
         </section>
       </main>
+      <designs>
+        <h2><i class="fas fa-folder-open"></i> Designs</h2>
+        <ul>
+          <li>
+            <a href="images/oktoberfest_ride_2024.jpg" target="_blank">
+              <img src="images/oktoberfest_ride_2024.jpg">
+            </a>
+          </li>
+          <li>
+            <a href="images/ceremony.jpg" target="_blank">
+              <img src="images/ceremony.jpg">
+            </a>
+          </li>
+          <li>
+            <a href="images/wedding_table_sign_18x24.jpg" target="_blank">
+              <img src="images/wedding_table_sign_18x24.jpg">
+            </a>
+          </li>
+        </ul>
+      </designs>
     </div>
     <script type="text/javascript">
       var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");

stylesheets/styles.css

@@ -14,6 +14,10 @@ body {
   margin: 0 1rem;
 }
 
+img {
+  max-width: 100%
+}
+
 hr {
   width: 65%;
   margin: 2rem auto;
@@ -51,14 +55,42 @@ main section {
   flex: 0 1 25%;
 }
 
+
+designs h2 {
+  text-align: center;
+}
+
+designs ul {
+  display: flex;
+  flex-wrap: wrap;
+  list-style-type: none;
+  justify-content: space-between
+}
+
 @media (max-width: 1300px) {
   main section {
     flex: 0 1 50%;
   }
 }
 
+designs ul li {
+  flex: 0 1 30%
+}
+
+@media (max-width: 1180px) {
+  designs ul li {
+    flex: 0 1 45%
+  }
+}
+
 @media (max-width: 820px) {
   main section {
     flex: 0 1 100%;
   }
-}
+
+  designs ul li {
+    flex: 0 1 75%;
+    padding: 1.5rem 0 0;
+    margin: auto
+  }
+}