<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

<a href="https://dribbble.com/shots/3264412-Leaderboard" target="_blank">
  <h3>Leaderboard</h3>
  <div class="source">Dribbble: Manuel Richie</div>
</a>

  <div class="artboard">
    <div class="artboard-accent">
      <svg xmlns="http://www.w3.org/2000/svg" width="450" height="582" viewBox="0 0 450 582">
        <path fill="#D7EEF2" fill-rule="evenodd" d="M165.513814,153.165958 C119.595139,123.684677 108.076689,150.935127 119.077252,215.329925 C100.724748,206.718382 92.8680467,184.121041 95.4852696,147.547527 C63.0850477,173.327676 38.383557,202.531307 23.9575434,236.300965 L50.9239974,240.044543 C22.4417333,275.768914 3.25387058,315.421088 0.738824827,362.12633 C15.223913,363.626606 29.8278068,356.508556 42.308735,346.023255 C30.9812928,402.120262 35.6683141,457.200092 57.2918001,506.303105 C87.3476361,482.153415 111.113779,453.809429 129.190383,421.671105 C143.187778,466.220343 144.408872,511.932695 125.447899,559.48139 C190.66821,592.469514 255.890927,590.588973 321.113645,544.689552 C326.206093,554.824125 328.380475,566.258339 328.978441,578.392697 C378.415555,545.704103 410.114977,499.10804 416.607274,433.467424 C426.01523,432.834013 431.417053,440.582411 435.329979,451.443383 C464.13234,368.617314 449.352973,293.721461 401.255977,224.879222 C401.055561,230.188058 399.957868,234.797407 397.509773,238.359386 C390.020866,233.062803 384.907852,226.433321 381.40998,218.884246 C394.584269,217.680437 378.128496,177.013055 364.560814,206.718382 L339.844445,191.551748 C351.771604,210.270296 368.031555,227.08533 387.401674,244.353706 C363.393544,240.276466 342.006357,241.440016 322.988497,247.349225 C314.857646,232.773775 303.658418,220.983582 290.038225,211.400809 C290.849954,202.58338 294.58675,194.500883 299.399578,186.682033 C291.42429,193.360306 283.223425,199.059909 273.745455,199.226849 C244.464809,178.217958 223.953456,181.978383 201.660021,199.413481 C214.054306,214.874613 236.504399,217.160143 268.876834,215.143293 C283.826205,224.327203 295.812219,235.79358 304.265792,249.972137 L301.645287,252.965249 L289.661023,249.221671 L220.008806,248.845781 C204.064575,244.77226 191.511007,236.573802 187.053064,218.513389 L181.248002,219.447424 L184.246584,206.33943 L160.652194,204.093064 L202.406111,175.069283 L188.176138,170.576551 C194.868194,155.846631 246.205102,129.41338 263.78373,136.645641 C276.696996,141.965198 299.06526,153.582106 314.371922,167.20558 C318.893316,158.958112 321.274897,149.142104 321.800661,137.894084 C344.04071,151.038835 365.094236,168.931652 385.834447,188.073787 C378.665637,172.492318 372.2532,156.653547 372.608523,138.560752 C349.453255,122.194904 325.232894,110.107587 299.583803,103.730158 C304.190746,112.219394 303.586653,120.833563 302.203433,128.820446 C294.427467,115.012747 278.119162,104.064914 263.846961,98.2443165 C212.55775,97.1483736 174.763581,106.498568 134.433581,124.327059 C151.019755,127.715314 160.911466,137.795407 165.513814,153.165958 Z M328.782401,268.891538 C336.119465,276.917586 345.039946,281.963431 354.62075,285.744205 L354.249236,314.95418 C336.707366,334.304607 316.847147,348.811137 293.955964,356.145138 C288.66682,357.841235 282.455018,356.53328 279.725334,351.652406 L255.013342,307.465711 C253.292302,304.384643 256.302043,300.068041 259.876274,298.098888 L313.055872,268.891538 C317.996476,266.177389 324.952618,264.704463 328.782401,268.891538 Z M295.646591,378.715567 C316.364048,374.017606 332.788971,365.874941 347.323507,351.750864 L372.790341,350.254308 C400.192853,361.766631 377.735759,422.567288 351.257436,426.272359 C355.353931,414.672736 355.844469,402.301424 352.941281,389.202619 C341.238606,402.073877 327.325447,409.656428 310.628344,410.545173 L295.646591,378.715567 Z M374.29193,286.402339 L395.634921,269.549454 C410.575759,293.885776 408.284759,320.981319 398.257833,349.315459 L373.289631,317.644043 L374.29193,286.402339 Z M87.6222235,51.6780092 C103.205661,72.5083643 114.728925,94.0152327 118.329849,116.838808 C171.965196,83.1800786 238.202028,75.7253036 316.803169,93.9953223 C316.238241,71.5432606 321.739398,48.5422428 332.156435,25.0922581 L292.834641,65.9117023 L290.590682,0 L241.907754,59.167135 L206.706084,2.62225518 L192.474798,45.6887215 L189.105796,68.9067837 L123.94828,24.7159311 L133.309632,79.7660052 L87.6222235,51.6780092 Z"/>
      </svg>
    </div>
    <div class="app-container">
      <div class="app-logo">
        <svg xmlns="http://www.w3.org/2000/svg" width="57" height="73" viewBox="0 0 57 73">
    <path fill="#11155C" fill-rule="evenodd" d="M20.6676533,19.2115377 C14.9080944,15.5137138 13.4633404,18.9317255 14.8431361,27.0087363 C12.5411896,25.9285943 11.5557271,23.0942199 11.8840042,18.5068205 C7.82005888,21.740413 4.72176194,25.4034113 2.9123135,29.6391245 L6.29470378,30.1086798 C2.72218612,34.5895717 0.315461065,39.5631262 0,45.4213438 C1.81685814,45.6095227 3.64861801,44.7167089 5.21409526,43.4015422 C3.79329924,50.4377648 4.38119023,57.3464033 7.09341442,63.5053723 C10.8633045,60.4762875 13.8442812,56.921114 16.1116216,52.8900183 C17.8673086,58.4778094 18.0204698,64.2114892 15.6422035,70.1755008 C23.8227579,74.3131864 32.0036142,74.077311 40.1844706,68.3201672 C40.8232141,69.5913422 41.0959459,71.0255305 41.1709485,72.5475375 C47.3718235,68.4474219 51.3478679,62.6028985 52.1621938,54.3696254 C53.3422295,54.2901769 54.0197778,55.262055 54.5105743,56.6243418 C58.1232416,46.235505 56.2694721,36.8413517 50.2366875,28.2065004 C50.2115494,28.8723853 50.0738662,29.4505339 49.7668028,29.8973113 C48.8274726,29.2329632 48.1861494,28.4014303 47.7474129,27.4545532 C49.3998581,27.30356 47.3358179,22.2026684 45.6340296,25.9285943 L42.5338665,24.0262502 C44.0298847,26.3741093 46.0693631,28.4832115 48.4989485,30.6491762 C45.4876194,30.1377698 42.805034,30.2837134 40.4196325,31.0249028 C39.3997835,29.1967106 37.9950692,27.7178719 36.2866946,26.515909 C36.3885093,25.4099428 36.8572139,24.3961588 37.4608848,23.415444 C36.4605481,24.2530968 35.4319172,24.9679955 34.2430996,24.9889347 C30.5704413,22.3537989 27.9977115,22.8254673 25.2014559,25.0123439 C26.7560656,26.9516267 29.5719706,27.2382997 33.6324307,26.9853271 C35.5075236,28.1372609 37.010924,29.5754834 38.0712519,31.3538934 L37.7425632,31.7293182 L36.2393823,31.2597628 L27.5029358,31.2126152 C25.5030581,30.7016753 23.9284696,29.6733463 23.3693118,27.4080367 L22.6411854,27.5251923 L23.0172962,25.8810625 L20.0578625,25.5993018 L25.2950376,21.9588619 L23.5101784,21.3953406 C24.3495601,19.5477734 30.7887255,16.2322625 32.9936049,17.1394017 C34.6133102,17.8066314 37.4189514,19.2637349 39.3388593,20.9725212 C39.9059757,19.9380449 40.2046963,18.7068274 40.2706426,17.2959933 C43.0602021,18.9447337 45.7009364,21.1890216 48.3023719,23.590011 C47.4031912,21.6356344 46.5988822,19.6489844 46.6434501,17.3796132 C43.7390952,15.3268522 40.7011461,13.8107455 37.4839921,13.0108273 C38.0618389,14.0756285 37.9860678,15.1560998 37.8125711,16.1578911 C36.8372352,14.4259975 34.7916918,13.0528156 33.001536,12.3227407 C26.5683532,12.1852771 21.8278475,13.3580678 16.7692735,15.5942874 C18.84967,16.0192748 20.0903829,17.2836164 20.6676533,19.2115377 Z M41.1463592,33.7269455 C42.0666438,34.7336492 43.1855358,35.3665472 44.3872517,35.8407679 L44.340653,39.5045621 C42.1403841,41.9316775 39.6493257,43.7512251 36.7780948,44.6711255 C36.1146798,44.8838662 35.3355362,44.71981 34.9931533,44.1076042 L31.8935391,38.5652867 C31.6776698,38.1788298 32.0551803,37.6374003 32.5034945,37.3904104 L39.1737877,33.7269455 C39.7934855,33.386511 40.6659912,33.2017625 41.1463592,33.7269455 Z M36.9901494,47.5021244 C39.5887308,46.9128613 41.6489015,45.8915304 43.4719618,44.1199537 L46.6662555,43.9322413 C50.1033404,45.376227 47.2865571,53.0024262 43.9653929,53.4671515 C44.4792143,52.012216 44.5407423,50.4604878 44.1765967,48.8175106 C42.7087354,50.4319468 40.9636141,51.3830228 38.8693039,51.4944976 L36.9901494,47.5021244 Z M46.8545991,35.9233175 L49.5316409,33.8094676 C51.4056635,36.8619616 51.1183044,40.2605435 49.8606316,43.814482 L46.7288812,39.8419504 L46.8545991,35.9233175 Z M10.8977459,6.48194961 C12.8523695,9.09469174 14.2977273,11.7922886 14.7493896,14.6550395 C21.4768473,10.4332401 29.7849034,9.498191 39.6438095,11.7897913 C39.5729509,8.97363921 40.2629585,6.08863182 41.5695628,3.14731073 L36.6374478,8.26727537 L36.355989,0 L30.2497111,7.42130732 L25.8343814,0.328908296 L24.0493575,5.73071593 L23.6267851,8.6429471 L15.4541069,3.1001082 L16.6282972,10.0050144 L10.8977459,6.48194961 Z"/>
        </svg>
      </div>
      <div class="app-title">
        Goal Scorers
      </div>
      <div class="app-table">
        <div class="app-header">
          <div class="column-name">
            Player
          </div>
          <div class="column-name">
            Team
          </div>
          <div class="column-name">
            Goals
          </div>
        </div>
        <div class="app-row">
          <div class="player">
            <div class="rank">1</div>
            <div class="image">
              <img src="https://raw.githubusercontent.com/idonahue/assets/master/images/leaderboard/player-sanchez.png">
            </div>
            <div class="name">Alexis Sanchez</div>
            <div class="team">
              <img src="https://raw.githubusercontent.com/idonahue/assets/master/images/leaderboard/team-1.png">
            </div>
            <div class="goals">15</div>
          </div>
        </div>
        <div class="app-row">
          <div class="player">
            <div class="rank">2</div>
            <div class="image">
              <img src="https://raw.githubusercontent.com/idonahue/assets/master/images/leaderboard/player-costa.png">
            </div>
            <div class="name">Diego Costa</div>
            <div class="team">
              <img src="https://raw.githubusercontent.com/idonahue/assets/master/images/leaderboard/team-2.png">
            </div>
            <div class="goals">14</div>
          </div>
        </div>
        <div class="app-row">
          <div class="player">
            <div class="rank">3</div>
            <div class="image">
              <img src="https://raw.githubusercontent.com/idonahue/assets/master/images/leaderboard/player-ibrahimovic.png">
            </div>
            <div class="name">Zlatan Ibrahimovic</div>
            <div class="team">
              <img src="https://raw.githubusercontent.com/idonahue/assets/master/images/leaderboard/team-3.png">
            </div>
            <div class="goals">13</div>
          </div>
        </div>
      </div>
    </div>
  </div>
