Skip to content

Instantly share code, notes, and snippets.

@calvinmorett

calvinmorett/Portfolio Design Concept.markdown

Last active August 29, 2015 14:23
Show Gist options
  • Save calvinmorett/d9a0654418a2d173f31d to your computer and use it in GitHub Desktop.
Save calvinmorett/d9a0654418a2d173f31d to your computer and use it in GitHub Desktop.
Download ZIP
Portfolio Design Concept
Raw
index.html
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>Calvin Morett : Portfolio</title>
</head>
<body><div id="tophi">
<h1 class="heading" >CALVIN MORETT</h1>
</div>
<div id="wrapper">
<section>
<header>
<h2 class="ideas" >INTRO</h2>
</header>
<div class="grid">
<div class="col-1-3">
<div class="moduletxt">
<p>I develop visuals for <span>Print</span> and <span>Web</span> with passion for <span>branding</span>, <span>illustration</span> and <span>art direction</span>. It's been more than a hobby for nine years. </p>
</div>
</div>
<div class="col-1-3">
<div class="moduletxt">
<p>I enjoy <span>modern + clean design</span> & seeing work evolve. A big motivator is being able to inspire a new generation of discouraged artists. </p>
</div>
</div>
<div class="col-1-3">
<div class="moduletxt">
<p>Currently accepting <span>new commissions</span>. For all inquiries regarding <span>part or full-time job</span> offers please send an email for further information.</p>
</div>
</div>
</div>
</section>
<section>
<header>
<h2 class="work">PRINT</h2>
</header>
<div class="grid grid-pad" style="display:none;">
<div class="col-1-8">
<div class="module">
<img src="http://i.imgur.com/2Ralml2.jpg">
<h5 class="caption">RAW COLOR</h5>
</div>
</div>
<div class="col-1-8">
<div class="module">
<img src="http://i.imgur.com/XrifqA7.jpg">
<h5 class="caption">LGA Gala</h5>
</div>
</div>
<div class="col-1-8">
<div class="module">
<img src="http://i.imgur.com/SvIKvJR.jpg">
<h5 class="caption">Minds of Winter</h5>
</div>
</div>
<div class="col-1-8">
<div class="module">
<img src="http://i.imgur.com/f5saBPm.jpg">
<h5 class="caption">Music Week</h5>
</div>
</div>
<div class="col-1-8">
<div class="module">
<img src="http://i.imgur.com/FpCDRHb.jpg">
<h5 class="caption">A View</h5>
</div>
</div>
<div class="col-1-8"> <div class="module">
<img src="http://i.imgur.com/BSoVKYw.jpg">
<h5 class="caption">LGA Gala</h5>
</div>
</div>
<div class="col-1-8">
<div class="module">
<img src="http://i.imgur.com/i4kpo2g.jpg">
<h5 class="caption">Performance Boats</h5>
</div>
</div>
<div class="col-1-8">
<div class="module">
<img src="http://i.imgur.com/eeOuFYa.png">
<h5 class="caption">
<a href='https://www.behance.net/morettc15cb' target="_blank">More on Behance</a></h5>
</div>
</div>
</section>
<section>
<header>
<h2 class="work">ILLUSTRATION & PAINTING</h2></header>
<div class="grid grid-pad" style="display:none;">
<div class="col-1-8">
<div class="module">
<img src="http://i.imgur.com/e0lRxvq.png">
<h5 class="caption">Resemble</h5>
</div>
</div>
<div class="col-1-8">
<div class="module">
<img src="http://i.imgur.com/Z0HTKro.png">
<h5 class="caption">Braids</h5>
</div>
</div>
<div class="col-1-8">
<div class="module">
<img src="http://i.imgur.com/Oii5BH7.png">
<h5 class="caption">Double Cross</h5>
</div>
</div>
<div class="col-1-8">
<div class="module">
<img src="http://i.imgur.com/yv5qUx7.png">
<h5 class="caption">Chance of Doom</h5>
</div>
</div>
<div class="col-1-8">
<div class="module">
<img src="http://i.imgur.com/gIc6xUJ.png">
<h5 class="caption">Floppy</h5>
</div>
</div>
<div class="col-1-8">
<div class="module">
<img src="http://i.imgur.com/543jT9t.png">
<h5 class="caption">Pandora's Cage</h5>
</div>
</div>
<div class="col-1-8">
<div class="module">
<img src="http://i.imgur.com/PAU5img.png">
<h5 class="caption">On the Fritz</h5>
</div>
</div>
<div class="col-1-8">
<div class="module">
<img src="http://i.imgur.com/5rVykEU.png">
<h5 class="caption">
<a href='https://instagram.com/odisbey/'target="_blank">More on Instagram</a></h5>
</div>
</div>
</div>
</section>
<section>
<header>
<h2 class="ideas">GRAPHIC & WEB DESIGN</h2>
</header>
<div class="grid grid-pad" style="display:none;">
<div class="col-1-8">
<div class="module">
<img src="http://i.imgur.com/jT5ZTfm.png">
<h5 class="caption">ADK Brew Pub</a>
</div>
</div>
<div class="col-1-8">
<div class="module">
<img src="http://i.imgur.com/mpIBQzi.png">
<h5 class="caption">News Wordpress Theme</h5>
</div>
</div>
<div class="col-1-8">
<div class="module">
<img src="http://i.imgur.com/iJiR9RH.png">
<h5 class="caption">SeanE Streamer</h5>
</div>
</div>
<div class="col-1-8">
<div class="module">
<img src="http://i.imgur.com/Sx5LiCC.png">
<h5 class="caption"><a href='http://codepen.io/odisbey/'>Staff Page Mockup</a></h5>
</div>
</div>
<div class="col-1-8">
<div class="module">
<img src="http://i.imgur.com/kMgr0v1.png">
<h5 class="caption"><a href='http://codepen.io/odisbey/pen/zxXqPb'>FireHazard Landing Page</a></h5>
</div>
</div>
<div class="col-1-8">
<div class="module">
<img src="http://i.imgur.com/rvHMo0E.png">
<h5 class="caption">Portfolio</h5>
</div>
</div>
<div class="col-1-8">
<div class="module">
<img src="http://i.imgur.com/fxZNZDo.png">
<h5 class="caption">Slick Rick and DJ Trumastr</h5>
</div>
</div>
<div class="col-1-8">
<div class="module">
<img src="http://i.imgur.com/8mMQqwk.png">
<h5 class="caption">
<a href='http://codepen.io/odisbey/'target="_blank">More on Codepen</a></h5>
</div>
</div>
</div>
</section>
<header>
<h2 class="ideas">CONTACT</h2>
</header>
<div class="grid grid-pad">
<div class="col-full">
<div class="module">
<p class="cta"> LETS GET STARTED</p>
<div class='container'>
<div class='name'>
<input class='first' placeholder='FIRST' type='text' class="required" >
<input class='last' placeholder='LAST' type='tel' class="required" >
</div>
<div class='contact'>
<input class='email' placeholder='EMAIL' class="required email" type='text' minlength="2" ><input class='tel' placeholder='TELEPHONE' type='tel'
</div>
<div class='message'>
<textarea placeholder='i would be happy to hear from you—i will get back to you as soon as possible.'></textarea>
</div>
<footer>
<button>SEND</button>
</footer>
</div>
</div>
</div>
</div>
<div id="footer-social">
<div class="hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5a">
<a href="https://instagram.com/odisbey/" class="hi-icon hi-icon-instagram">instagram</a>
<a href="https://www.linkedin.com/" class="hi-icon hi-icon-linkedin">linkedin</a>
<a href="https://www.behance.net/morettc15cb" class="hi-icon hi-icon-behance">behance</a>
<a href="https://www.pinterest.com/morettc/" class="hi-icon hi-icon-pinterest">pinterest</a>
<a href="http://codepen.io/odisbey/" class="hi-icon hi-icon-codepen">codepen</a>
</div>
</ul>
<div class="copyright">
<p>Distribution and modification of this content is not prohibited and greatly encouraged.
<span2>Create something new.</span2>
</p>
</div>
</div>
<!--footer-social-->
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Domine:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
Raw
Portfolio Design Concept.markdown
Raw
script.js
$( 'section' ).on('click', function() {
$( this )
.find('header').toggleClass('hide')
.siblings('div').slideToggle('');
});
function validateForm() {
var valid = 1;
var email = document.getElementById('email');
var email_validation = document.getElementById("email_validation");
var name = document.getElementById('name');
var name_validation = document.getElementById("name_validation");
var message_validation = document.getElementById("message_validation");
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (name.value === "") {
valid = 0;
name_validation.innerHTML = "Field Required";
name_validation.style.display = "block";
name_validation.parentNode.style.backgroundColor = "#FFDFDF";
} else {
name_validation.style.display = "none";
name_validation.parentNode.style.backgroundColor = "transparent";
}
if (message.value === "") {
valid = 0;
message_validation.innerHTML = "Field Required";
message_validation.style.display = "block";
message_validation.parentNode.style.backgroundColor = "#FFDFDF";
} else {
message_validation.style.display = "none";
message_validation.parentNode.style.backgroundColor = "transparent";
}
if (email.value === "") {
valid = 0;
email_validation.innerHTML = "Field Required";
email_validation.style.display = "block";
email_validation.parentNode.style.backgroundColor = "#FFDFDF";
} else {
email_validation.style.display = "none";
email_validation.parentNode.style.backgroundColor = "transparent";
}
if(!filter.test(email.value)) {
valid = 0;
email_validation.innerHTML = "Invalid email address";
email_validation.style.display = "block";
email_validation.parentNode.style.backgroundColor = "#FFDFDF";
} else {
email_validation.style.display = "none";
email_validation.parentNode.style.backgroundColor = "transparent";
}
if (!valid)
return false;
}
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.css
/* Consistent Style Guides XO40*/
$hover:#F2D337;
$theme:#A7AFA6;
$darktheme:#313B37;
$white:#ffffff;
$gray:#eee;
$black:rgba(0,0,0,.99);
$pad: 12px;
@import "compass/css3";
/* CSS Document */
* { /*--make all to 0 as default--*/
padding: 0;
margin: 0;
outline:none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
::selection {
background-color:$theme;
color: #fff;
text-shadow: none;
}
::-moz-selection {
background:#515A52;
color: #fff;
text-shadow: none;
}
a,a:focus,a:active{
color:$black;}
body {
color: #000000;
margin-bottom:20px;
background: $theme url(http://i.imgur.com/y46hrll.png) repeat;
font-family: 'Domine', serif;
}
#tophi {
overflow:hidden;
background:transparent;
margin:0 14% -97px;
}
#nfo {
font-family: 'Source Sans Pro', sans-serif;
z-index:2;
height:auto;
display: inline-block;
vertical-align: middle;
width:auto;
top:-86.45px;
float:right;
right:41px;
position:relative;
margin:0 auto;
text-align:center;
font-size:12px;
letter-spacing:3px;
}
#nfo a, #nfo a:visited, #nfo a:active{
transition: all linear .2s;
text-decoration:none;
color:#000;
padding:14px 0;
}
#nfo a:hover {opacity:1;
padding:14px 12px;
opacity:1;
color: $black;
background:none;
}
h1 {
color: $white;
em {
color: $gray;
font-size: 25px;
}
}
h2 {
color: $white;
line-height:100%;
em {
color: $gray;
font-size: 25px;
}
}
h3{color:transparent;}
.heading {
position:relative;
opacity:1;
color:$white;
background:$black;
text-transform: uppercase;
margin:auto;
padding:20px;
word-break: keep-all;
font-size: 420%;
font-weight:400;
letter-spacing:10px;
font-family: 'Montserrat', sans-serif;
transition: all .95s cubic-bezier(0.25, 0.1, 0.24, 1.51);
height:100%;
text-align:center;
}
.heading:hover{
letter-spacing:9.95px;
background:$darktheme;
color:$gray;
transition: all 0.75s ease;
}
#wrapper{
-webkit-filter: drop-shadow(1px 1px 5px rgba(0,0,0,0.015));
filter: drop-shadow(1px 1px 5px rgba(0,0,0,0.015));
margin:100px 14% 4%;
background: $white;
}
.grid {
background: transparent;
margin: 0 0 $pad 0;
cursor: text;
&:after {
/* Or @extend clearfix */
content: "";
display: table;
clear: both;
cursor: text;
}
}
[class*='col-'] {
float: left;
padding-right: $pad;
.grid &:last-of-type {
padding-right: 0;
}
}
.col-full {
width: 100%;
}
.col-2-3 {
width: 66.66%;
}
.col-1-3 {
width: 33.33%;
}
.col-1-2 {
width: 50%;
}
.col-1-4 {
width: 25%;
}
.col-1-5 {
width: 20%;
text-align:center;
}
.col-1-8 {
width: 12.5%;
transition: all .25s ease;
}
.module {
font-size:90%;
overflow:hidden;
padding: $pad;
}
.moduletxt {
text-align: justify;
font-size:90%;
overflow:hidden;
line-height:200%;
padding: 22px 44px;
}
.module img{
margin: auto;
width: 100%;
height: auto;
}
span{
padding: 0;
border-bottom:2px solid $gray;
transition: all 6s ease;
}
span:hover{
color:$black;
background:$hover;
border-bottom:2px solid #000;
transition: all .55s ease;
}
.cta{
height:65px;
width:200px;
text-align:center;
margin:-15px auto -31px;
padding:5px 5px;
font-size:90%;
border:2px solid $gray;
transition: color 1s ease;
font-family: 'Montserrat', sans-serif;
color:$black;
background:$white;
font-size:145%;
letter-spacing:1px;
line-height:50px;
transition: all .55s ease;
text-transform:lowercase;
text-decoration:none;
font-variant:small-caps;
}
.cta:hover{
color: $gray;
background:$darktheme;
}
span1{
font-family: 'Montserrat', sans-serif;
color:#fff;
font-size:145%;
letter-spacing:1px;
line-height:50px;
margin:0 auto;
padding:6%;
transition: all .55s ease;
text-transform:lowercase;
text-decoration:none;
font-variant:small-caps;
}
span1:hover{
color:#000;
background:transparent;
transition: all .55s ease;
}
span1b{
font-family: 'Domine', serif;
letter-spacing:1px;
line-height:20px;
margin:0 auto;
background:transparent;
transition: all .55s ease;
text-transform:lowercase;
text-decoration:none;
font-variant:small-caps;
}
.caption, .caption a{
font-family: 'Montserrat', sans-serif;
margin-top:5px;
width:100%;
text-transform:uppercase;
text-decoration:none;
text-align:left;
font-size:inherit;
background:transparent;
transition: all 0.3s ease;
}
/* Opt-in outside padding */
.grid-pad {
padding:0 0 $pad $pad;
[class*='col-']:last-of-type {
padding-right: $pad;
}
}
.ideas,.work {
color:$black;
font-size: 1.1rem;
letter-spacing: 1.5px;
padding: .95% 2% .75%;
text-align: left;
font-family: 'Montserrat', sans-serif;
width:98%;
border-bottom: 2px solid $gray;
transition: all .7s cubic-bezier(0.25, 0.1, 0.24, 1.51);
}
.work:hover,.ideas:hover{
background:$theme;
width:100%;
border-bottom: 2px solid $black;
transition: all .55s ease;
padding-left:5%;
}
#footer-social {
padding:10px;
margin-bottom:2px;
background:$white;
text-align:center;
float: left;
width: 100%;
}
#footer-social ul {
display: inline-block;
}
#footer-social ul li {
display: inline;
float:left;
overflow: hidden;
padding: 10px 1.25em;
}
.copyright {
float: right;
text-align:center;
color:#000;
width: 100%;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
text-transform:lowercase;
text-decoration:none;
font-variant:small-caps;
}
.container {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
text-transform:lowercase;
text-decoration:none;
font-variant:small-caps;
width: 100%;
margin: 2em auto;
overflow: hidden;
}
.message, .contact, .name, .footer, header, textarea {
display: block;
padding: 0;
margin: 0;
border: 0;
clear: both;
overflow: hidden;
}
.first, .last {
float: left;
width: 50%;
margin: 0;
height: 50px;
padding: 1% 3% 1.25% 3%;
border: 2px solid $gray;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
text-transform:lowercase;
text-decoration:none;
font-variant:small-caps;
}
.last {
width: 50%;
border-left: 0;
}
.email, .tel {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
text-transform:lowercase;
text-decoration:none;
font-variant:small-caps;
height: 50px;
width: 50%;
line-height: 50px;
padding: 1% 3% 1.25% 3%;
border-top: 0;
border-left: 2px solid $gray;
border-right: 2px solid $gray;
border-bottom: 2px solid $gray;
}
.tel {
width: 50%;
border-left: 0;
}
textarea {
padding: 0 0 0 3%;
@extend .email;
height: 200px;
width: 100%;
}
footer {
@extend header;
margin:0 auto;
text-align:center;
height:65px;
padding-left: 0;
padding-right: 20px;
display:block;
button {
border:2px solid $gray;
font-size:120%;
background: $white;
width: 200px;
height:55px;
padding:3px;
color:$darktheme;
letter-spacing:3px;
text-align:center;
transition: all linear .3s;
float:left;
font-family: 'Montserrat', sans-serif;
text-transform:lowercase;
text-decoration:none;
font-variant:small-caps;
background:$gray;
font-weight:bold;
margin:0 auto;
&:hover {
width:103.5%;
background:$gray;
color:$black;
border:2px solid $gray;
}
&:focus {
outline: none;
}
}
}
.first:focus, .last:focus, .email:focus, .tel:focus, textarea:focus {
outline: none;
font-weight:bold;
border:2px solid black;
color:black;
background:$theme;
}
section{height:100%;}
section header.show:after {
transform: rotate(0deg);
}
section header:after {
content: '';
transform: rotate(-180deg);
position: relative;
transition: transform 500ms ease 0s;
}
@media screen and (max-width: 40em) {
section h7:before {
display: none;
}
}
/* Effect 5 */
.hi-icon-effect-5 .hi-icon {
overflow: hidden;
-webkit-transition: background 0.3s, color 0.3s;
-moz-transition: background 0.3s, color 0.3s;
transition: background 0.3s, color 0.3s;
opacity: 0.4;
transition: opacity 0.2s linear;
}
.hi-icon-effect-5 .hi-icon:after {
display: none;
}
.hi-icon-effect-5 .hi-icon:hover {
background: rgba(0,0,0,1);
opacity: 1;
color:$theme;
}
.hi-icon-effect-5a .hi-icon:hover:before {
-webkit-animation: toRightFromLeft 0.3s forwards;
-moz-animation: toRightFromLeft 0.3s forwards;
animation: toRightFromLeft 0.3s forwards;
}
@-webkit-keyframes toRightFromLeft {
49% {
-webkit-transform: translate(100%);
}
50% {
opacity: 0;
-webkit-transform: translate(-100%);
}
51% {
opacity: 1;
}
}
@-moz-keyframes toRightFromLeft {
49% {
-moz-transform: translate(100%);
}
50% {
opacity: 0;
-moz-transform: translate(-100%);
}
51% {
opacity: 1;
}
}
@keyframes toRightFromLeft {
49% {
transform: translate(100%);
}
50% {
opacity: 0;
transform: translate(-100%);
}
51% {
opacity: 1;
}
}
.hi-icon-wrap {
text-align: center;
margin: 0 auto;
padding: .75em 0 .5em;
}
.hi-icon {
display: inline-block;
font-size: 0px;
cursor: pointer;
margin: 15px 30px;
width: 90px;
height: 90px;
border-radius: 50%;
text-align: center;
position: relative;
z-index: 1;
color: #000;
text-decoration:none;
}
.hi-icon:after {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
content: '';
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.hi-icon:before {
font-family: FontAwesome;
speak: none;
font-size: 48px;
line-height: 90px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
display: block;
-webkit-font-smoothing: antialiased;
}
.hi-icon-mobile:before {
content: "\e009";
}
.hi-icon-behance:before {
content: "\f1b4";
}
.hi-icon-instagram:before {
content: "\f16d";
}
.hi-icon-linkedin:before {
content: "\f0e1";
}
.hi-icon-codepen:before {
content: "\f1cb";
}
.hi-icon-pinterest:before {
content: "\f0d2";
}
/* FIRST BREAK */
/* RESPONSIVE [first break 1024px] -- WHOOO -- MOTIVATION*/
@media (max-width: 1024px) {
.heading {
text-align:center;
font-size:2.25em;
}
.col-1-8 {
float:left;
width: 33.3%;
}
.col-1-3 {
width: 100%;
clear:both;
}
.moduletxt {
text-align:center;
font-size:90%;
overflow:hidden;
line-height:175%;
}
.caption{
text-align:left;
font-size:80%;
font-weight:900;
}
.caption a{
text-align:left;
font-size:inherit;
}
.ideas,.work {
font-size: 200%;
padding:2.5%;
}
.cta{
width:65%;
background:$white;
}
textarea{
padding-top:20px;
line-height: 90%;
}
footer button, footer button:hover {
font-size: 200%;
width:107%;
padding-bottom:2%;
}
}
/* SECOND BREAK */
/* RESPONSIVE (600)[phone] */
@media (max-width: 600px) {
#tophi {
width: 100%;
background: transparent;
margin: 0 ;
position:relative;
}
.heading {
text-align:center;
font-size:2em;
width: 100%;
}
#wrapper {
margin: 5%;
background: #ffffff;
}
.col-1-8 {
width: 100%;
float:left;
clear:both;
}
.col-1-3 {
width: 100%;
clear:both;
}
.moduletxt {
text-align:left;
font-size:90%;
overflow:hidden;
line-height:200%;
}
.caption{
text-align:left;
font-size:2em;
}
.caption a{
text-align:left;
font-size:inherit;
}
.ideas,.work {
font-size: 200%;
padding-top:5%;
}
.cta{
width:100%;
color:#fff;
background:$darktheme;
}
.first,.last,.email,.tel{
width:100%;
border:2px solid $gray;
text-transform:uppercase;
font-variant:normal;
}
.first,.last,.email,.tel{
border-bottom:none;
}
textarea{
font-variant:normal;
line-height: 125%;
}
footer button, footer button:hover {
font-size: 200%;
width:107%;
padding-bottom:2%;
}
}
/* THIRD BREAK */
/* RESPONSIVE (445)[phone] */
@media (max-width: 445px) {
.grid-pad,#footer-social,section,.hi-icon-wrap {
background: transparent;
padding:0;
margin-top:-1%;
}
body,.wrapper{
width:100%;
background: #fff;
margin:0 auto;
}
#tophi {
font-size:100%;
width: 100%;
background: transparent;
margin: 0 ;
position:relative;
}
.heading {
text-align:center;
font-size:100%;
width: 100%;
background: linear-gradient(326deg, #000000, #000000, #ffffff, #ffffff, #000000, #000000, #ffffff, #ffffff, #000000, #000000, #ffffff, #ffffff, #000000, #000000, #ffffff, #ffffff, #000000, #ffffff, #000000, #ffffff);
background-size: 4000% 4000%;
-webkit-animation: BKG 20s ease infinite;
-moz-animation: BKG 20s ease infinite;
-o-animation: BKG 20s ease infinite;
animation: BKG 20s ease infinite;
@-webkit-keyframes BKG {
0%{background-position:0% 51%}
50%{background-position:100% 50%}
100%{background-position:0% 51%}
}
@-moz-keyframes BKG {
0%{background-position:0% 51%}
50%{background-position:100% 50%}
100%{background-position:0% 51%}
}
@-o-keyframes BKG {
0%{background-position:0% 51%}
50%{background-position:100% 50%}
100%{background-position:0% 51%}
}
@keyframes BKG {
0%{background-position:0% 51%}
50%{background-position:100% 50%}
100%{background-position:0% 51%}
}
}
.col-1-8 {
width: 100%;
float:left;
clear:both;
display: none;
}
.col-1-3 {
width: 100%;
clear:both;
display: none;
}
.moduletxt {
display: none;
margin:-10px;
text-align:left;
font-size:90%;
overflow:hidden;
line-height:150%;
}
.caption{
text-align:left;
font-size:2em;
}
.caption a{
text-align:left;
font-size:inherit;
}
.ideas,.work {
display: none;
}
.cta,.footer,.col-full,.copyright {
width: 100%;
display: none;
}
.first,.last,.email,.tel{
display: none;
}
.first,.last,.email,.tel{
display: none;
}
textarea{
display: none;
}
footer button, footer button:hover {
display: none;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment