report.html

<html>
  <head>
    <link href="https://tools-static.wmflabs.org/fontcdn/css?family=Roboto:300,400" rel="stylesheet">
    <style>
      body {
        margin: 0;
        background-color: rgb(249, 249, 249);
        color: rgba(0,0,0,.87);
        font: 14px Roboto, Arial, sans-serif;
      }
      .container {
        width: 1000px;
        margin: auto;
      }
      .header {
        background-color: rgb(33,150,243);
        color: #fff;
        padding: 0.2em 0;
      }
      .header h1 {
        font-weight: 300;
      }
      .report {
        background-color: rgb(255,255,255);
        border-radius: 2px;
        padding: 1em;
        box-shadow: 0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12);
        margin-top: 2em;
      }
      .box {
        margin-top: 10px;
        border: 2px solid #222;
        background-color: #222;
        width: 990px;
      }
      .caption {
        padding: 4px 10px 4px 10px;
      }
      .num {
        font-weight: bold;
        font-size: 2.4em;
        color: #eee;
        float: left;
        padding-right: 10px;
      }
      .num a {
        text-decoration: none;
        color: #eee;
      }
      .caption p {
        color: #fff;
        font-size: 13px;
      }
      .footer {
        border-top: 1px solid #dcdcdc;
        padding: 2em 0;
        width: 400px;
        margin: 2em auto;
        text-align: center;
      }
      table {
        border-collapse: collapse;
        width: 100%;
      }
      thead tr {
        text-align: left;
        font-weight: bold;
        border-bottom: 1px solid #222;
      }
      tr {
        border-bottom: 1px solid #dcdcdc;
        padding: 0.2em; 
      }
      td ul {
        list-style: none;
        padding: 0;
      }
    </style>
  </head>
  <body>

    <div class="header">
      <div class="container">
	<h1>Wiki Loves Monuments, Malta 2016</h1>
      </div>
    </div>

    <div class="container report">
      <h2>About</h2>
      <p>WLM Malta 2016 was Organized by <a href="#">LilyOfTheWest</a> and <a href="#">Nevborg</a> from September 1 - September 30, receiving 1105 submissions from 832 users on Wikimedia Commons.</p>
      <p>After <a href="#">three rounds of review</a>, the final jury <a href="#">selected ten winners</a> for the year.</p>
    </div>
    
    <div class="container winners">
      <h2>Winners</h2>
      <div class="box">
	<a name="entry-1"></a>
	<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/St_Thomas_Tower.jpg/990px-St_Thomas_Tower.jpg" class="entry-img">
	<div class="caption">
	  <div class="num">
	    <a href="#entry-1">1</a>
	  </div>
	  <p>Lorem ipsum</p>
	</div>
      </div>

      <div class="box">
	<a name="entry-2"></a>
	<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/38/Triq_il-Wiesg%C4%A7a_Tower_3.jpg/990px-Triq_il-Wiesg%C4%A7a_Tower_3.jpg" class="entry-img">
	<div class="caption">
	  <div class="num">
	    <a href="#entry-2">2</a>
	  </div>
	  <p>Lorem ipsum</p>
	</div>
      </div>

      <div class="box">
	<a name="entry-3"></a>
	<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/Birgu_City_of_the_Knights.jpg/990px-Birgu_City_of_the_Knights.jpg" class="entry-img">
	<div class="caption">
	  <div class="num">
	    <a href="#entry-3">3</a>
	  </div>
	  <p>Lorem ipsum</p>
	</div>
      </div>
    </div>

    <div class="container report">
      <h2>Rounds</h2>
      <table>
	<thead>
	  <tr>
	    <th>Name</th>
	    <th>Entries</th>
	    <th>Users</th>
	    <th>Date</th>
	    <th>Jurors</th>
	    <th>Voting type</th>
	    <th>Minimum to advance</th>
	  </tr>
	</thead>
	<tbody>
	  <tr>
	    <td>Round 1</td>
	    <td>1105</td>
	    <td>893</th>
	    <td>October 12 - October 19</td>
	    <td>5</td>
	    <td>yes/no</td>
	    <td>at least 2 yes votes from 3 jurors</td>
	  </tr>
	  <tr>
	    <td>Round 2</td>
	    <td>297</td>
	    <td>221</td>
	    <td>October 19 - October 24</td>
	    <td>5</td>
	    <td>5 stars</td>
	    <td>at least 3.5 star average from 3 jurors</td>
	  </tr>
	  <tr>
	    <td>Round 3</td>
	    <td>50</td>
	    <td>50</td>
	    <td>October 26 - October 29</td>
	    <td>5</td>
	    <td>Ranked</td>
	    <td>top 10</td>	    
	  </tr>
        </tbody>
      </table>

      <h2>Jury</h2>
      <p>Thank you to all of the jury members for WLM-Malta 2016, <a href="#">Smirkybec</a>, <a href="#">Raffaella Zammit</a>, <a href="#">Chrles coleiro</a>, <a href="#">Dielja</a>, <a href="#">Mariophotocity</a>.</p>

    </div>
    <div class="footer">
      <img src="https://raw.githubusercontent.com/hatnote/montage/master/client/app/images/logo_1.png" width="100px">
    </div>
  </body>
</html>