Initial Commit without API

src/App.js

@@ -1,25 +1,37 @@
-import logo from './logo.svg';
 import './App.css';
 
+const sqlCards = [{ "CardImg":"https://is4-ssl.mzstatic.com/image/thumb/Purple118/v4/91/43/40/9143401d-5824-5d0a-e559-4872b27602b9/source/256x256bb.jpg", "CardName": "Devouring Dragon", "ManaCost": 5, "Power": 5, "Toughness": 5, "CardDesc": "He does to people what Greg does to booty.", "CreatureType": "Dragon" },
+{ "CardImg":"https://spellbook.blob.core.windows.net/hodassets/defaultportraits/fighter_default_cultist_female_0_2.jpg", "CardName": "Dragon Worshipper", "ManaCost": 1, "Power": 1, "Toughness": 1, "CardDesc": "He spends his days praying to dragons.", "CreatureType": "Human" },
+{ "CardImg":"https://a.wattpad.com/useravatar/Angoleth.256.592295.jpg", "CardName": "Dragon Whelp", "ManaCost": 2, "Power": 3, "Toughness": 2, "CardDesc": "He will get there.", "CreatureType": "Dragon" }];
+
+function Card(props) {
+  props = props.props
+  return (
+    <div class="card">
+    <h4><b>{props.CardName}</b></h4>
+      <img src={props.CardImg !== undefined ? props.CardImg : "https://thiscatdoesnotexist.com/"} alt="Avatar" style={{ width: "100%" }} />
+      <div class="container">
+        <p>{props.CardDesc}</p>
+        <p style={{position: "absolute", bottom: -8, left: 8}}>Mana: {props.ManaCost}</p>
+        <p style={{position: "absolute", bottom: -8, left: 125}}>Power: {props.Power} </p>
+        <p style={{position: "absolute", bottom: -8, right: 8}}>Toughness: {props.Toughness}</p>
+      </div>
+    </div>
+  )
+}
+
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
+      <ul>
-        <img src={logo} className="App-logo" alt="logo" />
+        {sqlCards.map((props, i) => (
-        <p>
+          <li key={i}>
-          Edit <code>src/App.js</code> and save to reload.
+            <Card props={props}/>
-        </p>
+          </li>
-        <a
+        ))}
-          className="App-link"
+      </ul>
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
     </div>
   );
 }
 
-export default App;
+export default App;

src/index.css

@@ -11,3 +11,45 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+.card {
+  /* Add shadows to create the "card" effect */
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.137);
+  border-radius: 3%;
+  transition: 0.3s;
+  position: relative;
+  width: 300px;
+  height: 450px;
+  padding: 10px;
+  background-color: #a05236a6;
+  color: #FFFFFF;
+}
+
+/* On mouse-over, add a deeper shadow */
+.card:hover {
+  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.795);
+}
+
+/* Add some padding inside the card container */
+.container {
+  padding: 6px 16px;
+}
+
+ul {
+  list-style-type: none;
+  margin: 4;
+  padding: 20px;
+  overflow: hidden;
+    display: table;
+    width: 100%;
+    list-style: none;
+}
+
+li {
+  float: left;
+  display: table-cell;
+  text-align: center;
+  margin: 5px;
+}
+ul li div {
+  display: block;
+}