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

              
                <div class="banner">
    <div class="top">
        <h1>George Spake</h1>
    </div>

    <div class="logo">
        <div class="logo-container">
            <svg class="hexagon-fill-2 large" 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 class="gs-logo">
            <img src="https://georgespake.com/wp-content/uploads/2020/04/gs.png" />
        </div>
        <div class="banner-bottom-bg"></div>
    </div>

    <div class="bottom">
        <h2>Software Engineer . Graphic Designer . Organizer <br /> Speaker . Musician</h2>
    </div>

    <div class="about-button-container">
        <a href="https://georgespake.com/about/">About George</a>
    </div>
</div>

<div class="gs-work-cards-container">
    <div class="gs-work-cards-background"></div>
    <div class="grid-container">
        <a class="gs-work-card github" href="https://github.com/gpspake">
            <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"/>
                        </svg>
                    </div>
                </div>
            </div>
        </a>

        <a class="gs-work-card projects" href="https://georgespake.com/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>

        </a>

        <a class="gs-work-card blog" href="https://georgespake.com/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>
        </a>
    </div>
</div>

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


<div class="footer">
    <a class="back-to-top-link" href="#site-header">
        <div class="gs-logo">
            <img src="https://georgespake.com/wp-content/uploads/2020/04/gs-red.png" />
        </div>
    </a>
</div>
              
            
!

CSS

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

body {
  margin: 0;
  &.home {
    background: #fff;
  }
}
html {scroll-behavior: smooth;}

// banner
.banner {
  text-align: center;

  h1 {
    font-family: "Oswald";
    font-size: 5em;
    color: #444;
    padding: 0 1em;
  }
  
  @media screen and (max-width: 600px) {
    h1 {
      font-size: 3em;
    }
  }
  

  .bottom {

    background: #1D2557;
    color: #fff;

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

  .about-button-container {
    background: #1D2557;
    height: 16em;
    display: flex;
    align-items: center;
    justify-content: center;

    a {
      text-decoration: none;
      color: #fff;
      padding: 1em;
      font-size: 1.5em;
      font-family: 'Oswald';
      white-space: no-wrap;
      
      background: tomato;
      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 {
        text-decoration: underline;
      }
    }
  }

  .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:450px;
      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;
      margin:auto;
      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;
  }

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

    .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% - 80px);
        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%;
        margin: auto;
      }
    }
  }

  // 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 {
  $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;
      }
    }
  }
}

// footer
.footer {
  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;
    padding-bottom: 1em;

    display: inline-block;
    .gs-logo {
      margin-top: 1em;
    }
  }
  .gs-logo img {
    width:100px;
    margin: auto;
  }
}

              
            
!

JS

              
                
              
            
!
999px

Console