Code Samples -Marketing Website Contact Page (Ruby on Rails / Refinery)

contact.html.erb

<%= render 'refinery/shared/header_full_width_title' %>

<div class="row wow fadeInUp" data-wow-duration="2s" data-wow-offset="20">
    <div class="col-sm-6">
        <%= raw @page.content_for(:body) %>
    </div>
    <div class="col-sm-6">
      <%= raw Refinery::Page.find_by_path_or_id(nil, 26).content_for(:teaser) %>
    </div>
</div>
<div class="bg-mobile">
    <div class="row bg-white">
        <% cta_work_page = Refinery::Page.find_by_path_or_id(nil, 31) %>
        <% if cta_work_page.cta_image.present? %>
        <div class="col-sm-6 content wow fadeInUp" data-wow-duration="2s" data-wow-offset="20">
            <%= image_tag cta_work_page.cta_image.url, alt: cta_work_page.cta_image.image_alt, title: cta_work_page.cta_image.image_title %>
        </div>
        <div class="col-sm-6 wow fadeInUp" data-wow-duration="2s" data-wow-offset="20">
        <% else %>
        <div class="col-sm-12 wow fadeInUp" data-wow-duration="2s" data-wow-offset="20">
        <% end %>
          <div class="cta">
            <%= raw Refinery::Page.find_by_path_or_id(nil, 31).content_for(:teaser) %>
          </div>
        </div>
    </div>
    <div class="row featured">
        <div class="col-sm-12 wow fadeInUp" data-wow-duration="2s" data-wow-offset="20">
            <h3>Modeans</h3>
            <% cta_page = Refinery::Page.find_by_path_or_id(nil, 27) %>
            <% if cta_page.cta_image.present? %>
                <%= image_tag cta_page.cta_image.url, alt: cta_page.cta_image.image_alt, title: cta_page.cta_image.image_title %>
            <% end %>
            <div class="featured-details">
              <%= raw cta_page.content_for(:teaser) %>
            </div>
        </div>
    </div>
</div>

contact.scss

section#page .hero.map .overlay {
    background:transparent;
    position:absolute;
    width:100%;
    height:420px; /* your iframe height */
    z-index: 999999;
}
section#page #contact-form {
  .sidebar {

    i.fa {
        color: $text-color-secondary;
        @include breakpoint($mobile) {
            color: $text-color;
            margin: 0 18px;
        }
    }
    .social-icons {

        span.icons{
            a, i.fa { color: $text-color; }
        }
    }
    div:not(.visible-xs){
      border-bottom:1px dotted $border-color;
      margin-top: 15px;
    }
    div:last-child {
      border-bottom: none;
    }
    .phone {
        font-family: $font-montserrat;
        line-height: 50px;
    }
    .fa-mobile-phone {
        display:inline-block;
        line-height: 50px;
        color: #99cccc;
        width: 50px;
        height: 50px;
        text-align: center;
        vertical-align: bottom;
    }
    .address {
        margin-left: 52px;
    }
    .fa-map-marker {
        display:inline-block;
        line-height: 50px;
        color: #99cccc;
        width: 50px;
        height: 27px;
        text-align: center;
        vertical-align: bottom;
    }
  }
  .contact {
      background: #fff;
      border: 1px solid #d5d5d5;
      color: #a1a1a1;
      margin: 1.5em;
      padding: 1.6em 1.6em 2.6em 1.6em;
  }

  h6 {
      font-weight: 400;
      font-size: 18px;
      line-height: 18px;
      border-bottom: 1px dotted $border-color;
      font-size: 1.2em;
      font-weight: normal;
      padding-bottom: 1.5em;
      text-transform: uppercase;
  }
  h6 span {
    font-weight: 400;
    font-size: 11px;
    color: rgb(153, 204, 204);
    line-height: 20px;
  }

  .top-border {
      padding-top: 20px;

      #careers {
          padding-top: 25px;
      }
  }


  @include breakpoint($mobile) {

     .bg-mobile {
        margin-top: 25px;
     }
      h1 { font-size: 26px; }
      .careers { float: right; }
      .social {
        margin-bottom: 30px;
        margin-top: -15px;
        padding: 0;
        padding-bottom: 10px;
        border-bottom: 1px dotted $border-color;

        span.icons {
            a {
              font-size: 36px !important;
              margin-left: 0px;
            }
        }
      }
      .phone {
          .btn-primary {
              background: #fff;
              border: 1px solid #bcbcb2;
              border-radius: $border-radius;
              color: #99cccc;
              font-family: $font-montserrat;
              font-weight: bold;
              padding: 1em 6em 1em 6em;
              text-transform: uppercase;
          }
          .btn-primary:hover {
              background: #99cccc;
              border: 1px solid #bcbcb2;
              color: #fff;
          }
      }

      form fieldset .row {
          @include box-shadow(none);
          border: none;
          margin: 0;
          padding: 0 10px;
      }
   }

   @include breakpoint($tablet) {
      h1 { font-size: 36px; }

      .social {
          margin-bottom: 20px;
          span.icons {
              font-size: 24px;
              margin-left: 30px;
              display: block;
              line-height: 30px;
          }
      }

  }
}