JSFiddle - React, Tailwind, and code Playground

by mmarcon

HTML

<header>
    <h1>
        Massimiliano Marcon<span>.me</span>
    </h1>
</header>

<section id="about">
    <h3><img src="http://dl.dropbox.com/u/234787/ifiddle/test1.jpg" alt="Me"/>About me</h3>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor molestie dapibus. Pellentesque ligula justo, rutrum quis fermentum id, ultricies at dolor.
    </p>
    <p>
        Vestibulum ultricies, nisl et scelerisque iaculis, velit nunc ullamcorper purus, at hendrerit dui sapien ornare felis. In odio justo, ultricies eget vulputate venenatis, tempor blandit velit.
    </p>
    <p>
        Quisque posuere risus vitae urna congue a tristique orci blandit. Ut eu felis eget risus condimentum imperdiet. In faucibus aliquet tellus, quis cursus odio pulvinar a. Nulla consequat, lorem sit amet sodales luctus, mi tellus venenatis est, sit amet condimentum augue enim sed eros. Donec orci urna, bibendum nec facilisis in, ultricies eu turpis.
    </p>
</section>

<aside>
    <section id="contact-me">
        <h4>Contact me</h4>
    </section>
</aside>
<footer>
</footer>

CSS

@import url(http://fonts.googleapis.com/css?family=Ultra);
@import url(http://fonts.googleapis.com/css?family=Kameron);

body {
    background: #8fbc8f;
    font-family: 'Kameron';
    font-size: 14px;
}

header {
    max-width: 600px;
    margin: 10px 0 30px 0;
}

h1 {
    color: #eee;
    font-size: 64px;
    font-family: 'Ultra', arial, serif;
    line-height: 1;
    -moz-text-shadow: -1px 1px 0 #666;
    -webkit-text-shadow: -1px 1px 0 #666;
    
}

h1 span {
    font-size: 60%;
    color: #3cb371;
    margin-left: 5px;
    text-shadow: 0 0 0;
}

section {
    max-width: 600px;
    font-weight: 100;
    color: #fff;
    font-size: 150%;
    line-height: 1.1;
    position: relative;
    padding: 0 0 0 110px;
}

section img {
    display: block;
    border: 5px solid #fff;
    margin: 3px 10px 10px 0;
}

section h3 {
    position: absolute;
    font-size: 110%;
    font-family: 'Ultra', arial, serif;
    color: #3cb371;
    top: 0;
    left: 0;
    max-width: 100px;
    text-align: right;
}

section p {
    position: relative;
    margin: 0 0 5px 0;
}

footer {
    margin: 30px 10px 5px 10px;
    text-align: center;
    overflow-x: hidden;
}

footer span {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #3cb371;
    border-radius: 10px;
    margin: 0 2px;
}

footer p {
    font-size: 70%;
    color: #fff;
    margin-top: 10px;
    color: #3cb371;
    text-transform: uppercase;
}

aside {
    position: fixed;
    right: 0;
    top: 20px;
    width: 200px;
    height: 200px;
}

aside section {
    position: static;
    background: #3cb371;
}

aside h4 {
    position: absolute;
    top: 0;
    left: 0;
    width: 90px;
    background: #3cb371;
    text-align: right;
    padding: 5px 10px 5px 0;
    color: #fff;
    box-shadow: -3px 0 8px #666;
    font-size: 16px;
}

JavaScript

$(function() {
    var drawDots = function() {
        var i, f = $('footer'),
            n = ($(window).width() - 20) / 24,
            step = 1 / n;
        f.children('.dot').remove();
        for (i = 0; i < n; i++) {
            $('<span/>').addClass('dot').fadeTo(0, i * step).prependTo(f);
        }
    };

    //drawDots();
    //$(window).resize(drawDots);
});