Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

              
                <div class="wrapper">
  <div class="wrapper__links">
    <a class="social-link social-link--dribbble" id="dribbble">
    <svg class="social-svg" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
      <title>
        dribbble
      </title>
      <g class="social-group" fill="none" fill-rule="evenodd">
        <circle class="social-group__outline" stroke="#000" stroke-width="20" cx="300" cy="300" r="262.5" />
        <circle class="social-group__inner-circle" fill="#DA5988" cx="300" cy="300" r="252.5" />
        <path class="social-group__icon" d="M446.58 270.912c-1.944-9.528-4.866-18.912-8.646-27.876-3.714-8.802-8.322-17.274-13.674-25.194-5.31-7.854-11.4-15.234-18.108-21.936-6.702-6.714-14.088-12.81-21.936-18.108-7.92-5.37-16.404-9.96-25.194-13.686-8.964-3.774-18.342-6.702-27.876-8.634-9.762-2.004-19.818-3.024-29.862-3.024-10.056 0-20.1 1.02-29.874 3.024-9.528 1.932-18.912 4.866-27.87 8.634-8.79 3.726-17.274 8.322-25.206 13.686-7.854 5.298-15.234 11.388-21.936 18.108-6.708 6.702-12.792 14.088-18.096 21.936-5.358 7.92-9.96 16.392-13.674 25.194-3.798 8.964-6.708 18.348-8.658 27.876-1.998 9.75-3.012 19.806-3.012 29.856 0 10.068 1.014 20.124 3.012 29.88 1.95 9.528 4.866 18.912 8.652 27.87 3.714 8.79 8.322 17.286 13.674 25.206 5.304 7.854 11.388 15.222 18.096 21.936 6.702 6.702 14.088 12.786 21.936 18.096 7.932 5.358 16.416 9.96 25.206 13.674 8.952 3.798 18.342 6.69 27.87 8.646 9.774 2.016 19.818 3.024 29.874 3.024 10.044 0 20.1-1.008 29.862-3.024 9.54-1.956 18.912-4.854 27.876-8.646 8.79-3.714 17.274-8.322 25.194-13.674 7.854-5.31 15.234-11.388 21.936-18.096 6.702-6.714 12.798-14.088 18.108-21.936 5.358-7.92 9.96-16.416 13.674-25.206 3.786-8.952 6.702-18.342 8.646-27.87 2.004-9.762 3.012-19.818 3.012-29.88.006-10.05-1.002-20.106-3.006-29.856zm-18.684 28.602c-1.83-.396-44.694-9.624-88.218-4.152-.888-2.166-1.794-4.35-2.73-6.54-2.634-6.198-5.472-12.342-8.424-18.372 50.028-20.412 70.338-49.782 70.572-50.13 17.766 21.564 28.512 49.128 28.8 79.194zm-42.96-93.804c-.318.492-18.354 27.948-66.162 45.87-21.654-39.786-45.444-71.388-47.346-73.896 9.576-2.322 19.56-3.576 29.85-3.576 32.076 0 61.338 11.952 83.658 31.602zm-114-27.924c0 .012-.024.024-.024.024s-.138.036-.372.084c.126-.036.27-.06.396-.108zm-23.706 8.424c1.686 2.262 25.116 34.02 47.04 72.984-60.822 16.158-113.604 15.528-116.952 15.468 8.232-39.234 34.59-71.766 69.912-88.452zm-72.618 114.558c0-1.35.06-2.67.108-4.002 2.232.048 64.824 1.47 130.038-18.048 3.63 7.104 7.104 14.322 10.278 21.534-1.674.468-3.342.972-4.992 1.512-68.358 22.092-103.032 83.604-103.032 83.604s.048.036.048.06c-20.166-22.446-32.448-52.116-32.448-84.66zm126.666 126.678c-30.654 0-58.77-10.896-80.682-29.028 1.662 1.35 2.838 2.214 2.838 2.214s24.282-52.956 99.396-79.128c.282-.108.564-.186.846-.27 17.826 46.314 25.182 85.104 27.06 96.174-15.204 6.468-31.914 10.038-49.458 10.038zm70.782-21.606c-1.29-7.65-8.04-44.826-24.654-90.48 40.884-6.54 76.326 4.674 78.936 5.532-5.64 35.292-25.842 65.736-54.282 84.948z"
          fill="#000" fill-rule="nonzero" />
      </g>
    </svg>
  </a>
  <a class="social-link social-link--github" id="github">
    <svg class="social-svg" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
      <title>
        github
      </title>
      <g class="social-group" fill="none" fill-rule="evenodd">
        <circle class="social-group__outline" stroke="#000" stroke-width="20" cx="300" cy="300" r="262.5" />
        <circle class="social-group__inner-circle" fill="#000" cx="300" cy="300" r="252.5" />
        <path class="social-group__icon" d="M300 150c-82.8348 0-150 68.8393-150 153.817 0 67.9687 42.991 125.558 102.5893 145.9151 7.5 1.4063 10.2455-3.3482 10.2455-7.433 0-3.683-.134-13.3259-.2009-26.183-41.7187 9.308-50.558-20.625-50.558-20.625-6.8304-17.7456-16.6741-22.5-16.6741-22.5-13.5938-9.576 1.0044-9.375 1.0044-9.375 15.067 1.0714 22.9688 15.8705 22.9688 15.8705 13.3929 23.5045 35.0893 16.741 43.6607 12.7902 1.3393-9.9107 5.2232-16.741 9.509-20.558-33.2813-3.884-68.3036-17.076-68.3036-76.0045 0-16.808 5.8259-30.5357 15.4018-41.25-1.5402-3.884-6.6965-19.5536 1.4732-40.7143 0 0 12.5893-4.1518 41.25 15.7366 11.9866-3.4152 24.7768-5.0893 37.567-5.1562 12.7231.067 25.5803 1.741 37.5669 5.1562 28.6607-19.8884 41.183-15.7366 41.183-15.7366 8.1697 21.1607 3.0134 36.8304 1.4733 40.7143 9.5758 10.7812 15.4017 24.509 15.4017 41.25 0 59.0625-35.0892 72.0536-68.5044 75.8705 5.3571 4.7545 10.1785 14.1295 10.1785 28.4598 0 20.558-.2009 37.1652-.2009 42.1875 0 4.0849 2.6786 8.9063 10.3125 7.3661C407.076 429.308 450 371.7187 450 303.817 450 218.8393 382.8348 150 300 150z"
          fill="#FFF" fill-rule="nonzero" />
      </g>
    </svg>
  </a>
  <a class="social-link social-link--linkedin" id="linkedin">
    <svg class="social-svg" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
      <title>
        linkedin
      </title>
      <g class="social-group" fill="none" fill-rule="evenodd">
        <circle class="social-group__outline" stroke="#000" stroke-width="20" cx="300" cy="300" r="262.5" />
        <circle class="social-group__inner-circle" fill="#2D76B0" cx="300" cy="300" r="252.5" />
        <path class="social-group__icon" d="M278.9308 253.1923h43.5769v20.0539h.5923c6.0923-11.5077 20.9-23.6077 43.0692-23.6077 46.0308 0 54.577 30.2923 54.577 69.723v80.2154h-45.4385v-71.1615c0-17.0077-.2539-38.8385-23.6077-38.8385-23.6923 0-27.2462 18.5308-27.2462 37.5693v72.4307h-45.4384l-.0846-146.3846zm-74.1231 0h45.523V399.577h-45.523V253.1923zm22.8461-72.7692c14.5539 0 26.4 11.8461 26.4 26.4 0 14.5538-11.8461 26.4-26.4 26.4-14.6384 0-26.4-11.8462-26.4-26.4 0-14.5539 11.7616-26.4 26.4-26.4z"
          fill="#000" fill-rule="nonzero" />
      </g>
    </svg>
  </a>
  <a class="social-link social-link--instagram" id="instagram">
    <svg class="social-svg" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
      <title>
        instagram
      </title>
      <defs>
        <linearGradient x1="0%" y1="100%" y2="0%" id="simpleInsta">
          <stop stop-color="#D72F3F" offset="0%" />
          <stop stop-color="#4221B9" offset="100%" />
        </linearGradient>
      </defs>
      <g class="social-group" fill="none" fill-rule="evenodd">
        <circle class="social-group__outline" stroke="#000" stroke-width="20" cx="300" cy="300" r="262.5" />
        <circle class="social-group__inner-circle social-group__inner-circle--instagram" fill="url(#simpleInsta)" cx="300" cy="300"
          r="252.5" />
        <path class="social-group__icon" d="M436.8577 205.4154c-3.6808-9.4808-8.5885-17.5116-16.6192-25.5423-8.0308-8.0308-16.0616-12.9385-25.5423-16.6193-9.1462-3.5692-19.7424-6.023-35.0231-6.6923-15.3923-.6692-20.3-.8923-59.5616-.8923-39.2615 0-44.1692.1116-59.5615.8923-15.3923.6693-25.877 3.1231-35.023 6.6923-9.4808 3.6808-17.5116 8.5885-25.5424 16.6193-8.0308 8.0307-12.9384 16.0615-16.6192 25.5423-3.5692 9.1461-6.023 19.7423-6.6923 35.023-.6693 15.3924-.8923 20.3-.8923 59.5616 0 39.2615.1115 44.1692.8923 59.5615.6692 15.3923 3.123 25.877 6.6923 35.0231 3.6808 9.4808 8.5884 17.5116 16.6192 25.5423 8.0308 8.0308 16.0616 12.9385 25.5423 16.6193 9.1462 3.5692 19.7423 6.023 35.0231 6.6923 15.3923.6692 20.3.8923 59.5615.8923 39.2616 0 44.1693-.1116 59.5616-.8923 15.3923-.6693 25.8769-3.1231 35.023-6.6923 9.4808-3.6808 17.5116-8.5885 25.5424-16.6193 8.0307-8.0307 12.9384-16.0615 16.6192-25.5423 3.5692-9.1461 6.023-19.7423 6.6923-35.023.6692-15.3924.8923-20.3.8923-59.5616 0-39.2615-.1115-44.1692-.8923-59.5615-.6692-15.3923-3.123-25.877-6.6923-35.0231zm-19.2962 152.9192c-.6692 14.0539-3.0115 21.75-5.0192 26.7692-2.5654 6.6924-5.8 11.6-10.8192 16.6193-5.0193 5.0192-9.8154 8.1423-16.6193 10.8192-5.1307 2.0077-12.7153 4.35-26.7692 5.0192-15.2808.6693-19.7423.8923-58.3346.8923s-43.1654-.1115-58.3346-.8923c-14.0539-.6692-21.75-3.0115-26.7692-5.0192-6.6924-2.5654-11.6-5.8-16.6193-10.8192-5.0192-5.0193-8.1423-9.8154-10.8192-16.6193-2.0077-5.1307-4.35-12.7153-5.0192-26.7692-.6693-15.2808-.8923-19.8538-.8923-58.3346s.1115-43.1654.8923-58.3346c.6692-14.0539 3.0115-21.75 5.0192-26.7692 2.5654-6.6924 5.8-11.6 10.8192-16.6193 5.0193-5.0192 9.8154-8.1423 16.6193-10.8192 5.1307-2.0077 12.7153-4.35 26.7692-5.0192 15.2808-.6693 19.8538-.8923 58.3346-.8923s43.1654.1115 58.3346.8923c14.0539.6692 21.75 3.0115 26.7692 5.0192 6.6924 2.5654 11.6 5.8 16.6193 10.8192 5.0192 5.0193 8.1423 9.8154 10.8192 16.6193 2.0077 5.1307 4.35 12.7153 5.0192 26.7692.6693 15.2808.8923 19.8538.8923 58.3346s-.223 43.1654-.8923 58.3346zM300 225.827c-40.9346 0-74.173 33.2385-74.173 74.1731s33.2384 74.173 74.173 74.173 74.173-33.2384 74.173-74.173-33.2384-74.173-74.173-74.173zm0 122.3577c-26.5462 0-48.1846-21.527-48.1846-48.1846 0-26.5462 21.527-48.1846 48.1846-48.1846 26.6577 0 48.1846 21.527 48.1846 48.1846 0 26.5462-21.6384 48.1846-48.1846 48.1846zm77.073-107.9692c-9.548 0-17.2884-7.7403-17.2884-17.2885 0-9.5481 7.7403-17.2884 17.2885-17.2884 9.5481 0 17.2884 7.7403 17.2884 17.2884 0 9.5482-7.7403 17.2885-17.2884 17.2885z"
          fill="#FFF" fill-rule="nonzero" />
      </g>
    </svg>
  </a>
  </div>
