cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <ul class="link-list">
    <li class="link-list__item">
        <a href="https://codepen.io/" class="link-list__link">
            <span class="link-list__tooltip">CodePen</span>
            <svg class="link-list__icon link-list__icon--codepen" viewBox="0 0 48 48" aria-hidden="true" focusable="false">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#codepen"></use>
            </svg>
        </a>
    </li>
    <li class="link-list__item">
        <a href="https://github.com/" class="link-list__link">
            <span class="link-list__tooltip">GitHub</span>
            <svg class="link-list__icon link-list__icon--github" viewBox="0 0 48 48" aria-hidden="true" focusable="false">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#github"></use>
            </svg>
        </a>
    </li>
    <li class="link-list__item">
        <a href="https://medium.com/" class="link-list__link">
            <span class="link-list__tooltip">Medium</span>
            <svg class="link-list__icon link-list__icon--medium" viewBox="0 0 48 48" aria-hidden="true" focusable="false">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#medium"></use>
            </svg>
        </a>
    </li>
    <li class="link-list__item">
        <a href="https://twitch.tv/" class="link-list__link">
            <span class="link-list__tooltip">Twitch</span>
            <svg class="link-list__icon link-list__icon--twitch" viewBox="0 0 48 48" aria-hidden="true" focusable="false">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitch"></use>
            </svg>
        </a>
    </li>
    <li class="link-list__item">
        <a href="https://twitter.com/" class="link-list__link">
            <span class="link-list__tooltip">Twitter</span>
            <svg class="link-list__icon link-list__icon--twitter" viewBox="0 0 48 48" aria-hidden="true" focusable="false">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter"></use>
            </svg>
        </a>
    </li>
    <li class="link-list__item">
        <a href="https://youtube.com/" class="link-list__link">
            <span class="link-list__tooltip">YouTube</span>
            <svg class="link-list__icon link-list__icon--youtube" viewBox="0 0 48 48" aria-hidden="true" focusable="false">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#youtube"></use>
            </svg>
        </a>
    </li>
</ul>

