Add images to website links

styles/index.css

@@ -73,7 +73,7 @@ section {
             box-sizing: border-box;
 }
 
-.albums-list {
+.albums-list, .website-list {
 	display: flex;
 	flex-flow: row wrap;
 	justify-content: space-between;
@@ -86,6 +86,27 @@ iframe {
 	width: 400px;
 }
 
+.website-list__item {
+    display: flex;
+    flex-direction: column;
+    max-width: 400px;
+    margin-bottom: 1em;
+    font-weight: bold;
+}
+.website-list__item img {
+    border: 1px solid #c1c2c0;
+}
+
+@media all and (max-width: 1000px) {
+    .website-list {
+        justify-content: space-around;
+    }
+    .website-list__item {
+        max-width: 100%;
+        margin-bottom: 2em;
+    }
+}
+
 
 header,
 footer {
@@ -106,6 +127,8 @@ footer {
 	main h1 {
 		padding-left: 1rem;
 	}
-	section {
+	.website-list__item {
-	}
+        max-width: 100%;
+        margin-bottom: 2em;
+    }
 }

websites/index.html

@@ -34,16 +34,40 @@
 		</section>
 		<section>
 			<h3>My Work</h3>
-			<ul>
+			<div class="website-list">
-				<li><a href="https://aylafavati.com/">Ayla Favati</a></li>
+				<a class="website-list__item" href="https://aylafavati.com/">
-				<li><a href="https://jhcillustration.com/">JHC Illustration</a></li>
+					Ayla Favati
-				<li><a href="https://jjayberthumemusic.com/">JJay Berthume Music</a></li>
+					<img src="/images/website_favati.png">
-				<li><a href="http://wallyworks.net/">Wallyworks Construction</a></li>
+				</a>
-				<li><a href="https://owlsprit.nathanjchapman.com/">Owl Sprit Cafe</a></li>
+				<a class="website-list__item" href="https://jhcillustration.com/">
-				<li><a href="https://bltc.nathanjchapman.com/">Better Living Coffee</a></li>
+					JHC Illustration
-				<li><a href="http://ptdefense.com/">PT Defense</a></li>
+					<img src="/images/website_jhc.png">
-				<li><a href="http://jac.nathanjchapman.com/">JAC Defenders</a></li>
+				</a>
-			</ul>
+				<a class="website-list__item" href="https://jjayberthumemusic.com/">
+					JJay Berthume Music
+					<img src="/images/website_berthume.png">
+				</a>
+				<a class="website-list__item" href="http://wallyworks.net/">
+					Wallyworks Construction
+					<img src="/images/website_wallyworks.png">
+				</a>
+				<a class="website-list__item" href="https://owlsprit.nathanjchapman.com/">
+					Owl Sprit Cafe
+					<img src="/images/website_owlsprit.png">
+				</a>
+				<a class="website-list__item" href="https://bltc.nathanjchapman.com/">
+					Better Living Coffee
+					<img src="/images/website_bltc.png">
+				</a>
+				<a class="website-list__item" href="http://ptdefense.com/">
+					PT Defense
+					<img src="/images/website_ptdefense.png">
+				</a>
+				<a class="website-list__item" href="http://jac.nathanjchapman.com/">
+					JAC Defenders
+					<img src="/images/website_jac.png">
+				</a>
+			</div>
 		</section>
 	</article>
 </main>