From 20aed419cbe64ac8ae2e0109e21b6e7293fdadd2 Mon Sep 17 00:00:00 2001
From: Ubuntu <claytonwilson@protonmail.com>
Date: Mon, 22 Apr 2019 00:21:47 -0400
Subject: [PATCH] Add styles and layout html code for video item list

---
 index.php | 80 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 main.css  | 80 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 160 insertions(+)

diff --git a/index.php b/index.php
index cb55747..8648984 100755
--- a/index.php
+++ b/index.php
@@ -17,5 +17,85 @@
 
 
         <!-- This is where php code for loading preview videos below the titlebar will go -->
+
+        <div class="video-list-container">
+            <!-- Entry 1 -->
+            <div id="video-item">
+                <iframe width="640" height="360" src="https://www.youtube.com/embed/eCI8eAbq-4c" frameborder="0"
+                    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+                    allowfullscreen>
+                </iframe>
+
+                <a href="https://www.youtube.com/watch?v=eCI8eAbq-4c">Video Title Here</a>
+
+                <div id="players-characters">
+                    <table>
+                        <tr>
+                            <td class="header">Players</td>
+                            <td class="header">Characters</td>
+                        </tr>
+                        <tr>
+                            <td class="data" id="table-border">Player1</td>
+                            <td class="data" id="table-border">Character1</td>
+                        </tr>
+                        <tr>
+                            <td class="data" id="table-border">Player2</td>
+                            <td class="data" id="table-border">Character2</td>
+                        </tr>
+                    </table>
+                </div>
+
+                <div id="game-stage">
+                    <p>Game Name</p>
+                    <p>Stage Name</p>
+                </div>
+
+                <div id="description">
+                    <p>The description goes here.......</p>
+                </div>
+
+            </div>
+
+
+            <!-- Entry 2 -->
+
+            <div id="video-item">
+                <iframe width="640" height="360" src="https://www.youtube.com/embed/eCI8eAbq-4c" frameborder="0"
+                    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
+                </iframe>
+
+                <a href="https://www.youtube.com/watch?v=eCI8eAbq-4c">Video Title Here</a>
+
+                <div id="players-characters">
+                    <table>
+                        <tr>
+                            <td class="header">Players</td>
+                            <td class="header">Characters</td>
+                        </tr>
+                        <tr>
+                            <td class="data" id="table-border">Player1</td>
+                            <td class="data" id="table-border">Character1</td>
+                        </tr>
+                        <tr>
+                            <td class="data" id="table-border">Player2</td>
+                            <td class="data" id="table-border">Character2</td>
+                        </tr>
+                    </table>
+                </div>
+
+                <div id="game-stage">
+                    <p>Game Name</p>
+                    <p>Stage Name</p>
+                </div>
+
+                <div id="description">
+                    <p>The description goes here.......</p>
+                </div>
+
+            </div>
+            
+
+        </div>
+
     </body>
 </html>
diff --git a/main.css b/main.css
index 9f88848..d2d053c 100755
--- a/main.css
+++ b/main.css
@@ -64,4 +64,84 @@ form.upload-form {
     /* border: white solid 1px; */
     margin-bottom: 0px;
     margin-left: 20px;
+}
+
+
+/* Styles for Video element displays */
+
+div.video-list-container {
+    /* border: white solid 1px; */
+    margin-left: 15%;
+    margin-right: 15%;
+}
+
+#video-item {
+    /* border: white solid 1px; */
+    width: 100%;
+    height: 178.75px;
+    padding-top: 10px;
+    border-bottom: #727272 solid 2px;
+}
+
+iframe {
+    width: 300px;
+    height: 168.75px;
+    /* margin-top: 5px; */
+    margin-bottom: 10px;
+    float: left;
+}
+
+.video-list-container a {
+    color: #FF3D53;
+    /* border: white solid 1px; */
+    padding-left: 10px;
+    /* margin-top: 1000px !important; */
+    font-family: "Calibri";
+    /* position: relative; */
+}
+
+#players-characters {
+    /* border: white solid 1px; */
+    /* display: inline; */
+}
+
+#players-characters table {
+    color: #FF3D53;
+    font-size: 10pt;
+    font-family: "Calibri";
+    padding-left: 10px;
+    width: 20%;
+    margin-top: 10px;
+    /* border-right: #727272 solid 2px; */
+}
+
+table .data {
+    font-weight: lighter;
+}
+
+table .header {
+    font-weight: bolder !important;
+    padding-bottom: 10px;
+}
+
+#table-border {
+    border-bottom: #727272 solid 1px;
+}
+
+#game-stage {
+    color: #FF3D53;
+    float: right;
+    font-family: "Calibri";
+    /* border: white solid 1px; */
+    /* border-right: #727272 solid 2px; */
+    margin-top: -83px;
+    width: 20%;
+    text-align: left;
+}
+
+#description p {
+    /* border: white solid 1px; */
+    color: #FF3D53;
+    font-family: "Calibri";
+    margin-left: 310px;
 }
\ No newline at end of file