<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="application/xhtml; charset=utf-8" />
<title></title>
<style type="text/css">
body {
background-color:#A3BEDC;
margin:0 auto 0 auto;
width:850px;
/*overflow-x: hidden;*/
}
img.title {
margin-top:7px;
margin-bottom:9px;
}
p {
text-align:left;
font-family: Tahoma;
font-size: 14px;
color: #214087;
text-indent:15px;
margin-top:0px;
}
/* DIVS */
#top {
border: 1px solid red;
width:850px;
background-color:#A3BEDC;
padding-top:10px;
clear:both;
height: 120px;
}
#container {
border: 1px solid yellow;
width:300%;
position:absolute;
top: 130px;
height: 1000px;
}
#menu {
margin-left:350px;
float:left;
}
.wrapper {
padding-top:130px;
width:500px;
}
#yo,#work,#form {
width:33.33%;
float:left;
}
/* FORM */
input[type=text] {
color:#214087;
font-size:12px;
text-shadow:1px 1px #fff;
}
input[type=text].name {
border:0;
background-color:#C6E2FF;
height:14px;
width:180px;
float:left;
padding:10px 10px 10px 10px;
}
input[type=text].email {
border:0;
background-color:#C6E2FF;
height:14px;
width:180px;
float:right;
padding:10px 10px 10px 10px;
}
textarea {
width:500px;
max-width:500px;
height:120px;
max-height:120px;
border:0;
background-color:#C6E2FF;
margin:20px 0;
padding:0;
font-family:Helvetica, Arial, sans-serif;
font-size:12px;
line-height:18px;
color:#574d4a;
text-shadow:1px 1px #fff;
}
input[type=submit].submit {
border:0;
color:#214087;
background-color:#C6E2FF;
height:30px;
width:80px;
float:right;
margin:0 0 0 20px;
}
</style>
<script type="text/javascript">
function GetZoomFactor () {
var factor = 1;
if (document.body.getBoundingClientRect) {
// rect is only in physical pixel size in IE before version 8
var rect = document.body.getBoundingClientRect ();
var physicalW = rect.right - rect.left;
var logicalW = document.body.offsetWidth;
// the zoom level is always an integer percent value
factor = Math.round ((physicalW / logicalW) * 100) / 100;
}
return factor;
}
function fnc() {
if ('pageXOffset' in window) { // todos excepto ie8-
if (window.pageXOffset >= 1 && window.pageYOffset == 0) {
document.getElementById('top').style.position = 'fixed';
document.getElementById('top').style.top = 0;
document.getElementById('top').style.marginLeft = parseInt(window.pageXOffset/500) + 'px';
} else if (window.pageXOffset >= 1 && window.pageYOffset <= 120) { // 120 es el alto de top
document.getElementById('top').style.position = 'fixed';
document.getElementById('top').style.top = - parseInt(window.pageYOffset) + 'px';
document.getElementById('top').style.marginLeft = parseInt(window.pageXOffset/500) + 'px';
}else {
document.getElementById('top').style.position = 'absolute';
document.getElementById('top').style.top = 0;
document.getElementById('top').style.marginLeft = parseInt(window.pageXOffset + (window.pageXOffset/500)) + 'px';
}
}else {
var zoomFactor = GetZoomFactor ();
var scrollTop = Math.round (document.documentElement.scrollTop / zoomFactor);
var scrollLeft = Math.round (document.documentElement.scrollLeft / zoomFactor);
if (scrollLeft >= 1 && scrollTop == 0) {
document.getElementById('top').style.position = 'fixed';
document.getElementById('top').style.top = 0;
document.getElementById('top').style.marginLeft = parseInt(scrollLeft/500) + 'px';
} else if (scrollLeft >= 1 && scrollTop <= 120) { // 120 es el alto de top
document.getElementById('top').style.position = 'fixed';
document.getElementById('top').style.top = - parseInt(scrollTop) + 'px';
document.getElementById('top').style.marginLeft = parseInt(scrollLeft/500) + 'px';
} else {
document.getElementById('top').style.position = 'absolute';
document.getElementById('top').style.top = 0;
document.getElementById('top').style.marginLeft = parseInt(scrollLeft + (scrollLeft/500)) + 'px';
}
}
}
window.onscroll = function() {fnc();};
</script>
</head>
<body>
<div id='top'>
<a href="http://www.martriay.com.ar"> <img src="images/logo.jpg" border="0" alt="Martin Triay" width="350" height="120" /> </a>
<div id='menu'>
<ul class='menu'>
<li><a href="#yo">Martin who?</a></li>
<li><a href="#work">Some of my work</a></li>
<li><a href="#form">Contact me!</a></li>
</ul>
</div>
</div>
<div id='container'>
<div id='yo'>
<div class='wrapper'>
<img class='title' src="images/martnwho.jpg" border="0" alt="Martin who?" align="bottom" width="170" height="30" />
<p>Hi, I'm Martin Triay, an argentinian web developer. I've been learning about web coding and designing by myself since I was 10. Now I'm 17 and still learning. Please keep in mind this site is still under construction.</p>
</div>
</div>
<div id='work'>
<div class='wrapper'>
<img class='title' src="images/smfmywrk.jpg" border="0" alt="Some of my work" align="bottom" width="220" height="30" />
<p>I like to work with valid <b>xHTML</b> + <b>CSS</b>, <b>JavaScript</b> (+<b>JQuery</b>), <b>AJAX</b> (XML + Javascript) and <b>PHP</b> + <b>MySQL</b>. I also work with CMS such as Joomla! or Wordpress.</p>
<p>What does this mean? It means that I can develop dynamic, fast and interactive sites which can also interact with databases.</p>
<p>I'm always looking for new projects to improve my abilities, taking every work as a new challenge to grow with. Would you like to see some of my work?</p>
<div id='slider'>
<a href="http://estudio-rh.com.ar" target="_blank">
<img src='images/estudio.jpg' width="400" height="300">
<span>
Estudio Rodríguez Herrera
</span>
</a>
<a href="http://polimata.com.ar" target="_blank">
<img src='images/polimata.jpg' width="400" height="300">
<span>
Polímata
</span>
</a>
</div>
</div>
</div>
<div id='form'>
<div class='wrapper'>
<img class='title' src="images/contact.jpg" border="0" alt="Contact" align="bottom" width="120" height="30" />
<form method="post" action="send.php">
<input type="text" class="name" name="name" value="Who the hell are you?" onblur="if (this.value == '') {this.value = 'Who the hell are you?';}" onfocus="if (this.value == 'Who the hell are you?') {this.value = '';}"/>
<input type="text" class="email" name="mail" value="Email?" onblur="if (this.value == '') {this.value = 'Email?';}" onfocus="if (this.value == 'Email?') {this.value = '';}" />
<div class="clear"></div>
<textarea name="msg"></textarea>
<div class="clear"></div>
<input type="submit" value="Send" class="submit" />
<div class="clear"></div>
</form>
</div>
</div>
</div>
</body>
</html>