LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code


PORTFOLIO

EvanYoung.info © 2010
CSS
@charset "utf-8";
img, object, embed, video { max-width: 100%;}
.ie6 img { width:100%;}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
html {	height:100%; margin: 0 auto; }
a { color: #ffffff; text-decoration:none; }
a:visited { color: #ffffff; }
a:hover { color: #ffffff; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }

small { font-size: 85%; }
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
p {
    letter-spacing: 1px;
}
body {
    height:100%;
    width:100%;
    min-width: 303px;
    max-width: 1280px;
	margin: 0 auto;
	background-repeat: no-repeat;
	background-attachment:fixed;
	background: #333333;
	background-image: -webkit-gradient(linear, left top, right top, from(#909090), to(#333333));
	background-image: linear-gradient(90deg, #909090, #333333);
    font-family: "coolvetica", sans-serif;
    color:#FFF;
}
@font-face {
  font-family: 'coolvetica';
  src: url('http://evanyoung.info/font/coolvetica-webfont.eot'); /* IE9 Compat Modes */
  src: url('http://evanyoung.info/font/coolvetica-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('http://evanyoung.info/font/coolvetica-webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('http://evanyoung.info/font/coolvetica-webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('http://evanyoung.info/font/coolvetica-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('http://evanyoung.info/font/coolvetica-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
@font-face {
  font-family: 'newfont';
  src: url('http://evanyoung.info/font/newfont-webfont.eot'); /* IE9 Compat Modes */
  src: url('http://evanyoung.info/font/newfont-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('http://evanyoung.info/font/newfont-webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('http://evanyoung.info/font/newfont-webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('http://evanyoung.info/font/newfont-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('http://evanyoung.info/font/newfont-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
.logo {
	text-align:left;
	font-family: "newfont", "coolvetica", "Arial Black" ;
    font-size:280%;
    color:#FFF;
    text-shadow: 2px 2px 2px #1A1A1A;
}

#wrap {
	width:100%;
}
footer {
	margin-bottom: 40px;
}
/*container {
        margin-left: auto;
	margin-right: auto;
}
cont {
        margin-bottom:1%;}*/
.navi ul {
	text-align:center;
	list-style-type: none;
	margin:0px;
	padding:0px;
    position:fixed;
    bottom:0px;
    left:0px;
    width:100%;
    background-color:#333;
    min-width: 303px;
    z-index: 999;
}
.navi ul > li {
	display: inline;
	margin-right: 2%;
	margin-left: 2%;
	font-family: "coolvetica", "Arial Black" ;
    font-size:82%;
	-webkit-text-shadow: -3px 2px 5px #ffffff;
	-moz-text-shadow: -3px 2px 5px #ffffff;
	-ms-text-shadow: -3px 2px 5px #ffffff;
	text-shadow: -3px 2px 5px rgba(0, 0, 0, 0.5);
	-webkit-transition: all linear 0.5s;
	transition: all linear 0.5s;
}
.navi ul > li:hover {
	-moz-text-shadow: 3px 2px 5px rgba(0, 0, 0, 0.8);
	-webkit-text-shadow: 3px 2px 5px rgba(0, 0, 0, 0.8);
	-ms-text-shadow: 3px 2px 5px rgba(0, 0, 0, 0.8);
	text-shadow: 3px 2px 5px rgba(0, 0, 0, 0.8);
		color:#999;
}
.subj {
	/*color: #BAE8E7; */
	font-family: "newfont" "coolvetica", "Arial Black", Arial, Gadget, sans-serif;
	font-size:120%;
	font-weight: bold;
	margin:0 0 2% 2%;
}
.soc {
	width:20%;
	position:absolute;
	top:0px;
	right:0px;
	background-color:#333;
	border-radius:0 0 0 10px;
	color: #FFF;
	z-index: 300;
	margin: 0px;
	padding:0px;
	display:none;
	-webkit-transition: all 1.5s ease;
	transition:      all 1.5s ease;
}
.soc ul {
	background-color:#444444;
	max-height:0;
	opacity:0;
	margin: 0;
	border-radius:0 0 0 10px;
	padding-left:0px;
	list-style:none;
	font-family: "coolvetica";
	-webkit-transition: all 1.5s ease;
	transition:      all 1.5s ease;
	overflow: hidden;
}
.soc p {
	margin: 4% 0px 2% 15%;
	font-size:120%;
	}
.soc ul li {
	margin: 5% 0 5% 5%;
}
.soc:hover {
	/*width:20%;
	float:left;*/
}

.soc:hover ul {
		
	opacity: 1;
	max-height:350px;
}

@media only screen and (min-width: 480px) {
.navi ul li {
	margin-right: 3%;
	margin-left: 3%;
    font-size:100%;
 }
.logo {
    font-size:320%;
}
.soc {
	display:block;
}
}
@media only screen and (min-width: 768px) {
.navi ul li {
	margin-right: 4%;
	margin-left: 4%;
    font-size:120%;}
}
@media only screen and (min-width: 960px) {
.navi ul li {
	margin-right: 4.5%;
	margin-left: 4.5%;
        font-size:150%;
}
}
@media only screen and (min-width: 1200px) {
.navi ul li {
	margin-right: 5%;
	margin-left: 5%;
        font-size:165%;
}
}
/*@media only screen and (min-width: 400px) and (min-resolution: 3dppx) {
.navi ul li {
	margin-right: 2%;
	margin-left: 2%;
        font-size:250%; }

}
@media only screen and (min-width: 600px) and (min-resolution: 3dppx) {
.navi ul li {
	margin-right: 2.6%;
	margin-left: 2.6%;
        font-size:250%;}
}*/
@media only screen and (min-width: 800px) and (-webkit-min-device-pixel-ratio: 3), only screen and (min-width: 800px) and (min-resolution: 3dppx) {
.navi ul li {
	margin-right: 2.5%;
	margin-left: 2.5%;
    font-size:220%;
}
}
/*
@media only screen and (min-width: 1000px) and (min-resolution: 3dppx) {
.navi ul li {
	margin-right: 3.5%;
	margin-left: 3.5%;
        font-size:250%;
}
}*/
@media (orientation: portrait) {
.soc {width:30%;}


.soc ul li {
		margin: 10px 0 8% 10%;
}
.soc p {
	margin: 4% 0px 5% 25%;
	font-size: 190%;
}
.logo {
	font-size: 280%;
}
}
@charset "utf-8";
/*container*/
#cont { margin: 0 auto;
	width: 100%;
    height: 100%;
    text-align: center; 
    display:inline-block; }
/* Front-Gallery*/
.ratio {
    margin: 0 auto;
    padding: 0px;
    width:32%;
    display:inline-block;
    -webkit-transition: -webkit-transform .8s ease, background-image .5s, width .5s, height .5s;
    -webkit-transition: background-image .5s, width .5s, height .5s, -webkit-transform .8s ease;
    transition: background-image .5s, width .5s, height .5s, -webkit-transform .8s ease;
    transition: transform .8s ease, background-image .5s, width .5s, height .5s;
    transition: transform .8s ease, background-image .5s, width .5s, height .5s, -webkit-transform .8s ease;
    -webkit-transform:rotate3d(3,3,0,720deg);
    transform:rotate3d(3,3,0,720deg); }
.ratio:before {
		content:"";
		display:block;
		padding-top:100%;
	}
.ratio a {
	background-position:left 0 top 0;
	background-repeat: no-repeat;
	background-size:100%;
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	z-index:0;
  border-radius:6%;
}
.ratio a:onhover {
  border-radius:50%;
}
.a { background-image:url('http://evanyoung.info/images/320/Portfolio/e.jpg');}
.b { background-image:url('http://evanyoung.info/images/320/Portfolio/snacks.jpg');}
.c { background-image:url('http://evanyoung.info/images/320/Portfolio/syrupcity.jpg');}
.d { background-image:url('http://evanyoung.info/images/320/Portfolio/swatch.jpg');}
.e { background-image:url('http://evanyoung.info/images/320/Portfolio/wb.jpg');}
.f { background-image:url('http://evanyoung.info/images/320/Portfolio/biz.jpg');}
.g { background-image:url('http://evanyoung.info/images/320/Portfolio/trainspotting.jpg');}
.h { background-image:url('http://evanyoung.info/images/320/Portfolio/vectorize.jpg');}
.i { background-image:url('http://evanyoung.info/images/320/Portfolio/flip.jpg');}
.j { background-image:url('http://evanyoung.info/images/320/Portfolio/connect.jpg');}
.k { background-image:url('http://evanyoung.info/images/door.jpg');}
.l { background-image:url('http://evanyoung.info/images/door.jpg');}
.m { background-image:url('http://evanyoung.info/images/door.jpg');}
.n { background-image:url('http://evanyoung.info/images/bullet.gif');}
.o { background-image:url('http://evanyoung.info/images/door.jpg');}        
/*Background Gallery*/
.lightbox {
    /** Hide the lightbox */
    opacity: 0;
    /** position: fixed;*/
    position:absolute;
	z-index: 500;
    width: 90%;
    height: auto;
    top: -800%;
    left: 5%;
    color:#777777;
    -webkit-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out;
    }
.lightbox:target {
    /** Show lightbox when it is target */
    opacity: 1;
    outline: none;
    top: 0;
}
.lightbox .box {
    width:auto;
	max-width:800px;
	min-width:320px;
    padding:10px 20px 10px 20px;
    background-color:#222222;
    -webkit-box-shadow: 0px 1px 26px -3px #777777;
            box-shadow: 0px 1px 26px -3px #777777;
	border-radius: 20px;
	margin:2% auto 6% auto;
    }
.lightbox .title {
    margin:0;
    padding:0 0 10px 0px;
    border-bottom:1px #ccc solid;
    font-size:22px;
    }
.lightbox .lcontent {
    display:block;
    position:relative;
	margin-bottom:3.2%;
    }
	
.lightbox .lcontent div {
	background-position:left 0 top 0;
	background-repeat: no-repeat;
	background-size:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	
}
.lightbox .lcontent:before {
	content:"";
	display:block;
	padding-top:65%;
}
.lightbox .close {
    display:block;
    float:right;
    text-decoration:none;
    font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:22px;
    color:#858585;
	z-index:1000;
    }
.clear {
    display:block;
    clear:both;
    }
.lightbox .lcontent .desc {
    z-index:99;
    bottom:0;
    position:absolute;
    padding:10px;
    margin:0 0 4px 0;
    background:rgba(0,0,0,0.8);
    color:#fff;
    font-size:17px;
    opacity:0;
    -webkit-transition: opacity ease-in-out 0.5s;
    transition: opacity ease-in-out 0.5s;
    }    
.lightbox .lcontent:hover .desc    {
    opacity:1;
}
.lightbox .next,
.lightbox .prev,
.lightbox .close {
    display:block;
    text-decoration:none;
    font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:22px;
    color:#858585;
    }
.prev {
    float:left;
    }
.next,
.close {
    float:right;
    }
.clear {
    display:block;
    clear:both;
    }
.lightbox .lcontent div:first-child {
	background-position:left 0 top 0;
	background-repeat: no-repeat;
	background-size:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	
}
.biga {
	background-image:url("http://evanyoung.info/images/480/Portfolio/e-XL.jpg");
}
.bigb {
	background-image:url("http://evanyoung.info/images/480/Portfolio/snacks-XL.jpg");
}
.bigc {
	background-image:url("http://evanyoung.info/images/480/Portfolio/syrupcity-XL.jpg");
}
.bigd {
	background-image:url("http://evanyoung.info/images/480/Portfolio/swatch-XL.jpg");
}
.bige {
	background-image:url("http://evanyoung.info/images/480/Portfolio/wb-XL.jpg");
}
.bigf {
	background-image:url("http://evanyoung.info/images/480/Portfolio/biz-XL.jpg");
}
.bigg {
	background-image:url("http://evanyoung.info/images/480/Portfolio/trainspotting-XL.jpg");
}
.bigh {
	background-image:url("http://evanyoung.info/images/480/Portfolio/vectorize-XL.jpg");
}
.bigi {
	background-image:url("http://evanyoung.info/images/480/Portfolio/flip-XL.jpg");
}
.bigj {
	background-image:url("http://evanyoung.info/images/480/Portfolio/connect-XL.jpg");
}

@media only screen and (min-width: 480px) {
.ratio {
	width: 32%;
    }
.a { background-image:url('http://evanyoung.info/images/480/Portfolio/e.jpg');}
.b { background-image:url('http://evanyoung.info/images/480/Portfolio/snacks.jpg');}
.c { background-image:url('http://evanyoung.info/images/480/Portfolio/syrupcity.jpg');}
.d { background-image:url('http://evanyoung.info/images/480/Portfolio/swatch.jpg');}
.e { background-image:url('http://evanyoung.info/images/480/Portfolio/wb.jpg');}
.f { background-image:url('http://evanyoung.info/images/480/Portfolio/biz.jpg');}
.g { background-image:url('http://evanyoung.info/images/480/Portfolio/trainspotting.jpg');}
.h { background-image:url('http://evanyoung.info/images/480/Portfolio/vectorize.jpg');}
.i { background-image:url('http://evanyoung.info/images/480/Portfolio/flip.jpg');}
.j { background-image:url('http://evanyoung.info/images/480/Portfolio/connect.jpg');}
.k { background-image:url('http://evanyoung.info/images/door.jpg');}
.l { background-image:url('http://evanyoung.info/images/door.jpg');}
.m { background-image:url('http://evanyoung.info/images/door.jpg');}
.n { background-image:url('http://evanyoung.info/images/bullet.gif');}
.o { background-image:url('http://evanyoung.info/images/door.jpg');}   
}

@media only screen and (min-width: 768px) {
.ratio {
	width:24.5%;
	}
.a { background-image:url('http://evanyoung.info/images/768/Portfolio/e.jpg');}
.b { background-image:url('http://evanyoung.info/images/768/Portfolio/snacks.jpg');}
.c { background-image:url('http://evanyoung.info/images/768/Portfolio/syrupcity.jpg');}
.d { background-image:url('http://evanyoung.info/images/768/Portfolio/swatch.jpg');}
.e { background-image:url('http://evanyoung.info/images/768/Portfolio/wb.jpg');}
.f { background-image:url('http://evanyoung.info/images/768/Portfolio/biz.jpg');}
.g { background-image:url('http://evanyoung.info/images/768/Portfolio/trainspotting.jpg');}
.h { background-image:url('http://evanyoung.info/images/768/Portfolio/vectorize.jpg');}
.i { background-image:url('http://evanyoung.info/images/768/Portfolio/flip.jpg');}
.j { background-image:url('http://evanyoung.info/images/768/Portfolio/connect.jpg');}
.k { background-image:url('http://evanyoung.info/images/door.jpg');}
.l { background-image:url('http://evanyoung.info/images/door.jpg');}
.m { background-image:url('http://evanyoung.info/images/door.jpg');}
.n { background-image:url('http://evanyoung.info/images/bullet.gif');}
.o { background-image:url('http://evanyoung.info/images/door.jpg');}

.biga {
	background-image:url("http://evanyoung.info/images/768/Portfolio/e-XL.jpg");
}
.bigb {
	background-image:url("http://evanyoung.info/images/768/Portfolio/snacks-XL.jpg");
}
.bigc {
	background-image:url("http://evanyoung.info/images/768/Portfolio/syrupcity-XL.jpg");
}
.bigd {
	background-image:url("http://evanyoung.info/images/768/Portfolio/swatch-XL.jpg");
}
.bige {
	background-image:url("http://evanyoung.info/images/768/Portfolio/wb-XL.jpg");
}
.bigf {
	background-image:url("http://evanyoung.info/images/768/Portfolio/biz-XL.jpg");
}
.bigg {
	background-image:url("http://evanyoung.info/images/768/Portfolio/trainspotting-XL.jpg");
}
.bigh {
	background-image:url("http://evanyoung.info/images/768/Portfolio/vectorize-XL.jpg");
}
.bigi {
	background-image:url("http://evanyoung.info/images/768/Portfolio/flip-XL.jpg");
}
.bigj {
	background-image:url("http://evanyoung.info/images/768/Portfolio/connect-XL.jpg");
}
}
@media only screen and (min-width: 960px) {

.ratio {
		width:19.65%;
        }
.a { background-image:url('http://evanyoung.info/images/960/Portfolio/e.jpg');}
.b { background-image:url('http://evanyoung.info/images/960/Portfolio/snacks.jpg');}
.c { background-image:url('http://evanyoung.info/images/960/Portfolio/syrupcity.jpg');}
.d { background-image:url('http://evanyoung.info/images/960/Portfolio/swatch.jpg');}
.e { background-image:url('http://evanyoung.info/images/960/Portfolio/wb.jpg');}
.f { background-image:url('http://evanyoung.info/images/960/Portfolio/biz.jpg');}
.g { background-image:url('http://evanyoung.info/images/960/Portfolio/trainspotting.jpg');}
.h { background-image:url('http://evanyoung.info/images/960/Portfolio/vectorize.jpg');}
.i { background-image:url('http://evanyoung.info/images/960/Portfolio/flip.jpg');}
.j { background-image:url('http://evanyoung.info/images/960/Portfolio/connect.jpg');}
.k { background-image:url('http://evanyoung.info/images/door.jpg');}
.l { background-image:url('http://evanyoung.info/images/door.jpg');}
.m { background-image:url('http://evanyoung.info/images/door.jpg');}
.n { background-image:url('http://evanyoung.info/images/bullet.gif');}
.o { background-image:url('http://evanyoung.info/images/door.jpg');}
.biga {
	background-image:url("http://evanyoung.info/images/960/Portfolio/e-XL.jpg");
}
.bigb {
	background-image:url("http://evanyoung.info/images/960/Portfolio/snacks-XL.jpg");
}
.bigc {
	background-image:url("http://evanyoung.info/images/960/Portfolio/syrupcity-XL.jpg");
}
.bigd {
	background-image:url("http://evanyoung.info/images/960/Portfolio/swatch-XL.jpg");
}
.bige {
	background-image:url("http://evanyoung.info/images/960/Portfolio/wb-XL.jpg");
}
.bigf {
	background-image:url("http://evanyoung.info/images/960/Portfolio/biz-XL.jpg");
}
.bigg {
	background-image:url("http://evanyoung.info/images/960/Portfolio/trainspotting-XL.jpg");
}
.bigh {
	background-image:url("http://evanyoung.info/images/960/Portfolio/vectorize-XL.jpg");
}
.bigi {
	background-image:url("http://evanyoung.info/images/960/Portfolio/flip-XL.jpg");
}
.bigj {
	background-image:url("http://evanyoung.info/images/960/Portfolio/connect-XL.jpg");
}
}
@media (orientation: portrait) {
.ratio {
	width: 32%;
}
}
Term
Wed, 12/27/2017 - 07:05

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv