Skip to content

Instantly share code, notes, and snippets.

@linebreaker

linebreaker/index.html

Created October 15, 2017 19:52
Show Gist options
  • Save linebreaker/ab31269fef732ccfefb0d09402b25371 to your computer and use it in GitHub Desktop.
Save linebreaker/ab31269fef732ccfefb0d09402b25371 to your computer and use it in GitHub Desktop.
Download ZIP
Responsive scaling
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<!--header-->
<head>
<!-- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<title>EUI Prototype: Home</title>
<!--<meta name="description" content="<?php //if(isset($metaDescription)){ echo $metaDescription; } ?>" />
<meta name="author" content="effectiveUI">
<meta name="google-site-verification" content="uNf3CUYhrrvuCwbBYDet8a99spO0KwX7V_b3rruXJwE" />-->
<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<!-- CSS
================================================== -->
<!--Google Fonts: Open Sans-->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700,600' rel='stylesheet' type='text/css'>
<!--Temp. Sub for Apex New -->
<link href='https://fonts.googleapis.com/css?family=Exo+2:400,100,200,300,500,600,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/prototype-global.css" />
<!--/css-->
</head>
<!--/header-->
<body>
<!--wrapper-->
<div class="wrapper">
<!--container-->
<div class="container">
<!--header-->
<div class="nav-bar">
<!--nav logo-->
<a class="nav-bar-logo" href="index.html"><img src="https://lh3.googleusercontent.com/37u7wbF2jZkwAY0OafRvwCs397cR48hdce20YAs3RotoSt0twu5NV41ko-yHf9eXC6Ce3edLmfbMo_X0WGQn7C_YIwOVw7bNcn66I0yNkF11HFqN85zAMAc4rUIyPTp9cTauMtJ_PPk_AgcGPZzqo678L18qhwHKYoDEuuiuBHE8Lw2ps5MqgZIP8i03gM8ZCEJuKG3odZqVJjnFe8OIZe9S0LDlaTVQ1aOsOuxSXV8ONYc7PdegeIr8pNNHgepMEskuGoCHDlihT-OMcPfYEfFhYS0SDI1-nLXBfoh3dkfPUmkpmY2K-HQrQb68Kx0aBR233slhiNkrWMMv-8qhkMVrxoF96PRuGPbJY8-zYU2uLlqunfaV2QoUsTb1EnBRxrjvHv3rWILNit3YCGzEkcudeI75HlyAgiFlq2-A2lQXkikeiVkbcHKtAYEanA8tOn4ehAfhn6vIQNxA-AvDMnaPoLBvLHNFhUNfk93WnnT_CDBFCqR6ECqRcYQXY3IPQeTLGyT24Kc0Sdnc24OctfTgWb11DBD9y4ZjcpuUzEqkbnlkOeEKeCHkL5F3FGbAwRl2=w258-h56-no" /></a>
<!--/nav logo-->
<!--menu button-->
<a class="nav-menu-button" href="#">Menu</a>
<!--/menu button-->
</div><!--/header-->
<!--header-->
<header>
<!--helps maintain aspect ratio for row content-->
<div class="header-height">&nbsp;</div>
<div class="header-graphic">
<div class="header-graphic-bkd"></div>
<!--<div class="header-graphic-gradient"><a href="#"></a></div>
<div class="header-graphic-device"><img src="img/header/home-header-concept-A-device.png" /></div>-->
<div class="header-bar"></div>
</div>
<div class="content">
<h2>Advancing</h2>
<h1>Biotech &amp; Healthcare</h1>
<p>At EffectiveUI, we are passionate about usingour skills to drive radical transformation withinbiotech and health care.</p>
<a class="learn-more-link blue" href="#">Learn More</a>
<a class="header-button" href="#">View Our Portfolio / Work</a>
</div>
</header><!--header-->
<!--row-two-->
<section class="row-two">
<!--helps maintain aspect ratio for row content-->
<div class="row-two-height">&nbsp;</div>
<div class="column-one">
<div class="rollover"><a href="#"></a></div>
<div class="content-approach">
<h3>How We Work</h3>
<h2>Approach</h2>
<a class="learn-more-button" href="#">Learn More</a>
</div><!--/content-approach-->
</div><!--/column-one-->
<div class="column-two">
<div class="content-ideas">
<h3>What We Think</h3>
<h2>Ideas</h2>
<a class="learn-more-button-block" href="#">Learn More</a>
</div><!--/content-ideas-->
</div><!--/column-two-->
<div class="column-three">
<div class="content-company">
<h3>Who We Are</h3>
<h2>Company</h2>
<a class="learn-more-button-block" href="#">Learn More</a>
</div><!--/content-ideas-->
</div><!--/column-two-->
</section><!--/row-two-->
<!--row-three-->
<section class="row-three">
<!--helps maintain aspect ratio for row content-->
<div class="row-three-height">&nbsp;</div>
<!--column one-->
<div class="column-one-a">
<div class="square-2x1 blog">
<div class="square-2x1-content">
<h3 class="gray">EffectiveUI Blog</h3>
<p>Discovery, the first stage of the UX design process, is the primary driver of a successful and efficient project.</p>
<a class="learn-more-link blue" href="#">Learn More</a>
</div><!--/square-1x1-content-->
</div><!--/content-square-->
<div class="square-2x1 blog-image">
<img src="https://lh3.googleusercontent.com/JYba-EBgEwZbn_sPn9a-fN3LxNJkCwjuoYeTYSds84FhNWkpp1K-2pj8DMMkj-zRA9C9Vul2G2K31j6f4WY2ESi5MR9WQa_zoCJbXnLMRdFJFBORKX7_qpP8IXgvB5dZ_jHFPG8bg9fL_s2RIY1U-5laNoXDhVm_dY4qKT2momFvD24tsq-iIJZPeSysTvre30HdwYqq19MUQguBsuUCI60Z2JWvEaVh1pWrsXm7kUXY43Ir8KQw940bAQbjnmgXi1MpVKvL_UkYz4hTkNkzBTk62cYFQgNIQYEgnT9LPDScKcWTbsQtsfE3dP8QVuowDtMuN5miLtSpVvHy7JyutUa5ZEzFl-RIDK3xsuoD4zjsM5ZfRr_nytojCyNWzC2DzFQICletsp6f2XU2KVikwu3ypN85SqAUyAbxJDvLgUmQjn-qTPAwRhChc69pjHyECgzfrn72D_zbzNQYpjYNK8Q8vps-n2YXEK3pAgMzylAPtkdoFio3uccRXuqhzEHUVZRQ1nH_Ub9QXDKrpWzs8b3OHSDRbF9gGFz9NJ5XM3SYZq_PZsv0zHIjbY5bGRGHJu0r=s300-no" height="100%" width="100%" />
</div><!--/content-square-->
<div class="square-2x1 contact">
<div class="square-2x1-content">
<h2 class="contact">Contact</h2>
<h4 class="phone">888.310.5327</h4>
<a class="email-button" href="#">Email Us</a>
<a class="location-button" href="#">View Locations</a>
</div><!--/square-1x1-content-->
</div><!--/content-square-->
<div class="square-2x1">
<div class="square-2x1-content">
<h3 class="news">In the News</h3>
<p class="white">Discovery, the first stage of the UX design process, is the primary driver of a successful and efficient project.</p>
<a class="learn-more-link white" href="#">Read Article</a>
</div><!--/square-1x1-content-->
</div><!--/content-square-->
</div><!--/column-one-->
<!--featured-column-->
<div class="column-four">
<div class="rollover-featured"><a href="#"></a></div>
<div class="square-4x4">
<div class="featured-graphic">&nbsp;</div>
<div class="square-4x4-content">
<h3 class="gray">This Week At EffectiveUI</h3>
<h2 class="featured">Featured Headline</h2>
<a class="learn-more-link featured-link blue" href="#">Learn More</a>
</div><!--/square-4x4-content-->
</div><!--/content square-->
</div><!--/square-4x4-->
<!--/featured-column-->
</section><!--/row-three-->
<section class="row-two">
<!--helps maintain aspect ratio for row content-->
<div class="row-two-height-a">&nbsp;</div>
<div class="column-five">
<div class="square-1x1">
<img src="https://lh3.googleusercontent.com/xK0kZw0JkcHOAXPAjsXOdbOqQPeNCe0JhI7REVzIAoVAqDwuiP-xZ8wCiLZkGh_zzQVlWvjuRNd1xY71e7fdFAex2sj66cWpxzgA6oXTC9hNyrUlCxphyeyop_f98HjBAOOYw3oFVyxrfc9wliRi7SN1TSvo9Iyc_FFh1i8hjHlQ8xK03lnDthYWvWYtAvjx252HwKLf6xkjQYa7GBIBHO16xJKj_hY1x1efulWFMP4LneDejkjV2Y_cuGtsor5YbFPdyIWaCOXnCRYWgClkb8ijk2gHiACzS2nVy-hiDDCTIIAw9mTYC6Q0OKRpgIIw7CyeIelkS83fzlsIYMhgMXqxxbcnmEgbPnV7SZr7enQ95BVkPyjLYhLC2lA5huNrXViE3n9cBfy590J1sndPe9SUklpumD1EiY74BZfmP5QnJaWDt7ZXU4KP34A6fmpyiPP05Ujms2YluqXNSiS78NPnXWYe-Z8f5JQ1QcV9QdzECo0fT7XtmPVM5v3rxVjbPHaTI6pDIKu7fJG3lGQqATQiJ5JIdnxy8HFjjTPlyojrv9jBOTKgehacqCddi-XJKFnu=s550-no" height="100%" width="100%" />
</div><!--/content-square-->
<div class="square-1x1">
<img src="https://lh3.googleusercontent.com/kIz0hjxn8k8AlD4e_SUP2TW3NaCMfYvAZ9d06bZX-f0wBY0NkIfiW78Au9RGFIo7uASGblqVk0TiKtZIeqQ7CDD9bSleMaNvuAZ-bdZljkZpzO-fhqmRoJBunxy93ZSvC2fOZSg9PCXGKhKuFxHBkpHiHzAXEjyXgdIXb9P9BvaKDDsHnYt_7ZOPy3TRpFHboy3cjEFfzNASoxS9S44-dRZcYsFwxW_t3nG0nogfl7Gzq57wpAYlNh2Eyykw1fZ3-d0uOSgwjstqYnJcA6gCzXD0cQ5vMuf8axjV9TinWW6T_PdOMd5AuQNJBLNRo9XVSX28W1TahRg4V7Gop4TxKBPAG07aGIwUBbSnGR0VVLS4Pa4IP7B4QmuP0bMEDsCWdYlIpwqA2373jl5vNehxhAFOOvG1V6L-3g_WCxHUyEviI8UBWMFsVMJ4sBfJ9DrZj9QR24YErTaJcGgjeIjs0YR_zX3rryX28rFC5QtYzFaBsbLBerodNGbhniRmqhtSHT3R2QqfUFk9KVhtN8i1V3d_ki7C20eCRXVXSj00z38B-roUG_B8tUHtyn9lvomfFqGy=s550-no" height="100%" width="100%" />
</div><!--/content-square-->
<div class="square-1x1 twitter">
<div class="square-1x1-content">
<h3 class="gray">&commat;EffectiveUI</h3>
<p>6 Essential Backend-as-a-Service Features Every Mobile App Needs <a href="#">http://ow.ly/Deplh</a> <a href="#">#BaaS</a></p>
<a class="learn-more-link blue" href="#">Read Article</a>
</div><!--/square-1x1-content-->
</div><!--/square-1x1 twitter-->
<div class="square-1x1">
<img src="https://lh3.googleusercontent.com/xK0kZw0JkcHOAXPAjsXOdbOqQPeNCe0JhI7REVzIAoVAqDwuiP-xZ8wCiLZkGh_zzQVlWvjuRNd1xY71e7fdFAex2sj66cWpxzgA6oXTC9hNyrUlCxphyeyop_f98HjBAOOYw3oFVyxrfc9wliRi7SN1TSvo9Iyc_FFh1i8hjHlQ8xK03lnDthYWvWYtAvjx252HwKLf6xkjQYa7GBIBHO16xJKj_hY1x1efulWFMP4LneDejkjV2Y_cuGtsor5YbFPdyIWaCOXnCRYWgClkb8ijk2gHiACzS2nVy-hiDDCTIIAw9mTYC6Q0OKRpgIIw7CyeIelkS83fzlsIYMhgMXqxxbcnmEgbPnV7SZr7enQ95BVkPyjLYhLC2lA5huNrXViE3n9cBfy590J1sndPe9SUklpumD1EiY74BZfmP5QnJaWDt7ZXU4KP34A6fmpyiPP05Ujms2YluqXNSiS78NPnXWYe-Z8f5JQ1QcV9QdzECo0fT7XtmPVM5v3rxVjbPHaTI6pDIKu7fJG3lGQqATQiJ5JIdnxy8HFjjTPlyojrv9jBOTKgehacqCddi-XJKFnu=s550-no" height="100%" width="100%" />
</div><!--/content-square-->
</div><!--/content-square-->
</section><!--/row-two-->
<footer>
<ul class="left">
<li class="first"><a href="#">Approach</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Ideas</a></li>
<li><a href="#">Company</a></li>
<li><a href="#">Sitemap</a></li>
</ul><!--/ul left-->
<ul class="right">
<li><a href="#">Contact Us</a></li>
<li><a href="#">Privacy</a></li>
</ul><!--/ul right-->
</footer>
</div><!--/container-->
</div><!--/wrapper-->
</body>
</html>
Raw
responsive-scaling.markdown

