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

              
                <!-- Work Cards for GeorgeSpake.com -->
<!-- Ribbon inspired by https://codepen.io/TimLewisWebdesign/pen/MYEMMG -->

<div class="gs-work-cards-container">
    <div class="gs-work-cards-background"></div>
    <div class="grid-container">
        <div class="gs-work-card github">
            <div class="grid-container">
                <div class="top-hexagon-bg">
                    <div class="hex-container">
                        <svg version="1.1"
                             xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                             viewBox="0 0 173.20508075688772 200">
                            <defs>
                                <pattern id="image-bg" x="0" y="0" patternUnits="userSpaceOnUse"></pattern>
                            </defs>
                            <path d="M86.60254037844386 0L173.20508075688772 50L173.20508075688772 150L86.60254037844386 200L0 150L0 50Z"></path>
                        </svg>
                    </div>
                </div>

                <div class="bottom-hexagon-bg">
                    <div class="hex-container">
                        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 120 173.20508075688772 82">
                            <defs>
                                <pattern id="image-bg" x="0" y="0" patternUnits="userSpaceOnUse"></pattern>
                            </defs>
                            <path d="M86.60254037844386 0L173.20508075688772 50L173.20508075688772 150L86.60254037844386 200L0 150L0 50Z"></path>
                        </svg>
                    </div>
                </div>

                <div class="icon-bg">
                    <div class="hex-container">
                        <svg version="1.1"
                             xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                             viewBox="0 0 173.20508075688772 200">
                            <defs>
                                <pattern id="image-bg" x="0" y="0" patternUnits="userSpaceOnUse"></pattern>
                            </defs>
                            <path d="M86.60254037844386 0L173.20508075688772 50L173.20508075688772 150L86.60254037844386 200L0 150L0 50Z"></path>
                        </svg>

                    </div>
                </div>

                <div class="top-bg"></div>

                <h2>Code</h2>
                
                <div class="icon">
                    <div class="hex-container">
                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
                             id="Layer_1" x="0px" y="0px" viewBox="0 0 24 24" xml:space="preserve"><path d="M15.5 22.7h-.1l-.1-.1V22v-2.5c0-.7-.1-1.3-.4-1.8 2.3-.4 4.8-1.6 4.8-6.1 0-1.2-.4-2.3-1.1-3.2.2-.6.3-1.7-.2-3.1l-.3-.3s-.2-.1-.4-.1c-.6 0-1.5.2-3 1.2-.8-.1-1.7-.3-2.7-.3-1 0-1.9.1-2.8.3C7.8 5.2 6.8 5 6.2 5c-.2 0-.3.1-.4.1-.1 0-.3.2-.3.3-.5 1.4-.4 2.5-.2 3.1-.7.9-1.1 2-1.1 3.2 0 4.4 2.6 5.6 4.8 6.1-.1.2-.2.5-.3.8-.2.1-.5.2-.9.2s-.8-.1-1.1-.4l-.1-.1c-.1-.1-.1-.2-.2-.2l-.1-.1-.1-.1c0-.1-.8-1.3-2.2-1.4-.5 0-.9.2-1 .5-.2.5.4.9.7 1.1 0 0 .6.3 1 1.4.2.7 1.1 2 3.2 2h.7v1.4l-.1.1s-.1 0 0 0C4 21.2 1 17 1 12.3c0-6.1 4.9-11 11-11s11 4.9 11 11c0 4.7-3 8.9-7.5 10.4z"/>
                            <metadata><rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#" xmlns:dc="http://purl.org/dc/elements/1.1/"><rdf:Description about="https://iconscout.com/legal#licenses" dc:title="github" dc:description="github" dc:publisher="Iconscout" dc:date="2018-01-30" dc:format="image/svg+xml" dc:language="en"><dc:creator><rdf:Bag><rdf:li>Roundicons.com</rdf:li></rdf:Bag></dc:creator></rdf:Description></rdf:RDF></metadata></svg>
                    </div>
                </div>
            </div>

        </div>

        <div class="gs-work-card projects">
            <div class="grid-container">
                <div class="top-hexagon-bg">
                    <div class="hex-container">
                        <svg version="1.1"
                             xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                             viewBox="0 0 173.20508075688772 200">
                            <defs>
                                <pattern id="image-bg" x="0" y="0" patternUnits="userSpaceOnUse"></pattern>
                            </defs>
                            <path d="M86.60254037844386 0L173.20508075688772 50L173.20508075688772 150L86.60254037844386 200L0 150L0 50Z"></path>
                        </svg>
                    </div>
                </div>

                <div class="bottom-hexagon-bg">
                    <div class="hex-container">
                        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 120 173.20508075688772 82">
                            <defs>
                                <pattern id="image-bg" x="0" y="0" patternUnits="userSpaceOnUse"></pattern>
                            </defs>
                            <path d="M86.60254037844386 0L173.20508075688772 50L173.20508075688772 150L86.60254037844386 200L0 150L0 50Z"></path>
                        </svg>
                    </div>
                </div>

                <div class="icon-bg">
                    <div class="hex-container">
                        <svg version="1.1"
                             xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                             viewBox="0 0 173.20508075688772 200">
                            <defs>
                                <pattern id="image-bg" x="0" y="0" patternUnits="userSpaceOnUse"></pattern>
                            </defs>
                            <path d="M86.60254037844386 0L173.20508075688772 50L173.20508075688772 150L86.60254037844386 200L0 150L0 50Z"></path>
                        </svg>

                    </div>
                </div>

                <div class="top-bg"></div>

                <h2>Projects</h2>
                
                <div class="icon">
                    <div class="hex-container">
                        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="tools" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M501.1 395.7L384 278.6c-23.1-23.1-57.6-27.6-85.4-13.9L192 158.1V96L64 0 0 64l96 128h62.1l106.6 106.6c-13.6 27.8-9.2 62.3 13.9 85.4l117.1 117.1c14.6 14.6 38.2 14.6 52.7 0l52.7-52.7c14.5-14.6 14.5-38.2 0-52.7zM331.7 225c28.3 0 54.9 11 74.9 31l19.4 19.4c15.8-6.9 30.8-16.5 43.8-29.5 37.1-37.1 49.7-89.3 37.9-136.7-2.2-9-13.5-12.1-20.1-5.5l-74.4 74.4-67.9-11.3L334 98.9l74.4-74.4c6.6-6.6 3.4-17.9-5.7-20.2-47.4-11.7-99.6.9-136.6 37.9-28.5 28.5-41.9 66.1-41.2 103.6l82.1 82.1c8.1-1.9 16.5-2.9 24.7-2.9zm-103.9 82l-56.7-56.7L18.7 402.8c-25 25-25 65.5 0 90.5s65.5 25 90.5 0l123.6-123.6c-7.6-19.9-9.9-41.6-5-62.7zM64 472c-13.2 0-24-10.8-24-24 0-13.3 10.7-24 24-24s24 10.7 24 24c0 13.2-10.7 24-24 24z" class=""></path></svg>
                    </div>
                </div>
            </div>

        </div>

        <div class="gs-work-card blog">
            <div class="grid-container">
                <div class="top-hexagon-bg">
                    <div class="hex-container">
                        <svg version="1.1"
                             xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                             viewBox="0 0 173.20508075688772 200">
                            <defs>
                                <pattern id="image-bg" x="0" y="0" patternUnits="userSpaceOnUse"></pattern>
                            </defs>
                            <path d="M86.60254037844386 0L173.20508075688772 50L173.20508075688772 150L86.60254037844386 200L0 150L0 50Z"></path>
                        </svg>
                    </div>
                </div>

                <div class="bottom-hexagon-bg">
                    <div class="hex-container">
                        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 120 173.20508075688772 82">
                            <defs>
                                <pattern id="image-bg" x="0" y="0" patternUnits="userSpaceOnUse"></pattern>
                            </defs>
                            <path d="M86.60254037844386 0L173.20508075688772 50L173.20508075688772 150L86.60254037844386 200L0 150L0 50Z"></path>
                        </svg>
                    </div>
                </div>

                <div class="icon-bg">
                    <div class="hex-container">
                        <svg version="1.1"
                             xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                             viewBox="0 0 173.20508075688772 200">
                            <defs>
                                <pattern id="image-bg" x="0" y="0" patternUnits="userSpaceOnUse"></pattern>
                            </defs>
                            <path d="M86.60254037844386 0L173.20508075688772 50L173.20508075688772 150L86.60254037844386 200L0 150L0 50Z"></path>
                        </svg>
                    </div>
                </div>

                <div class="top-bg"></div>

                <h2>Blog</h2>
                
                <div class="icon">
                    <div class="hex-container">
                        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="book" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-book fa-w-14 fa-3x"><path d="M448 360V24c0-13.3-10.7-24-24-24H96C43 0 0 43 0 96v320c0 53 43 96 96 96h328c13.3 0 24-10.7 24-24v-16c0-7.5-3.5-14.3-8.9-18.7-4.2-15.4-4.2-59.3 0-74.7 5.4-4.3 8.9-11.1 8.9-18.6zM128 134c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6h234c-3.3 0-6-2.7-6-6v-20zm0 64c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6h234c-3.3 0-6-2.7-6-6v-20zm253.4 250H96c-17.7 0-32-14.3-32-32 0-17.6 14.4-32 32-32h285.4c-1.9 17.1-1.9 46.9 0 64z" class=""></path></svg>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>



              
            
