Skip to content

TangChr/sticky-notes

Repository files navigation

CSS3 Sticky Notes

Build Status Build Status website

Stylesheet that uses CSS3-transitions and transformations to create "Sticky Notes" (Post-it notes).

The stylesheet can be seen in action here: seaweed.dk

Compiling the stylesheet

  1. Install node.js.
  2. Install Yarn npm i -g yarn
  3. Clone repository git clone https://github.com/TangChr/sticky-notes
  4. Install dependencies yarn install
npm run build

Using the stylesheet

<head>
    <link rel="stylesheet" href="css/sticky.css" type="text/css" media="screen" />
</head>
<ul class="sticky-notes">
    <li>
        <a href="#">
            <h2>Note #1</h2>
            <p>Content #1</p>
        </a>
    </li>
    <li>
        <a href="#">
            <h2>Note #2</h2>
            <p>Content #2</p>
        </a>
    </li>
    <li>
        <a href="#">
            <h2>Note #3</h2>
            <p>Content #3</p>
        </a>
    </li>
</ul>