Created
March 22, 2017 07:31
-
-
Save anonymous/48363393260edd54078d3eccecdb76ca to your computer and use it in GitHub Desktop.
Jiachun-li // source https://jsbin.com/luzeti
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <!-- saved from url=(0032)http://jiachun-li.com/#portfolio --> | |
| <html lang="en"><!--<![endif]--> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | |
| <meta charset="UTF-8"> | |
| <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"> | |
| <title>Jiachun-li</title> | |
| <meta content="width=device-width, initial-scale=1.0" name="viewport"> | |
| <meta content="" name="description"> | |
| <meta content="" name="keywords"> | |
| <meta content="Your name" name="author"> | |
| <style type="text/css"> | |
| /* CSS reset */ | |
| body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| html, body { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| a, a:hover { | |
| text-decoration: none; | |
| } | |
| table { | |
| border-collapse: collapse; | |
| border-spacing: 0; | |
| } | |
| fieldset, img { | |
| border: 0; | |
| } | |
| input { | |
| border: 1px solid #b0b0b0; | |
| padding: 3px 5px 4px; | |
| color: #979797; | |
| width: 190px; | |
| } | |
| address, caption, cite, code, dfn, th, var { | |
| font-style: normal; | |
| font-weight: normal; | |
| } | |
| ol, ul { | |
| list-style: none; | |
| } | |
| caption, th { | |
| text-align: left; | |
| } | |
| h1, h2, h3, h4, h5, h6 { | |
| font-size: 100%; | |
| font-weight: normal; | |
| } | |
| q:before, q:after { | |
| content: ''; | |
| } | |
| abbr, acronym { | |
| border: 0; | |
| } | |
| /* General Demo Style */ | |
| body { | |
| font-family: 'lato'; | |
| font-weight: 400; | |
| font-size: 15px; | |
| color: #fff; | |
| } | |
| a { | |
| text-decoration: none; | |
| } | |
| .clr { | |
| clear: both; | |
| color: #999; | |
| } | |
| /* Top Bar Style */ | |
| .codrops-top { | |
| line-height: 15px; | |
| font-family: 'lato'; | |
| font-size: 11px; | |
| background: rgba(65, 65, 65, 0.1); | |
| text-transform: uppercase; | |
| z-index: 9999; | |
| position: fixed; | |
| top: 0px; | |
| left: 0px; | |
| width: 100%; | |
| height: 15px; | |
| -webkit-animation: slideOut 0.5s ease-in-out 0.3s backwards; | |
| -moz-animation: slideOut 0.5s ease-in-out 0.3s backwards; | |
| -o-animation: slideOut 0.5s ease-in-out 0.3s backwards; | |
| -ms-animation: slideOut 0.5s ease-in-out 0.3s backwards; | |
| animation: slideOut 0.5s ease-in-out 0.3s backwards; | |
| color: #CCC; | |
| } | |
| .codrops-top a { | |
| padding: 0px 10px; | |
| letter-spacing: 1px; | |
| color: #333; | |
| text-shadow: 0px 1px 1px #fff; | |
| display: block; | |
| float: left; | |
| } | |
| .codrops-top a:hover { | |
| background: #fff; | |
| } | |
| .codrops-top span.right { | |
| float: right; | |
| } | |
| .codrops-top span.right a { | |
| float: left; | |
| display: block; | |
| } | |
| /* Demo Buttons */ | |
| #codrops-demos { | |
| position: fixed; | |
| z-index: 2000; | |
| top: 50px; | |
| right: 50px; | |
| } | |
| #codrops-demos a { | |
| display: inline-block; | |
| font-size: 12px; | |
| width: 60px; | |
| height: 24px; | |
| color: #000; | |
| line-height: 24px; | |
| text-align: center; | |
| box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); | |
| background: rgba(255, 255, 255, 0.9); | |
| text-transform: uppercase; | |
| } | |
| #codrops-demos a:hover { | |
| background: #ddd; | |
| color: #000; | |
| } | |
| #codrops-demos a.current-demo, | |
| #codrops-demos a.current-demo:hover { | |
| background: #000; | |
| color: #fff; | |
| cursor: default; | |
| } | |
| @-webkit-keyframes slideOut { | |
| 0% { | |
| top: -30px; | |
| opacity: 0; | |
| } | |
| 100% { | |
| top: 0px; | |
| opacity: 1; | |
| } | |
| } | |
| @-moz-keyframes slideOut { | |
| 0% { | |
| top: -30px; | |
| opacity: 0; | |
| } | |
| 100% { | |
| top: 0px; | |
| opacity: 1; | |
| } | |
| } | |
| @-o-keyframes slideOut { | |
| 0% { | |
| top: -30px; | |
| opacity: 0; | |
| } | |
| 100% { | |
| top: 0px; | |
| opacity: 1; | |
| } | |
| } | |
| @-ms-keyframes slideOut { | |
| 0% { | |
| top: -30px; | |
| opacity: 0; | |
| } | |
| 100% { | |
| top: 0px; | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes slideOut { | |
| 0% { | |
| top: -30px; | |
| opacity: 0; | |
| } | |
| 100% { | |
| top: 0px; | |
| opacity: 1; | |
| } | |
| } | |
| html, body { | |
| height: 100%; | |
| } | |
| body { | |
| width: 100%; | |
| background: #eeedec; | |
| /*overflow:scroll;*/ | |
| margin-bottom: 00px; | |
| overflow-x: hidden; | |
| overflow-y: scroll; | |
| } | |
| a:link { | |
| color: #e9e9e9; | |
| text-decoration: none; | |
| } | |
| a:visited { | |
| color: #b9d5f4; | |
| text-decoration: none; | |
| } | |
| a:hover { | |
| color: #f4b9c8; | |
| text-decoration: none; | |
| } | |
| @font-face { | |
| font-family: AldotheApache; | |
| src: url("fonts/AldotheApache.eot") /* EOT file for IE */ | |
| } | |
| @font-face { | |
| font-family: AldotheApache; | |
| src: url("fonts/AldotheApache.ttf") /* TTF file for CSS3 browsers */ | |
| } | |
| #header { | |
| position: fixed; | |
| z-index: 2000; | |
| width: 300px; | |
| top: 0px; | |
| left: 0px; | |
| /*box-shadow: 10px 0px 10px rgba(0,0,0,0.1);*/ | |
| height: 430px; | |
| } | |
| #header h1 { | |
| font-family: 'Electrolize', sans-serif; | |
| font-size: 45px; | |
| font-weight: 900; | |
| text-transform: uppercase; | |
| color: rgba(255, 255, 255, 0.8); | |
| padding-top: 53px; | |
| padding-bottom: 60px; | |
| /* box-shadow: 39px 0px 55px -8px rgba(0,0,0,0.09);*/ | |
| background-color: rgb(71, 73, 75); | |
| } | |
| #social { | |
| left: 150px; | |
| height: 60px; | |
| padding-top: 3px; | |
| padding-bottom: 0px; | |
| box-shadow: 39px 0px 55px -12px rgba(0, 0, 0, 0.26); | |
| } | |
| #social a { | |
| float: left; | |
| } | |
| #social img:hover { | |
| opacity: 0.7; | |
| filter: alpha(opacity=70); /* For IE8 and earlier */ | |
| } | |
| #navigation { | |
| box-shadow: 39px 0px 55px -12px rgba(0, 0, 0, 0.26); | |
| margin-top: 30px; | |
| display: block; | |
| list-style: none; | |
| z-index: 4; | |
| } | |
| #navigation a { | |
| color: #444; | |
| font-family: 'Electrolize', sans-serif; | |
| display: block; | |
| background: rgba(255, 255, 255, 0.8); | |
| line-height: 50px; | |
| padding: 5px 5px 0px 10px; | |
| text-transform: uppercase; | |
| margin-bottom: 0px; | |
| /* box-shadow:10px 0px 10px rgba(0,0,0,0.1);*/ | |
| font-size: 16px; | |
| font-weight: 400; | |
| } | |
| #navigation a:hover { | |
| background: #eeedec; | |
| } | |
| .content { | |
| left: 300px; | |
| top: 15px; | |
| position: absolute; | |
| padding-bottom: 30px; | |
| } | |
| .content h2 { | |
| font-family: 'AldotheApache'; | |
| font-weight: 900; | |
| letter-spacing: 5px; | |
| font-size: 210px; | |
| padding: 0px 0px 8px 3px; | |
| margin-top: 45px; | |
| color: rgba(71, 73, 75, 0.9); | |
| text-shadow: rgb(219, 218, 217) 1px 1px, | |
| rgb(220, 219, 218) 2px 2px, | |
| rgb(220, 219, 218) 3px 3px, | |
| rgb(221, 220, 219) 4px 4px, | |
| rgb(221, 220, 219) 5px 5px, | |
| rgb(222, 221, 220) 6px 6px, | |
| rgb(223, 222, 221) 7px 7px, | |
| rgb(223, 222, 221) 8px 8px, | |
| rgb(224, 223, 222) 9px 9px, | |
| rgb(224, 223, 222) 10px 10px, | |
| rgb(225, 224, 223) 11px 11px, | |
| rgb(225, 224, 223) 12px 12px, | |
| rgb(226, 225, 224) 13px 13px, | |
| rgb(227, 226, 225) 14px 14px, | |
| rgb(227, 226, 225) 15px 15px, | |
| rgb(228, 227, 226) 16px 16px, | |
| rgb(228, 227, 226) 17px 17px, | |
| rgb(229, 228, 227) 18px 18px, | |
| rgb(229, 228, 227) 19px 19px, | |
| rgb(230, 229, 228) 20px 20px, | |
| rgb(231, 230, 229) 21px 21px, | |
| rgb(231, 230, 229) 22px 22px, | |
| rgb(232, 231, 230) 23px 23px, | |
| rgb(232, 231, 230) 24px 24px, | |
| rgb(233, 232, 231) 25px 25px, | |
| rgb(233, 232, 231) 26px 26px, | |
| rgb(234, 233, 232) 27px 27px, | |
| rgb(235, 234, 233) 28px 28px, | |
| rgb(235, 234, 233) 29px 29px, | |
| rgb(236, 235, 234) 30px 30px, | |
| rgb(236, 235, 234) 31px 31px, | |
| rgb(237, 236, 235) 32px 32px, | |
| rgb(238, 237, 236) 33px 33px; | |
| } | |
| .content p { | |
| font-family: 'Electrolize', sans-serif; | |
| font-weight: 300; | |
| font-size: 19px; | |
| line-height: 24px; | |
| color: #eeedec; | |
| display: inline-block; | |
| background: #5b5f63; | |
| padding: 5px 6px 5px 5px; | |
| margin: -6px 0px 10px 0px; | |
| } | |
| .content h3 { | |
| font-family: 'Electrolize', sans-serif; | |
| font-weight: 300; | |
| font-size: 19px; | |
| line-height: 24px; | |
| color: #eeedec; | |
| display: inline-block; | |
| background: #5b5f63; | |
| padding: 6px 3px 5px 3px; | |
| margin: －10px 0px 0px 0px; | |
| } | |
| .panel { | |
| min-width: 100%; | |
| height: 95%; | |
| overflow-y: auto; | |
| overflow-x: hidden; | |
| margin-top: -150%; | |
| position: absolute; | |
| background: #363434; | |
| box-shadow: 0px 4px 7px rgba(0, 0, 0, 0.1); | |
| z-index: 2; | |
| -webkit-transition: all .8s ease-in-out; | |
| -moz-transition: all .8s ease-in-out; | |
| -o-transition: all .8s ease-in-out; | |
| transition: all .8s ease-in-out; | |
| } | |
| .panel:target { | |
| margin-top: 0%; | |
| background-color: #eeedec; | |
| } | |
| #home:target ~ #header #link-home, | |
| #portfolio:target ~ #header #link-portfolio, | |
| #about:target ~ #header #link-about, | |
| #contact:target ~ #header #link-contact, | |
| #new:target ~ #header #link-new { | |
| background: #363434; | |
| color: #fff; | |
| } | |
| #works { | |
| padding: -10px 0px 0px; | |
| } | |
| #works li { | |
| display: inline-block; | |
| } | |
| #works li a { | |
| padding-right: -3px; | |
| padding-top: 0px; | |
| } | |
| #works img { | |
| padding: 0px; | |
| /*background: rgba(255,255,255,0.5);*/ | |
| } | |
| #works img:hover { | |
| opacity: 0.7; | |
| filter: alpha(opacity=70); /* For IE8 and earlier */ | |
| } | |
| #form p { | |
| background: #fff; | |
| color: #363434; | |
| } | |
| #form input, #form textarea { | |
| background: #363434; | |
| color: #fff; | |
| border: none; | |
| } | |
| #form textarea { | |
| width: 493px; | |
| height: 100px; | |
| } | |
| #form label { | |
| padding-right: 10px; | |
| float: left; | |
| } | |
| .footnote a { | |
| color: #ddd; | |
| } | |
| .subpage { | |
| right: 40px; | |
| left: 450px; | |
| top: 15px; | |
| position: absolute; | |
| padding-bottom: 30px; | |
| } | |
| .subpage p { | |
| font-family: 'Electrolize', sans-serif; | |
| font-weight: 300; | |
| font-size: 19px; | |
| line-height: 24px; | |
| color: #eeedec; | |
| display: inline-block; | |
| background: #5b5f63; | |
| padding: 5px 6px 5px 5px; | |
| margin: -6px 0px 10px 0px; | |
| } | |
| .subpage h3 { | |
| font-family: 'AldotheApache'; | |
| font-weight: 700; | |
| font-size: 80px; | |
| padding: 5px 0px 20px 30px; | |
| margin-top: 52px; | |
| color: rgba(71, 73, 75, 0.9); | |
| text-shadow: rgb(219, 218, 217) 1px 1px, | |
| rgb(220, 219, 218) 2px 2px, | |
| rgb(220, 219, 218) 3px 3px, | |
| rgb(221, 220, 219) 4px 4px, | |
| rgb(221, 220, 219) 5px 5px, | |
| rgb(222, 221, 220) 6px 6px, | |
| rgb(223, 222, 221) 7px 7px, | |
| rgb(223, 222, 221) 8px 8px, | |
| rgb(224, 223, 222) 9px 9px, | |
| rgb(224, 223, 222) 10px 10px, | |
| rgb(225, 224, 223) 11px 11px, | |
| rgb(225, 224, 223) 12px 12px, | |
| rgb(226, 225, 224) 13px 13px, | |
| rgb(227, 226, 225) 14px 14px, | |
| rgb(227, 226, 225) 15px 15px, | |
| rgb(228, 227, 226) 16px 16px, | |
| rgb(228, 227, 226) 17px 17px, | |
| rgb(229, 228, 227) 18px 18px, | |
| rgb(229, 228, 227) 19px 19px, | |
| rgb(230, 229, 228) 20px 20px, | |
| rgb(231, 230, 229) 21px 21px, | |
| rgb(231, 230, 229) 22px 22px, | |
| rgb(232, 231, 230) 23px 23px, | |
| rgb(232, 231, 230) 24px 24px, | |
| rgb(233, 232, 231) 25px 25px, | |
| rgb(233, 232, 231) 26px 26px, | |
| rgb(234, 233, 232) 27px 27px, | |
| rgb(235, 234, 233) 28px 28px, | |
| rgb(235, 234, 233) 29px 29px, | |
| rgb(236, 235, 234) 30px 30px, | |
| rgb(236, 235, 234) 31px 31px, | |
| rgb(237, 236, 235) 32px 32px, | |
| rgb(238, 237, 236) 33px 33px; | |
| } | |
| @font-face { | |
| font-family: AldotheApache; | |
| src: url("fonts/AldotheApache.eot") /* EOT file for IE */ | |
| } | |
| @font-face { | |
| font-family: AldotheApache; | |
| src: url("fonts/AldotheApache.ttf") /* TTF file for CSS3 browsers */ | |
| } | |
| a:visited { | |
| color: #b9d5f4; | |
| text-decoration: none; | |
| } | |
| a:hover { | |
| color: #f4b9c8; | |
| text-decoration: none; | |
| } | |
| #footer { | |
| font-size: 12px; | |
| position: absolute; | |
| color: #6d6d6d; | |
| bottom: 0; | |
| width: 100%; | |
| height: 20px; /* Height of the footer */ | |
| } | |
| </style> | |
| </head> | |
| <body><!-- Codrops top bar --> | |
| <!--/ Codrops top bar --><!-- Home --> | |
| <div class="content" id="home"> | |
| <h2>Home</h2> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, ab, cum hic ducimus rerum est facilis | |
| architecto quisquam veritatis vel praesentium quis ratione nulla fugit maxime? Soluta, voluptates doloremque. | |
| Dolores!</p> | |
| <p>She is interested in sensing the world digitally, emotionally and interactively. Her inspiration usually comes | |
| from science and science fiction, these interests since a teenager gave her an aesthetic appreciation and | |
| obsession to the space from an angle that combines science, imagination and art.</p> | |
| <p></p> | |
| </div> | |
| <!-- /Home --><!-- Portfolio --> | |
| <div class="panel" id="portfolio"> | |
| <div class="content"> | |
| <h2>Portfolio</h2> | |
| <h3>Interactive Works</h3> | |
| <ul id="works"> | |
| <li><a href="#"><img src="./portfolio_01.jpg" width="250"></a></li> | |
| <li><a href="#"><img src="./portfolio_08.jpg" width="250"></a></li> | |
| <li><a href="#"><img src="./portfolio_05.jpg" width="250"></a></li> | |
| <li><a href="#"><img src="./portfolio_03.jpeg" width="250"></a></li> | |
| </ul> | |
| <ul id="works"> | |
| <li><a href="#"><img src="./portfolio_09.jpg" width="250"></a></li> | |
| <li><a href="#"><img src="./portfolio_13.jpg" width="250"></a></li> | |
| <li><a href="#"><img src="./portfolio_10.jpg" width="250"></a></li> | |
| </ul> | |
| <h3>Sound</h3> | |
| <ul id="works"> | |
| <li><a href="#"><img src="./portfolio_04.jpeg" width="250"></a></li> | |
| </ul> | |
| <h3>Mobile & Web Design</h3> | |
| <ul id="works"> | |
| <li><a href="#"><img src="./portfolio_18.jpg" width="250"></a></li> | |
| <li><a href="#"><img src="./portfolio_02.jpeg" width="250"></a></li> | |
| <li><a href="#"><img src="./portfolio_15.jpg" width="250"/></a></li> | |
| <li><a href="#"><img src="./portfolio_14.jpg" width="250"/></a></li> | |
| </ul> | |
| <h3>Visual</h3> | |
| <ul id="works"> | |
| <li><a href=.<img src="./portfolio_12.jpg" width="250"></a></li> | |
| <li><a href="#"><img src="./portfolio_11.jpg" width="250"></a></li> | |
| <li><a href="#"><img src="./portfolio_16.jpg" width="250"></a></li> | |
| </ul> | |
| <h3>Video&Film</h3> | |
| <ul id="works"> | |
| <li><a href="#"><img src="./portfolio_07.jpg" width="250"></a></li> | |
| <li><a href=.<img src=./portfolio_06.jpg" width="250"></a></li> | |
| </ul> | |
| <h3><u><a href="#" target="_blank" title="Previous Works">2007-2011 Previous Works</a></u></h3> | |
| </div> | |
| </div> | |
| <!-- /Portfolio --><!-- About --> | |
| <div class="panel" id="about"> | |
| <div class="content"> | |
| <h2>About</h2> | |
| <br><br> | |
| <p> | |
| <fon.lor | |
| ="#fff">Skills.nt> | |
| </p> | |
| <br> | |
| <p><font color="#fff">Graphic:</font> Adobe Photoshop, Adobe Illustrator, Adobe Indesign and hand drawing & | |
| skecthing</p> | |
| <br> | |
| <p><font color="#fff">Coding:</font> HTML, CSS, PHP, JavaScr. Java, processing, arduino, and Max/MSP</p> | |
| <br> | |
| <p><font color="#fff">Sound:</font> L. Pro,Adobe Audition, Ableton Live</p> | |
| <br> | |
| <p><font color="#fff">Video editing & Motion graphic:</font> Adobe After Effect, Adobe Premiere</p> | |
| <br> | |
| <p><u><a href="#" target="_blank" title="Somebody-Resume">Resume</a></u></p> | |
| <br> | |
| </div> | |
| </div> | |
| <!-- /About --><!-- Contact --> | |
| <div class="panel" id="contact"> | |
| <div class="content"> | |
| <h2>Contact Me</h2> | |
| <p>Email:</p> | |
| <p><u><a href="mailto:[email protected]">[email protected]</a></u></p> | |
| <br> | |
| <p>Questions, thoughts and interests please feel free to contact me. </p> | |
| <br> | |
| <p>(shamelessly) asking for an entry-level job.</p> | |
| </div> | |
| </div> | |
| <!-- /Contact --><!--new--> | |
| <div class="panel" id="new"> | |
| <div class="content"> | |
| <h2>Events</h2> | |
| <p>11/15/2013</p> | |
| <br> | |
| <p>PROVISIONAL SPACE <a href="#"><u>The Cube</u></a> - Interactive performance at Brooklyn Fireproof.</p> | |
| <p><a href="#"><u>Event Link</u></a></p> | |
| <br><br> | |
| <p>01/27/2014</p> | |
| <br> | |
| <p>MFA Thesis Show, The Sound of Universe</p> | |
| <p><a href="#"><u>Event Link</u></a></p> | |
| <br><br> | |
| <p>02/05/2014</p> | |
| <br> | |
| <p>HIGH G0NZ0 REVIVAL - <a href="#"><u>The Cube</u></a> - Digital Performance at Bizarre Bushwick</p> | |
| <p><a href="#"><u>Event Link</u></a></p> | |
| <br> | |
| </div> | |
| </div> | |
| <!--/new--><!-- Header with Navigation --> | |
| <div id="header"> | |
| <h1>Somebody's portfolio</h1> | |
| <div id="social"> | |
| <a href="mailto:[email protected]"><img src="./48x48_email.png" width="57.6"></a> | |
| <a href="#"><img src="./48x48_vimeo.png" width="57.6"></a> | |
| <a href="#"><img src="./48x48_twitter.png" width="57.6"></a> | |
| <a href="#"><img src="./48x48_facebook.png" width="57.6"></a> | |
| <a href="#"><img src="./48x48_linkedin.png" width="57.6"></a> | |
| </div> | |
| <ul id="navigation"> | |
| <li><a href="#home" id="link-home">Home</a></li> | |
| <li><a href="#portfolio" id="link-portfolio">Portfolio</a></li> | |
| <li><a href="#about" id="link-about">About Me</a></li> | |
| <li><a href="#contact" id="link-contact">Contact Me</a></li> | |
| <li><a href="#new" id="link-new">Events</a></li> | |
| </ul> | |
| <!-- Demo Nav --></div> | |
| <div id="footer"> | |
| <center>© 2014 all rights reserved</center> | |
| </div> | |
| <script id="jsbin-source-html" type="text/html"><!DOCTYPE html> | |
| <\!-- saved from url=(0032)http://jiachun-li.com/#portfolio --> | |
| <html lang="en"><\!--<![endif]--> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | |
| <meta charset="UTF-8"> | |
| <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"> | |
| <title>Jiachun-li</title> | |
| <meta content="width=device-width, initial-scale=1.0" name="viewport"> | |
| <meta content="" name="description"> | |
| <meta content="" name="keywords"> | |
| <meta content="Your name" name="author"> | |
| <style type="text/css"> | |
| /* CSS reset */ | |
| body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| html, body { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| a, a:hover { | |
| text-decoration: none; | |
| } | |
| table { | |
| border-collapse: collapse; | |
| border-spacing: 0; | |
| } | |
| fieldset, img { | |
| border: 0; | |
| } | |
| input { | |
| border: 1px solid #b0b0b0; | |
| padding: 3px 5px 4px; | |
| color: #979797; | |
| width: 190px; | |
| } | |
| address, caption, cite, code, dfn, th, var { | |
| font-style: normal; | |
| font-weight: normal; | |
| } | |
| ol, ul { | |
| list-style: none; | |
| } | |
| caption, th { | |
| text-align: left; | |
| } | |
| h1, h2, h3, h4, h5, h6 { | |
| font-size: 100%; | |
| font-weight: normal; | |
| } | |
| q:before, q:after { | |
| content: ''; | |
| } | |
| abbr, acronym { | |
| border: 0; | |
| } | |
| /* General Demo Style */ | |
| body { | |
| font-family: 'lato'; | |
| font-weight: 400; | |
| font-size: 15px; | |
| color: #fff; | |
| } | |
| a { | |
| text-decoration: none; | |
| } | |
| .clr { | |
| clear: both; | |
| color: #999; | |
| } | |
| /* Top Bar Style */ | |
| .codrops-top { | |
| line-height: 15px; | |
| font-family: 'lato'; | |
| font-size: 11px; | |
| background: rgba(65, 65, 65, 0.1); | |
| text-transform: uppercase; | |
| z-index: 9999; | |
| position: fixed; | |
| top: 0px; | |
| left: 0px; | |
| width: 100%; | |
| height: 15px; | |
| -webkit-animation: slideOut 0.5s ease-in-out 0.3s backwards; | |
| -moz-animation: slideOut 0.5s ease-in-out 0.3s backwards; | |
| -o-animation: slideOut 0.5s ease-in-out 0.3s backwards; | |
| -ms-animation: slideOut 0.5s ease-in-out 0.3s backwards; | |
| animation: slideOut 0.5s ease-in-out 0.3s backwards; | |
| color: #CCC; | |
| } | |
| .codrops-top a { | |
| padding: 0px 10px; | |
| letter-spacing: 1px; | |
| color: #333; | |
| text-shadow: 0px 1px 1px #fff; | |
| display: block; | |
| float: left; | |
| } | |
| .codrops-top a:hover { | |
| background: #fff; | |
| } | |
| .codrops-top span.right { | |
| float: right; | |
| } | |
| .codrops-top span.right a { | |
| float: left; | |
| display: block; | |
| } | |
| /* Demo Buttons */ | |
| #codrops-demos { | |
| position: fixed; | |
| z-index: 2000; | |
| top: 50px; | |
| right: 50px; | |
| } | |
| #codrops-demos a { | |
| display: inline-block; | |
| font-size: 12px; | |
| width: 60px; | |
| height: 24px; | |
| color: #000; | |
| line-height: 24px; | |
| text-align: center; | |
| box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); | |
| background: rgba(255, 255, 255, 0.9); | |
| text-transform: uppercase; | |
| } | |
| #codrops-demos a:hover { | |
| background: #ddd; | |
| color: #000; | |
| } | |
| #codrops-demos a.current-demo, | |
| #codrops-demos a.current-demo:hover { | |
| background: #000; | |
| color: #fff; | |
| cursor: default; | |
| } | |
| @-webkit-keyframes slideOut { | |
| 0% { | |
| top: -30px; | |
| opacity: 0; | |
| } | |
| 100% { | |
| top: 0px; | |
| opacity: 1; | |
| } | |
| } | |
| @-moz-keyframes slideOut { | |
| 0% { | |
| top: -30px; | |
| opacity: 0; | |
| } | |
| 100% { | |
| top: 0px; | |
| opacity: 1; | |
| } | |
| } | |
| @-o-keyframes slideOut { | |
| 0% { | |
| top: -30px; | |
| opacity: 0; | |
| } | |
| 100% { | |
| top: 0px; | |
| opacity: 1; | |
| } | |
| } | |
| @-ms-keyframes slideOut { | |
| 0% { | |
| top: -30px; | |
| opacity: 0; | |
| } | |
| 100% { | |
| top: 0px; | |
| opacity: 1; | |
| } | |
| } | |
| @keyframes slideOut { | |
| 0% { | |
| top: -30px; | |
| opacity: 0; | |
| } | |
| 100% { | |
| top: 0px; | |
| opacity: 1; | |
| } | |
| } | |
| html, body { | |
| height: 100%; | |
| } | |
| body { | |
| width: 100%; | |
| background: #eeedec; | |
| /*overflow:scroll;*/ | |
| margin-bottom: 00px; | |
| overflow-x: hidden; | |
| overflow-y: scroll; | |
| } | |
| a:link { | |
| color: #e9e9e9; | |
| text-decoration: none; | |
| } | |
| a:visited { | |
| color: #b9d5f4; | |
| text-decoration: none; | |
| } | |
| a:hover { | |
| color: #f4b9c8; | |
| text-decoration: none; | |
| } | |
| @font-face { | |
| font-family: AldotheApache; | |
| src: url("fonts/AldotheApache.eot") /* EOT file for IE */ | |
| } | |
| @font-face { | |
| font-family: AldotheApache; | |
| src: url("fonts/AldotheApache.ttf") /* TTF file for CSS3 browsers */ | |
| } | |
| #header { | |
| position: fixed; | |
| z-index: 2000; | |
| width: 300px; | |
| top: 0px; | |
| left: 0px; | |
| /*box-shadow: 10px 0px 10px rgba(0,0,0,0.1);*/ | |
| height: 430px; | |
| } | |
| #header h1 { | |
| font-family: 'Electrolize', sans-serif; | |
| font-size: 45px; | |
| font-weight: 900; | |
| text-transform: uppercase; | |
| color: rgba(255, 255, 255, 0.8); | |
| padding-top: 53px; | |
| padding-bottom: 60px; | |
| /* box-shadow: 39px 0px 55px -8px rgba(0,0,0,0.09);*/ | |
| background-color: rgb(71, 73, 75); | |
| } | |
| #social { | |
| left: 150px; | |
| height: 60px; | |
| padding-top: 3px; | |
| padding-bottom: 0px; | |
| box-shadow: 39px 0px 55px -12px rgba(0, 0, 0, 0.26); | |
| } | |
| #social a { | |
| float: left; | |
| } | |
| #social img:hover { | |
| opacity: 0.7; | |
| filter: alpha(opacity=70); /* For IE8 and earlier */ | |
| } | |
| #navigation { | |
| box-shadow: 39px 0px 55px -12px rgba(0, 0, 0, 0.26); | |
| margin-top: 30px; | |
| display: block; | |
| list-style: none; | |
| z-index: 4; | |
| } | |
| #navigation a { | |
| color: #444; | |
| font-family: 'Electrolize', sans-serif; | |
| display: block; | |
| background: rgba(255, 255, 255, 0.8); | |
| line-height: 50px; | |
| padding: 5px 5px 0px 10px; | |
| text-transform: uppercase; | |
| margin-bottom: 0px; | |
| /* box-shadow:10px 0px 10px rgba(0,0,0,0.1);*/ | |
| font-size: 16px; | |
| font-weight: 400; | |
| } | |
| #navigation a:hover { | |
| background: #eeedec; | |
| } | |
| .content { | |
| left: 300px; | |
| top: 15px; | |
| position: absolute; | |
| padding-bottom: 30px; | |
| } | |
| .content h2 { | |
| font-family: 'AldotheApache'; | |
| font-weight: 900; | |
| letter-spacing: 5px; | |
| font-size: 210px; | |
| padding: 0px 0px 8px 3px; | |
| margin-top: 45px; | |
| color: rgba(71, 73, 75, 0.9); | |
| text-shadow: rgb(219, 218, 217) 1px 1px, | |
| rgb(220, 219, 218) 2px 2px, | |
| rgb(220, 219, 218) 3px 3px, | |
| rgb(221, 220, 219) 4px 4px, | |
| rgb(221, 220, 219) 5px 5px, | |
| rgb(222, 221, 220) 6px 6px, | |
| rgb(223, 222, 221) 7px 7px, | |
| rgb(223, 222, 221) 8px 8px, | |
| rgb(224, 223, 222) 9px 9px, | |
| rgb(224, 223, 222) 10px 10px, | |
| rgb(225, 224, 223) 11px 11px, | |
| rgb(225, 224, 223) 12px 12px, | |
| rgb(226, 225, 224) 13px 13px, | |
| rgb(227, 226, 225) 14px 14px, | |
| rgb(227, 226, 225) 15px 15px, | |
| rgb(228, 227, 226) 16px 16px, | |
| rgb(228, 227, 226) 17px 17px, | |
| rgb(229, 228, 227) 18px 18px, | |
| rgb(229, 228, 227) 19px 19px, | |
| rgb(230, 229, 228) 20px 20px, | |
| rgb(231, 230, 229) 21px 21px, | |
| rgb(231, 230, 229) 22px 22px, | |
| rgb(232, 231, 230) 23px 23px, | |
| rgb(232, 231, 230) 24px 24px, | |
| rgb(233, 232, 231) 25px 25px, | |
| rgb(233, 232, 231) 26px 26px, | |
| rgb(234, 233, 232) 27px 27px, | |
| rgb(235, 234, 233) 28px 28px, | |
| rgb(235, 234, 233) 29px 29px, | |
| rgb(236, 235, 234) 30px 30px, | |
| rgb(236, 235, 234) 31px 31px, | |
| rgb(237, 236, 235) 32px 32px, | |
| rgb(238, 237, 236) 33px 33px; | |
| } | |
| .content p { | |
| font-family: 'Electrolize', sans-serif; | |
| font-weight: 300; | |
| font-size: 19px; | |
| line-height: 24px; | |
| color: #eeedec; | |
| display: inline-block; | |
| background: #5b5f63; | |
| padding: 5px 6px 5px 5px; | |
| margin: -6px 0px 10px 0px; | |
| } | |
| .content h3 { | |
| font-family: 'Electrolize', sans-serif; | |
| font-weight: 300; | |
| font-size: 19px; | |
| line-height: 24px; | |
| color: #eeedec; | |
| display: inline-block; | |
| background: #5b5f63; | |
| padding: 6px 3px 5px 3px; | |
| margin: －10px 0px 0px 0px; | |
| } | |
| .panel { | |
| min-width: 100%; | |
| height: 95%; | |
| overflow-y: auto; | |
| overflow-x: hidden; | |
| margin-top: -150%; | |
| position: absolute; | |
| background: #363434; | |
| box-shadow: 0px 4px 7px rgba(0, 0, 0, 0.1); | |
| z-index: 2; | |
| -webkit-transition: all .8s ease-in-out; | |
| -moz-transition: all .8s ease-in-out; | |
| -o-transition: all .8s ease-in-out; | |
| transition: all .8s ease-in-out; | |
| } | |
| .panel:target { | |
| margin-top: 0%; | |
| background-color: #eeedec; | |
| } | |
| #home:target ~ #header #link-home, | |
| #portfolio:target ~ #header #link-portfolio, | |
| #about:target ~ #header #link-about, | |
| #contact:target ~ #header #link-contact, | |
| #new:target ~ #header #link-new { | |
| background: #363434; | |
| color: #fff; | |
| } | |
| #works { | |
| padding: -10px 0px 0px; | |
| } | |
| #works li { | |
| display: inline-block; | |
| } | |
| #works li a { | |
| padding-right: -3px; | |
| padding-top: 0px; | |
| } | |
| #works img { | |
| padding: 0px; | |
| /*background: rgba(255,255,255,0.5);*/ | |
| } | |
| #works img:hover { | |
| opacity: 0.7; | |
| filter: alpha(opacity=70); /* For IE8 and earlier */ | |
| } | |
| #form p { | |
| background: #fff; | |
| color: #363434; | |
| } | |
| #form input, #form textarea { | |
| background: #363434; | |
| color: #fff; | |
| border: none; | |
| } | |
| #form textarea { | |
| width: 493px; | |
| height: 100px; | |
| } | |
| #form label { | |
| padding-right: 10px; | |
| float: left; | |
| } | |
| .footnote a { | |
| color: #ddd; | |
| } | |
| .subpage { | |
| right: 40px; | |
| left: 450px; | |
| top: 15px; | |
| position: absolute; | |
| padding-bottom: 30px; | |
| } | |
| .subpage p { | |
| font-family: 'Electrolize', sans-serif; | |
| font-weight: 300; | |
| font-size: 19px; | |
| line-height: 24px; | |
| color: #eeedec; | |
| display: inline-block; | |
| background: #5b5f63; | |
| padding: 5px 6px 5px 5px; | |
| margin: -6px 0px 10px 0px; | |
| } | |
| .subpage h3 { | |
| font-family: 'AldotheApache'; | |
| font-weight: 700; | |
| font-size: 80px; | |
| padding: 5px 0px 20px 30px; | |
| margin-top: 52px; | |
| color: rgba(71, 73, 75, 0.9); | |
| text-shadow: rgb(219, 218, 217) 1px 1px, | |
| rgb(220, 219, 218) 2px 2px, | |
| rgb(220, 219, 218) 3px 3px, | |
| rgb(221, 220, 219) 4px 4px, | |
| rgb(221, 220, 219) 5px 5px, | |
| rgb(222, 221, 220) 6px 6px, | |
| rgb(223, 222, 221) 7px 7px, | |
| rgb(223, 222, 221) 8px 8px, | |
| rgb(224, 223, 222) 9px 9px, | |
| rgb(224, 223, 222) 10px 10px, | |
| rgb(225, 224, 223) 11px 11px, | |
| rgb(225, 224, 223) 12px 12px, | |
| rgb(226, 225, 224) 13px 13px, | |
| rgb(227, 226, 225) 14px 14px, | |
| rgb(227, 226, 225) 15px 15px, | |
| rgb(228, 227, 226) 16px 16px, | |
| rgb(228, 227, 226) 17px 17px, | |
| rgb(229, 228, 227) 18px 18px, | |
| rgb(229, 228, 227) 19px 19px, | |
| rgb(230, 229, 228) 20px 20px, | |
| rgb(231, 230, 229) 21px 21px, | |
| rgb(231, 230, 229) 22px 22px, | |
| rgb(232, 231, 230) 23px 23px, | |
| rgb(232, 231, 230) 24px 24px, | |
| rgb(233, 232, 231) 25px 25px, | |
| rgb(233, 232, 231) 26px 26px, | |
| rgb(234, 233, 232) 27px 27px, | |
| rgb(235, 234, 233) 28px 28px, | |
| rgb(235, 234, 233) 29px 29px, | |
| rgb(236, 235, 234) 30px 30px, | |
| rgb(236, 235, 234) 31px 31px, | |
| rgb(237, 236, 235) 32px 32px, | |
| rgb(238, 237, 236) 33px 33px; | |
| } | |
| @font-face { | |
| font-family: AldotheApache; | |
| src: url("fonts/AldotheApache.eot") /* EOT file for IE */ | |
| } | |
| @font-face { | |
| font-family: AldotheApache; | |
| src: url("fonts/AldotheApache.ttf") /* TTF file for CSS3 browsers */ | |
| } | |
| a:visited { | |
| color: #b9d5f4; | |
| text-decoration: none; | |
| } | |
| a:hover { | |
| color: #f4b9c8; | |
| text-decoration: none; | |
| } | |
| #footer { | |
| font-size: 12px; | |
| position: absolute; | |
| color: #6d6d6d; | |
| bottom: 0; | |
| width: 100%; | |
| height: 20px; /* Height of the footer */ | |
| } | |
| </style> | |
| </head> | |
| <body><\!-- Codrops top bar --> | |
| <\!--/ Codrops top bar --><\!-- Home --> | |
| <div class="content" id="home"> | |
| <h2>Home</h2> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, ab, cum hic ducimus rerum est facilis | |
| architecto quisquam veritatis vel praesentium quis ratione nulla fugit maxime? Soluta, voluptates doloremque. | |
| Dolores!</p> | |
| <p>She is interested in sensing the world digitally, emotionally and interactively. Her inspiration usually comes | |
| from science and science fiction, these interests since a teenager gave her an aesthetic appreciation and | |
| obsession to the space from an angle that combines science, imagination and art.</p> | |
| <p></p> | |
| </div> | |
| <\!-- /Home --><\!-- Portfolio --> | |
| <div class="panel" id="portfolio"> | |
| <div class="content"> | |
| <h2>Portfolio</h2> | |
| <h3>Interactive Works</h3> | |
| <ul id="works"> | |
| <li><a href="#"><img src="./portfolio_01.jpg" width="250"></a></li> | |
| <li><a href="#"><img src="./portfolio_08.jpg" width="250"></a></li> | |
| <li><a href="#"><img src="./portfolio_05.jpg" width="250"></a></li> | |
| <li><a href="#"><img src="./portfolio_03.jpeg" width="250"></a></li> | |
| </ul> | |
| <ul id="works"> | |
| <li><a href="#"><img src="./portfolio_09.jpg" width="250"></a></li> | |
| <li><a href="#"><img src="./portfolio_13.jpg" width="250"></a></li> | |
| <li><a href="#"><img src="./portfolio_10.jpg" width="250"></a></li> | |
| </ul> | |
| <h3>Sound</h3> | |
| <ul id="works"> | |
| <li><a href="#"><img src="./portfolio_04.jpeg" width="250"></a></li> | |
| </ul> | |
| <h3>Mobile & Web Design</h3> | |
| <ul id="works"> | |
| <li><a href="#"><img src="./portfolio_18.jpg" width="250"></a></li> | |
| <li><a href="#"><img src="./portfolio_02.jpeg" width="250"></a></li> | |
| <li><a href="#"><img src="./portfolio_15.jpg" width="250"/></a></li> | |
| <li><a href="#"><img src="./portfolio_14.jpg" width="250"/></a></li> | |
| </ul> | |
| <h3>Visual</h3> | |
| <ul id="works"> | |
| <li><a href=.<img src="./portfolio_12.jpg" width="250"></a></li> | |
| <li><a href="#"><img src="./portfolio_11.jpg" width="250"></a></li> | |
| <li><a href="#"><img src="./portfolio_16.jpg" width="250"></a></li> | |
| </ul> | |
| <h3>Video&Film</h3> | |
| <ul id="works"> | |
| <li><a href="#"><img src="./portfolio_07.jpg" width="250"></a></li> | |
| <li><a href=.<img src=./portfolio_06.jpg" width="250"></a></li> | |
| </ul> | |
| <h3><u><a href="#" target="_blank" title="Previous Works">2007-2011 Previous Works</a></u></h3> | |
| </div> | |
| </div> | |
| <\!-- /Portfolio --><\!-- About --> | |
| <div class="panel" id="about"> | |
| <div class="content"> | |
| <h2>About</h2> | |
| <br><br> | |
| <p> | |
| <fon.lor | |
| ="#fff">Skills.nt> | |
| </p> | |
| <br> | |
| <p><font color="#fff">Graphic:</font> Adobe Photoshop, Adobe Illustrator, Adobe Indesign and hand drawing & | |
| skecthing</p> | |
| <br> | |
| <p><font color="#fff">Coding:</font> HTML, CSS, PHP, JavaScr. Java, processing, arduino, and Max/MSP</p> | |
| <br> | |
| <p><font color="#fff">Sound:</font> L. Pro,Adobe Audition, Ableton Live</p> | |
| <br> | |
| <p><font color="#fff">Video editing & Motion graphic:</font> Adobe After Effect, Adobe Premiere</p> | |
| <br> | |
| <p><u><a href="#" target="_blank" title="Somebody-Resume">Resume</a></u></p> | |
| <br> | |
| </div> | |
| </div> | |
| <\!-- /About --><\!-- Contact --> | |
| <div class="panel" id="contact"> | |
| <div class="content"> | |
| <h2>Contact Me</h2> | |
| <p>Email:</p> | |
| <p><u><a href="mailto:[email protected]">[email protected]</a></u></p> | |
| <br> | |
| <p>Questions, thoughts and interests please feel free to contact me. </p> | |
| <br> | |
| <p>(shamelessly) asking for an entry-level job.</p> | |
| </div> | |
| </div> | |
| <\!-- /Contact --><\!--new--> | |
| <div class="panel" id="new"> | |
| <div class="content"> | |
| <h2>Events</h2> | |
| <p>11/15/2013</p> | |
| <br> | |
| <p>PROVISIONAL SPACE <a href="#"><u>The Cube</u></a> - Interactive performance at Brooklyn Fireproof.</p> | |
| <p><a href="#"><u>Event Link</u></a></p> | |
| <br><br> | |
| <p>01/27/2014</p> | |
| <br> | |
| <p>MFA Thesis Show, The Sound of Universe</p> | |
| <p><a href="#"><u>Event Link</u></a></p> | |
| <br><br> | |
| <p>02/05/2014</p> | |
| <br> | |
| <p>HIGH G0NZ0 REVIVAL - <a href="#"><u>The Cube</u></a> - Digital Performance at Bizarre Bushwick</p> | |
| <p><a href="#"><u>Event Link</u></a></p> | |
| <br> | |
| </div> | |
| </div> | |
| <\!--/new--><\!-- Header with Navigation --> | |
| <div id="header"> | |
| <h1>Somebody's portfolio</h1> | |
| <div id="social"> | |
| <a href="mailto:[email protected]"><img src="./48x48_email.png" width="57.6"></a> | |
| <a href="#"><img src="./48x48_vimeo.png" width="57.6"></a> | |
| <a href="#"><img src="./48x48_twitter.png" width="57.6"></a> | |
| <a href="#"><img src="./48x48_facebook.png" width="57.6"></a> | |
| <a href="#"><img src="./48x48_linkedin.png" width="57.6"></a> | |
| </div> | |
| <ul id="navigation"> | |
| <li><a href="#home" id="link-home">Home</a></li> | |
| <li><a href="#portfolio" id="link-portfolio">Portfolio</a></li> | |
| <li><a href="#about" id="link-about">About Me</a></li> | |
| <li><a href="#contact" id="link-contact">Contact Me</a></li> | |
| <li><a href="#new" id="link-new">Events</a></li> | |
| </ul> | |
| <\!-- Demo Nav --></div> | |
| <div id="footer"> | |
| <center>© 2014 all rights reserved</center> | |
| </div> | |
| </body> | |
| </html> | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment