<!-- Project cards for GeorgeSpake.com -->
<!-- Inspired by https://codepen.io/rabakilgur/pen/RYpVQz -->
<div class="project-cards-container">
<div class="grid-container">
<article id="post-2086" class="projcard-container">
<div class="projcard projcard-blue img-right">
<div class="projcard-innerbox">
<img width="800" height="700" src="https://georgespake.com/redesign/wp-content/uploads/2020/03/devmemphis.png" class="projcard-img wp-post-image jetpack-lazy-image jetpack-lazy-image--handled" alt="" size="large" data-attachment-id="2063" data-permalink="https://georgespake.com/redesign/projects/techcamp-memphis/devmemphis-2/" data-orig-file="https://georgespake.com/redesign/wp-content/uploads/2020/03/devmemphis.png" data-orig-size="800,700" data-comments-opened="0" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="devmemphis" data-image-description="" data-medium-file="https://georgespake.com/redesign/wp-content/uploads/2020/03/devmemphis-300x263.png" data-large-file="https://georgespake.com/redesign/wp-content/uploads/2020/03/devmemphis.png" srcset="https://georgespake.com/redesign/wp-content/uploads/2020/03/devmemphis.png 800w, https://georgespake.com/redesign/wp-content/uploads/2020/03/devmemphis-300x263.png 300w, https://georgespake.com/redesign/wp-content/uploads/2020/03/devmemphis-768x672.png 768w" data-lazy-loaded="1" sizes="(max-width: 800px) 100vw, 800px"> <div class="projcard-textbox">
<div class="projcard-title"><a href="https://georgespake.com/redesign/projects/devmemphis/">DevMemphis</a></div>
<div class="project-roles">
<a href="https://georgespake.com/redesign/projects/roles/founder/" rel="tag">founder</a>, <a href="https://georgespake.com/redesign/projects/roles/organizer/" rel="tag">organizer</a>, <a href="https://georgespake.com/redesign/projects/roles/speaker/" rel="tag">speaker</a> </div>
<div class="projcard-bar" style="background-color: #0984b1"></div>
<div class="projcard-description">
<p>DevMemphis is a general purpose user group for software developers in Memphis TN. George started DevMemphis in 2018 with several other user group leaders with the goal of accommodating a more diverse range of topics and formats.</p>
<p class="project-links"> <a href="https://devmemphis.org/">DevMemphis website</a> <a href="https://github.com/devmemphis">DevMemphis on Github</a></p>
</div>
</div>
</div>
</div>
</article>
<article id="post-2085" class="projcard-container">
<div class="projcard projcard-blue ">
<div class="projcard-innerbox">
<img width="800" height="700" src="https://georgespake.com/redesign/wp-content/uploads/2020/03/givecamp-logo.png" class="projcard-img wp-post-image jetpack-lazy-image jetpack-lazy-image--handled" alt="" size="large" data-attachment-id="2062" data-permalink="https://georgespake.com/redesign/projects/techcamp-memphis/givecamp-logo/" data-orig-file="https://georgespake.com/redesign/wp-content/uploads/2020/03/givecamp-logo.png" data-orig-size="800,700" data-comments-opened="0" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="givecamp-logo" data-image-description="" data-medium-file="https://georgespake.com/redesign/wp-content/uploads/2020/03/givecamp-logo-300x263.png" data-large-file="https://georgespake.com/redesign/wp-content/uploads/2020/03/givecamp-logo.png" srcset="https://georgespake.com/redesign/wp-content/uploads/2020/03/givecamp-logo.png 800w, https://georgespake.com/redesign/wp-content/uploads/2020/03/givecamp-logo-300x263.png 300w, https://georgespake.com/redesign/wp-content/uploads/2020/03/givecamp-logo-768x672.png 768w" data-lazy-loaded="1" sizes="(max-width: 800px) 100vw, 800px"> <div class="projcard-textbox">
<div class="projcard-title"><a href="https://georgespake.com/redesign/projects/givecamp-memphis/">GiveCamp Memphis</a></div>
<div class="project-roles">
<a href="https://georgespake.com/redesign/projects/roles/organizer/" rel="tag">organizer</a>, <a href="https://georgespake.com/redesign/projects/roles/volunteer/" rel="tag">volunteer</a> </div>
<div class="projcard-bar" style="background-color: #6bc048"></div>
<div class="projcard-description">
<p>George participated in Givecamp as a volunteer in 2016, 2017, 2018, and 2020; and served as a member of the project management committee in 2020.<br><br>GiveCamp Memphis is a weekend-long event where professionals from designers, developers and database administrators to marketers and web strategists donate their time to provide solutions for nonprofit organizations.</p>
<p class="project-links"><a href="https://www.givecampmemphis.org/">GiveCamp Memphis Website</a> <a href="https://georgespake.com/blog/givecamp-2018/">Blog 2018</a></p>
</div>
</div>
</div>
</div>
</article>
<article id="post-2083" class="projcard-container">
<div class="projcard projcard-blue img-right">
<div class="projcard-innerbox">
<img width="800" height="700" src="https://georgespake.com/redesign/wp-content/uploads/2020/03/wordpress-memphis.png" class="projcard-img wp-post-image jetpack-lazy-image jetpack-lazy-image--handled" alt="" size="large" data-attachment-id="2081" data-permalink="https://georgespake.com/redesign/projects/memtech/wordpress-memphis/" data-orig-file="https://georgespake.com/redesign/wp-content/uploads/2020/03/wordpress-memphis.png" data-orig-size="800,700" data-comments-opened="0" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="wordpress-memphis" data-image-description="" data-medium-file="https://georgespake.com/redesign/wp-content/uploads/2020/03/wordpress-memphis-300x263.png" data-large-file="https://georgespake.com/redesign/wp-content/uploads/2020/03/wordpress-memphis.png" srcset="https://georgespake.com/redesign/wp-content/uploads/2020/03/wordpress-memphis.png 800w, https://georgespake.com/redesign/wp-content/uploads/2020/03/wordpress-memphis-300x263.png 300w, https://georgespake.com/redesign/wp-content/uploads/2020/03/wordpress-memphis-768x672.png 768w" data-lazy-loaded="1" sizes="(max-width: 800px) 100vw, 800px"> <div class="projcard-textbox">
<div class="projcard-title"><a href="https://georgespake.com/redesign/projects/wordpress-memphis/">WordPress Memphis</a></div>
<div class="project-roles">
<a href="https://georgespake.com/redesign/projects/roles/attendee/" rel="tag">attendee</a>, <a href="https://georgespake.com/redesign/projects/roles/organizer/" rel="tag">organizer</a>, <a href="https://georgespake.com/redesign/projects/roles/speaker/" rel="tag">speaker</a> </div>
<div class="projcard-bar" style="background-color: #214387"></div>
<div class="projcard-description">
<p>George has been a co-organizer of the Memphis WordPress user group, sponsored by WordPress, since 2014</p>
<p class="project-links"><a href="https://www.meetup.com/WordPress-Memphis/">WordPress Memphis on Meetup</a></p>
</div>
</div>
</div>
</div>
</article>
<article id="post-2082" class="projcard-container">
<div class="projcard projcard-blue ">
<div class="projcard-innerbox">
<img width="800" height="700" src="https://georgespake.com/redesign/wp-content/uploads/2020/03/cbu.png" class="projcard-img wp-post-image jetpack-lazy-image jetpack-lazy-image--handled" alt="" size="large" data-attachment-id="2064" data-permalink="https://georgespake.com/redesign/projects/techcamp-memphis/cbu/" data-orig-file="https://georgespake.com/redesign/wp-content/uploads/2020/03/cbu.png" data-orig-size="800,700" data-comments-opened="0" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="cbu" data-image-description="" data-medium-file="https://georgespake.com/redesign/wp-content/uploads/2020/03/cbu-300x263.png" data-large-file="https://georgespake.com/redesign/wp-content/uploads/2020/03/cbu.png" srcset="https://georgespake.com/redesign/wp-content/uploads/2020/03/cbu.png 800w, https://georgespake.com/redesign/wp-content/uploads/2020/03/cbu-300x263.png 300w, https://georgespake.com/redesign/wp-content/uploads/2020/03/cbu-768x672.png 768w" data-lazy-loaded="1" sizes="(max-width: 800px) 100vw, 800px"> <div class="projcard-textbox">
<div class="projcard-title"><a href="https://georgespake.com/redesign/projects/cbu-peer-mentoring-program/">CBU Peer Mentoring program</a></div>
<div class="project-roles">
<a href="https://georgespake.com/redesign/projects/roles/mentor/" rel="tag">mentor</a>, <a href="https://georgespake.com/redesign/projects/roles/volunteer/" rel="tag">volunteer</a> </div>
<div class="projcard-bar" style="background-color: #e41838"></div>
<div class="projcard-description">
<p>George volunteered as a mentor to a Junior Computer Science Major at Christian Brothers University.<br><br>The Peer Mentoring Program is designed as an additional resource for students who want to build a strong relationship with their peers while learning new skills and gaining experience that will lead to success academically and socially.</p>
<p class="project-links"><a href="https://www.cbu.edu/peer-mentoring-program">CBU Peer Mentoring Program Website</a></p>
</div>
</div>
</div>
</div>
</article>
<article id="post-2080" class="projcard-container">
<div class="projcard projcard-blue img-right">
<div class="projcard-innerbox">
<img width="800" height="700" src="https://georgespake.com/redesign/wp-content/uploads/2020/03/memtech.png" class="projcard-img wp-post-image jetpack-lazy-image jetpack-lazy-image--handled" alt="" size="large" data-attachment-id="2084" data-permalink="https://georgespake.com/redesign/projects/memtech/memtech-2/" data-orig-file="https://georgespake.com/redesign/wp-content/uploads/2020/03/memtech.png" data-orig-size="800,700" data-comments-opened="0" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="memtech" data-image-description="" data-medium-file="https://georgespake.com/redesign/wp-content/uploads/2020/03/memtech-300x263.png" data-large-file="https://georgespake.com/redesign/wp-content/uploads/2020/03/memtech.png" srcset="https://georgespake.com/redesign/wp-content/uploads/2020/03/memtech.png 800w, https://georgespake.com/redesign/wp-content/uploads/2020/03/memtech-300x263.png 300w, https://georgespake.com/redesign/wp-content/uploads/2020/03/memtech-768x672.png 768w" data-lazy-loaded="1" sizes="(max-width: 800px) 100vw, 800px"> <div class="projcard-textbox">
<div class="projcard-title"><a href="https://georgespake.com/redesign/projects/memtech/">Memtech</a></div>
<div class="project-roles">
<a href="https://georgespake.com/redesign/projects/roles/organizer/" rel="tag">organizer</a>, <a href="https://georgespake.com/redesign/projects/roles/speaker/" rel="tag">speaker</a>, <a href="https://georgespake.com/redesign/projects/roles/volunteer/" rel="tag">volunteer</a> </div>
<div class="projcard-bar" style="background-color: #318dde"></div>
<div class="projcard-description">
<p>The Memphis Technology Foundation, or Memtech, facilitates local technical user groups and events. Since it was Founded, George has been actively involved in the Memtech community as a user group attendee, speaker, volunteer, organizer, and evangelist.</p>
<p class="project-links"><a href="https://memphistechnology.org/">Memphis Technology Foundation website</a></p>
</div>
</div>
</div>
</div>
</article>
</div>
</div>body {
margin: 0;
}
.project-cards-container {
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%);
padding: 4em 2em;
.grid-container {
display: grid;
grid-template-columns: 1fr;
width: 90%;
margin: auto;
max-width:1000px;
row-gap: 3em;
}
.projcard-title a {
font-size: 24px;
color: #212121;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
.projcard-subtitle {
color: #888;
}
.projcard {
background-color: #fff;
font-size: 18px;
box-shadow: 0 4px 21px -12px rgba(0, 0, 0, .66);
transition: box-shadow 0.2s ease, transform 0.2s ease;
overflow: hidden;
font-family: 'Voces', 'Open Sans', arial, sans-serif;
&:hover {
box-shadow: 0 34px 32px -33px rgba(0, 0, 0, .18);
transform: translate(0px, -3px);
}
&:hover .projcard-img {
transform: scale(1.05) rotate(1deg);
}
}
.projcard-img {
transition: transform 0.2s ease;
}
.project-roles {
color: #888;
font-size: 1.2em;
padding: .2em 0;
a {
text-transform: capitalize;
color: #888;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
.projcard-description {
font-size: 15px;
color: #424242;
}
.projcard:hover .projcard-bar {
width: 70px;
}
.projcard-bar {
left: -2px;
width: 50px;
height: 5px;
margin: 10px 0;
border-radius: 5px;
background-color: #424242;
transition: width 0.2s ease;
}
@media (min-width: 1060px) {
.projcard-container,
.projcard-container * {
box-sizing: border-box;
}
.projcard-container {
// margin-left: auto;
// margin-right: auto;
// max-width: 1000px;
}
.projcard {
position: relative;
width: 100%;
height: 350px;
// margin-bottom: 40px;
}
.projcard::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(-70deg, #424242, transparent 50%);
opacity: 0.07;
}
.projcard:nth-child(2n)::before {
background-image: linear-gradient(-250deg, #424242, transparent 50%);
}
.projcard-innerbox {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.projcard-img {
position: absolute;
height: 350px;
width: 400px;
top: 0;
left: 0;
}
.projcard.img-right .projcard-img {
left: initial;
right: 0;
}
.projcard-textbox {
position: absolute;
top: 7%;
bottom: 7%;
left: 430px;
width: calc(100% - 470px);
font-size: 17px;
}
.projcard.img-right .projcard-textbox {
left: initial;
right: 430px;
}
.projcard-textbox::before,
.projcard-textbox::after {
content: "";
position: absolute;
display: block;
background: #ff0000bb;
background: #fff;
top: -20%;
left: -55px;
height: 140%;
width: 60px;
transform: rotate(8deg);
}
.projcard.img-right .projcard-textbox::before {
display: none;
}
.projcard-textbox::after {
display: none;
left: initial;
right: -55px;
}
.projcard.img-right .projcard-textbox::after {
display: block;
}
.projcard-textbox * {
position: relative;
}
.projcard-description {
height: 225px;
overflow: hidden;
text-overflow: ellipsis;
}
.project-links {
position: absolute;
bottom: 3%;
font-size: 14px;
user-select: none;
// pointer-events: none;
}
.project-links a {
cursor: pointer;
display: inline-block;
background: #d20942;
color: #fff;
border-radius: 3px 0 0 3px;
line-height: 26px;
padding: 0 10px 0 12px;
position: relative;
margin-right: 20px;
user-select: none;
// transition: color 0.2s;
text-decoration: none;
&:hover {
background: #bb083b;
&::after {
border-left: 10px solid #bb083b;
}
}
&::after {
content: '';
position: absolute;
border-bottom: 13px solid transparent;
border-left: 10px solid #d20942;
border-top: 13px solid transparent;
right: -10px;
top: 0;
}
}
}
@media (max-width: 1060px) {
div.projcard {
margin: 0;
}
.grid-container {
// display: grid;
grid-template-columns: 1fr 1fr;
width:100%;
column-gap: 3em;
}
.projcard-img {
width: 100%;
height: auto;
}
article.projcard-container {
margin-left: 0;
margin-right: 0;
}
.projcard-textbox {
padding: 15px;
min-height: 360px;
}
}
}
External CSS
This Pen doesn't use any external CSS resources.