rudi/MTGClone-React
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Slimmed cards down, and made their layout relative

Browse Source
This commit is contained in:
Gregory Rudolph
2020-11-21 10:53:48 -05:00
parent 68401d9a99
commit 892d9945cd
2 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.js
View File

@ -11,9 +11,9 @@ function Card(data) {
<img src={data.CardImg !== undefined ? data.CardImg : "https://thiscatdoesnotexist.com/"} alt="Avatar" style={{ width: "100%" }} /> <img src={data.CardImg !== undefined ? data.CardImg : "https://thiscatdoesnotexist.com/"} alt="Avatar" style={{ width: "100%" }} />
<div class="container"> <div class="container">
<p>{data.CardDesc}</p> <p>{data.CardDesc}</p>
<p style={{position: "absolute", bottom: -8, left: 8}}>Mana: {data.ManaCost}</p> <p style={{position: "absolute", bottom: -8, left: "2%"}}>Mana: {data.ManaCost}</p>
<p style={{position: "absolute", bottom: -8, left: 125}}>Power: {data.Power} </p> <p style={{position: "absolute", bottom: -8, left: "35%"}}>Power: {data.Power} </p>
<p style={{position: "absolute", bottom: -8, right: 8}}>Toughness: {data.Toughness}</p> <p style={{position: "absolute", bottom: -8, right: "2%"}}>Toughness: {data.Toughness}</p>
</div> </div>
</div> </div>
) )

4
src/index.css
View File

@ -17,8 +17,8 @@ code {
border-radius: 3%; border-radius: 3%;
transition: 0.3s; transition: 0.3s;
position: relative; position: relative;
width: 300px; width: 250px;
height: 450px; height: 420px;
padding: 10px; padding: 10px;
background-color: #a05236a6; background-color: #a05236a6;
color: #FFFFFF; color: #FFFFFF;