Evermade Clan

evermade-clan.markdown

Evermade Clan

A Pen by Jaakko Alajoki on CodePen.

License.

index.html

<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron__outer">
	<div class="jumbotron">
		<div class="container">
			<img class="logo" src="https://s28.postimg.org/5bhvx9uil/logo.png" />
			<h1>Sopivan vakava Clash Royale -klaani</h1>
		</div>
	</div>
</div>
<section class="dark">
  <div class="container js-datatable">
    <div class="row infotable">
      <div class="col-xs-12 infotable__row">
        <span class="infotable__label">Clan Score:</span>
        <span class="infotable__value js-score">0</span>
        <hr class="infotable__hr">
      </div>
    </div>
    <div class="row infotable">
      <div class="col-xs-12 infotable__row">
        <span class="infotable__label">Donations:</span>
        <span class="infotable__value js-donations">0</span>
        <hr class="infotable__hr">
      </div>
    </div>
    <div class="row infotable">
      <div class="col-xs-12 infotable__row">
        <span class="infotable__label">Trophy limit:</span>
        <span class="infotable__value js-trophylimit">0</span>
      </div>
    </div>
  </div>
</section>
<section>
  <div class="container">
    <!-- Example row of columns -->
    <div class="row">
      <div class="col-xs-2">
        <h2 class="section-title">Uutiset</h2>
      </div>
      <div class="col-xs-10">
        <h2 class="news-title">Uusia jäneniä haussa</h2>
        <div class="date">30.12.2016</div>
        <p>Suoritimme pienen joulusiivouksen klaanissa ja kengimme kymmenisen huonointa pelaajaa pihalle. Joten tilaa on siis uusille sankareille!</p>
        <hr >
        <h2 class="news-title">Www-sivut avattu</h2>
        <div class="date">27.12.2016</div>
        <p>Klaanimme www-sivut on nyt avattu. Homma alkaa mennä vakavaksi.</p>
      </div>
    </div>
  </div>
</section>
<section class="dark">
<div class="container container--dark container-minheight">
	<div class="row">
		<div class="col-xs-2">
			<h2 class="section-title">Säännöt</h2>
		</div>
		<div class="col-xs-10">
			<p>Jokainen klaanin jäsen sitoutuu seuraaviin sääntöihin. Mikäli sääntöjä ei noudateta, mono heilahtaa.</p>
			<ul>
				<li>Puhumme suomea</li>
				<li>Pelaamme aktiivisesti päivittäin</li>
				<li>Kohtelemme toisiamme asiallisesti</li>
				<li>Pyydämme kortteja ja annamme niitä ahkerasti</li>
				<li>Heitämme huonoa läppää</li>
			</ul>
		</div>
	</div>
</div>
</section>

script.js

var stats = [
  {date: '31-12-2016', score: 12345, donations: 1234, trophylimit: 2400 }
];

var countdownStarted = false;
var rollElements = [ 'score', 'donations', 'trophylimit' ];
var rollCounter = 0;
var rollMax = 50;


$(document).ready(function() {

  var countdownStarted = false;
  
  var inview = new Waypoint.Inview({
    element: $('.js-datatable')[0],
    enter: function(direction) {
      if (!countdownStarted) {
        countdownStarted = true;
        rollNumbers();        
      }
    },
    entered: function(direction) {
      console.log('Entered triggered with direction ' + direction)
    },
    /*
    exit: function(direction) {
      notify('Exit triggered with direction ' + direction)
    },
    exited: function(direction) {
      notify('Exited triggered with direction ' + direction)
    }
    */
  })
  
});


function rollNumbers() {

  for (var i in rollElements) {
    
    $('.js-' + rollElements[i]).text(Math.round(
                  (rollCounter / rollMax) * stats[0][rollElements[i]]
               ));
    
  }
  
  if (rollCounter < rollMax) {
    rollCounter++;
    setTimeout(function() {
      rollNumbers();
    }, 10);
  }

}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/shortcuts/inview.min.js"></script>

style.scss

@import url('https://fonts.googleapis.com/css?family=Baloo+Thambi|Roboto+Condensed');

$font-headings: 'Baloo Thambi', cursive;
$font-paragraph: 'Roboto Condensed', sans-serif;
$light-grey: rgb(150, 150, 150);

// One breakpoint to rule them all...
$bp: 500px;

body, html {
  font-family: $font-paragraph;
}

h1, h2 {
  font-family: $font-headings;
  &.section-title {
    transform: rotate(90deg) translatey(-100%);
    transform-origin: 0 0;
    font-size: 6rem;
    color: #6faee3;
    margin: 0;
    padding: 0;
  }
}

.news-title {
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.date {
  color: $light-grey;
  margin-bottom: 1rem;
}

.jumbotron__outer {
  background-image: url(https://www.sweetsweetsoft.com/wp-content/uploads/2016/02/background-clash-royale.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.jumbotron {
  background-image: url(http://gemsbit.com/img/header-right-img.png);
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: 80%;
  background-position: -20% bottom;
  height: 50rem;
  margin-bottom: 0;
  @media (min-width: $bp) {
    background-size: 40%;
    background-position: 10% bottom;
  }  
  h1 {
    color: white;
    text-align: center;
    font-size: 2rem;
    font-weight: 300;
    margin: 0;
    padding: 0;
  }
  .logo {
    width: 100%;
    margin-top: 2rem;
    display: block;
    @media (min-width: $bp) {
      width: 400px;
      margin-left: auto;
      margin-right: auto;
    }  
  }
}

.container {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.dark {
  background-color: #104c84;
  color: white;
  .section-title {
    color: #cae3f9;
  }
}
.container-minheight {
  min-height: 30rem;
}

.infotable {
  font-size: 3rem;
  margin-top: 0rem;
  margin-bottom: 0rem;
  line-height: 6rem;
  &__row {
    text-align: center;
  }
  &__label {
    font-family: $font-headings;
  }
  &__value {
    font-family: $font-headings;
    color: #cae3f9;
  }
  &__hr {
    width: 20%;
    border-top-color: rgba(255,255,255,0.2);
  }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />