mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-10-23 10:46:13 +02:00
86 lines
3.8 KiB
Plaintext
86 lines
3.8 KiB
Plaintext
---
|
|
layout: layouts/base.njk
|
|
title: A collection of popular layouts and patterns made with CSS
|
|
eleventyExcludeFromCollections: true
|
|
---
|
|
|
|
<div class="container">
|
|
<div class="hero">
|
|
<h1 class="hero__heading">A collection of popular layouts and patterns made with CSS</h1>
|
|
<a class="hero__button" href="https://github.com/phuocng/csslayout">Star me on GitHub · {{ github.stargazers }}★</a>
|
|
</div>
|
|
|
|
<div class="category">
|
|
<h2 class="category__name">Display</h2>
|
|
<div class="category__posts">
|
|
<div class="pattern__item">
|
|
<a class="pattern__link" href="/accordion/">
|
|
<div class="pattern__cover">{% include "patterns/accordion.njk" %}</div>
|
|
<div class="pattern__title">Accordion</div>
|
|
</a>
|
|
</div>
|
|
<div class="pattern__item">
|
|
<a class="pattern__link" href="/arrow-buttons/">
|
|
<div class="pattern__cover">{% include "patterns/arrow-buttons.njk" %}</div>
|
|
<div class="pattern__title">Arrow buttons</div>
|
|
</a>
|
|
</div>
|
|
<div class="pattern__item">
|
|
<a class="pattern__link" href="/avatar/">
|
|
<div class="pattern__cover">{% include "patterns/avatar.njk" %}</div>
|
|
<div class="pattern__title">Avatar</div>
|
|
</a>
|
|
</div>
|
|
<div class="pattern__item">
|
|
<a class="pattern__link" href="/avatar-list/">
|
|
<div class="pattern__cover">{% include "patterns/avatar-list.njk" %}</div>
|
|
<div class="pattern__title">Avatar list</div>
|
|
</a>
|
|
</div>
|
|
<div class="pattern__item">
|
|
<a class="pattern__link" href="/badge/">
|
|
<div class="pattern__cover">{% include "patterns/badge.njk" %}</div>
|
|
<div class="pattern__title">Badge</div>
|
|
</a>
|
|
</div>
|
|
<div class="pattern__item">
|
|
<a class="pattern__link" href="/card/">
|
|
<div class="pattern__cover">{% include "patterns/card.njk" %}</div>
|
|
<div class="pattern__title">Card</div>
|
|
</a>
|
|
</div>
|
|
<div class="pattern__item">
|
|
<a class="pattern__link" href="/centering/">
|
|
<div class="pattern__cover">{% include "patterns/centering.njk" %}</div>
|
|
<div class="pattern__title">Centering</div>
|
|
</a>
|
|
</div>
|
|
<div class="pattern__item">
|
|
<a class="pattern__link" href="/close-button/">
|
|
<div class="pattern__cover">{% include "patterns/close-button.njk" %}</div>
|
|
<div class="pattern__title">Close button</div>
|
|
</a>
|
|
</div>
|
|
<div class="pattern__item">
|
|
<a class="pattern__link" href="/color-swatch/">
|
|
<div class="pattern__cover">{% include "patterns/color-swatch.njk" %}</div>
|
|
<div class="pattern__title">Color swatch</div>
|
|
</a>
|
|
</div>
|
|
<div class="pattern__item">
|
|
<a class="pattern__link" href="/concave-corners/">
|
|
<div class="pattern__cover">{% include "patterns/concave-corners.njk" %}</div>
|
|
<div class="pattern__title">Concave corners</div>
|
|
</a>
|
|
</div>
|
|
<div class="pattern__item">
|
|
<a class="pattern__link" href="/cookie-banner/">
|
|
<div class="pattern__cover">{% include "patterns/cookie-banner.njk" %}</div>
|
|
<div class="pattern__title">Cookie banner</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% include "follow.njk" %}
|
|
</div> |