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 includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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

              
                <!-- Social Buttons for GeorgeSpake.com homepage -->

<div class="gs-social-cards-container">
    <div class="outer-grid-container">
      <a class="social-card follow" href="https://twitter.com/georgespake">
            <div class="social-card-grid-container">
                <div class="social-card-bg-fill"></div>

                <div class="left-hex-bg">
                    <svg id="color-fill" xmlns="http://www.w3.org/2000/svg" version="1.1"
                         xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 20 300 260">
                        <polygon class="hex" points="300,150 225,280 75,280 0,150 75,20 225,20"></polygon>
                    </svg>
                </div>

                <div class="icon-hex-bg">
                    <svg id="color-fill" xmlns="http://www.w3.org/2000/svg" version="1.1"
                         xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 20 300 260">
                        <polygon class="hex" points="300,150 225,280 75,280 0,150 75,20 225,20"></polygon>
                    </svg>
                </div>

                <div class="icon">
                    <svg id="Logo_FIXED" data-name="Logo — FIXED" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><defs><style>.cls-1{fill:none;}.cls-2{fill:#fff;}</style></defs><title>Twitter_Logo_White</title><rect class="cls-1" width="400" height="400"/><path class="cls-2" d="M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23"/></svg>
                </div>

                <div class="right-hex-bg">
                    <svg id="color-fill" xmlns="http://www.w3.org/2000/svg" version="1.1"
                         xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 20 300 260">
                        <polygon class="hex" points="300,150 225,280 75,280 0,150 75,20 225,20"></polygon>
                    </svg>
                </div>

                <div class="gs-social-button-text">
                    <p href="#">Follow</p>
                </div>
            </div>
        </a>
      <a class="social-card connect" href="https://www.linkedin.com/in/georgespake">
            <div class="social-card-grid-container">
                <div class="social-card-bg-fill"></div>

                <div class="left-hex-bg">
                    <svg id="color-fill" xmlns="http://www.w3.org/2000/svg" version="1.1"
                         xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 20 300 260">
                        <polygon class="hex" points="300,150 225,280 75,280 0,150 75,20 225,20"></polygon>
                    </svg>
                </div>

                <div class="icon-hex-bg">
                    <svg id="color-fill" xmlns="http://www.w3.org/2000/svg" version="1.1"
                         xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 20 300 260">
                        <polygon class="hex" points="300,150 225,280 75,280 0,150 75,20 225,20"></polygon>
                    </svg>
                </div>


                <div class="icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"></path></svg>
                </div>

                <div class="right-hex-bg">
                    <svg id="color-fill" xmlns="http://www.w3.org/2000/svg" version="1.1"
                         xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 20 300 260">
                        <polygon class="hex" points="300,150 225,280 75,280 0,150 75,20 225,20"></polygon>
                    </svg>
                </div>
                
                <div class="gs-social-button-text">
                    <p href="#">Connect</p>
                </div>
            </div>
        </a>
      <a class="social-card contact" href="https://georgespake.com/contact">
            <div class="social-card-grid-container">
                <div class="social-card-bg-fill"></div>

                <div class="left-hex-bg">
                    <svg id="color-fill" xmlns="http://www.w3.org/2000/svg" version="1.1"
                         xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 20 300 260">
                        <polygon class="hex" points="300,150 225,280 75,280 0,150 75,20 225,20"></polygon>
                    </svg>
                </div>

                <div class="icon-hex-bg">
                    <svg id="color-fill" xmlns="http://www.w3.org/2000/svg" version="1.1"
                         xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 20 300 260">
                        <polygon class="hex" points="300,150 225,280 75,280 0,150 75,20 225,20"></polygon>
                    </svg>
                </div>

                <div class="icon">
                    <svg id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512"
                         xmlns="http://www.w3.org/2000/svg">
                        <path d="m512 203.06v-.045c0-.427-.024-.85-.059-1.271-.01-.115-.025-.229-.037-.344-.036-.33-.082-.657-.139-.981-.021-.122-.042-.244-.066-.365-.08-.395-.171-.787-.282-1.172-.011-.038-.02-.077-.031-.115-.117-.394-.253-.781-.401-1.163-.056-.146-.118-.289-.179-.434-.109-.258-.226-.513-.35-.764-.072-.146-.141-.293-.217-.437-.187-.351-.386-.695-.6-1.031-.08-.125-.168-.245-.252-.368-.167-.245-.34-.485-.521-.719-.097-.125-.194-.249-.295-.372-.263-.319-.535-.631-.825-.928-.023-.023-.045-.047-.068-.07-.31-.315-.64-.612-.979-.9-.042-.036-.078-.076-.121-.111l-25.578-21.225v-65.229c0-19.299-15.701-35-35-35h-85.776l-69.1-57.345c-20.354-16.888-49.896-16.888-70.248 0l-69.1 57.344h-85.776c-19.299 0-35 15.701-35 35v65.229l-25.579 21.228c-.042.035-.079.075-.121.111-.339.288-.669.585-.979.9-.023.023-.045.047-.068.07-.289.297-.562.609-.825.928-.101.122-.198.247-.295.372-.181.235-.354.475-.521.719-.084.123-.172.243-.252.368-.214.335-.413.679-.6 1.031-.077.144-.146.291-.217.437-.124.251-.24.506-.35.764-.061.144-.123.288-.179.434-.148.382-.285.768-.401 1.163-.011.038-.02.076-.031.115-.111.385-.202.777-.282 1.172-.024.122-.045.243-.066.365-.057.324-.103.651-.139.981-.012.115-.027.229-.037.344-.034.419-.058.842-.058 1.269v.045.008 253.927c0 15.718 6.638 29.906 17.246 39.939.301.301.603.599.925.87 9.757 8.814 22.676 14.19 36.829 14.19h402c14.154 0 27.074-5.377 36.832-14.193.319-.27.619-.565.918-.864 10.61-10.033 17.25-24.223 17.25-39.943v-253.926c0-.002 0-.005 0-.008zm-446-103.045h380c2.757 0 5 2.243 5 5v116.682l-8.488 7.044-170.546 141.533c-9.251 7.677-22.681 7.676-31.932 0l-170.546-141.532-8.488-7.045v-116.682c0-2.757 2.243-5 5-5zm-36 356.98v-222.04l6.452 5.355c.004.003.008.007.012.01l146.469 121.551-151.397 103.752c-.993-2.69-1.536-5.597-1.536-8.628zm176.937-75.204 13.939 11.568c20.352 16.89 49.896 16.889 70.248 0l13.939-11.568 146.22 100.204h-390.567zm122.13-19.919 146.468-121.552c.004-.003.008-.007.012-.01l6.452-5.355v222.04c0 3.031-.543 5.938-1.536 8.628zm-89.033-326.114c9.251-7.677 22.681-7.677 31.932 0l41.281 34.258h-114.494z"/>
                        <path d="m131.5 164.995c0 8.284 6.716 15 15 15h142c8.284 0 15-6.716 15-15s-6.716-15-15-15h-142c-8.284 0-15 6.716-15 15z"/>
                        <path d="m146.5 239.995h219c6.988 0 12.843-4.786 14.509-11.254.309-1.2.491-2.45.491-3.746 0-8.284-6.716-15-15-15h-219c-8.284 0-15 6.716-15 15 0 1.296.182 2.547.491 3.746 1.666 6.469 7.521 11.254 14.509 11.254z"/>
                    </svg>
                </div>

                <div class="right-hex-bg">
                    <svg id="color-fill" xmlns="http://www.w3.org/2000/svg" version="1.1"
                         xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 20 300 260">
                        <polygon class="hex" points="300,150 225,280 75,280 0,150 75,20 225,20"></polygon>
                    </svg>
                </div>

                <div class="gs-social-button-text">
                    <p href="#">Contact</p>
                </div>
            </div>
        </a>
    </div>
</div>
              
            
!

CSS

              
                @import url(https://fonts.googleapis.com/css?family=Oswald);

body {
  margin: 0;
  background: #1D2557;
}

.gs-social-cards-container {
  $primary-color: #2f3c89;
  $connect-color: #017bb6;
  $follow-color: #1da1f2;

  padding: 3em 0;
  width: 100%;
  background: #1D2557;
  background: -webkit-linear-gradient(top left, #1D2557 0%, #53e3a6 100%);
  background: -moz-linear-gradient(top left, #1D2557 0%, #5399e3 100%);
  background: -o-linear-gradient(top left, #1D2557 0%, #5399e3 100%);
  background: linear-gradient(to bottom right, #1D2557 0%, #5399e3 100%);

  .outer-grid-container {
    display: grid;
    grid-template-columns: [column] 1fr;
    grid-template-rows: [row] 100px;
    width: 90%;
    max-width: 450px;
    row-gap: 2em;
    margin: auto;
    min-width: 300px;
  }

  .social-card {
    text-decoration: none;
    
    .social-card-grid-container {
      display: grid;
      grid-template-columns: [column] 58px [column] 58px [column] auto [column] 58px [column] 68px;
      grid-template-rows: [row] 100px;
      min-width: 275px;
      cursor: pointer;
    }

    .social-card-bg-fill, .gs-social-button-text, .left-hex-bg, .icon-hex-bg, .icon, .right-hex-bg {
      grid-row: row 1;
    }

    .left-hex-bg, .icon-hex-bg, .right-hex-bg, .icon {
      height: 100px;

      svg {
        fill: #fff;
        height: 100%;
        transition-duration: .2s;
      }
    }

    .social-card-bg-fill {
      background: #fff;
      grid-column-start: column 2;
      grid-column-end: column -1;
      transition-duration: .2s;
    }

    .gs-social-button-text {
      grid-column-start: column 3;
      grid-column-end: column -1;
      text-align: center;

      p {
        font-family: Oswald;
        line-height: 100px;
        margin: 0;
        transition-duration: .2s;
        padding: 0 10px;
        color: $primary-color;
      }
    }

    .left-hex-bg {
      grid-column-start: column 1;
      grid-column-end: column 3;
    }

    .icon-hex-bg {
      grid-column-start: column 1;
      grid-column-end: column 3;
      display: flex;
      justify-content: center;
      align-items: center;

      svg {
        margin-left: -2px;
        height: 85%;
        fill: $primary-color;
      }
    }

    .icon {
      grid-column-start: column 1;
      grid-column-end: column 3;
      display: flex;
      justify-content: center;
      align-items: center;
      svg {
        width: 40%;
      }
    }

    &.follow {
      .icon-hex-bg svg {
        fill: $follow-color;
      }
      .icon svg {
        width:50%;
      }
      .gs-social-button-text p {
        color: $follow-color;
      }
    }

    &.connect {
      .icon-hex-bg svg {
        fill: $connect-color;
      }
      .gs-social-button-text p {
        color: $connect-color;
      }
    }

    .right-hex-bg {
      grid-column: column 4 / span 2;
    }

    &:hover {
      .icon-hex-bg svg {
        height: 100%;
        transition-duration: .2s;
      }


      .icon svg {
        transform: rotate(7deg);
        transition-duration: .2s;
      }

      .right-hex-bg svg {
        padding-left: 10px;
        transition-duration: .2s;
      }

      .gs-social-button-text p {
        margin-left: 10px;
        transition-duration: .2s;
      }
      
      .social-card-bg-fill {
        -webkit-box-shadow: 0px 10px 30px -15px #060606;
        -moz-box-shadow: 0px 10px 30px -15px #060606;
        box-shadow: 0px 10px 30px -15px #060606;
        transition-duration: .2s;
      }
    }
  }

  @media screen and (max-width: 350px) {
    .social-card {
      .gs-social-button-text p {
        font-size: 2em;
        transition-duration: .2s;
      }

      .icon-hex-bg svg {
        margin-left: -4px;
      }
    }
  }

  @media screen and (min-width: 500px) {
    .gs-social-button-text p {
      font-size: 4em;
    }
  }
  
  @media screen and (max-width: 500px) {
    .gs-social-button-text p {
      font-size: 3em;
    }
  }
  @media screen and (max-width: 420px) {
    .gs-social-button-text p {
      font-size: 2.5em;
      transition-duration: .2s;
    }
  }

  @media screen and (max-width: 400px) {
    .outer-grid-container {
      grid-template-rows: [row] 80px;
    }

    .social-card {
      .social-card-grid-container {
        display: grid;
        grid-template-columns: [column] 48px [column] 48px [column] auto [column] 48px [column] 58px;
        grid-template-rows: [row] 80px;
      }

      .gs-social-button-text p {
        line-height: 80px;
        transition-duration: .2s;
      }

      .left-hex-bg, .right-hex-bg, .icon-hex-bg, .icon {
        height: 80px;
      }

      .icon-hex-bg svg {
        margin-left: -4px;
        height: 85%;
        transition-duration: .2s;
      }
    }
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console