diff --git a/index.html b/index.html
index bf51bfc..523c00d 100644
--- a/index.html
+++ b/index.html
@@ -5,13 +5,55 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Super Wars</title>
+    <title>SuperWars-Stage1</title>
     <link rel="stylesheet" href="style.css">
 </head>
 
 <body>
+
+<!-- */first hero*/  -->
+    <div class="main">
+        <div class="hero">
+            <div id="container">
+                <img src="./images/super-1.png">
+                <p>Spiderman</p>
+                <h2>12</h2>
+            </div>
+
+     <!-- second hero -->
     
-    <footer class="footer">Made with <img src="/images/Vector.svg"> by ProGrad</footer>
-</body>
+     <div id="container">
+                <img src="./images/super-3.png">
+                <p>Wonder<br>Woman</p>
+                <h2>30</h2>
+            </div>
+        </div>
+
+
+        <div class="score">
+            <h1>5 - 0</h1>
+        </div>
 
-</html>
+               
+<!-- first villans -->
+     <div class="villains">
+            <div id="container">
+                <img src="./images/super-2.png">
+                <p>Captain<br>America</p>
+                <h2>50</h2>
+            </div>
+
+     <!--  second villi-->
+            <div id="container">
+                <img src="./images/super-4.png">
+                <p>Gem<br>Woman</p>
+                <h2>12</h2>
+            </div>
+
+        </div>
+
+    </div>
+        <footer class="footer">Made with <img src="./images/Vector.svg"> by ProGrad</footer>
+    </body>
+    
+    </html>
diff --git a/style.css b/style.css
index e31018b..01778d0 100644
--- a/style.css
+++ b/style.css
@@ -1,4 +1,43 @@
 .footer{
-  margin-left : 80px;
-  font-size : 18px;
+  display:flex;
+  flex-direction: row;
+  align-content: flex-end;
+  position: relative;
+  top: 650px;
+  margin-left: 20px;
+  font-size: 20px;
+  font-family:sans-serif;
+  font-style: normal;
+  
+  
+}
+.main{
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+
+.hero{
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  margin-left: 250px;
+  border-color: li;
+}
+
+.villains{
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  margin-right: 150px;
+}
+
+.score{
+  text-align: center;
+}
+
+#container{
+  width: 200px;
+  height: 300px;
+  border: 3px solid lightgray;
+  margin-right: 20px;
+  text-align: center;
 }
