dabBot - landing

dabbot-landing.markdown

dabBot - landing

A Pen by Sean Wilson on CodePen.

License.

index.html

<section class="main">
  <div class="brand">
    <img src="https://data.imsean.me/dabb.png" alt="" class="brand__logo" />
  </div>  
  
  <p class="title">dab</p>
  <p class="title"><strong>Bot</strong></p>
  
  <div class="buttons">
    <a href="#" class="btn">Invite to Server</a>
    <a href="#" class="btn">Join Support Server</a>
    <a href="#" class="btn">Twitter</a>
  </div>
</section>

style.scss

$font: 'Montserrat', sans-serif;

body,
html {
  height: 100%;
  width: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #222;
  background-image: url('https://data.imsean.me/bg.png');
  flex-direction: row;
  font-family: $font;
  
  &:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #000;
    opacity: 0.9;
    z-index: -1;
  }
}

.main {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  
  .brand {
    margin-right: 15px;
  }
  
  .title {
    font-size: 5em;
    color: #ddd;
  }
  
  .buttons {
    width: 50%;
    display: flex;
    margin-left: 30px;
    justify-content: space-between;
    
    .btn {
      background-color: #222;
      text-decoration: none;
      color: #eee;
      padding: 18px 16px;
      text-transform: uppercase;
      font-weight: 200;
      font-size: 0.78em;
      border-radius: 2px;
      opacity: 0.6;
      transition: opacity 200ms;
      
      &:nth-child(even) {
        margin: 0 10px;
      }
      
      &:hover {
        opacity: 1;
      }
    }
  }
}

styles

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