$('.menu-toggle').on('click', function() {
$('.menu').css({
"translate(100%,100%)"
});
});
$('.close-btn-mail').on('click', function() {
$('.menu').css({
"transform": "translate(-100%,-100%)"
});
});
@charset "UTF-8";
/* CSS Document */
p {
font-family: 'Lato', sans-serif;
font-weight: 300;
color: #595959;
font-size: 16px;
}
h2 {
font-family: 'Cookie', cursive;
color: #595959;
font-size: 35px;
display: table;
margin: 0 auto;
}
#wrapper {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
label {
cursor: pointer;
&: focus;
outline: none;
}
.menu {
display: block;
}
.hide-list {
display: none;
}
.menu {
position: fixed;
top: 0;
left: 0;
background-color: rgba(111, 206, 204, 0.7);
width: 240px;
height: 100%;
margin-left: 0px;
transform: translate3d(-240px, 0, 0);
transition-property: all .2s ease-in;
-moz-transition: all .2s ease-in;
-webkit-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
z-index: 10;
}
.container .expanded {
width: 220px;
overflow: hidden;
}
.container .collapsed {
width: 220px;
margin-left: 220px;
overflow: visible;
}
label.menu-toggle {
position: absolute;
right: -60px;
width: 75px;
height: 90px;
line-height: 0px;
display: block;
margin-top: 30px;
margin-right: -50px;
padding: 0px 0px 0px 20px;
text-indent: -9999px;
background: 50% 50% / 45px 32px no-repeat;
background-image: url(http://averyeliasdesign.com/portfolio/images/menu.png);
transition: all 0.2s ease-in 0s;
transition-property: all;
transition-duration: 0.2s;
transition-timing-function: ease-in;
transition-delay: 0s;
-webkit-transition: all 0.2s ease-in 0s;
-webkit-transition: all 0.2s ease-in 0s;
-webkit-transition-property: all;
-webkit-transition-duration: 0.2s;
-webkit-transition-timing-function: ease-in;
-webkit-transition-delay: 0s;
}
a,
label {
display: block;
text-align: center;
line-height: 50px;
text-decoration: none;
}
/* hide inputs */
.menu-checkbox {
display: none;
}
/* hide navigation icon for sublabels */
.menu .menu label.menu-toggle {
background: none;
}
/* fade in checked menu */
.menu-checkbox:checked + .menu {
transform: translate3d(0, 0, 0);
-webkit-transition: translate3d(0, 0, 0);
}
.menu-checkbox:checked + .menu .menu .container ul.mainnav li a:visited {
transform: translate3d(0, 0, 0);
-webkit-transition: translate3d(0, 0, 0);
}
.logo {
max-width: 260px;
margin-top: -15px;
}
#mainHeader {
background-image: url(http://averyeliasdesign.com/portfolio/images/desk.jpg);
background-size: 100% auto;
width: 100%;
height: 100%;
background-attachment: fixed;
}
#mainHeader ul li {
list-style-type: none;
}
#mainHeader a {
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 22px;
color: #fff;
display: block;
opacity: 0.7;
display: table;
margin: 0 auto;
}
#mainHeader ul li a:hover {
opacity: 1;
transition: all 0.3s ease-in 0s;
}
#mainHeader ul {
padding-top: 60px;
}
#info {
display: table;
background: rgba(0, 0, 0, 0.2);
height: 100%;
width: 100%;
}
#info-content {
display: table-cell;
vertical-align: middle;
text-align: center;
text-transform: uppercase;
color: #fff;
font-size: 12px;
}
h1 {
color: #fff;
border: 3px solid #fff;
text-align: center;
background: rgba(0, 0, 0, 0.1);
font-size: 22px;
font-weight: normal;
padding: 20px;
margin: 10px;
display: inline-block;
}
strong {
display: block;
font-size: 26px;
}
@media only screen and (max-width: 1024px) {
#mainHeader {
background-image: url(http://averyeliasdesign.com/portfolio/images/desk2.jpg);
}
}
@media only screen and (max-width: 700px) {
#mainHeader {
background-image: url(http://averyeliasdesign.com/portfolio/images/desk3.jpg);
}
.menu-checkbox:checked + .menu {
width: 100%;
}
.menu {
background-color: rgba(111, 206, 204, 0.8);
}
#mainHeader a {
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 30px;
color: #fff;
opacity: 0.7;
display: table;
margin: 0 auto;
margin-top: -4px;
}
}
@media only screen and (max-width: 440px) {
#mainHeader {
background-image: url(http://averyeliasdesign.com/portfolio/images/desk4.jpg);
}
}
/*About*/
#about {
padding-top: 70px;
}
.aboutMe {
font-family: 'Cookie', cursive;
font-size: 40px;
color: #595959;
}
#hey {
display: table;
margin: 0 auto;
}
.decor {
margin-top: -8px;
}
.aboutInfo {
padding-left: 130px;
padding-right: 130px;
}
#aves {
display: table;
margin: 0 auto;
width: 17%;
padding-top: 20px;
padding-bottom: 70px;
}
@media only screen and (max-width: 1240px) {
.aboutInfo {
padding-left: 210px;
padding-right: 210px;
}
}
@media only screen and (max-width: 1000px) {
.aboutInfo {
padding-left: 120px;
padding-right: 120px;
}
}
@media only screen and (max-width: 815px) {
.decor {
width: 250px;
margin-top: -8px;
}
.aboutMe {
font-size: 35px;
}
#aves {
width: 25%;
}
}
@media only screen and (max-width: 694px) {
.decor {
width: 200px;
}
.aboutMe {
display: table;
margin: 0 auto;
}
}
@media only screen and (max-width: 680px) {
.aboutInfo {
padding-left: 50px;
padding-right: 50px;
}
}
@media only screen and (max-width: 641px) {
.decor1 {
width: 180px;
padding-right: 20px;
}
.decor2 {
width: 180px;
padding-left: 20px;
}
.aboutMe {
font-size: 33px;
}
#aves {
width: 30%;
}
}
@media only screen and (max-width: 543px) {
.decor1 {
width: 120px;
margin-right: 10px;
}
.decor2 {
width: 120px;
margin-left: 10px;
}
.aboutMe {
font-size: 40px;
}
.aboutInfo {
font-size: 20px;
}
.aboutInfo {
padding-left: 20px;
padding-right: 20px;
margin-top: 15px;
}
#aves {
width: 40%;
}
}
@media only screen and (max-width: 480px) {
.decor1 {
width: 85px;
margin-right: -5px;
margin-top: -10px;
}
.decor2 {
width: 85px;
margin-left: -5px;
margin-top: -10px;
}
.aboutMe {
font-size: 32px;
display: table;
margin: 0 auto;
}
.aboutInfo {
padding-left: 20px;
padding-right: 20px;
}
#aves {
width: 50%;
}
.menu {}
}
#iLove {
background-image: url(../images/a_back.jpg);
margin-top: 20px;
background-size: 100% auto;
height: 1289px;
width: 100%;
background-attachment: fixed;
background-repeat: no-repeat;
z-index: 1;
margin-bottom: 100px;
}
.iLovetitle {
display: table;
margin: 0 auto;
position: relative;
z-index: 3;
margin-top: 100px;
}
.line {
display: table;
margin: 0 auto;
max-width: 15%;
padding-top: 15px;
position: relative;
z-index: 3;
}
.Aback {
position: absolute;
z-index: 2;
max-width: 100%;
}
@media only screen and (min-width: 1588px) {
.Aback {
min-width: 2000px;
height: 1500px;
}
}
@media only screen and (max-width: 1216px) {
#iLove {
height: 1109px;
background-image: url(../images/a_back2.jpg);
}
}
@media only screen and (max-width: 1034px) {
#iLove {
height: 1009px;
}
}
@media only screen and (max-width: 1000px) {
.iLovetitle {
margin-top: 60px;
}
}
@media only screen and (max-width: 954px) {
#iLove {
height: 900px;
}
}
@media only screen and (max-width: 954px) {
#iLove {
background-image: url(../images/a_back3.jpg);
}
}
@media only screen and (max-width: 846px) {
#iLove {
background-image: url(../images/a_back3.jpg);
height: 820px;
}
}
@media only screen and (max-width: 771px) {
#iLove {
background-image: url(../images/a_back4.jpg);
height: 700px;
}
.iLovetitle {
margin-top: 25px;
}
}
@media only screen and (max-width: 679px) {
.iLovetitle {
font-size: 30px;
}
}
@media only screen and (max-width: 658px) {
#iLove {
height: 585px;
background-image: url(../images/a_back5.jpg);
}
}
@media only screen and (max-width: 548px) {
#iLove {
height: 500px;
}
}
@media only screen and (max-width: 480px) {
#iLove {
background-image: url(../images/a_back6.jpg);
height: 485px;
}
}
@media only screen and (max-width: 456px) {
#iLove {
height: 400px;
}
}
@media only screen and (max-width: 377px) {
#iLove {
background-image: url(../images/a_back6.jpg);
height: 360px;
}
}
/* Process */
#process {
margin-left: 90px;
margin-right: 90px;
height: 700px;
}
.procTitle {
padding-top: 50px;
}
.line2 {
display: table;
margin: 0 auto;
max-width: 15%;
padding-top: 15px;
position: relative;
z-index: 3;
}
.icon1 {
margin-left: 50px;
padding-bottom: 20px;
padding-top: 50px;
width: 60%;
}
.iconTitle {
font-size: 20px;
font-family: 'Lato', sans-serif;
font-weight: 400;
padding-bottom: 10px;
color: #6FCECC;
}
.iconP {
font-size: 15px;
padding-right: 12px;
padding-left: 12px;
padding-bottom: 50px;
}
@media only screen and (max-width: 1216px) {
#process {
padding-top: 70px;
}
}
@media only screen and (max-width: 1147px) {
#process {
margin-left: 25px;
margin-right: 25px;
}
.procTitle {
margin-top: -80px;
}
}
@media only screen and (max-width: 1024px) {
#process {
height: 1030px;
}
.icon1 {
margin: 0 auto;
display: block;
width: 40%;
}
.procTitle {
padding-top: 10px;
}
}
@media only screen and (max-width: 640px) {
#process {
margin-left: 0;
margin-right: 0;
height: 1690px;
}
.icon1 {
display: table;
margin: 0 auto;
width: 30%;
padding-top: 0px;
}
.procTitle {
font-size: 25px;
padding-top: 0px;
}
.line2 {
padding-bottom: 40px;
}
}
@media only screen and (max-width: 580px) {
.procTitle {
margin-top: -20px;
}
}
@media only screen and (max-width: 580px) {
.procTitle {
margin-top: -50px;
}
}
/*Work*/
#lineDivide {
border: 1px #EAEAEA solid;
}
.myWork {
font-family: 'Cookie', cursive;
font-size: 40px;
color: #595959;
display: table;
margin: 0 auto;
padding-top: 70px;
padding-bottom: 50px;
}
/*Gallery*/
.contain {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
height: 100%;
}
.contain .box {
height: 90%;
width: 25.333%;
background-repeat: no-repeat;
background-size: 100%;
background-position: 50% 50%;
-webkit-transition: background-size 0.275s ease-in-out;
transition: background-size 0.275s ease-in-out;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.contain .box:hover {
background-size: 115%;
}
.contain .box:nth-of-type(1) {
background-image: url(../images/car_thumb.png);
}
.contain .box:nth-of-type(2) {
background-image: url(../images/tshirt_thumb.png);
}
.contain .box:nth-of-type(3) {
background-image: url(../images/spa_thumb2.png);
}
.contain .box:nth-of-type(4) {
background-image: url(../images/mcore.jpg);
}
.contain .box:nth-of-type(5) {
background-image: url(../images/forrats_thumb.png);
}
.contain .box:nth-of-type(6) {
background-image: url(../images/projectx_thumb.png);
}
.contain .box:nth-of-type(7) {
background-image: url(../images/gap_thumb.png);
}
.contain .box:nth-of-type(8) {
background-image: url(../images/car_thumb.png);
}
.contain .box:nth-of-type(9) {
background-image: url(../images/tshirt_thumb.png);
}
.contain .box .box-info {
background: rgba(35, 35, 35, 0.7);
box-sizing: border-box;
height: 120%;
width: 100%;
-webkit-transition: opacity 0.45s ease-in-out;
transition: opacity 0.45s ease-in-out;
text-align: center;
padding: 20% 0 0;
font-weight: 900;
font-size: 30px;
font-family: "Lato", Helvetica, Arial, sans-serif;
color: #fff;
opacity: 0;
}
.contain .box .box-info:hover {
opacity: 1;
}
.imgP {
height: 240px;
color: #fff;
padding-top: 80px;
}
/*End Gallery*/
@media only screen and (max-width: 994px) {
.contain .box {
height: 60%;
}
}
@media only screen and (max-width: 746px) {
.contain .box {
width: 70%;
height: 100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="http://averyeliasdesign.com/portfolio/css/foundation.css" rel="stylesheet" />
<script src="http://averyeliasdesign.com/portfolio/src/jquery.smooth-scroll.js"></script>
<script>
$(document).ready(function() {
$('ul.mainnav a').smoothScroll();
$('p.subnav a').click(function(event) {
event.preventDefault();
var link = this;
$.smoothScroll({
scrollTarget: link.hash
});
});
$('#change-speed').on('click', function() {
var $p1 = $('ul.mainnav a').first(),
p1Opts = $p1.smoothScroll('options') || {};
p1Opts.speed = p1Opts.speed === 1400 ? 400 : 1400;
$p1.smoothScroll('options', p1Opts);
});
$('button.scrollsomething').click(function() {
$.smoothScroll({
scrollElement: $('div.scrollme'),
scrollTarget: '#findme'
});
return false;
});
$('button.scrollhorz').click(function() {
$.smoothScroll({
direction: 'left',
scrollElement: $('div.scrollme'),
scrollTarget: '.horiz'
});
return false;
});
});
</script>
<body>
<header id="mainHeader">
<h1 class="hide">Header</h1>
<div id="wrapper">
<div id="info">
<div id="info-content">
<img src="http://averyeliasdesign.com/images/logo2.png" alt="logo" class="logo" data-sr="opacity 0 wait 0.6s and then ease-in over 1.7s">
</div>
</div>
<input type="checkbox" id="menu" name="menu" class="menu-checkbox">
<div class="menu">
<label class="menu-toggle" for="menu"><span>Toggle</span>
</label>
<div class="container">
<ul class="mainnav">
<li><a class="close-btn" href="http://averyeliasdesign.com/portfolio#about">ABOUT</a>
</li>
<li><a class="close-btn" href="http://averyeliasdesign.com/portfolio#process">PROCESS</a>
</li>
<li><a class="close-btn" href="http://averyeliasdesign.com/portfolio#work">WORK</a>
</li>
<li><a class="close-btn" href="http://averyeliasdesign.com/portfolio#contact">CONTACT</a>
</li>
</ul>
</div>
</div>
</div>
<!-- #wrapper -->
</header>
<section id="about">
<h2 class="hide">About Me</h2>
<div id="hey">
<div class="row">
<div class="small-12 columns">
<div class="show-for-medium-up">
<p class="aboutMe" data-sr="wait 0.1s enter bottom move 10px">
<img src="http://averyeliasdesign.com/porfolio/images/decor.png" alt="decor" class="decor" data-sr="wait 0.1s enter bottom move 10px">Hey. I'm Avery
<img src="http://averyeliasdesign.com/portfolio/images/decor2.png" alt="decor" class="decor" data-sr="wait 0.1s enter bottom move 10px">
</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<div class="show-for-small-only">
<p class="aboutMe" data-sr="wait 0.1s enter bottom move 10px">
<img src="http://averyeliasdesign.com/portfolio/images/decor2.png" alt="decor" class="decor1" data-sr="wait 0.1s enter bottom move 10px">Hey. I'm Avery
<img src="http://averyeliasdesign.com/portfolio/images/decor2.png" alt="decor" class="decor2" data-sr="wait 0.1s enter bottom move 10px">
</p>
</div>
</div>
</div>
<div id="hey">
<div class="row">
<div class="small-12 columns">
<p class="aboutInfo text-center" data-sr="wait 0.2s enter bottom move 10px">I'm an interactive designer from Toronto, Ontario. I fell in love with art at a young age, and at 19 I decided to pursue my passion for design by going into a dual program in Media, Theory, and Production with a specialization in Interactive
Media Design.</p>
</div>
</div>
</div>
<div class="row">
<div class="small-12-columns">
<img src="images/aves.png" alt="aves" id="aves" data-sr="wait 0.1s enter bottom move 15px">
</div>
</div>
</section>
<section id="iLove">
<h2 class="hide">About continued</h2>
<div id="outerDiv">
<div class="small-12-columns">
<img src="http://averyeliasdesign.com/images/a_background2.png" alt="A" class="Aback">
</div>
<div class="small-12 columns">
<div class="show-for-medium-up">
<h2 class="iLovetitle" data-sr="opacity 0 wait 0.1s enter bottom move 10px">I love creating beautiful, responsive websites for small businesses.</h2>
</div>
</div>
<div class="small-12 columns">
<div class="show-for-medium-up">
<img src="images/line.png" alt="line" class="line">
</div>
</div>
</div>
</section>
<section id="process">
<h2 class="hide">Process</h2>
<div class="small-12 columns">
<h2 class="procTitle" data-sr="opacity 0 wait 0.1s enter bottom move 10px">I have a very simple process for you.</h2>
</div>
<div class="small-12 columns">
<img src="http://averyeliasdesign.com/images/line.png" alt="line" class="line2">
</div>
<div class="small-12 medium-6 large-3 columns">
<img src="http://averyeliasdesign.com/images/icon1.png" alt="Icon1" class="icon1" data-sr="opacity 0 wait 0.1s and then ease-in over 1.2s">
<h3 class="iconTitle text-center">RESEARCH & CONSULT</h3>
<p class="iconP text-center">I like to take the time to get to know absolutely everything about your business before I even start thinking about the design. I research, consult, and plan, to make sure that I know the purpose of your website, the goal, the target audience, and
the content.</p>
</div>
<div class="small-12 medium-6 large-3 columns">
<img src="http://averyeliasdesign.com/images/icon2.png" alt="Icon1" class="icon1" data-sr="opacity 0 wait 0.4s and then ease-in over 1.2s">
<h3 class="iconTitle text-center">DESIGN</h3>
<p class="iconP text-center">Once I have gathered all my information, we can start the fun part! Now we determine the look and feel of your website. I specialize in web design, however if your company also needs a new brand, I would be happy to create an identity for your company.</p>
</div>
<div class="small-12 medium-6 large-3 columns">
<img src="http://averyeliasdesign.com/images/icon3.png" alt="Icon1" class="icon1" data-sr="opacity 0 wait 0.7s and then ease-in over 1.2s">
<h3 class="iconTitle text-center">DEVELOP</h3>
<p class="iconP text-center">I like to take the time to get to know absolutely everything about your business before I even start thinking about the design. I research, consult, and plan, to make sure that I know the purpose of your website, the goal, the target audience, and
the content.</p>
</div>
<div class="small-12 medium-6 large-3 columns">
<img src="http://averyeliasdesign.com/images/icon4.png" alt="Icon1" class="icon1" data-sr="opacity 0 wait 1s and then ease-in over 1.2s">
<h3 class="iconTitle text-center">LAUNCH</h3>
<p class="iconP text-center">I like to take the time to get to know absolutely everything about your business before I even start thinking about the design. I research, consult, and plan, to make sure that I know the purpose of your website, the goal, the target audience, and
the content.</p>
</div>
</section>
<section id="work">
<h2 class="hide">Work</h2>
<div id="lineDivide"></div>
<div class="row">
<div class="small-12 columns">
<div class="show-for-medium-up">
<p class="myWork" data-sr="wait 0.1s enter bottom move 10px">
<img src="images/decor.png" alt="decor" class="decor" data-sr="wait 0.1s enter bottom move 10px">My Work
<img src="images/decor2.png" alt="decor" class="decor" data-sr="wait 0.1s enter bottom move 10px">
</p>
</div>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<div class="show-for-small-only">
<p class="myWork" data-sr="wait 0.1s enter bottom move 10px">
<img src="http://averyeliasdesign.com/images/decor_mobile2.png" alt="decor" class="decor1" data-sr="wait 0.1s enter bottom move 10px">My Work
<img src="http://averyeliasdesign.com/images/decor_mobile.png" alt="decor" class="decor2" data-sr="wait 0.1s enter bottom move 10px">
</p>
</div>
</div>
</div>
<div class="contain">
<div class="box">
<div class="box-info">
<a href="http://averyeliasdesign.com/car.html">
<p class="imgP">Such Bench</p>
</a>
</div>
</div>
<div class="box">
<div class="box-info">
<a href="http://averyeliasdesign.com/car.html">
<p class="imgP">Such Bench</p>
</a>
</div>
</div>
<div class="box">
<div class="box-info">
<a href="http://averyeliasdesign.com/car.html">
<p class="imgP">Such Bench</p>
</a>
</div>
</div>
<div class="box">
<div class="box-info">
<a href="http://averyeliasdesign.com/car.html">
<p class="imgP">Such Bench</p>
</a>
</div>
</div>
<div class="box">
<div class="box-info">
<a href="car.html">
<p class="imgP">Such Bench</p>
</a>
</div>
</div>
<div class="box">
<div class="box-info">
<a href="http://averyeliasdesign.com/car.html">
<p class="imgP">Such Bench</p>
</a>
</div>
</div>
<div class="box">
<div class="box-info">
<a href="http://averyeliasdesign.com/car.html">
<p class="imgP">Such Bench</p>
</a>
</div>
</div>
<div class="box">
<div class="box-info">
<a href="http://averyeliasdesign.com/car.html">
<p class="imgP">Such Bench</p>
</a>
</div>
</div>
<div class=" box">
<div class="box-info">
<a href="http://averyeliasdesign.com/car.html">
<p class="imgP">Such Bench</p>
</a>
</div>
</div>
</div>
</section>
<section id="contact">
<h2 class="hide">Contactk</h2>
</section>
<script src="http://averyeliasdesign.com/js/vendor/modernizr.js"></script>
<script src="http://averyeliasdesign.com/js/foundation.min.js"></script>
<script src='http://averyeliasdesign.com/js/scrollReveal.min.js'></script>
<script>
var config = {
mobile: false
}
window.sr = new scrollReveal(config);
</script>
<script>
$(document).foundation();
</script>
