<!-- 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;
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.