POS

index.html

<nav>
  <ul>
    <li><a href="#">Sales</a></li>
    <li><a href="#">+</a></li>
    <li><a href="#">Tunnel</a></li>
    <li><a href="#">Surf</a></li>
    <li><a href="#">Parties</a></li>
  </ul>

  <div class="search">
    <input type="Search" placeholder="Search..." />
  </div>
</nav>

<div class="sellables-container">
  <div class="sellables">
    <div class="categories">
      <a class="category active" href="#">Alcohol</a>
      <a class="category" href="#">Attractions</a>
      <a class="category" href="#">Burgers</a>
      <a class="category" href="#">Drinks</a>
      <a class="category" href="#">Food</a>
      <a class="category" href="#">Pizza</a>
      <a class="category" href="#">Rentals</a>
      <a class="category" href="#">Salads</a>
      <a class="category" href="#">Treats</a>
    </div>

    <div class="item-group-wrapper">
      <div class="item-group">
        <a href="#" class="item">Bud Light</a>
        <a href="#" class="item">Bud Light</a>
        <a href="#" class="item">Bud Light</a>
        <a href="#" class="item">Bud Light</a>
        <a href="#" class="item">Bud Light</a>
        <a href="#" class="item">Bud Light</a>
        <a href="#" class="item">Bud Light</a>
        <a href="#" class="item">Bud Light</a>
        <a href="#" class="item">Bud Light</a>
        <a href="#" class="item">Bud Light</a>
        <a href="#" class="item">Bud Light</a>
      </div>
      <div class="item-group">
        <a href="#" class="item">Bud Light</a>
        <a href="#" class="item">Bud Light</a>
        <a href="#" class="item">Bud Light</a>
        <a href="#" class="item">Bud Light</a>
        <a href="#" class="item">Bud Light</a>
      </div>
    </div>
  </div>

  <div class="register-wrapper">
    <div class="customer">
      <input type="text" placeholder="John Doe" />
    </div>

    <div class="register">
      <div class="products">
        <div class="product-bar selected">
          <span>Cookies</span>
          <span>$5.00</span>
        </div>

        <div class="product-bar">
          <span>Cookies</span>
          <span>$5.00</span>
        </div>

        <div class="product-bar">
          <span>Cookies</span>
          <span>$5.00</span>
        </div>
      </div>

      <div class="pay-button">
        <a href="#">Pay $50.00</a>
      </div>
    </div>
  </div>
</div>

pos.markdown

POS

A Pen by Alex Verner on CodePen.

License.

scripts

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

style.scss

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

$background-color: #f5f7fa;
$nav-color: #34495e;
$category-color: #e6e9ed;
$item-color: #9b59b6;
$register-color: #fff;
$product-bar-color: #fff;
$selected-color: #68b3c8;
$pay-button-color: #42a07f;

html {
  height: 100%;
}

body {
  height: 100%;
  background: $background-color;
  font-family: 'Open Sans', Helvetica, sans-serif;
}

a, a:hover {
  text-decoration: none;
}

input:focus {
  outline: none;
}

body {
  display: flex;
  flex-direction: column;
  height: 100%;

  nav {
    display: flex;
    justify-content: space-between;
    background: $nav-color;
    padding: 9px 0;

    ul {
      display: flex;
      align-items: center;
      margin: 0;

      li {
        list-style-type: none;

        a {
          color: #fff;
          padding: 20px;
        }

        a:hover {
          background: darken($nav-color, 10%);
        }
      }
    }

    .search input {
      width: 394px;
      height: 40px;
      margin-right: 30px;
      border: none;
      border-radius: 5px;
      font-size: 16px;
      text-align: center;
    }

    .search input::placeholder {
      font-style: italic;
    }
  }

  .sellables-container {
    display: flex;
    flex: 1;
  
    .sellables {
      display: flex;
      flex-direction: column;
      flex: 1;
    
      .categories {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        margin: .5em;

        .category {
          padding: 17.5px;
          margin: 2px;
          border: 1px solid darken($category-color, 10%);
          border-radius: 5px;
          background: $category-color;
          color: #424A54;
        }

        .category:hover {
          background: darken($category-color, 10%);
        }
        
        .active {
          background: darken($category-color, 15%);
          color: #424A54;
        }
        
        .active:hover {
          background: darken($category-color, 20%);
        }
      }

      .item-group-wrapper {
        overflow-y: scroll;

        .item-group {
          display: flex;
          flex-wrap: wrap;

          .item {
            padding: 50px 35px;
            margin: .5em .5em;
            border-radius: 5px;
            background: $item-color;
            color: #fff;
          }
          
          .item:hover {
            background: darken($item-color, 10%);
          }
        }
      }
    }

    .register-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      
      .customer input {
        height: 40px;
        width: 394px;
        margin-top: 16px;
        border: 1px solid #ccc;
        border-radius: 5px;
        text-align: center;
        font-size: 16px;     
      }

      .customer input::placeholder {
        font-style: italic;
      }

      .register {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;
        width: 400px;
        margin: 1em 2em;      
        box-shadow: 0px 1px 7px 0px rgba(0, 0, 0, 0.25);
        border-radius: 5px;
        background: $register-color;
        
        .products {
          display: flex;
          flex-direction: column;

          .product-bar {
            display: flex;
            justify-content: space-between;
            padding: 1em;
            background: $product-bar-color;
          }

          .product-bar:first-child {
            margin-top: 1em;
          }

          .product-bar:hover {
            background: darken($product-bar-color, 10%);
          }

          .selected {
            background: $selected-color;
            color: #fff;
          }

          .selected:hover {
            background: darken($selected-color, 10%);
          }
        }

        .pay-button {
          display: flex;
          align-items: center;
          justify-content: center;

          a {
            padding: 10px 125px;
            margin: 1em 0;
            border-radius: 5px;
            background: $pay-button-color;          
            color: #fff;
          }

          a:hover {
            background: darken($pay-button-color, 5%);
          }
        }
      }
    }
  }
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />