You can register an iTabCode account to be able to view iTabCode without ads. ( Registration is Free ) Register Now

x32x01

ADMINISTRATOR
Staff Member

HTML:
<section class="flex">
    <h1 class="heading">
        <span>
            A folded list
        </span>
    </h1>
    <ul class="list">
        <li class="list__item">
            <span class="list__item-text">Gumbo beet greens</span>
        </li>
        <li class="list__item">
            <span class="list__item-text">Parsley shallot courgette</span>
        </li>
        <li class="list__item">
            <span class="list__item-text">Dandelion cucumber earthnut</span>
        </li>
        <li class="list__item">
            <span class="list__item-text">Nori grape silver beet</span>
        </li>
        <li class="list__item">
            <span class="list__item-text">Bunya nuts black-eyed pea</span>
        </li>
        <li class="list__item">
            <span class="list__item-text">Kohlrabi radish okra</span>
        </li>
    </ul>
</section>

CSS:
/* VARIABLES */

$colors: (
    background: #79a8a9,
    backgroundDarker: #1f4e5f,
    card: #f4f7f7,
    text: #1f4e5f,
    textInverted: #f4f7f7
);

$sizes: (
    padding: 1.5em,
    height: 4em,
    shadow: 5px,
    perspective: 150px
);


/* BASE STYLES */

body {
    color: map-get($colors, text);
    font: 400 100%/1.4 "Lato", sans-serif;
    background-image: radial-gradient(map-get($colors, backgroundDarker) 10%, map-get($colors, background) 100%);
    background-size: 2000px 2000px;
    background-position: center;
}

.flex {
    position: relative;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.heading {
    color: map-get($colors, textInverted);
    font-size: 1rem;
    padding-bottom: 2rem;
    text-transform: uppercase;
    opacity: 0.85;
}


/* THE LIST ITSELF */

.list {
    font-size: 1.15rem;
   
    &__item {
        position: relative;
        padding: map-get($sizes, padding);
        line-height: 1;
        perspective: map-get($sizes, perspective);
        background-color: map-get($colors, card);
        white-space: nowrap;

        &::before,
        &::after {
            position: absolute;
            top: 0;
            display: block;
            height: 0;
            width: 0;
            content: "";
            border: 0 solid transparent;
        }

        &::after {
            right: 0;
        }

        &::before {
            left: 0;
        }

        &:nth-child(even) {
            background-image: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, transparent 100%);

            &::before,
            &::after {
                border-top-color: map-get($colors, backgroundDarker);
                border-top-width: map-get($sizes, height);
            }

            &::before {
                border-right-width: map-get($sizes, shadow);
            }

            &::after {
                border-left-width: map-get($sizes, shadow);
            }
        }

        &:nth-child(odd) {
            background-image: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.15) 100%);

            &::before,
            &::after {
                border-bottom-color: map-get($colors, backgroundDarker);
                border-bottom-width: map-get($sizes, height);
            }

            &::before {
                border-right-width: map-get($sizes, shadow);
            }

            &::after {
                border-left-width: map-get($sizes, shadow);
            }
        }

        &-text {
            display: inline-block;

            .list__item:nth-child(odd) & {
                transform: rotateX(-7deg);
            }

            .list__item:nth-child(even) & {
                transform: rotateX(7deg);
            }
        }
    }
}
 

micklerson

New Member
List purchases are a great way to build your own leads and generate your own leads www.sellercommunity.com/t5/New-To-Square/Square-Marketing-Canada/td-p/179947. Lead generation through the purchase of targeted leads is a great way to start or expand your business. List purchases are also a great way to provide more value to your existing customer base. Business to business lead generation through purchase of leads provides valuable information about your customers or potential customers.
 
Last edited:
Top