diff --git a/index.html b/index.html
index bf51bfc..b9a111b 100644
--- a/index.html
+++ b/index.html
@@ -10,6 +10,24 @@
 </head>
 
 <body>
+    <div class="container">
+        <div class="grid"><img src="C:\Users\dell\prograd\project-11-superwars-css\images\super-1.png"><br>
+        <p>Spiderman<br><h1>12</h1></p></div>
+
+        <div class="grid"><img src="C:\Users\dell\prograd\project-11-superwars-css\images\super-3.png"><br><p>Wonder Women
+            <br><h1>30</h1>
+        </p>
+        </div>
+        <div id="main"><h1>5 - 0</h1></div>
+
+        <div class="grid"><img src="C:\Users\dell\prograd\project-11-superwars-css\images\super-2.png"><br><p>Captain America<br>
+            <h1>50</h1></p>
+        </div>
+
+        <div class="grid"><img src="C:\Users\dell\prograd\project-11-superwars-css\images\super-4.png"><br><p>Gem Women<br>
+            <h1>12</h1></p>
+        </div>
+    </div>
     
     <footer class="footer">Made with <img src="/images/Vector.svg"> by ProGrad</footer>
 </body>
diff --git a/style.css b/style.css
index e31018b..3186c7b 100644
--- a/style.css
+++ b/style.css
@@ -2,3 +2,21 @@
   margin-left : 80px;
   font-size : 18px;
 }
+.container{
+  display: grid;
+  
+  grid-template-columns: auto auto auto auto auto;
+  grid-template: max-content;
+  grid-gap:20px;
+  padding: 10%;
+}
+.grid{
+  border: 2px solid black;
+  text-align: center;
+  border-radius: 2pt;
+
+}
+#main{
+  text-align: center;
+}
+
