cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmloctocatspinnerstartv

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.

            
              <svg class="spotify" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g><path d="M 16,0.64c-8.483,0-15.36,6.877-15.36,15.36c0,3.878, 1.437,7.421, 3.808,10.122c 2.403-2.403, 5.694-3.752, 9.472-3.63 c 4.819,0.157, 8.624,2.438, 10.805,6.15C 28.733,25.87, 31.36,21.243, 31.36,16C 31.36,7.517, 24.483,0.64, 16,0.64z M 23.509,21.475 c-0.27,0.448-0.85,0.586-1.296,0.315c-3.558-2.173-8.032-2.664-13.302-1.461c-0.506,0.117-1.014-0.2-1.128-0.71 c-0.117-0.504, 0.198-1.013, 0.707-1.128c 5.768-1.318, 10.715-0.749, 14.706,1.686C 23.64,20.45, 23.782,21.030, 23.509,21.475z M 25.363,17.118c-0.341,0.557-1.069,0.73-1.622,0.387c-4.070-2.501-10.275-3.226-15.090-1.765c-0.626,0.189-1.285-0.165-1.472-0.786 c-0.189-0.626, 0.163-1.285, 0.786-1.472c 5.499-1.672, 12.336-0.862, 17.011,2.010C 25.531,15.838, 25.706,16.562, 25.363,17.118z M 25.522,12.605C 20.642,9.704, 12.592,9.44, 7.933,10.853C 7.184,11.082, 6.394,10.659, 6.166,9.91C 5.941,9.162, 6.363,8.368, 7.109,8.144 c 5.35-1.624, 14.24-1.31, 19.858,2.026c 0.674,0.4, 0.896,1.269, 0.498,1.942C 27.062,12.782, 26.195,13.003, 25.522,12.605z M 13.822,27.085 c-2.162-0.069-3.96,0.773-5.274,2.349C 10.755,30.661, 13.296,31.36, 16,31.36c 1.304,0, 2.57-0.163, 3.779-0.469 C 18.621,28.512, 16.6,27.174, 13.822,27.085z"></path></g></svg>

<svg class="skype" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g><path d="M 29.874,19.261c 0.213-0.998, 0.325-2.035, 0.325-3.101c0-7.978-6.286-14.446-14.042-14.446c-0.818,0-1.621,0.074-2.4,0.211 C 12.499,1.112, 11.016,0.64, 9.422,0.64C 4.926,0.64, 1.28,4.392, 1.28,9.019c0,1.546, 0.41,2.994, 1.12,4.237 c-0.186,0.938-0.285,1.909-0.285,2.904c0,7.978, 6.288,14.446, 14.042,14.446c 0.878,0, 1.739-0.083, 2.571-0.242 c 1.146,0.634, 2.456,0.994, 3.848,0.994c 4.499,0, 8.144-3.75, 8.144-8.378C 30.72,21.645, 30.414,20.381, 29.874,19.261z M 23.358,23.066 c-0.65,0.946-1.61,1.696-2.853,2.227c-1.232,0.526-2.706,0.794-4.387,0.794c-2.018,0-3.707-0.365-5.027-1.086 c-0.944-0.523-1.722-1.234-2.312-2.109c-0.597-0.886-0.899-1.765-0.899-2.611c0-0.53, 0.197-0.989, 0.586-1.365 c 0.386-0.371, 0.878-0.562, 1.466-0.562c 0.482,0, 0.899,0.149, 1.237,0.442c 0.323,0.283, 0.6,0.701, 0.822,1.237 c 0.25,0.587, 0.52,1.082, 0.806,1.472c 0.275,0.374, 0.672,0.691, 1.178,0.938c 0.509,0.246, 1.195,0.373, 2.040,0.373 c 1.16,0, 2.112-0.254, 2.827-0.758c 0.701-0.493, 1.040-1.082, 1.040-1.803c0-0.57-0.178-1.019-0.542-1.37 c-0.382-0.366-0.888-0.653-1.499-0.85c-0.638-0.205-1.506-0.426-2.576-0.656c-1.458-0.322-2.696-0.702-3.68-1.133 C 10.579,15.806, 9.766,15.195, 9.173,14.43c-0.603-0.774-0.909-1.75-0.909-2.896c0-1.091, 0.32-2.075, 0.954-2.923 c 0.629-0.842, 1.544-1.498, 2.725-1.947C 13.109,6.221, 14.496,5.995, 16.064,5.995c 1.254,0, 2.357,0.15, 3.277,0.443 c 0.925,0.298, 1.706,0.698, 2.318,1.19c 0.618,0.498, 1.077,1.029, 1.366,1.578c 0.291,0.558, 0.438,1.112, 0.438,1.648 c0,0.517-0.194,0.986-0.576,1.395c-0.384,0.411-0.87,0.619-1.442,0.619c-0.518,0-0.926-0.131-1.21-0.387 c-0.262-0.238-0.536-0.613-0.837-1.147c-0.35-0.686-0.774-1.226-1.259-1.605c-0.474-0.37-1.261-0.558-2.346-0.558 c-1.006,0-1.826,0.208-2.434,0.619C 12.774,10.187, 12.491,10.64, 12.491,11.176c0,0.33, 0.091,0.605, 0.28,0.84 c 0.2,0.251, 0.48,0.472, 0.837,0.654c 0.368,0.19, 0.749,0.342, 1.13,0.451c 0.39,0.11, 1.045,0.275, 1.944,0.49 c 1.136,0.251, 2.179,0.533, 3.102,0.835c 0.936,0.307, 1.744,0.688, 2.403,1.128c 0.672,0.451, 1.205,1.030, 1.582,1.72 c 0.378,0.694, 0.57,1.55, 0.57,2.544C 24.341,21.032, 24.011,22.115, 23.358,23.066z"></path></g></svg>

 <svg class="pinterest" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g><path d="M 27.429,16q0,3.732 -1.839,6.884t-4.991,4.991t-6.884,1.839q-1.982,0 -3.893-0.571q 1.054-1.661 1.393-2.929q 0.161-0.607 0.964-3.768q 0.357,0.696 1.304,1.205t 2.036,0.509q 2.161,0 3.857-1.223t 2.625-3.366t 0.929-4.821q0-2.036 -1.063-3.821t-3.080-2.911t-4.554-1.125q-1.875,0 -3.5,0.518t-2.759,1.375t-1.946,1.973t-1.196,2.313t-0.384,2.393 q0,1.857 0.714,3.268t 2.089,1.982q 0.536,0.214 0.679-0.357q 0.036-0.125 0.143-0.554t 0.143-0.536q 0.107-0.411 -0.196-0.768q-0.911-1.089 -0.911-2.696q0-2.696 1.866-4.634t 4.884-1.938q 2.696,0 4.205,1.464t 1.509,3.804q0,3.036 -1.223,5.161t-3.134,2.125q-1.089,0 -1.75-0.777t-0.411-1.866q 0.143-0.625 0.473-1.67t 0.536-1.839t 0.205-1.348q0-0.893 -0.482-1.482t-1.375-0.589 q-1.107,0 -1.875,1.018t-0.768,2.536q0,1.304 0.446,2.179l-1.768,7.464q-0.304,1.25 -0.232,3.161q-3.679-1.625 -5.946-5.018t-2.268-7.554q0-3.732 1.839-6.884t 4.991-4.991t 6.884-1.839t 6.884,1.839t 4.991,4.991t 1.839,6.884z"></path></g></svg>

<svg class="googleplus" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g><path d="M 12.107,28.446q0,0.679 -0.179,1.268l-6.786,0 q-1.696,0 -3.063-1.009t-1.848-2.634q 0.429-0.804 1.232-1.384t 1.786-0.884t 1.911-0.429t 1.911-0.125q 0.571,0 0.875,0.036q 0.107,0.071 0.545,0.375t 0.589,0.411t 0.554,0.411t 0.571,0.455t 0.491,0.455t 0.473,0.527t 0.375,0.545t 0.313,0.616t 0.17,0.643t 0.080,0.723zM 6.875,22.179q-4.179,0.125 -6.875,1.518l0-7.732 q 1.839,2.107 4.875,2.107 q 0.571,0 1.25-0.089q-0.375,1.089 -0.375,1.536q0,1.196 1.125,2.661zM 9.964,13.054q0,1.786 -0.777,2.866t-2.509,1.080q-0.911,0 -1.732-0.464t-1.393-1.205t-1-1.67t-0.634-1.857t-0.205-1.768q0-1.714 0.92-2.946t 2.58-1.232q 1.179,0 2.125,0.732t 1.5,1.857t 0.839,2.321t 0.286,2.286zM 27.429,11.429l0,13.143 q0,2.125 -1.509,3.634t-3.634,1.509l-8.357,0 q 0.696-1.304 0.696-2.804q0-1.179 -0.393-2.188t-0.991-1.661t-1.286-1.268t-1.286-1.063t-0.991-0.973t-0.393-1.063q0-0.643 0.411-1.214t 1-1.098t 1.17-1.152t 0.991-1.661t 0.411-2.339t-0.473-2.598t-1.348-2.116q-0.107-0.107 -0.25-0.196t-0.223-0.134t-0.179-0.17t-0.188-0.304l 2.411,0 l 2.411-1.143l-7.804,0 q-2.464,0 -4.366,0.688t-3.259,2.384q0-2.25 1.446-3.804t 3.696-1.554l 17.143,0 q 2.125,0 3.634,1.509t 1.509,3.634l0,1.714 l-4.571,0 l0-4.571 l-2.286,0 l0,4.571 l-4.571,0 l0,2.286 l 4.571,0 l0,4.571 l 2.286,0 l0-4.571 l 4.571,0 z"></path></g></svg>


