Last active
February 24, 2016 15:18
-
-
Save joebrislin/154449b42495cda65316 to your computer and use it in GitHub Desktop.
Code Samples -Marketing Website Contact Page (Ruby on Rails / Refinery)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<%= 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment