Commit 13f29ccc authored by christian's avatar christian

add nav

parent 1e74bc55
......@@ -16,3 +16,4 @@ meta/
readme.md
class.phpmailer.php
class.smtp.php
.sass-cache/
......@@ -99,6 +99,7 @@
outline: none;
margin: 0.5em 0;
font-size:0.850em;
line-height:1.5em;
&.chrome{
margin-right:40px;
position:relative;
......
......@@ -471,7 +471,8 @@
padding: 0.5em;
outline: none;
margin: 0.5em 0;
font-size: 0.850em; }
font-size: 0.850em;
line-height: 1.5em; }
.outsider a.chrome {
margin-right: 40px;
position: relative; }
......@@ -814,9 +815,41 @@ body {
text-align: center;
text-shadow: 3px 3px 0 #00b6e9;
text-transform: uppercase; }
.inner-wrapper #section-container .ribbon nav {
width: 800px;
margin: 0 auto; }
.inner-wrapper #section-container .ribbon nav ul {
margin: 0 auto;
padding: 0;
height: 100%;
width: 450px; }
.inner-wrapper #section-container .ribbon nav ul li {
float: left;
width: 45%;
margin: 0 2.5%;
list-style: none;
height: 1.250em; }
.inner-wrapper #section-container .ribbon nav ul li a {
margin: 0 auto;
width: 90%;
display: block;
text-decoration: none;
color: #00b6e9;
text-align: center;
font-size: 1em;
-webkit-transition: color 0.3s;
transition: color 0.3s;
position: relative; }
.inner-wrapper #section-container .ribbon nav ul li a:hover {
color: #ce6541; }
.inner-wrapper #section-container .ribbon nav ul li a:after {
content: '\00BB';
position: absolute;
top: -1px;
padding-left: 5px; }
.inner-wrapper #section-container .content {
margin: 60px 0 0 0;
padding: 0 0 20px 0; }
padding: 10px 0 20px 0; }
.inner-wrapper #section-container .content button {
border: 0;
background: none; }
......@@ -839,13 +872,13 @@ body {
.orange-big {
font-size: 1.750em; }
.clearfix {
.clearfix, .inner-wrapper #section-container .ribbon nav ul:after {
*zoom: 1; }
.clearfix:before {
content: "";
display: table;
visibility: hidden; }
.clearfix:after {
.clearfix:after, .inner-wrapper #section-container .ribbon nav ul:after {
content: "";
display: table;
clear: both;
......@@ -995,3 +1028,110 @@ body {
margin: 0 10% 10% 0;
font-size: 4em;
color: #777777; }
#code {
background: url(../img/bg-noise.png) repeat; }
#code article {
width: 960px;
margin: 0 auto;
position: relative;
padding-top: 5%; }
#code article #monky {
background: url(../img/monky.png) top left no-repeat;
width: 750px;
height: 830px;
background-size: cover;
position: absolute;
top: 45%;
left: 35%;
z-index: -1;
-webkit-transform: rotate(-10deg) translate(-50%, -50%);
-moz-transform: rotate(-10deg) translate(-50%, -50%);
transform: rotate(-10deg) translate(-50%, -50%);
opacity: .2; }
#code article header.ribbon {
background-image: url(../img/ribbon.png);
background-repeat: no-repeat;
background-position: center top;
padding: 0;
margin: 0 auto;
width: 945px;
height: 114px; }
#code article header.ribbon h1 {
font-family: "Merriweather Sans", sans-serif;
color: #00a0c6;
font-size: 4.063em;
padding: 0;
margin: 0;
line-height: 96px;
text-align: center;
text-shadow: 3px 3px 0 #00b6e9;
text-transform: uppercase; }
#code article header.ribbon nav {
width: 800px;
margin: 0 auto; }
#code article header.ribbon nav a {
margin: 0 auto;
display: block;
width: 8%;
text-decoration: none;
color: #00b6e9;
text-align: center;
font-size: 1em;
-webkit-transition: color 0.3s;
transition: color 0.3s;
position: relative; }
#code article header.ribbon nav a:hover {
color: #ce6541; }
#code article header.ribbon nav a:before {
content: '\00AB';
position: absolute;
top: -1px;
left: 0; }
#code article div {
width: 450px;
margin: 2em auto 0; }
#code article div a {
white-space: nowrap;
font-weight: 300;
text-decoration: none;
-webkit-transition: color 0.3s;
transition: color 0.3s;
color: #00b6e9;
display: block;
border: 2px solid #00b6e9;
background: white;
width: 450px;
height: 2.5em;
padding: 0.5em;
outline: none;
margin: 0.5em 0;
font-size: 1.125em;
text-align: right; }
#code article div a.chrome {
margin-right: 40px;
position: relative; }
#code article div a.chrome:after {
content: 'exclusive / best behavior';
color: rgba(0, 0, 0, 0.3) !important;
display: inline-block;
position: absolute;
top: 50%;
left: 48px;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 0.625em; }
#code article div a.chrome::before {
content: ' ';
width: 32px;
height: 32px;
background: url(../img/chrome.png) no-repeat;
position: absolute;
top: 50%;
left: 8px;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%); }
#code article div a:hover {
color: #ce6541; }
This diff is collapsed.
<!DOCTYPE html>
<html class="no-js" lang="de" prefix="og: http://ogp.me/ns#">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>monkeybiz.at</title>
<link rel="stylesheet" href="css/style.css?v=0.3">
<link rel="shortcut icon" href="favicon.ico">
<meta name="description" content="Virtual home of Christian Weiss, web developer, sound designer and audio engineer from Vienna.">
<meta property="og:title" content="monkeybiz.at" />
<meta property="og:site_name" content="monkeybiz" />
<meta property="og:description" content="Virtual home of Christian Weiss, web developer, sound designer and audio engineer from Vienna." />
<meta property="og:image" content="http://monkeybiz.at/meta/og_image.png" />
<script src="js/lib/modernizr-latest.min.js"></script>
<script src="js/lib/detectizr.js"></script>
</head>
<body>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>monkeybiz.at</title>
<link rel="stylesheet" href="css/style.css?v=0.3">
<link rel="shortcut icon" href="favicon.ico">
<meta name="description" content="Virtual home of Christian Weiss, web developer, sound designer and audio engineer from Vienna.">
<meta property="og:title" content="monkeybiz.at" />
<meta property="og:site_name" content="monkeybiz" />
<meta property="og:description" content="Virtual home of Christian Weiss, web developer, sound designer and audio engineer from Vienna." />
<meta property="og:image" content="http://monkeybiz.at/meta/og_image.png" />
<script src="js/lib/modernizr-latest.min.js"></script>
<script src="js/lib/detectizr.js"></script>
</head>
<body>
<!--[if lte IE 9]><div id="damned-ie"><p class="chromeframe">"Internet Explorer is the best web browser."</p><span>- nobody</span><p>Monkeybiz using at least version 10 but, it would be better you'll catch a <a href="http://browsehappy.com/">decent browser</a></p></div><![endif]-->
<div id="perspective" class="perspective">
<div class="container">
<div class="wrapper">
<div class="inner-wrapper">
<header>
<div id="sun"></div><div id="monky"></div><div id="greetz"></div>
<div id="header-content">
<p>My name is Christian Weiss, <br>I'm a <span class="orange">front-end web developer</span>,<br> <span class="orange">sound designer</span> and <span class="orange">audio engineer</span><br>from Vienna, Austria.</p>
<p>I like monkeys, wicked sounds and<br><span class="orange-big">clean &amp; simple code!</span></p>
</div>
<div id="perspective" class="perspective">
<div class="container">
<div class="wrapper">
<div class="inner-wrapper">
<header>
<div id="sun"></div><div id="monky"></div><div id="greetz"></div>
<div id="header-content">
<p>My name is Christian Weiss, <br>I'm a <span class="orange">front-end web developer</span>,<br> <span class="orange">sound designer</span> and <span class="orange">audio engineer</span><br>from Vienna, Austria.</p>
<p>I like monkeys, wicked sounds and<br><span class="orange-big">clean &amp; simple code!</span></p>
</div>
</header>
<section role="main" id="section-container">
<header class="ribbon">
<h1>Monkeybiz.at</h1>
<nav>
<ul>
<li><a class="show-outsider" id="nav-outside-links" href="#">Private projects</a></li>
<li><a href="https://www.behance.net/eiweiss_online" target="_blank">Commercial projects</a></li>
</ul>
</nav>
</header>
<section role="main" id="section-container">
<header class="ribbon">
<h1>Monkeybiz.at</h1>
</header>
<article class="content">
<p>I follow with great commitment all the latest developments around HTML5, CSS3 and JavaScript.<br>I enjoy the challenges on my way to become a <span class="orange">JavaScript Ninja!</span></p>
<p>I’m a synthesizer freak and love to create and modeling maniac sounds.</p>
<p><button class="show-outsider" id="outside-links">Click here</button>if you want to see some freetime code, or <a href="https://www.behance.net/eiweiss_online" target="_blank">here</a> for commercial work.
<article class="content">
<p>I follow with great commitment all the latest developments around HTML5, CSS3 and JavaScript.<br>I enjoy the challenges on my way to become a <span class="orange">JavaScript Ninja!</span></p>
<p>I’m a synthesizer freak and love to create and modeling maniac sounds.</p>
<p><button class="show-outsider" id="outside-links">Click here</button>if you want to see some freetime code, or <a href="https://www.behance.net/eiweiss_online" target="_blank">here</a> for commercial work.
<br>Please note that I do not have IE support for private projects and some of the stuff is very experimental.</p>
<p>If you like what you read, don’t be shy and write me a<button class="show-outsider" id="outside-contact">message.</button></p>
<p><span class="orange-big force">Have a good time <span id="force">:)</span></span></p>
......@@ -43,23 +49,23 @@
</div>
</div>
</div>
<section role="link" class="outsider right vertical outside-links">
<section role="link" class="outsider right vertical outside-links nav-outside-links">
<article>
<header>
<h1>..work in progress</h1>
</header>
<a href="https://git.devcontrol.org/christian/monkeybiz/tree/master" target="_blank">Monkeybiz git</a>
<a href="http://www.monkeybiz.at/imagebox/" target="_blank">ImageBox.js</a>
<a href="https://git.devcontrol.org/christian/imagebox-plugin/tree/master" target="_blank">ImageBox.js git</a>
<a href="http://dev.monkeybiz.at/memory/" target="_blank">memorySlider demo</a>
<a href="https://git.devcontrol.org/chrise/memory-js/blob/master/slidememory.js" target="_blank">MemorySlider git</a>
<a href="https://git.devcontrol.org/christian/imagebox-plugin/tree/master" target="_blank">ImageBox.js plugin git</a>
<a href="http://dev.monkeybiz.at/CityGuess/" target="_blank">CityGuess</a>
<a href="https://git.devcontrol.org/christian/guess-the-city/tree/master" target="_blank">CityGuess git</a>
<a class="chrome" href="http://dev.monkeybiz.at/sticker/" target="_blank">QuickerSticker</a>
<a href="https://git.devcontrol.org/christian/quicker-sticker/tree/master" target="_blank">QuickerSticker git</a>
<a class="chrome" href="http://dev.monkeybiz.at/analyzr" target="_blank">Analyzr</a>
<a href="https://git.devcontrol.org/christian/analyzr/tree/master" target="_blank">Analyzr git</a>
</article>
</section>
<section role="form" class="outsider left vertical outside-contact">
<section role="form" class="outsider left vertical outside-contact nav-outside-contact">
<ul id="errors" class="clearfix">
<li id="info">D'OH! Please check your input!</li>
</ul>
......@@ -82,6 +88,7 @@
</footer>
</article>
</section>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
......@@ -94,4 +101,4 @@
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
\ No newline at end of file
</html>
\ No newline at end of file
......@@ -157,10 +157,10 @@ $.fn.typewriter = function () {
$contentWrapper = $container.find('.wrapper');
$showOutsider.on(clickevent, function (e) {
if ($(this).attr('id') === 'outside-links') {
if ($(this).attr('id') === 'outside-links' || $(this).attr('id') === 'nav-outside-links') {
$perspWrapper.addClass('slide-left');
}
if ($(this).attr('id') === 'outside-contact') {
if ($(this).attr('id') === 'outside-contact' || $(this).attr('id') === 'nav-outside-contact') {
$perspWrapper.addClass('slide-right');
}
$('.outsider').hide();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment