From d1239f34da9df256baa6d672312b4b017bb4ec98 Mon Sep 17 00:00:00 2001
From: Nathan King <nathanking3590@gmail.com>
Date: Tue, 6 Jun 2023 14:15:16 +0100
Subject: [PATCH] add character grid

---
 index.html | 36 +++++++++++++++++++++++++++++++++++-
 style.css  | 32 ++++++++++++++++++++++++++++++++
 2 files changed, 67 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index be051a4..4136a66 100644
--- a/index.html
+++ b/index.html
@@ -16,6 +16,40 @@
         <h1>Quote from a Bot</h1>
         <p>Select a character and see<br>what's on their mind!</p>
     </header>
-    
+
+    <main>
+        <div class="container">
+            <div class="characters">
+                <div class="character" data-character="Ash Ketchum">
+                    <img src="./images/ash-ketchum.png" />
+                </div>
+                <div class="character" data-character="Batman">
+                    <img src="./images/batman.png" />
+                </div>
+                <div class="character" data-character="Homer Simpson">
+                    <img src="./images/homer-simpson.png" />
+                </div>
+                <div class="character" data-character="Hermione Granger">
+                    <img src="./images/hermione-granger.png" />
+                </div>
+                <div class="character" data-character="Gandalf">
+                    <img src="./images/gandalf.png" />
+                </div>
+                <div class="character" data-character="Harley Quinn">
+                    <img src="./images/harley-quinn.png" />
+                </div>
+                <div class="character" data-character="Shrek">
+                    <img src="./images/shrek.png" />
+                </div>
+                <div class="character" data-character="Barbie">
+                    <img src="./images/barbie.png" />
+                </div>
+                <div class="character" data-character="Minion">
+                    <img src="./images/minion.png" />
+                </div>
+            </div>
+        </div>
+    </main>
+
 </body>
 </html>
diff --git a/style.css b/style.css
index e2aefd1..c479f89 100644
--- a/style.css
+++ b/style.css
@@ -21,4 +21,36 @@ header {
     background-color: #E9F45B;
     padding: 32px;
     text-align: center;
+}
+
+main {
+    text-align: center;
+}
+
+.characters {
+    display: grid;
+    grid-template-columns: repeat(4, 112px);
+    justify-content: center;
+    gap: 10px;
+    padding: 40px 4px;    
+}
+
+.character {
+    width: 112px;
+    height: 112px;
+    overflow: hidden;
+    background-color: #a1d2ff;
+    font-size: 5rem;
+    border: 2px solid #1212b2;
+    border-radius: 50%;
+    cursor: pointer;
+}
+
+.character img {
+    max-width: 100%;
+}
+
+.container {
+    max-width: 540px;
+    margin: 0 auto;
 }
\ No newline at end of file