Site Concept

by Marc Malignan

HTML

<div id="main">
    
    <section>
        <h2>
            <span>Compétences principales</span>
            <button class="toggler minus"></button>
        </h2>
        <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultrices sem in urna elementum luctus a sit amet erat. Ut ut justo aliquet, euismod orci sit amet, imperdiet neque. Phasellus eu ultricies massa. Sed eros nunc, dapibus nec auctor accumsan, ornare non risus. Etiam tempus laoreet suscipit. Proin vulputate gravida velit sit amet convallis. Nunc gravida orci nec ipsum mattis laoreet. Mauris vehicula massa et feugiat venenatis. Nulla ut pulvinar velit. Donec tincidunt nisl turpis, quis consequat leo semper efficitur.</p>
    </section>
    
    <section>
        <h2>
            <span>Expérience Professionnelle</span>
            <button class="toggler minus"></button>
        </h2>
        <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultrices sem in urna elementum luctus a sit amet erat. Ut ut justo aliquet, euismod orci sit amet, imperdiet neque. Phasellus eu ultricies massa. Sed eros nunc, dapibus nec auctor accumsan, ornare non risus. Etiam tempus laoreet suscipit. Proin vulputate gravida velit sit amet convallis. Nunc gravida orci nec ipsum mattis laoreet. Mauris vehicula massa et feugiat venenatis. Nulla ut pulvinar velit. Donec tincidunt nisl turpis, quis consequat leo semper efficitur.</p>
    </section>
    
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700);
@import url(http://fonts.googleapis.com/css?family=Oswald:400,700,300);

* {
    box-sizing: border-box;
}

html, body {
    min-height: 100%;
}
body {
    margin: 0;
    background: linear-gradient(to right, steelblue, lightblue, steelblue);
    background-size: 200%;
    background-position: 50% 0;
    font-family: Roboto, arial;
    color: #333;
}

#main {
    width: 600px;
    margin: 0 auto;
    padding: 40px 0;
}

h1, h2 {
    font-family: Oswald, Roboto, arial;
    text-align: center;
}

section {
    position: relative;
    margin-bottom: 40px;
    background: #fafafa;
    box-shadow: -10px 10px 0 rgba(0,0,0,.1);
}

h2 {
    line-height: 40px;
    padding: 20px;
    margin: 0;
    background: tomato;
    color: #fafafa;
    font-weight: 300;
}
h2 span:before { content: ' [ '; }
h2 span:after { content: ' ] '; }

button {
    background: tomato;
    border: 1px solid transparent;
    color: #fafafa;
    cursor: pointer;
    outline: none;
    transition: all .2s, border-color .5s;
}
button:hover {
    background: #fafafa !important;
    border-color: #fafafa;
    color: tomato;
}

section .toggler {
    position: absolute;
    top: 20px; right: 20px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    background: rgba(255,255,255,.1);
    font-family: Roboto, arial;
    font-size: 150%;
    font-weight: 100;
}
section .toggler.plus:after { content: '+'; }
section .toggler.minus:after { content: '-'; }

section .content {
    padding: 40px;
    margin: 0;
}

JavaScript

$('.toggler').click(function() {
    $(this)
    .toggleClass('plus')
    .toggleClass('minus')
    .closest('section').find('.content').slideToggle(100);
});