<!-- 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>


@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;
  }
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.