add screens + iterate html

README.md

@@ -9,7 +9,11 @@ In case you have docker setup on your system, you can make use of it by just exe
 docker-compose up -d
 ````
 
-and then opening up localhost:9988 in your browser.
+and then opening up localhost:9988 in your browser to see something like shown below.
 
 Best,
 daniel
+
+![Screenshot 01](/screens/screen01.png?raw=true "Screenshot 01")
+![Screenshot 02](/screens/screen02.png?raw=true "Screenshot 02")
+![Screenshot 03](/screens/screen03.png?raw=true "Screenshot 03")

index.php

@@ -14,43 +14,40 @@
               $api = new FootballData(); 
         ?>
         <section class="section">
-            <div class="container">
-                <h1 class="title">
-                    Showcasing some library functions.
-                </h1>
-            </div>
-        </div>
+            <h1 class="title">
+                Showcasing some library functions.
+            </h1>
+        </section>
+
         <section class="section">
-            <div class="container">
-                <h4 class="title is-4">
-                    Matches for the 2nd matchday of the Premiere League
-                </h4>
-                <table class="table is-striped">
-                    <tr>
-                        <th>HomeTeam</th>
-                        <th></th>
-                        <th>AwayTeam</th>
-                        <th colspan="3">Result</th>
-                    </tr>
-                    <?php foreach ($api->findMatchesByCompetitionAndMatchday(2021, 2)->matches as $match) { ?>
-                    <tr>
-                        <td><?php echo $match->homeTeam->name; ?></td>
-                        <td>-</td>
-                        <td><?php echo $match->awayTeam->name; ?></td>
-                        <td><?php echo $match->score->fullTime->home;  ?></td>
-                        <td>:</td>
-                        <td><?php echo $match->score->fullTime->away;  ?></td>
-                    </tr>
-                    <?php } ?>
-                </table>
-            </div>
+            <h4 class="title is-4">
+                Matches for the 2nd matchday of the Premiere League
+            </h4>
+            <table class="table is-striped is-narrow">
+                <tr>
+                    <th>HomeTeam</th>
+                    <th></th>
+                    <th>AwayTeam</th>
+                    <th colspan="3">Result</th>
+                </tr>
+                <?php foreach ($api->findMatchesByCompetitionAndMatchday(2021, 2)->matches as $match) { ?>
+                <tr>
+                    <td><?php echo $match->homeTeam->name; ?></td>
+                    <td>-</td>
+                    <td><?php echo $match->awayTeam->name; ?></td>
+                    <td><?php echo $match->score->fullTime->home;  ?></td>
+                    <td>:</td>
+                    <td><?php echo $match->score->fullTime->away;  ?></td>
+                </tr>
+                <?php } ?>
+            </table>
         </section>
 
         <section class="section">
             <h4 class="title is-4">
                 Current standing of the Primera Division
             </h4>
-            <table class="table is-striped">
+            <table class="table is-striped is-narrow">
                 <tr>
                 <th>Position</th>
                 <th>TeamName</th>
@@ -86,7 +83,7 @@
             <h4 class="title is-4">
                 Upcoming matches within the next 3 days
             </h4>
-            <table class="table is-striped">
+            <table class="table is-striped is-narrow">
                 <tr>
                     <th>HomeTeam</th>
                     <th></th>
@@ -115,7 +112,7 @@
             <h4 class="title is-4">
                 This seasons' home matches of Newcastle United
             </h4>
-            <table class="table table-striped">
+            <table class="table is-striped is-narrow">
                 <tr>
                     <th>HomeTeam</th>
                     <th></th>
@@ -145,7 +142,7 @@
             <h4 class="title is-4">
                 Players of <?php echo $team->name; ?>
             </h4>
-            <table class="table table-striped">
+            <table class="table is-striped is-narrow">
                 <tr>
                     <th>Name</th>
                     <th>Position</th>