<body>

  <!-- Header -->
  <header class="header">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 hero">
          <h1>Local, organic, artisan, handmade goods.</h1>
        </div>
      </div>
    </div>
  </header>

  <!-- Page Content -->
  <div class="container">

    <hr>

    <div class="row">
      <div class="col-sm-8">
        <h2>What We Do</h2>
        <p></p>Church-key portland authentic unicorn, pickled try-hard venmo gochujang prism you probably haven't heard of them. Green juice brunch seitan, PBR&B franzen portland microdosing art party wolf tofu 8-bit letterpress gastropub kogi.</p>
        <p></p>Bitters artisan ugh, raclette waistcoat four loko semiotics fanny pack before they sold out snackwave four dollar toast vexillologist.</p>
        <p><button class="button">Contact Us</button></p>
      </div>
      <div class="col-sm-4">
        <h2>Contact Us</h2>
        <div>
          <strong>Branch & Oak</strong>
          <br />48151 Pine Road
          <br />Portland, OR 62342
          <br />
          <br />
        </div>
        <div>
          <abbr title="Phone">P: </abbr>(123) 456-7890
          <br />
          <abbr title="Email">E: </abbr> <a href="mailto:#">Email Us</a>
        </div>
      </div>
    </div>
    <!-- /.row -->

    <hr>

    <div class="row text-center">

      <div class="col-lg-12">
        <h1>What we offer</h1>
        <br />
      </div>

      <div class="col-sm-4">
        <img class="image image--circle image--center" src="https://source.unsplash.com/1w1OMV8CEeM/300x300" alt="">
        <h2>Bespoke</h2>
        <p>La croix vaporware viral vexillologist, flannel jianbing you probably haven't heard of them lomo selfies fixie banjo bespoke literally.</p>
      </div>
      <div class="col-sm-4">
        <img class="image image--circle image--center" src="https://source.unsplash.com/MMtVD2ew1BA/300x300" alt="">
        <h2>Gluten-Free</h2>
        <p>Literally tacos tumeric heirloom fingerstache banjo green juice fashion axe locavore, freegan woke kogi vice photo booth.</p>
      </div>
      <div class="col-sm-4">
        <img class="image image--circle image--center" src="https://source.unsplash.com/SK1_JK-ZHOo/300x300" alt="">
        <h2>Farm to Table</h2>
        <p>Helvetica pop-up raw denim, lomo godard tbh synth jean shorts. Aesthetic tumblr coloring book taco tofu.</p>
      </div>
    </div>
    <!-- /.row -->

    <hr>

    <div class="row">

      <div class="col-lg-12 text-center">
        <h1>Our Work</h1>
        <br />
      </div>

      <div class="col-lg-3 col-md-4 col-xs-6">
        <img class="image thumbnail" src="https://source.unsplash.com/5f4xGaQnM1E/400x300" alt="">
      </div>
      <div class="col-lg-3 col-md-4 col-xs-6">
        <img class="image thumbnail" src="https://source.unsplash.com/QYFi6t0P9Q0/400x300" alt="">
      </div>
      <div class="col-lg-3 col-md-4 col-xs-6">
        <img class="image thumbnail" src="https://source.unsplash.com/EHE7XUs9wb4/400x300" alt="">
      </div>
      <div class="col-lg-3 col-md-4 col-xs-6">
        <img class="image thumbnail" src="https://source.unsplash.com/UHFTNwaQg9o/400x300" alt="">
      </div>
      <div class="col-lg-3 col-md-4 col-xs-6">
        <img class="image thumbnail" src="https://source.unsplash.com/nJZbmL6pvDY/400x300" alt="">
      </div>
      <div class="col-lg-3 col-md-4 col-xs-6">
        <img class="image thumbnail" src="https://source.unsplash.com/TGYQVFiYpWw/400x300" alt="">
      </div>
      <div class="col-lg-3 col-md-4 col-xs-6">
        <img class="image thumbnail" src="https://source.unsplash.com/Gf4WV2qyW2U/400x300" alt="">
      </div>
      <div class="col-lg-3 col-md-4 col-xs-6">
        <img class="image thumbnail" src="https://source.unsplash.com/zG0_RnnxguY/400x300" alt="">
      </div>
    </div>
    <!-- /.row -->


  </div>
  <!-- /.container -->

  <footer class="footer" />

</body>

</html>
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

.header {
    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('https://source.unsplash.com/mNWsZDYUCFs/1500x1000');
    background-size: cover;
}


.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 400px;
  color: #ffffff;
}

.button {
  padding: 10px 16px;
  border-radius: 6px;
  background-color: transparent;
  border: 1px solid #cccccc;
}

.thumbnail {
  padding: 4px;
  line-height: 1.42857143;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.text-center {
  text-align: center;
}

.image {
  display: block;
  max-width: 100%;
  height: auto;
}

.image--center {
  margin-left: auto;
  margin-right: auto;
}

.image--circle {
  border-radius: 50%;
}

.footer {
  height: 50px;
  background-color: #404040;
  margin-top: 30px;
}

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.