</div>

              
            
!

CSS

              
                $color-primary: #81c2de;
$color-primary-light: #b4f5ff;
$color-primary-dark: #4f92ac;

$color-white: #FFFBFA;

$color-black: #191308;

.wrapper {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 800px;
  height: 600px;
  background-image: linear-gradient(to bottom right, rgba($color-primary,1),rgba($color-primary-dark,1));
  transition: all .4s ease-out;
  
  &__links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 70%;
  }
}

.social-link {

  &--linkedin {
    color: #2d76b0;
  }

  &--github {
    color: #000;
  }

  &--instagram {
    color: #9a2970;
  }

  &--dribbble {
    color: #b53561;
  }

  & .social-svg {
    width: 4.8rem;
    height: 4.8rem;

    & .social-group {

      &__icon {
        fill: $color-black;
        transition: all .2s;
      }

      &__inner-circle {
        fill: transparent;
        transition: all .2s;
      }

      &__outline {
        stroke: $color-black;
        transform-origin: 50% 50%;
        transition: all .2s;
      }
  
  }

  &:hover, &:active, &:focus {

    & .social-group {

      &__icon {
        fill: $color-white;
        transition: all .45s;
      }

      &__inner-circle {
        fill: currentColor;
        transition: all .45s;

        &--instagram {
          fill: url(#simpleInsta) !important;
        }

      }

      &__outline {
        stroke: currentColor;
        transform: scale(1.1);
        transition: all .45s;
      }

    } 

  }

  }

}

              
            
!

JS

              
                
              
            
!
999px

Console