betasniper

betasniper.markdown

betasniper

A Pen by Sean Wilson on CodePen.

License.

index.html

<section class="hero is-blue is-medium">
  <div class="hero-head">

    <nav class="nav">
      <div class="container">
        <div class="nav-left">
          <a href="#"><img src="https://betasniper.co/images/bs.png" alt="" class="nav-logo" /></a>
        </div>

        <div class="nav-right nav-menu">
          <a href="#" class="nav-item">Purchase</a>
          <a href="#" class="nav-item">Downloads</a>
          <a href="#" class="nav-item">Recent Snipes</a>
        </div>
      </div>
    </nav>
  </div>

  <div class="hero-body">
    <div class="container">
      <h1 class="title">Beta Sniper</h1>
      <h2 class="subtitle">The best client sniper on the market</h2>
    </div>
  </div>
</section>

<br />

<div class="container">
  <div class="box">
    Great news! Version 1.5 has been released
  </div>
</div>

<section class="section">
  <div class="container">
    <div class="heading">
      <h1 class="title">Purchase</h1>
      <hr />
    </div>
  </div>
</section>

<section class="section">
  <div class="container">
    <div class="heading">
      <h1 class="title">Downloads</h1>
      <hr />
    </div>

    <div class="columns">

      <div class="column is-three-quarters">
        <div class="card display-block">
          <header class="card-header">
            <p class="card-header-title">Version 1.5 Changelog</p>
          </header>
          <div class="card-content content">
            <strong>[ADDED]</strong>
            <ul>
              <li>Proxy Recycling | Use each proxy 5 times</li>
              <li>Option to show concurrent messages</li>
              <li>Automatic duplicate proxy removal</li>
            </ul>
            
            <strong>[FIXED]</strong>
            <ul>
              <li>Invalid snipe result</li>
            </ul>
            
            <strong>[IMPROVED]</strong>
            <ul>
              <li>Configuration file layout</li>
            </ul>
          </div>

        
          <footer class="card-footer">
            <a href="#" class="card-footer-item">Download</a>
          </footer>
        </div>
      </div>

      <div class="column is-one-quarter">
        <aside class="menu ">
          <p class="menu-label">Versions</p>
          <ul class="menu-list">
            <li>
              <a href="#" class="is-active">
                <p>1.5 <span class="tag is-info is-version-tag">Latest</span></p>
              </a>
            </li>
            <li>
              <a href="#">
                <p>1.4</p>
              </a>
            </li>
            <li>
              <a href="#">
                <p>1.3</p>
              </a>
            </li>
            <li>
              <a href="#">
                <p>1.2</p>
              </a>
            </li>
            <li>
              <a href="#">
                <p>1.1</p>
              </a>
            </li>
            <li>
              <a href="#">
                <p>1.0</p>
              </a>
            </li>
          </ul>
        </aside>
      </div>
    </div>
  </div>
</section>

style.scss

$blue: #279DDD;

a {
  color: $blue !important;
  
  &:hover {
    color: darken($blue, 5%) !important;
  }
}

.nav {
   padding: 20px 0;
   background-color: $blue;
   
  .nav-logo {
    width: 60px;
    filter: brightness(0) invert(1);
  }
  
  .nav-item {
    color: #fff !important;
    
    &:hover {
      color: #eee !important;
    }
  }
}

.hero.is-blue {
  background-color: $blue;
  
  h1, h2, p, a {
    color: #fff;
  }
}

.tag.is-version-tag {
  vertical-align: middle;
}

.is-active {
  background-color: #eee !important;
}

styles

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