diff --git a/index.html b/index.html
index bf51bfc..e938de9 100644
--- a/index.html
+++ b/index.html
@@ -10,8 +10,43 @@
 </head>
 
 <body>
-    
-    <footer class="footer">Made with <img src="/images/Vector.svg"> by ProGrad</footer>
+    <div class="grid-container">
+        <div id="grid-item-1" class="grid-item">
+            <ul>
+                <li> <img src="./images/super-1.png"></li>
+                <li>Spiderman</li>
+                <li class="items-number">12</li>
+            </ul>
+        </div>
+        <div id="grid-item-2" class="grid-item">
+            <ul>
+                <li> <img src="./images/super-3.png"></li>
+                <li>Wonder</li>
+                <li>Women</li>
+                <li class="items-number">30</li>
+            </ul>
+        </div>
+        <div id="grid-item-3" class="grid-item">
+            <li class="items-number">5 - 0</li>
+        </div>
+        <div id="grid-item-4" class="grid-item">
+            <ul>
+                <li> <img src="./images/super-2.png"></li>
+                <li>Captain</li>
+                <li>America</li>
+                <li class="items-number">50</li>
+            </ul>
+        </div>
+        <div id="grid-item-5" class="grid-item">
+            <ul>
+                <li> <img src="./images/super-4.png"></li>
+                <li>Gem Woman</li>
+                <li class="items-number">12</li>
+            </ul>
+        </div>
+
+    </div>
+    <footer class="footer">Made with <img src="./images/Vector.svg"> by ProGrad</footer>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/style.css b/style.css
index e31018b..b5c2c9a 100644
--- a/style.css
+++ b/style.css
@@ -1,4 +1,49 @@
-.footer{
-  margin-left : 80px;
-  font-size : 18px;
+body {
+  font-size: 15px;
+  font-family: 'Lora', serif;
 }
+
+.grid-container {
+  /* display: grid;
+  grid-template-columns: repeat(1fr, 5) ;
+  grid-column-gap: 50px;
+  grid-row-gap: 50px;
+  justify-content: stretch; */
+  display: grid;
+  grid-template-columns: auto auto auto auto auto auto;
+  grid-template-rows: 100px;
+  grid-gap: 15px;
+  background-color: white;
+  padding: 20px;
+  align-items: stretch;
+  height: 1000px;
+  justify-content: center;
+}
+
+.grid-item {
+  background-color: rgba(255, 255, 255, 0.8);
+  text-align: center;
+  border: 2px solid lightgray;
+  border-radius: 10px;
+  padding-right: 20px;
+  padding-top: 8px;
+  padding-left: -80%;
+  height: 280px;
+  justify-content: center;
+  align-items: center;
+}
+
+.grid-item li {
+  list-style: none;
+}
+
+#grid-item-3 {
+  padding: 1em 8em 0em 8em;
+  border: none;
+}
+
+li.items-number {
+  font-size: 300%;
+  font-weight: 300;
+  height: 2em;
+}
\ No newline at end of file