<svg class="fb" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g><path d="M 23.339,16.393l 0.411-3.911l-3.536,0 l0-1.946 q0-0.875 0.277-1.223t 1.277-0.348l 1.964,0 l0-3.911 l-3.125,0 q-2.714,0 -3.893,1.286t-1.179,3.804l0,2.339 l-2.339,0 l0,3.911 l 2.339,0 l0,11.339 l 4.679,0 l0-11.339 l 3.125,0 zM 27.429,7.429l0,17.143 q0,2.125 -1.509,3.634t-3.634,1.509l-17.143,0 q-2.125,0 -3.634-1.509t-1.509-3.634l0-17.143 q0-2.125 1.509-3.634t 3.634-1.509l 17.143,0 q 2.125,0 3.634,1.509t 1.509,3.634z"></path></g></svg>

 <svg class="tw" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g><path d="M 28.929,7.286q-1.196,1.75 -2.893,2.982q 0.018,0.25 0.018,0.75q0,2.321 -0.679,4.634t-2.063,4.438t-3.295,3.759t-4.607,2.607t-5.768,0.973q-4.839,0 -8.857-2.589q 0.625,0.071 1.393,0.071q 4.018,0 7.161-2.464q-1.875-0.036 -3.357-1.152t-2.036-2.848q 0.589,0.089 1.089,0.089q 0.768,0 1.518-0.196q-2-0.411 -3.313-1.991t-1.313-3.67l0-0.071 q 1.214,0.679 2.607,0.732 q-1.179-0.786 -1.875-2.054t-0.696-2.75q0-1.571 0.786-2.911q 2.161,2.661 5.259,4.259t 6.634,1.777q-0.143-0.679 -0.143-1.321q0-2.393 1.688-4.080t 4.080-1.688q 2.5,0 4.214,1.821q 1.946-0.375 3.661-1.393q-0.661,2.054 -2.536,3.179q 1.661-0.179 3.321-0.893z"></path></g></svg>


 <svg  class="tumblr" width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g><path d="M 20.054,25.161l0-3.232 q-1.571,1 -3.107,1q-0.911,0 -1.571-0.411q-0.518-0.304 -0.696-0.804q-0.196-0.536 -0.196-2.304l0-5.268 l 4.893,0 l0-3.232 l-4.893,0 l0-5.196 l-2.929,0 q-0.196,1.607 -0.714,2.625t-1.393,1.768q-0.857,0.714 -2.071,1.125l0,2.911 l 2.268,0 l0,7.214 q0,1.393 0.304,2.161q 0.304,0.75 1.054,1.393q 0.768,0.661 1.857,1.018q 1.107,0.357 2.5,0.357q 1.196,0 2.304-0.25q 1.018-0.232 2.393-0.875zM 27.429,7.429 l0,17.143 q0,2.125 -1.509,3.634t-3.634,1.509l-17.143,0 q-2.125,0 -3.634-1.509t-1.509-3.634l0-17.143 q0-2.125 1.509-3.634t 3.634-1.509l 17.143,0 q 2.125,0 3.634,1.509t 1.509,3.634z"></path></g></svg>


