diff --git a/Anushka-project-superwars-css/doc/superwars-css.png b/Anushka-project-superwars-css/doc/superwars-css.png new file mode 100644 index 0000000..d5552b8 Binary files /dev/null and b/Anushka-project-superwars-css/doc/superwars-css.png differ diff --git a/Anushka-project-superwars-css/images/Vector.svg b/Anushka-project-superwars-css/images/Vector.svg new file mode 100644 index 0000000..41ef845 --- /dev/null +++ b/Anushka-project-superwars-css/images/Vector.svg @@ -0,0 +1,3 @@ + + + diff --git a/Anushka-project-superwars-css/images/super-1.png b/Anushka-project-superwars-css/images/super-1.png new file mode 100644 index 0000000..ac2531a Binary files /dev/null and b/Anushka-project-superwars-css/images/super-1.png differ diff --git a/Anushka-project-superwars-css/images/super-10.png b/Anushka-project-superwars-css/images/super-10.png new file mode 100644 index 0000000..a880dc8 Binary files /dev/null and b/Anushka-project-superwars-css/images/super-10.png differ diff --git a/Anushka-project-superwars-css/images/super-11.png b/Anushka-project-superwars-css/images/super-11.png new file mode 100644 index 0000000..b9d8222 Binary files /dev/null and b/Anushka-project-superwars-css/images/super-11.png differ diff --git a/Anushka-project-superwars-css/images/super-12.png b/Anushka-project-superwars-css/images/super-12.png new file mode 100644 index 0000000..9dc4be9 Binary files /dev/null and b/Anushka-project-superwars-css/images/super-12.png differ diff --git a/Anushka-project-superwars-css/images/super-13.png b/Anushka-project-superwars-css/images/super-13.png new file mode 100644 index 0000000..3b6268e Binary files /dev/null and b/Anushka-project-superwars-css/images/super-13.png differ diff --git a/Anushka-project-superwars-css/images/super-14.png b/Anushka-project-superwars-css/images/super-14.png new file mode 100644 index 0000000..6ac1c27 Binary files /dev/null and b/Anushka-project-superwars-css/images/super-14.png differ diff --git a/Anushka-project-superwars-css/images/super-15.png b/Anushka-project-superwars-css/images/super-15.png new file mode 100644 index 0000000..bb428c1 Binary files /dev/null and b/Anushka-project-superwars-css/images/super-15.png differ diff --git a/Anushka-project-superwars-css/images/super-16.png b/Anushka-project-superwars-css/images/super-16.png new file mode 100644 index 0000000..d059222 Binary files /dev/null and b/Anushka-project-superwars-css/images/super-16.png differ diff --git a/Anushka-project-superwars-css/images/super-17.png b/Anushka-project-superwars-css/images/super-17.png new file mode 100644 index 0000000..6746e26 Binary files /dev/null and b/Anushka-project-superwars-css/images/super-17.png differ diff --git a/Anushka-project-superwars-css/images/super-18.png b/Anushka-project-superwars-css/images/super-18.png new file mode 100644 index 0000000..c8d398d Binary files /dev/null and b/Anushka-project-superwars-css/images/super-18.png differ diff --git a/Anushka-project-superwars-css/images/super-19.png b/Anushka-project-superwars-css/images/super-19.png new file mode 100644 index 0000000..4b49faf Binary files /dev/null and b/Anushka-project-superwars-css/images/super-19.png differ diff --git a/Anushka-project-superwars-css/images/super-2.png b/Anushka-project-superwars-css/images/super-2.png new file mode 100644 index 0000000..a96daea Binary files /dev/null and b/Anushka-project-superwars-css/images/super-2.png differ diff --git a/Anushka-project-superwars-css/images/super-20.png b/Anushka-project-superwars-css/images/super-20.png new file mode 100644 index 0000000..6a4c0c9 Binary files /dev/null and b/Anushka-project-superwars-css/images/super-20.png differ diff --git a/Anushka-project-superwars-css/images/super-3.png b/Anushka-project-superwars-css/images/super-3.png new file mode 100644 index 0000000..bf0e849 Binary files /dev/null and b/Anushka-project-superwars-css/images/super-3.png differ diff --git a/Anushka-project-superwars-css/images/super-4.png b/Anushka-project-superwars-css/images/super-4.png new file mode 100644 index 0000000..5c61bb6 Binary files /dev/null and b/Anushka-project-superwars-css/images/super-4.png differ diff --git a/Anushka-project-superwars-css/images/super-5.png b/Anushka-project-superwars-css/images/super-5.png new file mode 100644 index 0000000..dc1df66 Binary files /dev/null and b/Anushka-project-superwars-css/images/super-5.png differ diff --git a/Anushka-project-superwars-css/images/super-6.png b/Anushka-project-superwars-css/images/super-6.png new file mode 100644 index 0000000..8a17efb Binary files /dev/null and b/Anushka-project-superwars-css/images/super-6.png differ diff --git a/Anushka-project-superwars-css/images/super-7.png b/Anushka-project-superwars-css/images/super-7.png new file mode 100644 index 0000000..56c36be Binary files /dev/null and b/Anushka-project-superwars-css/images/super-7.png differ diff --git a/Anushka-project-superwars-css/images/super-8.png b/Anushka-project-superwars-css/images/super-8.png new file mode 100644 index 0000000..8fe6fb7 Binary files /dev/null and b/Anushka-project-superwars-css/images/super-8.png differ diff --git a/Anushka-project-superwars-css/images/super-9.png b/Anushka-project-superwars-css/images/super-9.png new file mode 100644 index 0000000..57a6fc2 Binary files /dev/null and b/Anushka-project-superwars-css/images/super-9.png differ diff --git a/Anushka-project-superwars-css/index.html b/Anushka-project-superwars-css/index.html new file mode 100644 index 0000000..5784948 --- /dev/null +++ b/Anushka-project-superwars-css/index.html @@ -0,0 +1,51 @@ + + + + + + + + Super Wars + + + + +
+
+
+
+
+
Spiderman
+
12
+
+
+
+
Captain America
+
7
+
+
+ + +
+
15
+
-
+
1
+
+ +
+
+
+
Thor
+
11
+
+
+
+
Fem-thor
+
14
+
+
+ +
+ + + diff --git a/Anushka-project-superwars-css/readme.md b/Anushka-project-superwars-css/readme.md new file mode 100644 index 0000000..adb7f06 --- /dev/null +++ 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 new file mode 100644 index 0000000..94116f1 --- /dev/null +++ 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; +}