Dribbble Knockoff (Cosmin Capitanu)

Dribbble Knockoff (Cosmin Capitanu).markdown

Dribbble Knockoff (Cosmin Capitanu)

One of my favorite Dribbble people, Cosmin Capitanu (https://dribbble.com/radium) posted this design as a jpg. I'm just building from his design as a fun project.

Disclaimer: I do not know Cosmin Capitanu or claim any ownership to his design.

A Pen by Jesse Gibson on CodePen.

License.

index.html

<div>

  <div class='container'>
    <header class='spacious'>

      <span class='fa fa-arrow-left' onclick='notify()'></span>
      <h1>GEO TAGGING</h1>

    </header>

    <div class='stage shadowify'>
      <h2><span class='animate-count'>123.145</span> Miles to Go</h2>
    </div>

    <div class='spacious stats shadowify'>
      <span class='num darken float animate-count'>
        354
      </span>

      <h2><span class='fa fa-map-marker icon'></span>Places Visited</h2>
    </div>

    <div class='spacious stats shadowify' style='background-color: #EDCC49;'>
      <span class='num darken float animate-count'>
        5
      </span>

      <h2><span class='fa fa-user icon'></span>Checkpoints</h2>
    </div>

    <div class='details'>

      <header class='spacious'>
        <h2><span class='fa fa-pie-chart icon'></span>Stats</h2>
      </header>

      <hr>

      <ul>

        <li><span class='details-data float'>
          <span class='animate-count'>11</span><span class='fa fa-circle-o red'></span>
          </span>
          <span class='fa fa-trophy'></span>ROUNDS WON</li>
        <li><span class='details-data float'>
          <span class='animate-count'>22.201</span><span class='fa fa-circle-o yellow'></span>
          </span>
          <span class='fa fa-line-chart'></span>DISTANCE</li>
        <li><span class='details-data float'>
          <span class='animate-count'>21</span><span class='fa fa-circle-o'></span>
          </span>
          <span class='fa fa-user'></span>CHECKPOINTS</li>

      </ul>
    </div>
    
    <div class='spacious stats shadowify' style='background-color: #06C3AF;'>
      <span class='num darken float animate-count'>
        5
      </span>
      <h2><span class='fa fa-camera icon'></span>Photos</h2>
    </div>

  </div>
  <!-- #container -->

</div>

script.js

function notify() {
  alert("These controls are not tied to any logic.")
}

function animateCount(element) {
  var original = parseFloat(element.innerHTML);
  if (isNaN(original)) return;
  
  var num = 0;

  var interval = setInterval(function() {
    element.innerHTML = Math.floor(num);

    num += original / 50;

    if (num > original) {
      element.innerHTML = original;
      clearInterval(interval);
    }
  }, 16);
}

window.addEventListener('load', function() {
  var nums = document.querySelectorAll('.animate-count');
  if (nums.length == 0) return;

  for (var i = 0; i < nums.length; i++) {
    animateCount(nums[i]);
  }
});

style.css

html,
body {
  background-color: #545359;
}

body {
  margin: 0;
  font-family: verdana, arial, sans-serif;
  color: #919294;
}

.container {
  background-color: #F8F8F8;
  width: 300px;
  margin: 20px auto;
  border-radius: 15px;
  box-shadow: 3px 3px 8px 0 #424146;
}

.container h2 {
  font-size: 100%;
}

hr {
  border: none;
  border-top: 1px solid #D2D5DA;
  border-bottom: 2px solid #FBFCFE;
}

ul {
  list-style-type: none;
  margin: 0;
  padding-left: 35px;
  padding-right: 15px;
}

li {
  padding: 15px 10px;
  font-weight: bold;
  font-family: arial;
  font-size: 60%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08)
}

h1,
h2,
li,
hr,
p {
  margin: 0;
}
/* Generic classes */

.spacious {
  padding: 20px;
}

.shadowify {
  box-shadow: inset 0 1000px 5px -1000px #828186;
}

.darken {
  background-color: rgba(0, 0, 0, 0.08);
}

.float {
  float: right;
}
/* End generics*/

.num {
  text-align: center;
  width: 2em;
  padding: 5px 15px;
  margin-top: -5px;
  border-radius: 3px;
}

.stats {
  background-color: #EB7E61;
  margin-top: 16px;
  color: #F8F8F8;
  font-size: 100%;
}

.stats h2 {
  font-weight: bold;
}

.details + .stats {
  margin-top: 0;
}

.details {
  color: #3D3D3F;
}

.details .details-data span.fa-circle-o {
  margin: 0;
}

.stage {
  background-color: #3AC2E8;
  background: radial-gradient(#4AD2F8, #28A9D1);
  padding: 40px 20px;
  font-size: 140%;
  text-align: center;
  color: #F8F8F8;
}

header h1 {
  font-size: 10px;
}

header span.fa-arrow-left {
  float: right;
  font-size: 14px;
  cursor: pointer;
}

span.fa.icon {
  font-size: 22px;
  margin-right: 12px;
}

.details span.fa {
  margin-right: 20px;
}

.details li span.fa {
  color: #919294;
  margin-right: 10px;
  width: 10px;
  text-align: center;
}

.details-data {
  font-style: italic;
  color: #A9AAAE;
}

.details-data span.fa {
  font-weight: bold;
  padding-left: 10px;
}
/* Generic details-data classes */

.details-data span.fa.red {
  color: #D97053;
}

.details-data span.fa.yellow {
  color: #EDCC49;
}
/* End Generic details-data classes */

.container > *:last-child {
  border-radius: 0 0 15px 15px;
}

@media (max-width: 380px) {
  body, html {
    background-color: #F0F0F0;
  }
  .container {
    margin: 0;
    width: 100%;
    border-radius: 0;
  }
  .container > *:last-child {
    border-radius: 0;
  }
}

styles

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />