CSS clip path: Slanted rows

Headings size

Heading h1

Heading h2

Heading h3

Heading h4

Heading h5

Heading h6

QA with BB Accordion and custom CSS

Test

Question

Re milit quamus este ped et alitas vellandi qui doloriae modis apicae nis eaquatu riorit optat la voluptatem aut odis dunt etur, ullatur? Repedigent porio verunti anditat la net acesequam nobitia dis et quas eum eum

alibus necus molores truptae solupta tquodi ipsam idelles esto eles dunt que illiqui que ommolor rempore mporere es quasi dolectur aut quidebist, nus ipit quid et, sa qui te parum et quis cuptas et et lab inusam, nostor magnimi, esto modi tore, con ea quist, sit etur sit, cupti reriam aut alitatu remporr oratemqui dunti consed ut auditas ab iundae. Imped quae repuditae nienducidus quo imus debitia pra voles dolupta tiasimo core nem. Ut laborro elitatus

Question

anim.js: Animated letters

http://tobiasahlin.com/moving-letters/
https://github.com/juliangarnier/anime

Sunny mornings

CCS: Categories grid (custom taxonomy terms)

[for each=categories_actu order=ASC parents=true]

[each link]

[each image_taxonomie]

[each name] ([loop-count type=actu])

[/for]

HTML + CCS shortcodes


<div class="av-category-grid">
    [for each=categories_actu order=ASC parents=true]
    <div class="av-category-grid-item">
        [each link]
        <div class="av-img">[each image_taxonomie]</div>
        <div class="av-content">
            <a href="[[each url]]">[each name] <span class="av-count">([loop-count type=actu])</span></a>
        </div>
    </div>
    [/for]
</div>

CSS

.av-category-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    text-align: center;
}
.av-category-grid-item {
    position: relative;
    flex: 0 1 23%;
    margin-bottom: 30px;
    background-color: white;
    box-shadow: 0 2px 25px rgba(0,0,0,.1);
    transition: all .3s;
}
.av-category-grid-item:hover {
    transform: scale(1.2);
}
.av-category-grid-item > a {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    font-size: 0;
    color: transparent;
}
.av-category-grid-item .av-content a {
    padding: 20px;
    display: block;
    font-weight: bold;
    text-transform: uppercase;
}
.av-category-grid a .av-count {
    margin-left: .25em;
    font-weight: 400;
    color: #ccc;
}
.av-category-grid-item .av-img {
    min-width: 220px;
    height: 200px;
    background-color: rgba(0,0,0,0.1);
}
.av-category-grid-item .av-img img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}