wired up home page adjust image sizes

client/src/components/cardHolder.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import Container from 'react-bootstrap/Container';
+import Row from 'react-bootstrap/Row';
+
+export default function CardHolder(props) {
+
+    return(
+        <Container fluid className="bg-dark">
+            <Row className="d-flex flex-row justify-content-center align-items-center">
+                {props.children}
+            </Row>
+        </Container>
+    );
+
+}

client/src/components/characterCard.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import Card from 'react-bootstrap/Card';
+
+export default function CharacterCard(props) {
+    
+    const characterName = props.character.fullName;
+    const image = new URL(props.character.image).pathname;
+    
+    return(
+
+        <Card style={{ width: '22rem' }} className='p-1 m-3'>
+            <Card.Img variant='top' src={image} width='100%' />
+            <Card.Body>
+                <Card.Title>{characterName}</Card.Title>
+                <Card.Text>
+                    Some quick example text to build on the card title and make up the
+                    bulk of the card's content.
+                </Card.Text>
+            </Card.Body>
+        </Card>
+
+    );
+}

client/src/components/greeting.js

@@ -8,13 +8,11 @@ export default function Greeting() {
     return (
         <Container>
 
-            <Row>
+            <Row className='py-5'>
 
                 <Col className='text-center'>
 
-                    <h1
-                        className='pt-5'
-                    >
+                    <h1>
                         The <span className='highlight'>Criminal</span> Minds API
                     </h1>