efoneon · efoneon · Aug 26, 2023 · Aug 26, 2023 · Aug 27, 2023 · Aug 27, 2023
diff --git a/index.html b/index.html
@@ -1,21 +1,37 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Zelda Info page</title>
-  <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-  <header>
-  <h1>Welcome</h1>
-  <div class="align-center">
-    to the Zelda Info page
-  </div>
-  <div class="align-center">where <strong>YOU</strong> can know more about your favorite Zelda characters.</div>
-  <div class="align-center">
-    <button>Get Started</button>
-  </div>
-  </header>
-</body>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="z.png" />
+    <title>Zelda Info page</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <h1>Welcome</h1>
+      <div class="align-center-2">to the Zelda Info page</div>
+      <div class="align-center-2">
+        where <strong>YOU</strong> can know more about your favorite Zelda
+        characters.
+      </div>
+      <div class="align-center-2">
+        <button>Get Started</button>
+      </div>
+    </header>
+    <section>
+      <h1>About</h1>
+      <p>
+        This is a crazy cool site that will let you click on the different
+        options of Zelda characters.<br />
+        <strong>NOTE: </strong>We did not add <em>ALL</em> Zelda characters to
+        let you know!<br />
+        "Anyway, my name is Aaron." <em>-Aaron Jr</em> "And my name is Aaron too
+        😉" <em>-Aaron Sr</em><br />
+        Hope you enjoy your visit!
+      </p>
+    </section>
+    <ul id="character-list"></ul>
+    <script src="main.js"></script>
+  </body>
 </html>
diff --git a/main.js b/main.js
@@ -0,0 +1,57 @@
+/**
+ * Here we're creating an array of strings that will contain all the image file
+ * names we have. As we add more images to the `character-pics` folder, we will
+ * add those file names here as well.
+ *
+ * We're using the `.map` function to iterate over the array and prepend the
+ * folder name that the files are located in so we don't have to manually type
+ * them out.
+ *
+ * Example:
+ *
+ * BEFORE - 'link-zelda-info.png'
+ * AFTER  - './character-pics/link-zelda-info.png'
+ *
+ * Notice how we start with a string of just the file name but we transform it
+ * to a string with the file path (folder name + file name).
+ */
+const images = [
+  'ganon-zelda-info.png',
+  'hestu-zelda-info.png',
+  'impa-zelda-info.png',
+  'link-zelda-info.png',
+  'zelda-zelda-info.png',
+].map(fileName => `./character-pics/${fileName}`)
+
+const characterList = document.querySelector('#character-list')
+
+/**
+ * Here we're using another built-in array method in JavaScript - `.forEach` -
+ * to iterate through our images array and do something for each item in the
+ * array. This is the type of stuff that can be done with a for-loop, but it's
+ * much cleaner to use built-in JavaScript array methods if you can.
+ */
+images.forEach(src => {
+  /**
+   * Create 2 DOM elements:
+   * 1. An <li>, which is the list item
+   * 2. An <img> which will display the image
+   */
+  const li = document.createElement('li')
+  const img = document.createElement('img')
+
+  // Set the image "src" property to the photo's file path in our system.
+  img.src = src
+
+  // Add a class name to the list item so we can target it with CSS later.
+  li.classList.add('character-item')
+
+  // Append the image to the list item - <li><img src="..." /></li>
+  li.appendChild(img)
+
+  /**
+   * Append the list item to the unordered list in the DOM.
+   * This will finally show the items on the screen!
+   */
+  characterList.appendChild(li)
+})
diff --git a/styles.css b/styles.css
@@ -1,23 +1,36 @@
-h1 {
+header h1 {
   text-align: center;
   font-size: 100px;
-  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
+    'Lucida Sans', Arial, sans-serif;
   text-shadow: 20px 10px 5px lightgrey;
 }
 
 .align-center {
-  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
+    'Lucida Sans', Arial, sans-serif;
   text-align: center;
   font-style: italic;
-  text-shadow: 20px 10px 5px grey;
+  text-shadow: 20px 10px 5px white;
   padding-bottom: 10px;
 }
 
+.align-center-2 {
+  text-align: center;
+  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
+    'Lucida Sans', Arial, sans-serif;
+  padding: 10px 0px 10px 0px;
+}
+
+header {
+  border-bottom: 20px solid white;
+}
+
 header button {
   background-color: black;
   color: white;
   border-radius: 20px;
-  transition: all .5s;
+  transition: all 0.5s;
   background-color: black;
   color: white;
   padding-right: 50px;
@@ -26,5 +39,46 @@ header button {
 
 button:hover {
   background-color: white;
-  color: black
+  color: black;
+}
+
+#character-list {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 400px;
+}
+
+.character-item {
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.character-item img {
+  max-width: 100%;
+}
+
+section h1 {
+  text-align: center;
+  color: darkblue;
+  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
+    'Lucida Sans', Arial, sans-serif;
+  font-size: 30px;
+}
+
+body {
+  background-color: black;
+  color: white;
+}
+
+section p {
+  text-shadow: 20px 10px 5px white;
+  text-align: center;
+  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
+    'Lucida Sans', Arial, sans-serif;
 }
diff --git a/z.png b/z.png