Narrowcasting code training sessions

Updated 3 months ago by Niels Mosselmans

HTML template

<div class="header">
<table width="100%">
<tr>
<td width="100%">
<table width="100%">
<td class="timeheader" style="width: 100px;">
${currentTime}
</td>
<td style="text-align: center;" class="title">
${title}
</td>
<td style="width: 100px;">
 
</td>
</table>
</td>
</tr>
</table>
<svg style="position:absolute; bottom:-1;" viewBox="0 0 1920 88">
<g transform="translate(0.000000, -568.000000)" fill="#ffffff">
<path d="M1920,568 L1920,656 C640.2632,656 0,656 0,656 C640,640 1280,627 1920,617 Z"></path>
</g>
</svg>
<img src="" class="logo" />
</div>

<div class="row">
<div class="col-md-12">
<table width="100%">
<tr>
<td width="100%" class="contentwrapper">
<table width="100%" class="schedule">
<thead>
<tr>
<th>Day</th>
<th>Hour</th>
<th>Team</th>
<th>Activity</th>
<th>Pitch</th>
<th>Dressing room</th>
</tr>
</thead>
<tbody>
<#list events as event>
<tr>
<td>${event.start?string["dd/MM"]} </td>
<td>${event.start?string["HH:mm"]}</td>
<td>${event.teamNames}</td>
<td>${event.title}</td>
<td>${event.pitch}</td>
<td>${event.dressingRoom}</td>
</tr>

<#else>
<tr>
<td colspan="4">Unfortunately, no activities are planned!</td>
</tr>
</#list>
</tbody>
</table>
</td>
</tr>
</table>
<div class="row">
<div class="col-md-12">
<p style="text-align:center">
<br>
</p>
</div>
</div>

</div>

Template CSS

.body {
margin: 0;
}

.contentwrapper {
padding: 15px;
}
.header {
position: relative;
margin-top: 2px;
height: 30%;
max-height: 30%;
display: inline-block;
width: 100%;
background: url("") 0 0 no-repeat;
background-size: cover;
color:#fff;
}
.timeheader, .title {
font-size: 40px;
padding-left: 25px;
height: 150px;
line-height: 50px;
color:#d3261a;
}
.logo {
position: absolute;
top: 10px;
right: 80px;
height: 75%;
}
#nprogress .bar{
background-color: #d3261a;
}


Questions about this article? Send an e-mail to support@prosoccerdata.com


Powered by HelpDocs (opens in a new tab)