<svg class="soundcloud" width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g><path d="M 26.668,0L 5.334,0 C 2.4,0, 0,2.4, 0,5.334l0,14.666 L 0.5,18l 1,0 l 0.5,2l-0.5,2L 0.5,22 l-0.5-2l0,6.666 C 0,29.601, 2.4,32, 5.334,32l 21.334,0 C 29.602,32, 32,29.601, 32,26.666L 32,20.035 C 32,22.224, 30.154,24, 27.875,24 c-0.074,0-11.424-0.005-11.434-0.007c-0.246-0.024-0.441-0.226-0.441-0.469L 16,10.94 c0-0.231, 0.082-0.35, 0.393-0.466 c 0.801-0.298, 1.704-0.474, 2.635-0.474c 3.803,0, 6.922,2.803, 7.25,6.377c 0.491-0.198, 1.031-0.308, 1.596-0.308 c 2.278,0, 4.126,1.776, 4.126,3.966L 32,5.334 C 32,2.4, 29.601,0, 26.668,0z M 5.5,24L 4.5,24 l-0.5-4l 0.5-4l 1,0 l 0.5,4L 5.5,24z M 9.5,24l-1,0 l-0.5-5.086L 8.5,14l 1,0 l 0.5,5L 9.5,24z M 13.5,24l-1,0 l-0.5-7.007L 12.5,10l 1,0 l 0.5,6.993L 13.5,24z"></path></g></svg>


 <svg class="linkedin" width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g><path d="M 4.232,25.25l 4.125,0 l0-12.393 l-4.125,0 l0,12.393 zM 8.625,9.036q-0.018-0.929 -0.643-1.536t-1.661-0.607t-1.688,0.607t-0.652,1.536q0,0.911 0.634,1.527t 1.652,0.616l 0.018,0 q 1.054,0 1.696-0.616t 0.643-1.527zM 19.071,25.25l 4.125,0 l0-7.107 q0-2.75 -1.304-4.161t-3.446-1.411q-2.429,0 -3.732,2.089l 0.036,0 l0-1.804 l-4.125,0 q 0.054,1.179 0,12.393l 4.125,0 l0-6.929 q0-0.679 0.125-1q 0.268-0.625 0.804-1.063t 1.321-0.438 q 2.071,0 2.071,2.804l0,6.625 zM 27.429,7.429l0,17.143 q0,2.125 -1.509,3.634t-3.634,1.509l-17.143,0 q-2.125,0 -3.634-1.509t-1.509-3.634l0-17.143 q0-2.125 1.509-3.634t 3.634-1.509l 17.143,0 q 2.125,0 3.634,1.509t 1.509,3.634z"></path></g></svg>


 <svg class="instagram" width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g><path d="M 24.32,16c0,4.595-3.726,8.32-8.32,8.32c-4.595,0-8.32-3.725-8.32-8.32c0-0.547, 0.054-1.082, 0.157-1.6L 2.24,14.4 l0,11.059 c0,2.374, 1.923,4.301, 4.301,4.301l 18.918,0 c 2.374,0, 4.301-1.925, 4.301-4.301L 29.76,14.4 l-5.595,0 C 24.266,14.918, 24.32,15.453, 24.32,16z M 25.459,2.24 L 6.541,2.24 C 4.165,2.24, 2.24,4.166, 2.24,6.541L 2.24,11.2 l 6.966,0 C 10.712,9.072, 13.194,7.68, 16,7.68s 5.288,1.392, 6.794,3.52L 29.76,11.2 L 29.76,6.541 C 29.76,4.166, 27.834,2.24, 25.459,2.24z M 27.563,7.552c0,0.424-0.346,0.768-0.768,0.768l-2.302,0 c-0.422,0-0.768-0.346-0.768-0.768L 23.725,5.248 c0-0.424, 0.347-0.768, 0.768-0.768l 2.302,0 c 0.424,0, 0.768,0.346, 0.768,0.768L 27.563,7.552 z M 21.12,16c0-2.829-2.293-5.12-5.12-5.12S 10.88,13.171, 10.88,16 s 2.293,5.12, 5.12,5.12S 21.12,18.829, 21.12,16z"></path></g></svg>

<svg class="foursquare" width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g><path d="M 31.99,0l-3.534,0 L 20.719,10.622l-3.064-3.064c-0.431-0.431-1.005-0.669-1.616-0.669 c-0.61,0-1.184,0.238-1.616,0.669l-1.391,1.391c-0.078-0.106-0.159-0.211-0.246-0.313 c-1.895-2.215-5.227-2.475-7.442-0.579c-2.215,1.895-2.475,5.227-0.579,7.442c 0.435,0.508, 0.946,0.912, 1.501,1.212 c 0.011,0.57, 0.233,1.137, 0.667,1.571L 14.423,25.771c 0.432,0.432, 1.006,0.67, 1.616,0.67c 0.611,0, 1.185-0.238, 1.616-0.67 l 7.491-7.49c 0.432-0.432, 0.67-1.006, 0.67-1.616s-0.238-1.185-0.67-1.616l-0.862-0.862l 7.706-6.503L 31.99,0 z M 15.484,8.618c 0.148-0.148, 0.346-0.23, 0.556-0.23c 0.21,0, 0.407,0.082, 0.555,0.23l 3.231,3.231l-3.511,4.82 c-0.347,0.387-0.652,0.183-0.773,0.040c-0.041-0.049-0.865-1.127-1.93-2.524c 0.529-1.211, 0.586-2.588, 0.152-3.844 L 15.484,8.618z M 24.085,16.11c 0.148,0.148, 0.23,0.346, 0.23,0.555s-0.082,0.407-0.23,0.555L 16.594,24.711 c-0.148,0.148-0.345,0.23-0.555,0.23c-0.21,0-0.407-0.082-0.555-0.23l-7.414-7.414c 0.863,0.116, 1.752,0.020, 2.583-0.296 l 4.974,4.001c0,0, 0.272,0.253, 0.572,0.009l 6.935-5.852L 24.085,16.11z"></path></g></svg>

