October 20, 2015 | 22 Feedbacks

Project Cards Template

A portfolio template with expandable projects and a full-page navigation inspired by Primer app.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera

Today’s resource is inspired by the Primer app, which makes a great use of cards and motion throughout its design. We applied similar effects to a portfolio template, with expandable items and a bold, full-page navigation.

Images: Unsplash

Creating the structure

The HTML structure is composed by 3 main elements: a .cd-nav-trigger for the menu icon, a for the main navigation, and a .cd-projects-container wrapping the unordered list of projects.
Each project contains a with the project title and a with project description. The project image is set as background-image of the .cd-title::before pseudo-element.

Adding style

The has a height of 100% and a relative position. The single projects are in absolute position, have a height of 100% and are placed one on top of the others in the top left corner of their wrapper .cd-projects-container.
The second and third projects are then translated along the Y axis of, respectively, one-third and two-thirds of the .cd-projects-container height. This way, only one-third of the viewport height is visible for each project.

Here’s a quick animation that explains the cards positioning:


We then set a height of 33.33% to the .cd-title (one-third of the viewport height ), and a height: 300% to the .cd-title::before pseudo-element (equal to the viewport height).

When a project is selected, we use the .selected class to assign a translateY(0) to the selected project, while we translate its project siblings to the bottom (translateY(100%)) so that the whole project image is revealed.

As for the .cd-project-info, it has a height of 100%, an overflow: auto (to be able to scroll it) and is placed in the top-left corner of its .single-project parent. Its ::before pseudo-element is then used to push the div.content-wrapper below the project image.

As for the full-page navigation, the .cd-primary-nav is placed below the .cd-projects-container; when the user clicks the .cd-nav-trigger, the single projects are translated to the bottom to reveal the navigation.

Events handling

We used jQuery to listen to the click events on the .cd-nav-trigger and .single-project and to add/remove classes accordingly.


Oct 20, 2015
  • Resource released by CodyHouse

Claudia Romano

Web developer, fan of The Big Bang Theory and good food. Co-founder of CodyHouse and Nucleo. You can follow her on Twitter.

  • Nikhil Arora

    Hello :)

    Thanks for this Amazing resource.

    Can you tell how did you made this animation :

    • Carlos Medina

      probably After Effects

    • Cliff N

      simple CSS animations

  • Yasha Sterling

    I love this, but I would love for the divs to be vertical rather than horizontal. Would you mind helping me create that?

    • quebro

      I would like to know too!

  • Jack Sterling

    can you make a tut about Database or php. Only Css, html, jquery cant make a real Web

  • Jack Sterling

    Anyone know website like this but about DB and PHP. Thank 1e^6 times

  • Daniel Fernandez

    How can I add more than 3 items. Every time I do it in the HTML the whole section goes to the top.

  • Thanh Tran

    Really cool. Thank Claudia

  • Francis Kim

    Awesome animations.

  • Anselm Urban

    web design porn.

  • Emerson Thompson

    OMG… is beautiful!

  • Akila Thiwanka

    cool…! thanks.

  • fajar

    hello , how to change the image background ?

  • 立华奏


  • Jordan Poland

    Hi! I’m trying to link from navigation to further down one of the “card” pages, any tips how to do this? At the moment it just pulls me to the bottom card

  • Rbz

    type on first para of “adding style” I believe:

    “The has a height of 100% and a relative position.”

    supposed to be projects-container, right? just to avoid confusion

    • Claudia Romano

      Thanks for the heads-up! Fixed now ;)

  • ikkf

    How do you add a fourth, fifth, and sixth project to that page?

  • Tyler

    Brilliant effect, really love it!

    Curious if anyone has found a way to have the project rows only cover half the page, but when clicked open cover the entire page? Example – Top section of homepage is text covering 50%, bottom section is list of project rows covering 50%, when project is clicked it covers entire page 100% (both sections top text & project rows).

    If anyone has a suggestion, would be greatly appreciated.

    – Tyler

  • Muhammad Nur Fuad (FD)

    Awesome ?

  • Manoel

    Show =D