index.html

<nav class="header">
  <div class="logo"></div>
  <div class="nav-links">
    <a href="#">Why SpclOps?</a>
    
    <a href="#">Capabilities</a>
    
    <a href="#">Cloud</a>
    <a href="#">Business Intelligence Consulting</a>
    <a href="#">Open-Source Software Services</a>
  </div>
  
  <a class="mobile-menu"></a>
  
</nav>

<section>
  <div class="page-title">
    <div class="title-container">
      <span>SPECIAL OPERATIONS</span>
      <h1>We invest our time, expertise and capital to help your business grow.</h1>
    </div>
  </div>
  
  <div class="page-content">
    <div class="content-section">
      <div class="section-container">
        <h2 class="title">At Harbour Group, operational excellence has been a top priority since 1976.</h2>
        <p>Its importance is evidenced by the fact that two-thirds of the Harbour Group team is comprised of operating professionals, each averaging nearly 25 years of real world experience. Harbour Group invests over 35,000 hours per year on building its businesses from the top line to the bottom line and everything in between.</p>
        <p>At Harbour Group we do not run the businesses we own, rather we invest our time, expertise, and capital to support our management teams so they can more effectively do so through the following methods:</p>
      </div>
      
      <div class="section-container capability-card">
        <h2>Strategic Planning</h2>
        <p>Everything we do starts with a rigorous strategic planning process.<p>
      </div>
      
      <div class="section-container capability-card">
        <h2>Organic Growth</h2>
        <p>Everything we do starts with a rigorous strategic planning process.<p>
      </div>
    </div><!-- .content-section -->
    
   <!-- <div class="content-section">
      <div class="section-container">
        <h2>01. Strategic Planning</h2>
        <p>Everything we do starts with a rigorous strategic planning process.  We believe that a thoughtful, fully-vetted strategic plan provides clarity in resource allocation and decision making and enables the company to move forward with autonomy while remaining focused on a common goal.  We employ full-time executives with years of strategic planning experience inside Fortune 500 companies to support our management teams through the development of their first strategic plan or improvement upon an existing plan.  The long term vision for the business established in the planning process drives resource allocation and capital investment in Organic Growth Programs, Operational Excellence Initiatives, and Complementary Acquisitions.  [ONICON, Top Knobs (Norris, Gottleib)]
        </p>
      </div>
    </div>--><!-- .content-sectuon -->
    
    <!--<div class="content-section">
      <div class="section-container">
        <h2>02. Organic Growth</h2>
        <p><strong>Product Development and Entering New Markets</strong></p>
      
        <p>The companies we acquire are often leaders in their niche markets and we work with them to leverage their leadership position within and identify opportunities outside of their historical markets, and then invest heavily to revise existing products, develop new products, and build brand awareness to establish the company in additional product categories and applications.  [Haydon, ONICON, TKHR, Sloan]
        </p>
      
        <p><strong>Marketing and Sales Force Development</strong></p>
      
        <p>Having worked in dozens of industries over the years, we have developed numerous way to enhance a company’s marketing effectiveness and penetrate new sales channels.  We frequently invest heavily in building the sales team of an acquired company to expand their geographic footprint and allow them to target new customer categories.  Our investment in a dedicated marketing team is often the first such investment for companies we own.  A stronger infrastructure to support ongoing marketing efforts significantly enhances brand recognition and ultimately accelerates top line growth.  [Lincoln, TKHR, Haydon, Pearl/GQ, C-B]
        </p>
      
        <p><strong>Infrastructure Investment</strong></p>
      
        <p>Scalability is crucial to achieving long-term success.  We invest heavily to ensure that our companies’ growth is never constrained due to insufficient infrastructure.  In addition to investing in over 60 new ERP implementations, we have completed XX facility upgrades and YY greenfield facility construction projects.  Whether this means investing in capital equipment, building a new, larger facility next door to their current space, reworking the layout of an existing facility to promote more efficient operations, or building a new facility on another continent to support their international expansion, we will make the investments necessary to support the company’s growth.  [cleaver, watchfire, ONICON]
        </p>
      </div>
    </div>--><!-- .content-section -->
    
    <!--<div class="content-section">
      <div class="section-container">
        <h2>Operational Excellence</h2>
        <p><strong>03. Operational Improvements</strong></p>
      
        <p>Lean manufacturing, Kanban, and Six sigma are just a few of the tools our dedicated operational experts employ while working with our companies.  Whether there is a need for better S&OP processes, inventory management, quality control, engineering for manufacturing, process flow, or other operational improvement, we have the people, expertise, and experience to support them.  [CPS, Lindstrom, TKHR, C-B, Auto Meter]
        </p>
      
        <p><strong>Global sourcing</strong></p>
      
        <p>Harbour Group has full-time, dedicated procurement teams on the ground in China and India.  We have pre-qualified vendors in numerous raw materials, components, packaging and other products and capabilities. Our team supports our companies by actively identifying new vendors and, just as importantly, monitoring the ongoing quality of existing suppliers.  Our team understands the cultures, languages, and subtle nuances required to successfully navigate the business environment in each country.  [Auto Meter, CPS, ONICON, C-B]
        </p>
      
        <p><strong>Metrics-Based Decision Making Supported by Business System Optimization</strong></p>
      
        <p>Many companies have robust systems, but few are utilizing those systems to the fullest extent.  We help management use output from existing ERP, CRM, material planning and inventory systems to more effectively serve the customer, reduce costs, optimize pricing, improve discipline and drive margin improvement. [CPS, Lindstrom, C-B, anyone else that is light]
        </p>
      
        <p><strong>Environmental, Health & Safety</strong></p>
      
        <p>By having in-house EH&S expertise, we bring a unique ability to look at issues from a perspective which combines scientific knowledge, regulatory understanding, and business experience to make the best decisions for all constituents involved. The safety of our employees and the communities in which we operate is paramount, and we work diligently to identify and pursue the best solution possible. [Haydon, Lincoln, C-B]
        </p>
      </div>
    </div>--><!-- .content-section -->
    
    <!--<div class="content-section">
      <div class="section-container">
        <h2>04. Complementary Acquisitions</h2>
        <p>Harbour Group has completed 178 acquisitions, 141 of which have been complementary to a company we already owned.  Once we have identified an opportunity, our cross functional operational, finance, and acquisitions teams and seasoned external advisors ensure that we are thorough, yet efficient, by quickly focusing our efforts on only the key issues at hand.  We do not employ a vertical, Managing Director, Vice President, Associate approach, but rather a horizontal team approach, composed of senior, functional experts. Our philosophy is that a team of experts, trained in various disciplines, is better equipped to assess the merits of a particular opportunity and enables us to execute quickly. 
        </p>
      
        <p>Importantly, the same team that is initially assigned to a new opportunity will remain dedicated to the company after the acquisition to support its ongoing growth initiatives.  The acquisitions team acts as the corporate development arm of the operating company, aggressively scouting for complementary businesses and new growth opportunities. We work with our management team to explore pre-identified opportunities and to build a new pipeline of potential acquisition targets for our businesses. This removes significant time-consuming activities from the management team so that they can focus on organically growing the business. The acquisitions team identifies the target and executes the transaction while the operations and finance teams assist in the diligence and post-acquisition integration of the business. [Haydon/Kerk – didn’t know how to acquire, buy evil empire, TK/HR – game changer, ONICON – speed]
        </p>
        </div<
    </div>--><!-- .content-container -->

    <div class="content-section cta">
      <div class="section-container">
        <h2>Really Awesome Headline Linking to Another Section</h2>
        <a href="" class="btn">Lets Go</a>
      </div>
    </div><!-- .content-container -->
  </div>
