My One Page Website

by Gothor

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>
            MyWebSite
        </title>
    </head>
    <body>
        <nav>
            <ul>
                <li>
                    <a href="#quisuisje">Qui suis-je ? - p.1</a>
                </li>
                <li>
                    <a href="#portfolio">Portfolio - p.2</a>
                </li>
                <li>
                    <a href="#competences">Compétences - p.3</a>
                </li>
                <li>
                    <a href="#mecontacter">Me contacter - p.4</a>
                </li>
            </ul>
        </nav>
        
        <div class="page" id="quisuisje">
            <div class="content">
                <h1>Qui suis-je ?</h1>
            </div>
            <div class="numeroDePage">1</div>
        </div>
        
        <div class="page" id="portfolio">
            <div class="content">
                <h1>Portfolio</h1>
            </div>
            <div class="numeroDePage">2</div>
        </div>
        
        <div class="page" id="competences">
            <div class="content">
                <h1>Compétences</h1>
            </div>
            <div class="numeroDePage">3</div>
        </div>
        
        <div class="page" id="mecontacter">
            <div class="content">
                <h1>Me contacter</h1>
                <form method="post">
                    <label for="nom">Nom :</label><input type="text" id="nom" name="nom" required="required" /><br />
                    <label for="mail">E-mail :</label><input type="text" id="mail" name="mail" required="required" /><br />
                    <label for="message">Message :</label><br />
                    <textarea required="required"></textarea><br />
                    <input type="file" onchange="show()" />
                    <input type="submit" required="required" />
                </form>
            </div>
            <div class="numeroDePage">4</div>
   ...

CSS

html, body {
    height : 100%;
    font-family : Arial, Verdana, sans-serif;
}

nav {
    z-index : 2;
    
    position : fixed;
    top : 0;
    bottom : 0;
    left : 0;
    
    width : 150px;
    
    border-right : 1px gray solid;
    padding-top : 100px;
    padding-right : 10px;
    
    background-color : white;
}

nav li {
    height : 30px;
    
    line-height : 30px;
    text-align : right;
}

nav li a {
    color : black;
    text-decoration : none;
}

nav li a:hover {
    text-decoration : underline;
}

.page {
    z-index : 1;
    
    position : absolute;
    top : 0;
    
    width : 100%;
    height : 100%;
}

.content {
    padding-left : 170px;
}

h1 {
    float : left;
    
    border-bottom : 1px solid black;
    border-right : 1px solid black;
    padding : 20px 10px 10px 20px;
    
    font-size : 2em;
}

h1:after {
    display : block;
    
    height : 0;
    
    clear : both;
    
    content : '\0020';
    font-size : 0;
    
    visible : hidden;
}

.numeroDePage {
    position : absolute;
    bottom : 0;
    left : 0;
    right : 0;
    
    height : 2em;
    
    text-align : center;
}

#quisuisje {
    left : 0;
}

#portfolio {
    left : 100%;
}

#competences {
    left : 200%;
}

#mecontacter {
    left : 300%;
}

#mecontacter {
    
}

JavaScript

console.clear();
dojo.ready(function() {
    dojo.connect(dojo.query('input[type=file]')[0], 'onchange', function(evt) {
        console.debug(evt.target);
    });
});