Skip to content
Open
1 change: 1 addition & 0 deletions _config.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
theme: jekyll-theme-minimal
38 changes: 36 additions & 2 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,46 @@
<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">
<link rel="stylesheet" type="text/css" 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>

<footer class="footer">Made with <img src="/images/Vector.svg"> by ProGrad</footer>

<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>
41 changes: 37 additions & 4 deletions style.css
Original file line number Diff line number Diff line change
@@ -1,4 +1,37 @@
.footer{
margin-left : 80px;
font-size : 18px;
}

.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;
}