Responsive scaling

Proof-of-concept html/css prototype used to explore proportional scaling of content via a responsive web site. This prototype also explored lightweight css3 micro interaction states and transitions.

A Pen by Noah Dempewolf on CodePen.

License.

Raw
style.css
/* https://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* =============================================================================
* MASTER STYLES – COLOR CODES
* ==========================================================================
PRIMARY
anthracite: rgba( 93, 79, 75, 1.0) #5d4f4b; – h2 (and below) headings,
goldenrod: rgba( 255, 140, 0, 1.0) #ff8c00;
NEUTRALS
ghost-gray: rgba( 226, 224, 223, 1.0) #e2e0df; – Background
light-gray: rgba( 143, 136, 132 0, 1.0) #afa6a4;
medium-gray: rgba( 127, 115, 112, 1.0) #7f7370;
dark-gray: rgba( 38, 33, 37, 1.0) #262125; – H1-titles, Footer, Side-Nav
dark-gray-highlight: rgba (82, 77, 80, 1.0) #524D50; – Side-Nav Bars
black: rgba( 255, 140, 0, 1.0) #000000; – Body copy
white: rgba(255, 255, 255, 1.0 ) #ffffff; – Buttons, Reversed-Text
VIBRANTS
deep-pink: rgba( 240, 85, 113, 1.0) #5d4f4b; - Blog
medium-purple: rgba( 147, 8, 158, 1.0) #93509e; – Contact
cyan: rgba( 5, 150, 201, 1.0) #0596c9; – Text Links, Twitter, Links on light bkd
green: rgba( 57, 18, 74, 1.0) #39b54a; – News
/* =============================================================================
* MASTER STYLES – TEXT
* ==========================================================================
BASE TEXT SIZE= 16PX/1EM/100%
BODY TEXT
p, a – font-size:90%;
HEADER TEXT
h1 (Data Visualization, etc.) – font-size:314%;
h2 (Reinventing/Advancing Text) – font-size:222.5%;
ROW TWO TEXT
h2 (Approach, etc) – font-size:222.5%;
h4 (How We Work, etc) – font-size:100%;
NAV
dt – (Main Nav Headings) – font-size:155%;
dd – (Main Nav Subheadings) – font-size:85%;
/* =============================================================================
* @GLOBAL
* ========================================================================== */
div {
display:block;
}
body {
width:100%;
height:100%;
padding:0;
background-color:#e0dfe1;
font-family: 'Open Sans', sans-serif;
}
/* =============================================================================
* LAYOUT
* ========================================================================== */
.wrapper {
width:100%;
position:relative;
}
.container {
max-width:1100px;
min-width:320px;
margin:0 auto;
padding:0;
}
/* =============================================================================
* NAV BAR
* ========================================================================== */
.nav-bar {
position:relative;
width:100%;
height:auto;
min-height:50px;
margin:0;
padding:0;
background-color:#ffffff;
}
.nav-bar-logo {
width:11%;
min-width:129px;
position: absolute;
display:inline-block;
left:3.81%;
top:15%;
}
.nav-bar-logo img {
width:100%;
}
/* =============================================================================
* HEADER
* ========================================================================== */
header {
display: inline-block;
position: relative;
width: 100%;
background:#f0eff1;
}
.header-graphic {
position:absolute;
top:0;
right:0;
z-index:1;
width:100%;
height:100%;
}
div.header-graphic img {
max-width:1100px;
}
.header-bar {
position:absolute;
left:0;
bottom:0;
z-index:5;
width:100%;
height:12.54%;
background-color: rgba(255,255,255,.55);
}
.header-graphic-bkd {
width:100%;
height:100%;
position: absolute;
left:0;
top:0;
z-index:1;
background: url('https://lh3.googleusercontent.com/cqWTYb0AWY8KKD1Uq2NwRl2ypRxJSUKR4hy3E9nU01IAFhd14kk4atSNc50Megs67ptd6l7aXCEGXLCTc28xfxLNsbLf37krcO3svioW2ad93dBJGP6hPMVrRsCwETv1cjNbIQISHgN_LXmUAERlpQ7QAbjsWX0F4r2tAjy-KAkFiapy6NcyoQfgQ7dHzcfNVJ9z-SZGD9kW6G9pUintPVNqLOKXrtG3nRkO1EsRlBQVzBMvjXj93a5eBKnyHcogbMKwF5W8hNHEh60szXkuER0y7h59E4kLA7xJIXGFDYrx5QIW9nQj01TUKv6zXTO2-R2hJiV7ghLDkS0nTFvNJE8tPVZjW3FqgtZ5EM0TRIPIdlRRbP_UYJbsk5rvEJEM2E2DGoETjbnKFR50M3sE5pF0hV71P3pzL7QcU_zZPF9sU6U6C_bSXMFpXFLdoWJKR228-0M5rg05H0RIuUHBk5Np4dBCvn_ye5vv3V3T_NbZeTlKNkG7Jm8EUuJF4ZmnDVKG-m-yKmPR2grvRy4DPUM5PKkPW2HvtCqadCaulLiGwqtmOxj4OnTtHLYXc29JhzsK=w2174-h1088-no') no-repeat;
background-color: #fff;
background-size: 103%;
background-position:0 0;
overflow:hidden;
}
.header-graphic-gradient a {
display: block;
width:100%;
height:100%;
position: absolute;
left:0;
top:0;
z-index: 2;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U0ZTNlMSIgc3RvcC1vcGFjaXR5PSIwLjMiLz4KICAgIDxzdG9wIG9mZnNldD0iMzklIiBzdG9wLWNvbG9yPSIjZTRlM2UxIiBzdG9wLW9wYWNpdHk9IjAuMyIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYzljOGM2IiBzdG9wLW9wYWNpdHk9IjAuMyIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, rgba(228,227,225,0.3) 0%, rgba(228,227,225,0.3) 39%, rgba(201,200,198,0.3) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(228,227,225,0.3)), color-stop(39%,rgba(228,227,225,0.3)), color-stop(100%,rgba(201,200,198,0.3))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(228,227,225,0.3) 0%,rgba(228,227,225,0.3) 39%,rgba(201,200,198,0.3) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(228,227,225,0.3) 0%,rgba(228,227,225,0.3) 39%,rgba(201,200,198,0.3) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(228,227,225,0.3) 0%,rgba(228,227,225,0.3) 39%,rgba(201,200,198,0.3) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(228,227,225,0.3) 0%,rgba(228,227,225,0.3) 39%,rgba(201,200,198,0.3) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4de4e3e1', endColorstr='#4dc9c8c6',GradientType=1 ); /* IE6-8 */
transition: all .2s cubic-bezier(.17,.67,.38,.95);
}
.header-graphic-gradient a:hover {
background: #0596C8;
z-index:2;
}
.header-graphic-device {
width:100%;
height:100%;
position:absolute;
z-index:2;
overflow:hidden;
}
.header-graphic-device img {
position:absolute;
width:100%;
right:-28em;
top:-1em;
overflow:hidden;
}
/* =============================================================================
* IMAGES LAYOUT/STYLES
* ========================================================================== */
.featured-graphic {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;
background-image: url('https://lh3.googleusercontent.com/_r8e1rFxDkTN-AWrnTtzAPyfs8dQ3Et0ELnPtNINOWbwYk58CE0oZLDg3ULbNTRCbu3Jb53JYSdbcSqqQ2CYJrJkCsdpyOvsAlCIgp-P32nhxchvGJmLByKgbp7jaCKM0QtbVosDIHEO_vLsCDm1-ipCdA7RfLjCStu8PemNaEwIGbGONhuhCWNdM0QzlLF6hl7XJbIpPIV3txR-J3Y7hrkXk57Jp0Etcaw0Nbsy8qGhhqfelZ1oDNBb9kMvnQfP54djXw9qZTQHc6LbCt11WBFMsDMPd8q1ChBVfUHVn1blJ4Y16ZHAPddZQEtPgeHoK9Z3XlMjPsBu6Od6JAB9becDS4kXQYRTZPOYzar2lZSYMS8yNb1ZUTSS1mZPumUlR7A1BDpaZudLGVghfDbt7BqBSN0GD3bRoIeRVJkgZlnzaU16pYqMtu0IPzdAFfIVYB6W5ayhpveNY84tRp9zR1ZmkcwsvYJ-mPNPP--6xc8tUXytR3IusWw6CH_UBf1MTDrqEXrnF0QDFYVqOeK4Ds1f0ccm9SFY-49U33__ITrPvqm8tTSsSaVuRrD8QeI8S0cY=s1100-no');
background-repeat: no-repeat;
background-size:100%;
background-position:0 .5em;
}
.featured-graphic img {
max-width:550px;
width:100%;
height:100%;
}
/* =============================================================================
* ROLLOVERS / INTERACTION / ANIMATION STYLES
* ========================================================================== */
.rollover {
position:absolute;
top:0;
left:0;
z-index:1000;
width:100%;
height:100%;
overflow: hidden;
}
div.rollover a {
display:block;
color:#fff;
width:100%;
height:100%;
border:none;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border:.25em solid rgba(255, 255, 255, .0);
transition: all .2s cubic-bezier(.17,.67,.38,.95);
background-color:transparent;
}
div.rollover a:hover {
width:100%;
height:100%;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border:1.25em solid rgba(255, 255, 255, .90);
}
.rollover-featured {
position:absolute;
top:0;
left:0;
z-index:1000;
width:100%;
height:100%;
overflow: hidden;
}
div.rollover-featured a {
display:block;
color:#fff;
width:100%;
height:100%;
border:none;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border:.25em solid rgba(56, 180, 73, .0);
transition: all .2s cubic-bezier(.17,.67,.38,.95);
background-color:transparent;
}
div.rollover-featured a:hover {
width:100%;
height:100%;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border:1.25em solid rgba(56, 180, 73, .90);
}
/* =============================================================================
* BUTTONS STYLES
* ========================================================================== */
a.header-button {
font-size:90%;
position:absolute;
bottom:14%;
left:0;
font-weight:700;
text-decoration: none;
text-transform: uppercase;
color:#0596C8;
padding:.5625em.725em;
border:2.5px solid #0596C8;
transition: all .2s cubic-bezier(.17,.67,.38,.95);
}
a.header-button:hover {
color:#fff;
background-color:#0596C8;
}
a.nav-menu-button {
position:absolute;
font-size:90%;
width:11%;
top:15%;
right:0;
font-weight:700;
text-decoration: none;
text-transform: uppercase;
color:#0596C8;
background-color:#fff;
padding:.5625em .725em;
border-top:2.5px solid #0596C8;
border-bottom:2.5px solid #0596C8;
border-left:2.5px solid #0596C8;
transition: all .3s cubic-bezier(.17,.67,.38,.95);
}
a.nav-menu-button:hover {
width:13%;
color:#fff;
background-color:#0596C8;
}
a.learn-more-button {
font-size:90%;
z-index:105;
position:absolute;
bottom:4%;
left:0;
font-weight:700;
text-decoration: none;
text-transform: uppercase;
color:#fff;
padding:.5625em 5em .5625em .725em;
border:2.5px solid #fff;
transition: all .15s ease;
}
a.learn-more-button:hover {
background:#fff;
color:#7E736F;
}
a.learn-more-button-block {
font-size:90%;
width:95%;
position:absolute;
bottom:4%;
left:0;
font-weight:700;
text-decoration: none;
text-transform: uppercase;
color:#fff;
padding:.5625em 0 .5625em .725em;
border:2.5px solid #fff;
transition: all .15s ease;
}
a.learn-more-button-block:hover {
background:#fff;
color:#7E736F;
}
/* =============================================================================
* LINK STYLES
* ========================================================================== */
a.learn-more-link {
display:block;
font-size:90%;
font-weight:700;
text-decoration:none;
text-transform:uppercase;
padding-top:.5em;
color:#fff;
}
a.featured-link {
padding-top:1%;
}
a.email-button {
font-size:90%;
display:block;
width:100%;
position:absolute;
bottom:30%;
font-weight:700;
text-decoration: none;
text-transform: uppercase;
color:#0596C8;
padding:.5625em 0 .5625em .725em;
border:2.5px solid #0596C8;
transition: all .15s ease;
}
a.location-button {
font-size:90%;
display:block;
width:100%;
position:absolute;
bottom:4%;
left:0;
font-weight:700;
text-decoration: none;
text-transform: uppercase;
color:#0596C8;
padding:.5625em 0 .5625em .725em;
border:2.5px solid #0596C8;
transition: all .15s ease;
}
a.email-button:hover, a.location-button:hover {
color:#fff;
background-color:#0596C8;
}
a.blue {
color:#0596C8;
}
a.blue:hover {
text-decoration:underline;
}
a.white {
color:#fff;
}
a.white:hover {
text-decoration:underline;
}
/* =============================================================================
* HEIGHT HELPERS: MAINTAINS ASPECT RATIO (HEIGHT) OF ROW ELEMENTS
* ========================================================================== */
.header-height {
padding-top: 48.54%;
}
.row-two-height {
padding-top:23.5%;
}
.row-two-height-a {
padding-top:23.5%;
}
.row-three-height {
padding-top:48.54%;
}
/* =============================================================================
* SECTION ROWS
* ========================================================================== */
section.row-two {
display: inline-block;
position: relative;
width: 100%;
background:#fff;
}
section.row-three {
display: inline-block;
position: relative;
width: 100%;
background:#fff;
}
/* =============================================================================
* COLUMNS
* ========================================================================== */
.column-one {
position:absolute;
width:50%;
height:100%;
top:0;
left:0;
background:#7E736F;
background: url('https://lh3.googleusercontent.com/aUUVylgDnK613BLgUnShekUi_raJwdVn_yy4mpkeiw659NSF5ujb1XSU_QzoBvXdm9RLfjsYZWcpR7rkPORsvkTYm4b0MwwFiGo-wegh0_6WxkQjWFMR3haAjv3Gwy3UuEJoCVHqP6qry1ZJbBwbbBSDJJQJCUydc5Mj20B-u6QkbywEfvuJafar3YTl4ayP4P32tFFWbDGTxJnQAxi7iipUP7eXZ4BTYn9neI2MS8yLjs0wsIDHvw3XzKxDee2QKakjJlww8po8BUNfOpME4o728wDuLBAAU1XQwIJH8vksZwWvKJbpMM4yCKR42kHea4mAzFhj-puHqEX-YV_kSY62JN8AM5K1PaNeHlzUkr_9JIwOhXZ6zM8h9CVhCJ4H7FM3uj3ouMc0E9SzX8wZ9L3Hu4fnePP_o8n5kMZA6CyH5TatRFz3iKPXEg6Q3z_5yxp-9NP8AHyIoxkB6H91XuPjKL9OFQFkgQ1sxpgGu-M-EHJCcmpGjIrTC0FsT9omsR7PDMECMGDgJFxcRWz1t3BPuKDowvxzY14fXNdnrPHZw-PDSKpunKAoAoRfqrxWLvKr=w1100-h550-no') no-repeat;
background-size: 105%;
background-position:0 0;
overflow:hidden;
}
.column-one-a {
position:absolute;
width:50%;
height:100%;
top:0;
left:0;
background:#7E736F;
}
.column-two {
position:absolute;
width:25%;
height:100%;
top:0;
left:50%;
background:#AFA6A3;
}
.column-three {
position:absolute;
width:25%;
height:100%;
top:0;
right:0;
background:#948D8B;
}
.column-four {
position:absolute;
width:50%;
height:100%;
top:0;
right:0;
}
.column-five {
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
}
/* =============================================================================
* CONTENT SQUARES
* ========================================================================== */
.content {
position: absolute;
z-index:99;
width:50%;
height:auto;
top: 3em;
bottom: 2.5em;
left: 2.5em;
right: 2.5em;
}
.content-approach {
width:83%;
height:78%;
left:2.5em;
top:2em;
z-index:10;
position:relative;
}
.content-ideas {
width:66%;
height:78%;
left:2.5em;
top:2em;
position:relative;
}
.content-company {
width:66%;
height:78%;
left:2.5em;
top:2em;
position:relative;
}
.square-1x1-content {
width:66%;
height:78%;
left:16%;
top:12%;
position:relative;
}
.square-2x1-content {
width:66%;
height:78%;
left:2.5em;
top:2em;
position:relative;
}
.square-4x4-content {
width:83%;
height:86%;
left:2.5em;
top:2em;
position:relative;
z-index:500;
}
/* =============================================================================
* CONTENT TEXT STYLES
* ========================================================================== */
.content p {
display:inline-block;
width:80%;
height:auto;
font-size: 1em;
line-height:1.625em;
margin:3% 0;
}
.content-approach h2, .content-ideas h2, .content-company h2, .square-1x1 h2, .square-2x1 h2, .square-4x4 h2 {
color:#fff;
font-family:'Exo 2', sans-serif;
font-weight:200;
}
.content-approach h3, .content-ideas h3, .content-company h3, .square-1x1 h3, .square-2x1 h3, .square-4x4 h3 {
text-transform:uppercase;
font-weight:700;
color:#fff;
padding-bottom:.25em;
}
ul.gen-text-ul {
font-size:90%;
font-weight:400;
line-height:135%;
list-style: square;
margin:0;
padding:0;
}
.gen-text-ul li {
margin:0 0 .5em 1.35em;
}
/* =============================================================================
* SQUARE TEXT STYLES
* ========================================================================== */
.square-1x1 {
width:25%;
height:100%;
float:left;
}
.square-1x1 a {
color:#0596C8;
}
.square-2x1 {
width:50%;
height:50%;
float:left;
}
.square-2x1-blog {
width:50%;
height:50%;
float:left;
}
.square-4x4 {
width:100%;
height:100%;
float:right;
}
.blog {
background:#fff;
}
.contact {
background:#f0eff1;;
}
.twitter {
background:#f0eff1;
}
.square-1x1 p {
font-size:90%;
line-height:162.5%;
margin:.5em 0;
}
.square-2x1 p {
font-size:90%;
line-height:162.5%;
margin:.5em 0;
}
/* =============================================================================
* GLOBAL TEXT STYLES - HEADINGS
* ========================================================================== */
h1 {
font-family:'Exo 2', sans-serif;
display:block;
color:#262125;
font-size:4em;
line-height:.9em;
text-transform:uppercase;
font-weight:100;
}
h2 {
color:#5C4E4B;
font-size:2.25em;
padding-bottom:.25em;
text-transform:uppercase;
font-weight:600;
}
h3.gray {
color:#7E736F;
}
h3.news {
color:#fff;
}
h2.featured {
color:#7E736F;
padding-top:.125em;
}
h2.contact {
color:#7E736F;
font-size:2.25em;
padding-bottom:.25em;
text-transform:uppercase;
font-weight:200;
}
h4.phone {
font-size:1.57em;
font-weight:200;
margin:0;
}
p.white {
color:#fff;
}
h2.white, h3.white {
color:#fff;
}
/* =============================================================================
* FOOTER
* ========================================================================== */
footer {
position:relative;
width:100%;
height:auto;
min-height:50px;
margin:0;
padding:0;
background:#262024;
}
footer ul.left {
display:inline-block;
position:absolute;
top:40%;
left:3.8%;
font-size:70%;
width:70%;
list-style:none;
list-style:none;
}
footer ul.right {
display:inline-block;
position:absolute;
top:40%;
right:3.8%;
font-size:70%;
width:30%;
list-style:none;
list-style:none;
text-align:right;
}
footer ul.left li, footer ul.left li a, footer ul.right li, footer ul.right li a {
display:inline;
color:#fff;
text-transform: uppercase;
text-decoration:none;
margin-left:1%;
}
footer ul.left li.first {
margin-left:0;
}
/* =============================================================================
* BREAK POINT TEXT SCALES
* ========================================================================== */
@media only screen and (max-width: 940px) {
.wrapper {
font-size:90%;
}
}
@media only screen and (max-width: 840px) {
.wrapper {
font-size:90%;
}
}
@media only screen and (max-width: 830px) {
.wrapper {
font-size:85%;
}
}
@media only screen and (max-width: 767px) {
.wrapper {
font-size:120%;
}
}
@media only screen and (max-width: 680px) {
.wrapper {
font-size:110%;
}
}
@media only screen and (max-width: 480px) {
.wrapper {
font-size:120%;
}
}
@media only screen and (max-width: 320px) {
.wrapper {
font-size:90%;
}
}
/* =============================================================================
* MOBILE BREAK POINT STYLES
* ========================================================================== */
@media only screen and (max-width: 980px) {
.content {
width:80%;
}
}
@media only screen and (max-width: 767px) {
a.nav-menu-button:hover {
width:16%;
color:#fff;
background-color:#0596C8;
}
div.rollover-featured a {
display:block;
color:#fff;
width:100%;
height:50%;
border:none;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border:.25em solid rgba(56, 180, 73, .0);
transition: all .2s cubic-bezier(.17,.67,.38,.95);
background-color:transparent;
}
div.rollover-featured a:hover {
width:100%;
height:50%;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border:1.25em solid rgba(56, 180, 73, .90);
}
.featured-graphic {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;
background-image: url('../img/featured/home-featured-food.jpg');
background-repeat: no-repeat;
background-size:100%;
background-position:0 .5em;
}
.content {
width:80%;
}
.content p {
display:none;
}
.row-two-height {
padding-top:100%;
}
.row-two-height-a {
padding-top:100%;
}
.row-three-height {
padding-top:200%;
}
.column-one {
width:100%;
height:50%;
position:absolute;
top:0;
left:0;
}
.column-one-a {
position:absolute;
width:100%;
height:50%;
top:50%;
left:0;
background:#7E736F;
}
.column-two {
position:absolute;
height:50%;
width:50%;
top:50%;
left:0;
}
.column-three {
position:absolute;
height:50%;
width:50%;
top:50%;
right:0;
}
.column-four {
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
}
.column-five {
position:absolute;
width:100%;
height:50%;
top:0;
left:0;
}
.square-1x1 {
width:50%;
height:100%;
float:left;
}
.content {
position: absolute;
z-index:99;
width:50%;
height:auto;
top: 3em;
bottom: 2.5em;
left: 2.5em;
right: 2.5em;
}
.content-approach {
left:1.5em;
top:1em;
}
.content-ideas {
left:1.5em;
top:1em;
}
.content-company {
left:1.5em;
top:1em;
}
.square-1x1-content {
left:1.5em;
top:1em;
}
.square-2x1-content {
width:77%;
left:1.5em;
top:1em;
}
.square-4x4-content {
left:2.5em;
top:2em;
}
footer ul.left {
display:block;
position:absolute;
top:20%;
left:0;
font-size:70%;
width:100%;
list-style:none;
text-align:center;
}
footer ul.right {
display:block;
position:absolute;
top:50%;
right:0;
font-size:70%;
width:100%;
list-style:none;
text-align:center;
}
@media only screen and (max-width: 640px) {
div.content {
top:1.5em;
left:1.5em;
width:100%;
}
div.content h2 {
font-size:175%;
}
div.content h1 {
font-size:250%;
}
}
@media only screen and (max-width: 480px) {
div.content h2 {
font-size:150%;
}
div.content h1 {
font-size:200%;
}
.column-one {
width:100%;
height:50%;
position:absolute;
top:0;
left:0;
}
.column-one-a {
position:absolute;
width:100%;
height:50%;
top:50%;
left:0;
background:#7E736F;
}
.column-two {
position:absolute;
height:50%;
width:50%;
top:50%;
left:0;
}
.column-three {
position:absolute;
height:50%;
width:50%;
top:50%;
right:0;
}
.column-four {
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
}
.column-five {
position:absolute;
width:100%;
height:50%;
top:0;
left:0;
}
.square-1x1 {
width:50%;
height:100%;
float:left;
}
.twitter {
width:100%;
}
.square-2x1 {
width:100%;
}
.content {
position: absolute;
z-index:99;
width:50%;
height:auto;
top: 3em;
bottom: 2.5em;
left: 2.5em;
right: 2.5em;
}
.content-approach {
left:1.5em;
top:1em;
}
.content-ideas {
left:1.5em;
top:1em;
}
.content-company {
left:1.5em;
top:1em;
}
.square-1x1-content {
left:1.5em;
top:1em;
}
.square-2x1-content {
width:77%;
left:1.5em;
top:1em;
}
.square-4x4-content {
left:2.5em;
top:2em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment