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.
<!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"> </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 & 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"> </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"> </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"> </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"> </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">@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> |
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.
/* 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; | |
} | |