Качественное оформление проектов — сортировка информации

Разбиваем страницу на проекты, каждый из которых имеет собственное оформление.

1. Разметка html

<header>
	<a href="#0" class="cd-logo"><img src="img/cd-logo.svg"></a>
	
	<button class="cd-nav-trigger">Menu<span aria-hidden="true" class="cd-icon"></span></button>
</header>
 
<nav class="cd-primary-nav">
	<ul>
		<li class="cd-label">Navigation</li>
		<li><a href="#0">The team</a></li>
		<!-- other navigation items here -->
	</ul>
</nav> <!-- .cd-primary-nav -->
 
<div class="cd-projects-container">
	<ul>
		<li class="single-project">
			<div class="cd-title">
				<h2>Project 1</h2>
			</div> <!-- .cd-title -->
 
			<div class="cd-project-info">
				<button class="cd-scroll">Scroll down</button>
				
				<div class="content-wrapper">
					<p>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam molestias suscipit mollitia vitae ea non ex, dignissimos aperiam minus magni totam sint culpa vel voluptate ipsa sunt repellendus. Ab, magni!
					</p>
 
					<!-- additional project info here -->
				</div>
			</div> <!-- .cd-project-info -->
		</li>
 
		<!-- other projects here -->
	</ul>
</div> <!-- .cd-projects-container -->

2. Теперь добавим стили CSS

.cd-projects-container {
  height: 100%;
  position: relative;
  overflow: hidden;
}
.cd-projects-container .single-project {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  transition: transform 0.4s;
}
.cd-projects-container .single-project:nth-of-type(2) {
  transform: translateY(33.3333333333%);
}
.cd-projects-container .single-project:nth-of-type(3) {
  transform: translateY(66.6666666667%);
}
.cd-title {
  height: 33.3333333333%;
}
.cd-title::before {
  /* background image */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 300%;
  width: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.single-project:nth-of-type(1) .cd-title::before {
  background-image: url(../img/img-1.jpg);
}
.cd-projects-container .single-project.selected {
  /* selected project */
  transform: translateY(0);
}
.cd-projects-container .single-project.selected ~ li {
  /* hide siblings projects */
  transform: translateY(100%);
}
.cd-project-info {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s, visibility 0.4s;
}
.cd-project-info::before {
  /* use to push the .content-wrapper below the intro project image */
  content: '';
  display: block;
  height: 100%;
  width: 100%;
  pointer-events: none;
}
.cd-project-info .content-wrapper {
  position: relative;
  z-index: 2;
  padding: 2em 0 3em;
  background-color: #FFFFFF;
}
.selected .cd-project-info {
  opacity: 1;
  visibility: visible;
  transition: opacity 0s, visibility 0s;
}
.cd-primary-nav {
  position: absolute;
  top: 0;
  left: 0;
  /* height = (100% - 9%) - 9% is the space taken by the projects when the navigation is open */
  height: 91%;
  width: 100%;
  overflow: auto;
  opacity: 0;
}
.cd-primary-nav ul {
  transform: translateY(50px);
  transition: transform 0.4s;
}
.cd-primary-nav.nav-open {
  opacity: 1;
}
.cd-primary-nav.nav-open ul {
  transform: translateY(0);
}
 
.cd-projects-container.nav-open .single-project {
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  transform: translateY(91%);
}
.cd-projects-container.nav-open .single-project:nth-of-type(2) {
  transform: translateY(94%);
}
.cd-projects-container.nav-open .single-project:nth-of-type(3) {
  transform: translateY(97%);
}

И вот то, что мы примерно имеем (Принцип работы скрипта):

3. Подключаем javascript и jQuery

<script src="js/jquery-2.1.4.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
<script>
	(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  	(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  	m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  	})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  	ga('create', 'UA-48014931-1', 'codyhouse.co');
  	ga('send', 'pageview');

  	jQuery(document).ready(function($){
  		$('.close-carbon-adv').on('click', function(event){
  			event.preventDefault();
  			$('#carbonads-container').hide();
  		});
  	});
</script>

Готово.
Детали скрипта находятся в исходниках урока.