<!-- SVG sprite sheet -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg-sprite">
    <symbol id="codepen" viewBox="0 0 48 48">
        <g transform="scale(0.046875 0.046875)">
            <path d="M123.429 668l344.571 229.714v-205.143l-190.857-127.429zM88 585.714l110.286-73.714-110.286-73.714v147.429zM556 897.714l344.571-229.714-153.714-102.857-190.857 127.429v205.143zM512 616l155.429-104-155.429-104-155.429 104zM277.143 458.857l190.857-127.429v-205.143l-344.571 229.714zM825.714 512l110.286 73.714v-147.429zM746.857 458.857l153.714-102.857-344.571-229.714v205.143zM1024 356v312c0 14.286-7.429 28.571-19.429 36.571l-468 312c-7.429 4.571-16 7.429-24.571 7.429s-17.143-2.857-24.571-7.429l-468-312c-12-8-19.429-22.286-19.429-36.571v-312c0-14.286 7.429-28.571 19.429-36.571l468-312c7.429-4.571 16-7.429 24.571-7.429s17.143 2.857 24.571 7.429l468 312c12 8 19.429 22.286 19.429 36.571z"></path>
        </g>
    </symbol>
    <symbol id="github" viewBox="0 0 48 48">
        <g transform="scale(0.046875 0.046875)">
            <path d="M512.008 12.642c-282.738 0-512.008 229.218-512.008 511.998 0 226.214 146.704 418.132 350.136 485.836 25.586 4.738 34.992-11.11 34.992-24.632 0-12.204-0.48-52.542-0.696-95.324-142.448 30.976-172.504-60.41-172.504-60.41-23.282-59.176-56.848-74.916-56.848-74.916-46.452-31.778 3.51-31.124 3.51-31.124 51.4 3.61 78.476 52.766 78.476 52.766 45.672 78.27 119.776 55.64 149.004 42.558 4.588-33.086 17.852-55.68 32.506-68.464-113.73-12.942-233.276-56.85-233.276-253.032 0-55.898 20.004-101.574 52.76-137.428-5.316-12.9-22.854-64.972 4.952-135.5 0 0 43.006-13.752 140.84 52.49 40.836-11.348 84.636-17.036 128.154-17.234 43.502 0.198 87.336 5.886 128.256 17.234 97.734-66.244 140.656-52.49 140.656-52.49 27.872 70.528 10.35 122.6 5.036 135.5 32.82 35.856 52.694 81.532 52.694 137.428 0 196.654-119.778 239.95-233.79 252.624 18.364 15.89 34.724 47.046 34.724 94.812 0 68.508-0.596 123.644-0.596 140.508 0 13.628 9.222 29.594 35.172 24.566 203.322-67.776 349.842-259.626 349.842-485.768 0-282.78-229.234-511.998-511.992-511.998z"></path>
        </g>
    </symbol>
    <symbol id="medium" viewBox="0 0 48 48">
        <g transform="scale(0.046875 0.046875)">
            <path d="M341.143 240.571v670.286c0 17.714-8.571 34.286-28 34.286-6.857 0-13.143-1.714-18.857-4.571l-265.714-133.143c-16-8-28.571-28.571-28.571-45.714v-651.429c0-14.286 6.857-27.429 22.286-27.429 9.143 0 17.143 4.571 25.143 8.571l292 146.286c0.571 0.571 1.714 2.286 1.714 2.857zM377.714 298.286l305.143 494.857-305.143-152v-342.857zM1024 308.571v602.286c0 18.857-10.857 32-29.714 32-9.714 0-18.857-2.857-26.857-7.429l-252-125.714zM1022.286 240c0 2.286-295.429 481.714-318.286 518.286l-222.857-362.286 185.143-301.143c6.286-10.286 17.714-16 29.714-16 5.143 0 10.286 1.143 14.857 3.429l309.143 154.286c1.143 0.571 2.286 1.714 2.286 3.429z"></path>
        </g>
    </symbol>
    <symbol id="twitch" viewBox="0 0 48 48">
        <g transform="scale(0.046875 0.046875)">
            <path d="M96 0l-96 160v736h256v128h128l128-128h160l288-288v-608h-864zM832 544l-160 160h-160l-128 128v-128h-192v-576h640v416z"></path>
            <path d="M608 256h96v256h-96v-256z"></path>
            <path d="M416 256h96v256h-96v-256z"></path>
        </g>
    </symbol>
    <symbol id="twitter" viewBox="0 0 48 48">
        <g transform="scale(0.046875 0.046875)">
            <path d="M1024 226.4c-37.6 16.8-78.2 28-120.6 33 43.4-26 76.6-67.2 92.4-116.2-40.6 24-85.6 41.6-133.4 51-38.4-40.8-93-66.2-153.4-66.2-116 0-210 94-210 210 0 16.4 1.8 32.4 5.4 47.8-174.6-8.8-329.4-92.4-433-219.6-18 31-28.4 67.2-28.4 105.6 0 72.8 37 137.2 93.4 174.8-34.4-1-66.8-10.6-95.2-26.2 0 0.8 0 1.8 0 2.6 0 101.8 72.4 186.8 168.6 206-17.6 4.8-36.2 7.4-55.4 7.4-13.6 0-26.6-1.4-39.6-3.8 26.8 83.4 104.4 144.2 196.2 146-72 56.4-162.4 90-261 90-17 0-33.6-1-50.2-3 93.2 59.8 203.6 94.4 322.2 94.4 386.4 0 597.8-320.2 597.8-597.8 0-9.2-0.2-18.2-0.6-27.2 41-29.4 76.6-66.4 104.8-108.6z"></path>
        </g>
    </symbol>
    <symbol id="youtube" viewBox="0 0 48 48">
        <g transform="scale(0.046875 0.046875)">
            <path d="M406.286 644.571l276.571-142.857-276.571-144.571v287.429zM512 152c215.429 0 358.286 10.286 358.286 10.286 20 2.286 64 2.286 102.857 43.429 0 0 31.429 30.857 40.571 101.714 10.857 82.857 10.286 165.714 10.286 165.714v77.714s0.571 82.857-10.286 165.714c-9.143 70.286-40.571 101.714-40.571 101.714-38.857 40.571-82.857 40.571-102.857 42.857 0 0-142.857 10.857-358.286 10.857v0c-266.286-2.286-348-10.286-348-10.286-22.857-4-74.286-2.857-113.143-43.429 0 0-31.429-31.429-40.571-101.714-10.857-82.857-10.286-165.714-10.286-165.714v-77.714s-0.571-82.857 10.286-165.714c9.143-70.857 40.571-101.714 40.571-101.714 38.857-41.143 82.857-41.143 102.857-43.429 0 0 142.857-10.286 358.286-10.286v0z"></path>
        </g>
    </symbol>
</svg>
            
          
!
            
              .link-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.link-list__item {
    display: inline-block;
    margin: 0;
}

.link-list__link {
    display: inline-block;
    padding: 10px;
    position: relative;
    text-decoration: none;
}

.link-list__icon {
    height: 48px;
    width: 48px;
}

.link-list__icon--codepen {
    fill: #000;
}

.link-list__icon--github {
    fill: #24292e;
}

.link-list__icon--medium {
    fill: #1c9963;
}

.link-list__icon--steam {
    fill: #171a21;
}

.link-list__icon--twitch {
    fill: #4b367c;
}

.link-list__icon--twitter {
    fill: #1da1f2;
}

.link-list__icon--youtube {
    fill: #e62117;
}

.link-list__tooltip {
    background-color: #333;
    border-radius: 3px;
    bottom: 110%;
    color: #fff;
    display: inline-block;
    font-size: .75em;
    left: 50%;
    margin-left: -50%;
    opacity: 0;
    text-align: center;
    transition: all .3s ease;
    padding: 5px;
    position: absolute;
    width: 100%;
}

.link-list__tooltip:before {
    border-top: solid #333 5px;
    border-bottom: solid transparent 5px;
    border-left: solid transparent 5px;
    border-right: solid transparent 5px;
    content: "";
    height: 0;
    left: 50%;
    margin-left: -5px;
    position: absolute;
    top: 100%;
    width: 0;
}

.link-list__link:focus .link-list__tooltip,
.link-list__link:hover .link-list__tooltip {
    bottom: 100%;
    opacity: 1;
}

.svg-sprite {
    display: none;
}

body {
    margin: 3em;
}

* {
    box-sizing: border-box;
}

            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console