// Variables
$brand-primary: #11155C;
$brand-primary-dark: #1275E6;
$brand-secondary: #D9F2F5;
$brand-tertiary: #E5674A;
$brand-gray: #C7C7C7;

* {
  box-sizing: border-box;
}
body {
  color: $brand-primary;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  background-color: $brand-secondary;
}
.artboard {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 800px;
  height: 600px;
  background-color: $brand-secondary;
  .artboard-accent {
    display: inline;
  }
}

.app-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 610px;
  height: 375px;
  margin: auto;
  background-color: white;
  box-shadow: 0 32px 44px 0 rgba(0,0,0,0.06);
  border-radius: 6px;
  .app-logo {
    width: 100px;
    height: 100px;
    background: white;
    position: absolute;
    top: -50px;
    left: 38px;
    box-shadow: 0 10px 14px 0 rgba(0,0,0,0.08);
    border-radius: 6px;
    svg {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
    }
  }
}
.app-title {
  font-size: 22px;
  position: relative;
  left: 177px;
  margin-top: 20px;
}
.app-table {
  .app-header {
    color: $brand-gray;
    display: flex;
    position: relative;
    left: 177px;
    margin-top: 20px;
  }
  .app-row {
    padding: 6px 41px 6px 41px;
    border-bottom: 1px solid #F6F6FA;
    .player {
      display: flex;
      align-items: center;
      .rank {
        width: 57px;
        color: $brand-secondary;
        font-size: 60px;
      }
      .image {
        height: 57px;
        width: 57px;
        background-color: $brand-secondary;
        border-radius: 50%;
      }
      .name {
        width: 245px;
        margin-left: 30px;
      }
      .team {
        width: 108px;
      }
      .goals {
        width: 50px;
        text-align: center;
      }
    }
  }
}
View Compiled
// https://dribbble.com/shots/3264412-Leaderboard
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.