</section>

<div class="footer">
  <div class="footer-main">
    <p>+1.314.727.5550</p>
    <p>7701 Forsyth Blvd. Suite 600, Saint Louis, MO 63105</p>
    <a href="#">Contact Us</a>
  </div>
  <div class="footer-cred">
    <p>© 2015 SpclOps, L.P.</p>
    <p>Privacy Policy</p>
    <p>Terms of Use</p>
    <p>Powered by SpclOps Dedicated OpenStack Cloud</p>
  </div>
</div>
  

style.scss

@import "bourbon";
// breakpoints
   
$S:     480px;   
$M:     1024px;     
$L:     1170px;     

body {
  font-family: 'Roboto', sans-serif;
}

.header {
  height: rem(90);
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 0 rem(30);
  
  .logo {
    height: rem(60);
    width: rem(120);
    background: #999;
    /*margin-left: rem(30);*/
    margin-top: rem(15);
    float: left;
  }
  
  .nav-links {
    float: right;
    /*margin-right: rem(30);*/
    display: none;
    
    @media screen and (min-width: $M) {
      display: block;
    }
    a {
      display: inline-block;
      text-decoration: none;
      color: #999;
      margin-left: rem(30);
      line-height: rem(90);
    }
  }
  
  .mobile-menu {
    display: block;
    height: rem(2);
    width: rem(30);
    background: #333;
    
    float: right;
    /*margin-right: rem(30);*/
    
     position: relative;
     top: rem(33);
      //margin: rem(29) rem(30);
    
    &:before, &:after {
      content: '';
      display: block;
      
      height: rem(2);
      width: rem(30);
      background: #333;
    }
    
    &:before {
      margin: rem(8) 0 rem(6);
      
    }
    
    &:after {
     margin-top: rem(2);
    }
    @media screen and (min-width: $M) {
      display: none;
    }
  }
}

