ClaytonWWilson/FightHub
1
0
Fork 0
mirror of https://github.com/ClaytonWWilson/FightHub.git synced 2025-12-18 08:08:47 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add styles and layout html code for video item list

Browse Source
This commit is contained in:
Ubuntu 2019-04-22 00:21:47 -04:00
parent c70626cebe
commit 20aed419cb
2 changed files with 160 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
index.php
View File

@ -17,5 +17,85 @@
<!-- This is where php code for loading preview videos below the titlebar will go --> <!-- 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> </body>
</html> </html>

80
main.css
View File

@ -65,3 +65,83 @@ form.upload-form {
margin-bottom: 0px; margin-bottom: 0px;
margin-left: 20px; 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;
}