<svg class="flickr" width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g><path d="M 26.668,0L 5.334,0 C 2.4,0,0,2.4,0,5.334l0,21.332 C0,29.602, 2.4,32, 5.334,32l 21.334,0 C 29.601,32, 32,29.601, 32,26.666L 32,5.334 C 32,2.4, 29.601,0, 26.668,0z M 9,21c-2.761,0-5-2.239-5-5 c0-2.761, 2.239-5, 5-5s 5,2.239, 5,5C 14,18.761, 11.761,21, 9,21z M 23,21c-2.761,0-5-2.239-5-5 c0-2.761, 2.239-5, 5-5s 5,2.239, 5,5C 28,18.761, 25.762,21, 23,21z"></path></g></svg>


 <svg class="vimeo" width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g><path d="M 16,0C 7.163,0,0,7.163,0,16s 7.163,16, 16,16s 16-7.163, 16-16S 24.837,0, 16,0z M 25.402,13.691 c-1.061,5.978-6.991,11.040-8.774,12.197c-1.784,1.156-3.411-0.463-4.001-1.687 c-0.675-1.397-2.7-8.967-3.23-9.594c-0.53-0.626-2.121,0.627-2.121,0.627l-0.772-1.012 c0,0, 3.231-3.858, 5.689-4.34c 2.606-0.511, 2.603,4.002, 3.229,6.508c 0.606,2.424, 1.014,3.811, 1.543,3.811 c 0.53,0, 1.543-1.352, 2.652-3.424c 1.111-2.074-0.048-3.907-2.218-2.603C 18.267,8.966, 26.463,7.714, 25.402,13.691z"></path></g></svg>


 <svg class="youtube" width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g><path d="M 26,4L 6,4 c-3.3,0-6,2.7-6,6l0,12 c0,3.3, 2.7,6, 6,6l 20,0 c 3.3,0, 6-2.7, 6-6L 32,10 C 32,6.7, 29.3,4, 26,4z M 12,24L 12,8 l 10,8L 12,24z"></path></g></svg>
            
          
!
            
              

// Color Variables, they are actually corp. colors.
@fb :rgb(59, 89, 182);
@tw :rgb(64,153,255);
@googleplus :rgb(221, 75, 57);
@pinterest :rgb(203, 32, 39);
@skype :rgb(18,165,244);
@spotify :rgb(129,183,26);
@instagram:#4E433C; 
@tumblr: #2B4964; 
@vimeo: #86B32D;
@soundcloud: #f76600;
@youtube: #FF3333;  
@linkedin: #4875B4; 
@flickr: #FE0883;  
@foursquare: #8FD400;

body {text-align:center;padding-top:2em;}
svg {display:inline-block; width:56px; height:56px; padding:2em;border-radius:50%;box-shadow: 0 0 0 10px #ccc; margin:1em}


//Fill them
svg.spotify {fill:@spotify; background-color:lighten(@spotify, 40%);}
svg.skype {fill:@skype;background-color:lighten(@skype, 40%);}
svg.pinterest {fill:@pinterest;background-color:lighten(@pinterest, 40%);}
svg.googleplus {fill:@googleplus;background-color:lighten(@googleplus, 40%);}
svg.fb {fill:@fb;background-color:lighten(@fb, 40%);}
svg.tw {fill:@tw;background-color:lighten(@tw, 30%);}
svg.tumblr {fill:@tumblr;background-color:lighten(@tumblr, 40%);}
svg.soundcloud {fill:@soundcloud;background-color:lighten(@soundcloud, 40%);}
svg.linkedin {fill:@linkedin;background-color:lighten(@linkedin, 40%);}
svg.instagram {fill:@instagram;background-color:lighten(@instagram, 40%);}
svg.foursquare {fill:@foursquare;background-color:lighten(@foursquare, 40%);}
svg.flickr {fill:@flickr;background-color:lighten(@flickr, 40%);}
svg.vimeo {fill:@vimeo;background-color:lighten(@vimeo, 40%);}
svg.youtube {fill:@youtube;background-color:lighten(@youtube, 30%);}



            
          
!
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