!

CSS

              
                @import url(https://fonts.googleapis.com/css?family=Oswald);
body {margin: 0;}
html {scroll-behavior: smooth;}

.banner {
  text-align: center;

  h1 {
    font-family: "Oswald";
    font-size: 5em;
    color: #444;
  }

  .bottom {

    background: #1D2557;
    color: #fff;

    h2 {
      font-family: "Oswald";
      font-weight: normal;
      padding: 0;
      margin: 0;
      font-size: 2.5em;
    }

    .about-button-container {
      padding-top: 100px;

      height: 100px;
      a {
        text-decoration: none;
        color: #fff;
        background: tomato;
        padding: 1em;
        font-size: 1.5em;
        font-family: 'Oswald';

        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, tomato 0%, #aa0f57 100%);
        transition-duration: .2s;
        &:hover {
          font-size: 1.6em;
        }
      }
    }
  }

  .logo {
    width:100%;
    position: relative;
  }

  .logo .gs-logo {
    top:0;
    fill: #1D2557;
    width: 100%;
    position: absolute;
    z-index: 5;
    height: 100%;
    img {
      width: 85%;
      max-width:420px;
      z-index: 6;
      display: inline-block;
      top: 50%;
      transform: translateY(-50%);
      position: relative;
    }
  }


  .logo .logo-container {
    z-index: 1;
    position: relative;


    svg {
      max-width: 500px;
      fill: #fff;
    }
  }


  .logo .banner-bottom-bg {
    width: 100%;
    background: #1D2557;
    height: 50%;
    position: absolute;
    bottom: 0;
  }
  .bottom {
    padding-top: 5em;
  }
}

// work cards
.gs-work-cards-container {
  cursor: pointer;
  position: relative;

  .gs-work-cards-background {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #1D2557;
    z-index: -1;
  }

  .grid-container {
    display: grid;
    margin: auto;
    padding: 2em 0;
  }

  .gs-work-card {
    width: 100%;
    margin: auto;
    padding-top: 1em;
    transition-duration: .2s;

    .grid-container {
      padding: 0;
    }
    
    .hex-container {
      width: calc(100% - 50px);
      margin: auto;
    }
    svg {
      fill: #fff;
    }

    h2 {
      grid-row: row 4;
      background: linear-gradient(to left, #4c61da 50%, #2f3c89 50%);
      width: 100%;
      height: 80px;
      line-height: 80px;
      font-size: 50px;
      text-align: center;
      position: relative;
      margin: auto;
      color: #fff;
      transition-duration: .2s;
      font-family: Oswald, sans-serif;
      font-weight: normal;

      &:before, &:after {
        width: 50px;
        height: 80px;
        content: '';
        display: block;
        transform: skewY(20deg);
        position: absolute;
        z-index: -1;
      }

      &:before {
        top: 10px;
        left: 0;
        background-color: #4c61da;
      }

      &:after {
        top: -10px;
        right: 0;
        background-color: #2f3c89;
      }
    }

    @mixin hover($name) {

      &.#{$name}:hover {
        padding-top: 0;
        transition-duration: .2s;

        .icon-bg {
          .hex-container {
            width: calc(100% - 48px);
            transition-duration: .2s;
          }
        }

        h2 {
          -webkit-box-shadow: 0 25px 19px -21px #333;
          -moz-box-shadow: 0 25px 19px -21px #333;
          box-shadow: 0 25px 19px -21px #333;
          transition-duration: .2s;
        }

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

    @include hover(github);
    @include hover(projects);
    @include hover(blog);

    .top-hexagon-bg, .icon-bg, .icon, .top-bg, h2, .bottom-hexagon-bg {
      grid-column: col 1;
    }

    .top-hexagon-bg {
      grid-row-start: row 1;
      grid-row-end: row 3;
      align-self: center;
    }

    .icon-bg {
      grid-row: row 1;
      grid-row-end: row 3;
      align-self: center;

      .hex-container {
        position: relative;
        width: calc(100% - 70px);
        margin: auto;
        transition-duration: .2s;
      }

      svg {
        fill: #2f3c89;
      }
    }

    .icon {
      grid-row-start: row 1;
      grid-row-end: row 3;
      width: 70%;
      margin: auto;
      transition-duration: .2s;

      svg {
        position: relative;
      }
    }

    .top-bg {
      grid-row-start: row 2;
      grid-row-end: row 6;
      background: #fff;
      width: calc(100% - 50px);
      margin: auto;
      height: 100%;
    }

    .bottom-bg {
      grid-row-start: row 5;
      grid-row-end: row 6;
      background: #fff;
      width: calc(100% - 50px);
      margin: auto;
      height: 100%;
    }

    .bottom-hexagon-bg {
      grid-row: 6;
    }

    &.blog, &.projects {
      text-align: center;
      .icon svg {
        width: 60%;
      }
    }
  }

  // small
  @media screen and (max-width: 950px) {
    .grid-container {
      display: grid;
      grid-template-rows: [row] 1fr [row] 1fr [row] 1fr;
      grid-template-columns: [column] 1fr;
      row-gap: 0;
      max-width: 500px;
      width:90%;
      margin: auto;
    }

    .gs-work-card {
      .grid-container {
        grid-template-rows:  [row] 1fr [row] 1fr [row] 10px [row] 60px [row] 0 [row] 1fr;
        grid-template-columns: [col] 1fr;
        cursor: pointer;
        row-gap: 0;
      }

      h2 {
        grid-row: row 4;
        background: linear-gradient(to left, #4c61da 50%, #2f3c89 50%);
        width: 100%;
        height: 60px;
        line-height: 60px;
        font-size: 40px;

        &:before, &:after {
          width: 50px;
          height: 60px;
        }
      }
    }
  }

  // medium
  @media screen and (min-width: 950px) and (max-width: 1375px) {
    .grid-container {
      display: grid;
      grid-template-rows: [row] 1fr [row] 5em [row] 1fr [row] 5em;
      grid-template-columns: 0px [column] 1fr [column] 1fr;
      column-gap: 3em;
      max-width: 900px;
      margin: auto;
    }

    .gs-work-card {
      &.github {
        grid-row-start: row 1;
        grid-row-end: row 3;
        grid-column-start: column 1;
        grid-column-end: column 2;
      }

      &.projects {
        grid-row-start: row 1;
        grid-row-end: row 3;
        grid-column: column 2;
      }

      &.blog {
        grid-row-start: row 2;
        grid-row-end: row 3;
        grid-column-start: column 1;
        grid-column-end: column 3;
        padding-right: 3em;
        width: 50%;
      }

      .grid-container {
        grid-template-rows:  [row] 1fr [row] 1fr [row] 10px [row] 60px [row] 0px [row] 1fr;
        grid-template-columns: [col] 1fr;
        cursor: pointer;
        width: 100%;
      }

      h2 {
        grid-row: row 4;
        background: linear-gradient(to left, #4c61da 50%, #2f3c89 50%);
        width: 100%;
        height: 60px;
        line-height: 60px;
        font-size: 40px;

        &:before, &:after {
          width: 50px;
          height: 60px;
        }
      }
    }
  }

  // large
  @media screen and (min-width: 1375px) {
    .grid-container {
      grid-template-rows: [row] 100%;
      grid-template-columns: [column] 1fr [column] 1fr [column] 1fr;
      column-gap: 3em;
      width: 90%;
      max-width: 1200px;
    }

    .gs-work-card {
      .grid-container {
        grid-template-rows:  [row] 1fr [row] 1fr [row] 60px [row] 80px [row] 10px [row] 1fr;
        grid-template-columns: [col] 1fr;
        cursor: pointer;
        width: 100%;
      }
    }
  }
}

// social buttons
.gs-social-cards-container {
  $button-height: 100px;

  width:100%;
  padding: 1em;
  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%);

  .gs-social-button {
    width: 100%;
    max-width: 500px;
    transition-duration: .2s;
    margin: 2.5em auto;
  }

  .grid-container {
    display: grid;
    grid-template-rows: [row] $button-height 1fr;
    grid-template-columns: [column] 30px [column] $button-height - 10px [column] 1fr [column] 10px [column] $button-height - 50px;
    cursor: pointer;
  }

  .hex-container {transition-duration: .2s;}

  svg {
    fill: #fff;
    height: $button-height;
    transition-duration: .2s;
  }

  // sections
  .icon, .icon-hex-bg, .button-text, .left-hex-bg, .middle-bg, .right-hex-bg  {
    grid-row: row 1;
  }

  .icon {
    grid-column-start: column 1;
    grid-column-end: column 3;
    order: 10;

    .icon-container {
      height: $button-height;
      width: $button-height + 10px
    }

    svg {
      height: 100%;
      margin: auto;
      align-self: center;
      display: block;
      width: 50%;
    }
  }

  .icon-hex-bg {
    grid-column-start: column 1;
    grid-column-end: column 3;
    align-self: center;

    .hex-container {height: $button-height;}

    svg {
      fill: #1da1f2;
      padding: 10px;
      height: 80px;
    }
  }

  .twitter .button-text {color: #1da1f2;}

  .linkedin {
    .icon svg {width: 30%;}
    .icon-hex-bg svg {fill: #017bb6;}
    .button-text {color: #017bb6;}
  }

  .contact {
    .icon svg {width: 30%;}
    .icon-hex-bg svg {fill: #2f3c89;}
    .button-text {color: #2f3c89;}
  }

  .button-text {
    grid-column-start: column 3;
    grid-column-end: column 4;
    font-family: 'Oswald', sans-serif;
    font-size: 4em;
    order: 9;
    text-align: center;
    transition-duration: .2s;

    p {
      line-height: $button-height;
      margin: 0;
    }
  }

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

  .middle-bg {
    grid-column-start: column 2;
    grid-column-end: column 5;
    background: #fff;
    transition-duration: .2s;
  }

  .right-hex-bg {
    grid-column-start: column 4;
    grid-column-end: column 6;
    order: 2;

    .hex-container {width: $button-height - 60px;}
    svg {float: right;}
  }

  .gs-social-button:hover {
    .middle-bg {
      -webkit-box-shadow: 28px 15px 60px -20px #060606;
      -moz-box-shadow: 28px 15px 60px -20px #060606;
      box-shadow: 28px 15px 60px -20px #060606;
      transition-duration: .2s;
    }

    .icon svg {
      transform: rotate(7deg);
    }

    .icon-hex-bg svg {
      padding: 0px;
      height: 100px;
    }

    .right-hex-bg .hex-container {
      width: 50px;
    }

    .button-text {
      font-size: 4.5em;
      transition-duration: .2s;
    }
  }
}

.footer {
  // height: 200px;
  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, #2e3679  0%, #000 100%);

  width:100%;
  border-top: 1px solid #2273ca;
  text-align: center;
  font-family: "Oswald";
  padding: 2em;
  .back-to-top-link {
    text-decoration: none;
    color: #e40c49;
    font-size: 1.5em;
    .gs-logo {
      margin-top: 1em;
    }
  }
  .gs-logo img {
    width:100px;
  }
  .copyright {
    color: #fff;
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console