JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://unfold.no/js/libs/modernizr-1.6.min.js"></script>
<!-- People -->
<section id="people" class="main-section" data-scroll-align="center">
<div class="wrapper">
<article class="person egil person-1 bottom">
<div class="show-details">
<div class="background"></div> <span class="name">Egil Stene-Johansen</span>
</div>
<div class="details">
<h1>Egil Stene-Johansen</h1>
<dl> <dt>Title</dt>
<dd class="title">Managing Director/Account Director</dd> <dt>Email</dt>
<dd class="email"><a href="mailto:[email protected]">[email protected]</a>
</dd> <dt>Phone</dt>
<dd>+47 92862897</dd>
</dl>
<p>Egil has nearly 10 years of experience in digital communications, working
on large-scale conceptual projects for some of Norway’s major brands.</p>
</div>
</article>
</div>
</section>
CSS
a {
font-style:italic;
text-decoration:none;
border-bottom:1px #55002a solid;
padding-bottom:0px;
color:#2d0016
}
#about .no-portfolio a:hover {
color:#fff;
border-bottom:1px #fff solid
}
#people {
position:relative;
height:620px;
margin-bottom:320px
}
.ie7 #people {
margin-bottom:330px
}
#people .wrapper {
position:absolute;
left:50%;
margin-left: -600px
}
#people .person {
position:absolute;
top:100px;
width:300px
}
#people .person.bottom {
top:220px
}
#people .person-1 {
left:90px
}
#people .person-2 {
left:210px
}
#people .person-3 {
left:330px
}
#people .person-4 {
left:450px
}
#people .person-5 {
left:570px
}
#people .person-6 {
left:690px
}
#people .person-7 {
left:810px
}
#people .person .show-details {
text-decoration:none
}
#people .person .show-details .background {
position:absolute;
top:0;
left:50%;
width:170px;
height:170px;
background:#000 url(http://unfold.no/images/people/egil.jpg) right bottom no-repeat;
z-index:2;
-webkit-transform:rotate(45deg);
-webkit-transform-origin:top left;
-moz-transform:rotate(45deg);
-moz-transform-origin:top left;
-ms-transform:rotate(45deg);
-ms-transform-origin:top left;
-o-transform:rotate(45deg);
-o-transform-origin:top left
}
.no-csstransforms #people .person .show-details .background {
left:40px;
filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=-0.70710678, M21=0.70710678, M22=0.70710678, sizingMethod='auto expand')
}
#people .joachim .show-details .background {
background-image:url(/images/people/joachim.jpg)
}
#people .eric .show-details .background {
background-image:url(/images/people/eric.jpg)
}
#people .simen .show-details .background {
background-image:url(/images/people/simen.jpg)
}
#people .pablo .show-details...
JavaScript
var people;
var settings = {
speed: 250,
easing: 'easeOutExpo'
};
var App = {};
(function($) {
console.log('sfsd');
App.init = function() {
var app = this;
var frame = $('#frame');
var viewport = Modernizr.touch ? frame : $($.browser.mozilla || $.browser.msie ? 'html' : 'body');
var listener = Modernizr.touch ? viewport : $(window);
var navigation = Modernizr.touch ? new app.TouchNavigation(viewport, listener) : new app.Navigation(viewport, listener);
var zIndexHandler = new this.ZIndexHandler([$('#map'), $('#shapes .map-helper'), $('#shapes .home'), $('#shapes .hiring-line'), $('#shapes .home-line'), $('#shapes .contact'), $('#shapes .sharing'), $('#contact'), $('#sharing'), $('#home'), $('#shapes .about'), $('#about'), $('#people'), $('#flickr'), $('#shapes .stripes'), $('#logo'), viewport, $('#primary-nav')]);
var sharing = new this.Sharing();
var randomImage = new this.RandomImage();
var people = new this.People(sharing, navigation);
var statements = new this.Statements(viewport, listener);
$('a[href^="http"]').click(function(e) {
e.preventDefault();
window.open($(this).attr('href'));
});
if (!Modernizr.touch) {
var map = new this.Map(viewport);
var parallax = new this.Parallax(viewport, listener, $('[data-parallax]'));
var infiniteScroll = new this.InfiniteScroll(viewport, listener);
}
}
})(jQuery);;
(function($) {
var people;
var settings = {
speed: 250,
easing: 'easeOutExpo'
};
var zIndex = 3;
App.People = function(sharing, navigation) {
people = this;
this.section = $('#people');
this.people = $('#people .person');
this.navigation = navigation;
this.sharing = sharing;
this.people.each(function() {
var person = $(this);
person.data('background',...