section {
  position: relative;
  clear: both;
  
  .page-title {
    position: relative;
    height: rem(300);
    top: rem(90);
    
    background: #999;
    
    @media screen and (min-width: $M) {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 50%;
      height: 100%;
      width: 50%;
    }
    
    .title-container {
      display: block;
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      margin-left: rem(60);
      max-width: rem(500);
      padding: rem(30);
      
      @media screen and (min-width: $M) {
         margin: 0 auto;
      }
      
      span {
        display: block;
        margin-bottom: rem(15);
        
        text-transform: uppercase;
        font-weight: 900;
        font-size: 15px;
        letter-spacing: 1px;
        color: #444;
      }
      
      h1 {
        font-size: rem(42);
        color: #fff;
        font-weight: 100;
        line-height: 1.125;
      }
    }
  }
  
  .page-content {
    position: relative;
    margin-top: rem(90);
   /* top: rem(90);*/
    /*bottom: 0;*/
   /* left: 50%;
    right: 0;*/
    
    @media screen and (min-width: $M) {
      position: relative;
      width: 50%;
      float: right;
      clear: right;
    }
    
    .content-section {
      padding: rem(90);
      border-bottom: 1px solid #eee;
      
      /*h2, p {
        max-width: rem(640);
        margin-left: auto;
        margin-right: auto;
      }*/
      
      .section-container {
        @media screen and (min-width: $M) {
          max-width: rem(480);
          margin: 0 auto;
        }
      }
      
      .capability-card {
          background: #f5f5f5;
          padding: rem(60);
          margin-top: rem(15);
          
          text-align: center;
          
          &:first-of-type {
            margin-top: rem(60) !important;
          }
          h2 {
            margin-botom: rem(6) !important;
          }
          p {
            max-width: rem(360);
            margin: 0 auto;
          }
        }
      
      h2 {
        font-size: rem(24);
        margin-bottom: rem(16);
        line-height: 1.5;
        color: #444;
        
        &.title {
          font-size: rem(36);
          line-height: 1.25;
        }
      }
      
      p {
        font-size: 18px;
        line-height: 1.5;
        color: #999;
        font-weight: 100;
        margin-bottom: rem(16);
        
        & strong {
          font-weight: 400;
        }
        
        &:last-of-type {
          margin-bottom: 0;
        }
      }
    }
    
    .cta {
      background: #f5f5f5;
      
      .btn {
        display: inline-block;
        padding: rem(15) rem(30);
        border: 2px solid #999;
        border-radius: rem(6);
        margin-top: rem(15);
        text-decoration: none;
        color: #333;
      }
    }
  }
}

.footer {
    position: relative;
    clear: both;
    z-index: 1000;
    background: #333;
  
    padding: rem(60) rem(60) rem(30);
    
    .footer-main {
      width: 100%;
      
      p {
        display: inline-block;
        margin-right: rem(30);
        color: #666;
      }
      
      a {
        text-decoration: none;
        border: 2px solid #666;
        padding: rem(12) rem(30);
        border-radius: 6px;
        margin-top: rem(-18);
        
        color: #fff;
      }
      
      a {
        display: inline-block;
        float: right;
      }
      
    }
    
    .footer-cred {
      width: 100%;
      border-top: 1px solid #292929;
      margin-top: rem(48);
      padding-top: rem(12);
      
      p {
        font-size: rem(12);
        display: inline-block;
        margin-right: rem(18);
        float: left;
        color: #555;
        
        &:last-of-type {
          float: right;
        }
      }
      
    }
  }

ZYjxrV.markdown

ZYjxrV

Forked from Michael Fangman's Pen ogMXgP.

A Pen by Captain Anonymous on CodePen.

License.