FACEPrep-ProGrad · Aanushkaaa · Mar 19, 2022
diff --git a/Anushka-project-superwars-css/doc/superwars-css.png b/Anushka-project-superwars-css/doc/superwars-css.png
diff --git a/Anushka-project-superwars-css/images/Vector.svg b/Anushka-project-superwars-css/images/Vector.svg
diff --git a/Anushka-project-superwars-css/images/super-1.png b/Anushka-project-superwars-css/images/super-1.png
diff --git a/Anushka-project-superwars-css/images/super-10.png b/Anushka-project-superwars-css/images/super-10.png
diff --git a/Anushka-project-superwars-css/images/super-11.png b/Anushka-project-superwars-css/images/super-11.png
diff --git a/Anushka-project-superwars-css/images/super-12.png b/Anushka-project-superwars-css/images/super-12.png
diff --git a/Anushka-project-superwars-css/images/super-13.png b/Anushka-project-superwars-css/images/super-13.png
diff --git a/Anushka-project-superwars-css/images/super-14.png b/Anushka-project-superwars-css/images/super-14.png
diff --git a/Anushka-project-superwars-css/images/super-15.png b/Anushka-project-superwars-css/images/super-15.png
diff --git a/Anushka-project-superwars-css/images/super-16.png b/Anushka-project-superwars-css/images/super-16.png
diff --git a/Anushka-project-superwars-css/images/super-17.png b/Anushka-project-superwars-css/images/super-17.png
diff --git a/Anushka-project-superwars-css/images/super-18.png b/Anushka-project-superwars-css/images/super-18.png
diff --git a/Anushka-project-superwars-css/images/super-19.png b/Anushka-project-superwars-css/images/super-19.png
diff --git a/Anushka-project-superwars-css/images/super-2.png b/Anushka-project-superwars-css/images/super-2.png
diff --git a/Anushka-project-superwars-css/images/super-20.png b/Anushka-project-superwars-css/images/super-20.png
diff --git a/Anushka-project-superwars-css/images/super-3.png b/Anushka-project-superwars-css/images/super-3.png
diff --git a/Anushka-project-superwars-css/images/super-4.png b/Anushka-project-superwars-css/images/super-4.png
diff --git a/Anushka-project-superwars-css/images/super-5.png b/Anushka-project-superwars-css/images/super-5.png
diff --git a/Anushka-project-superwars-css/images/super-6.png b/Anushka-project-superwars-css/images/super-6.png
diff --git a/Anushka-project-superwars-css/images/super-7.png b/Anushka-project-superwars-css/images/super-7.png
diff --git a/Anushka-project-superwars-css/images/super-8.png b/Anushka-project-superwars-css/images/super-8.png
diff --git a/Anushka-project-superwars-css/images/super-9.png b/Anushka-project-superwars-css/images/super-9.png
diff --git a/Anushka-project-superwars-css/index.html b/Anushka-project-superwars-css/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <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>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+<div class="wrapper">
+<div id="one">
+      <div class="heros">
+          <div class="hero"><img src="images/super-1.png"/>
+          </div>
+          <div class="Name">Spiderman</div>
+          <div class="Rank">12</div>
+          </div>
+    <div class="heros">
+          <div class="hero"><img src="images/super-2.png"/></div>
+          <div class="Name">Captain America</div>
+          <div class="Rank">7</div>
+    </div>
+</div>
+
+
+<div class="Scores">
+        <div>15</div>
+        <div>-</div>
+        <div>1</div>
+        </div>
+
+<div id="three">
+      <div class="villans">
+          <div class="villan"><img src="images/super-13.png"></div>
+          <div class="Name">Thor</div>
+          <div class="Rank">11</div>
+      </div>
+      <div class="villans">
+          <div class="villan"><img src="images/super-18.png"></div>
+          <div class="Name">Fem-thor</div>
+          <div class="Rank">14</div>
+      </div>
+</div>
+
+</div>
+</body>
+
+</html>
diff --git a/Anushka-project-superwars-css/readme.md b/Anushka-project-superwars-css/readme.md
@@ -0,0 +1,55 @@
+![Image description](https://i1.faceprep.in/ProGrad/face-logo-resized.png)
+
+# ProGrad Lab | Superwars Stage 1
+
+## Introduction
+
+Dustin and Lucus are best friends. They spend their weekends watching superhero series and playing superhero games. One Friday at school Mr.Hooper, their computer science faculty taught them HTML, CSS, and JavaScript. Dustin & Lucus realised they could build super cool super hero stuff using their knowledge. 
+
+The subsequent weekend, they decided to do it. Lucus and Dustin are now all set to build something super cool.
+
+Lucus always loves protagonists like most of us. But Dustin is quite crazy, he likes antagonists. So they decided to collect a bunch of their favorite Super Heroes and Super Villains names along with their pictures. Did they tell you about the game that they are gonna build? 
+
+Okay, let us explain. They are going to facilitate the ultimate war between Super Heroes and Super Villains. As they are new to these technologies, they need a **ProGrad** to help them build this game.
+
+## What should you do
+```
+Fork this repo
+Clone this repo
+Practice CSS - Flexbox, Grids
+```
+
+## How To Submit
+```
+Upon completion, run the following commands:
+
+git add .
+git commit -m "ProGrad ID"
+git push origin master
+
+And finally, create a pull request so your ProGrad Mentor (PM) can review your work.
+```
+
+### Progression : Build the arena & Have the players ready
+
+1. Create a html document `index.html`.
+2. Using `CSS Grid`, create 3 columns one each for Heroes, score and Villains in same order. Try to make it responsive and find the right size for each grid.
+3. Add players to the left and right grids. Use the middle grid to showcase the scores.
+4. Style the elements in `style.css`.
+
+### Conditions
+
+Your output should adhere to the following conditions.
+* Heroes should be on your left grid and Villains on the right grid.
+* Heroes should be justified to the right and Villains to the left.
+* Each player should have an image, name and strength (Number). The images of the super heroes are provided in the "images" folder.
+* Name and strength should be center aligned.
+* Make the players equally spaced apart.
+
+### Expected Output
+Your final output should look like this
+
+![Superwar](doc/superwars-css.png)
+
+
+Happy Coding ProGrad ❤️
diff --git a/Anushka-project-superwars-css/style.css b/Anushka-project-superwars-css/style.css
@@ -0,0 +1,37 @@
+
+.wrapper{
+  display: grid;
+  grid-template-columns: repeat(1,1fr 0.5fr 1fr);
+  grid-auto-rows: minmax(200px,auto);
+  grid-column-gap: 10px;
+
+}
+#one{
+  justify-content: flex-end;
+  display: flex;
+  text-align: center;
+
+}
+#three{
+  text-align: center;
+  justify-content: flex-start;
+  display: flex;
+
+}
+.heros,.villans{
+  margin: 5px;
+  border: 2px solid #D4D4D4;
+  border-radius: 10px;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
+.Scores{
+  display: flex;
+  text-align: center;
+  font-size: 40px;
+  font-weight: bold;
+  justify-content: center;
+
+}
+.Rank{
+  font-size: xx-large;
+}