<body class="bg-light py-5">
<div class="container">
<div class="row">
<h4 class="text-muted">Desktop version</h4>
</div>
</div>
<div class="wrapper pb-5">
<div class="container">
<div class="row">
<!-- row one, item 1 -->
<div class="col-lg-4 item-wrapper">
<div>
<a class="ext-link" href="https://www.playrsmartcoach.com/" target="_blank" title="PLAYR Website">
<div>
<h2 class="title">PLAYR</h2>
<p class="subtitle">Football GPS Tracking System</p>
<div class="description">
<p>GPS player tracking technology combined with personalised sports science to help you take your performance to the next level.</p>
</div>
</div>
</a>
</div>
<div class="category-icon">Sports BioTech</div>
</div>
<!-- row one, item 2 -->
<div class="col-lg-4 item-wrapper">
<div>
<a class="ext-link" href="https://www.encased.com/" target="_blank" title="Encased Website">
<div>
<h2 class="title">Encased</h2>
<p class="subtitle">Quality smartphone accessories</p>
<div class="description">
<p>Secure and functional accessories for all major mobile phone brands including a wide range of cases, wireless charging solutions, as well as car and desk mounts.</p>
</div>
</div>
</a>
</div>
<div class="category-icon">Consumer Electronics</div>
</div>
<!-- row one, item 3 -->
<div class="col-lg-4 item-wrapper">
<div>
<a class="ext-link" href="https://www.orthomovement.com" target="_blank" title="OrthoMovement Website">
<div>
<h2 class="title">OrthoMovement</h2>
<p class="subtitle">Activity based insoles for all walks of life</p>
<div class="description">
<p>30 years of orthopedic research with new innovative tech materials providing insoles optimized for different activities and sports.
</p>
</div>
</div>
</a>
</div>
<div class="category-icon">Sports BioTech</div>
</div>
</div>
<div class="row">
<!-- row two, item 1 -->
<div class="col-lg-4 item-wrapper">
<div>
<a class="ext-link" href="https://www.spy-fy.com" target="_blank" title="Spy-Fy Website">
<div>
<h2 class="title">Spyslide by Spy-Fy</h2>
<p class="subtitle">Worlds most elegant webcam cover</p>
<div class="description">
<p>A thin and practical webcam cover that serves as the perfect alternative to that ugly sticker or post-it note on your laptop, tablet or desktop.</p>
</div>
</div>
</a>
</div>
<div class="category-icon">Consumer Electronics</div>
</div>
<!-- row two, item 2 -->
<div class="col-lg-4 item-wrapper">
<div>
<a class="ext-link" href="https://www.tape-design.com" target="_blank" title="TAPEDESIGN Website">
<div>
<h2 class="title">TAPEDESIGN</h2>
<p class="subtitle">High-Tech Grip Sock Technology</p>
<div class="description">
<p>Experience a noticeable change in your workouts with a better grip and leg sensitivity.</p>
</div>
</div>
</a>
</div>
<div class="category-icon">Sports BioTech</div>
</div>
<!-- row two, item 3 -->
<div class="col-lg-4 item-wrapper">
<div>
<a class="ext-link" href="https://www.bolleraven.com/" target="_blank" title="Bolle & Raven Website">
<div>
<h2 class="title">Bolle & Raven AirMod</h2>
<p class="subtitle">Custom-designed Bluetooth upgrade for Bose QC25 headphones</p>
<div class="description">
<p>Ultra-light and crafted to seamlessly fit the contours of the QC25 earcups, AirMod maintains the Bose esthetic while preserving 100% sound quality.</p>
</div>
</div>
</a>
</div>
<div class="category-icon">Consumer Electronics</div>
</div>
</div>
</div>
</div>
<!-- wrapper for mobile -->
<div class="container">
<div class="row">
<h4 class="text-muted">Mobile version</h4>
</div>
</div>
<div class="mobile-wrapper pb-5">
<div class="container">
<div class="row">
<!-- row one, item 1 -->
<div class="col-12 col-lg-4 item-wrapper">
<div>
<div>
<h2 class="title">PLAYR</h2>
<p class="subtitle">Football GPS Tracking System</p>
<div class="description">
<p>GPS player tracking technology combined with personalised sports science to help you take your performance to the next level.</p>
<a class="ext-link" href="https://www.playrsmartcoach.com/" target="_blank" title="PLAYR Website">PLAYR's Website</a>
</div>
</div>
</div>
<div class="category-icon">Sports BioTech</div>
</div>
<!-- row one, item 2 -->
<div class="col-12 col-lg-4 item-wrapper">
<div>
<div>
<h2 class="title">Encased</h2>
<p class="subtitle">Quality smartphone accessories</p>
<div class="description">
<p>Secure and functional accessories for all major mobile phone brands including a wide range of cases, wireless charging solutions, as well as car and desk mounts.</p>
<a class="ext-link" href="https://www.encased.com/" target="_blank" title="Encased Website">Encased's Website</a>
</div>
</div>
</div>
<div class="category-icon">Consumer Electronics</div>
</div>
<!-- row one, item 3 -->
<div class="col-12 col-lg-4 item-wrapper">
<div>
<div>
<h2 class="title">OrthoMovement</h2>
<p class="subtitle">Activity based insoles for all walks of life</p>
<div class="description">
<p>30 years of orthopedic research with new innovative tech materials providing insoles optimized for different activities and sports.
</p>
<a class="ext-link" href="https://www.orthomovement.com" target="_blank" title="OrthoMovement Website">OrthoMovement's Website</a>
</div>
</div>
</div>
<div class="category-icon">Sports BioTech</div>
</div>
</div>
<div class="row">
<!-- row two, item 1 -->
<div class="col-12 col-lg-4 item-wrapper">
<div>
<div>
<h2 class="title">Spyslide by Spy-Fy</h2>
<p class="subtitle">Worlds most elegant webcam cover</p>
<div class="description">
<p>A thin and practical webcam cover that serves as the perfect alternative to that ugly sticker or post-it note on your laptop, tablet or desktop.</p>
<a class="ext-link" href="https://www.spy-fy.com" target="_blank" title="Spy-Fy Website">Spyslide's Website</a>
</div>
</div>
</div>
<div class="category-icon">Consumer Electronics</div>
</div>
<!-- row two, item 2 -->
<div class="col-12 col-lg-4 item-wrapper">
<div>
<div>
<h2 class="title">TAPEDESIGN</h2>
<p class="subtitle">High-Tech Grip Sock Technology</p>
<div class="description">
<p>Experience a noticeable change in your workouts with a better grip and leg sensitivity.</p>
<a class="ext-link" href="https://www.tape-design.com" target="_blank" title="TAPEDESIGN Website">TAPEDESIGN's Website</a>
</div>
</div>
</div>
<div class="category-icon">Sports BioTech</div>
</div>
<!-- row two, item 3 -->
<div class="col-12 col-lg-4 item-wrapper">
<div>
<div>
<h2 class="title">Bolle & Raven AirMod</h2>
<p class="subtitle">Custom-designed Bluetooth upgrade for Bose QC25 headphones</p>
<div class="description">
<p>Ultra-light and crafted to seamlessly fit the contours of the QC25 earcups, AirMod maintains the Bose esthetic while preserving 100% sound quality.</p>
<a class="ext-link" href="https://www.bolleraven.com/" target="_blank" title="Bolle & Raven Website">Bolle & Raven's Website</a>
</div>
</div>
</div>
<div class="category-icon">Consumer Electronics</div>
</div>
</div>
</div>
</div>
</body>@import "bourbon";
$font-size-base: 1rem;
$font-size-h2: 1.953rem;
$font-size-h3: 1.5rem;
$font-size-h4: 1.25rem;
//colors
$blue: #0DAFE0;
$orange: invert($blue);
$white: #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
a.ext-link {
position: relative;
height: 100%;
text-decoration: none;
color: $gray-100;
cursor: pointer;
> div {
position: relative;
height: 100%;
padding: 1rem 0;
}
}
.title {
font-size: $font-size-h4;
text-transform: uppercase;
line-height: 1;
opacity: 1;
position: relative;
}
.subtitle {
color: $gray-400;
font-size: .9rem;
letter-spacing: .035rem;
line-height: 1.125;
margin: -.25rem 0 0;
opacity: 0;
}
.wrapper .row {
flex-wrap: nowrap;
justify-content: center;
overflow: hidden;
> div {
height: 240px;
overflow: hidden;
@include transition-property(all);
@include transition-duration(.7s);
@include transition-timing-function(ease-in-out);
// add image overlay for better contrast
&:before {
background: rgba($gray-900, 0.7);
content: "";
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
@include transition-property(all);
@include transition-duration(.2s);
}
}
// when the row is hovered
&:hover {
> div {
// overwrite widths of items when the row is hovered
flex-basis: calc(100% * 1/6);
flex-basis: 16.66%;
max-width: calc(100% * 1/6);
max-width: 16.66%;
}
}
.item-wrapper {
// set initial width of each item
flex-basis: calc(100% * 1/3);
flex-basis: 33.33%;
max-width: calc(100% * 1/3);
max-width: 33.33%;
> div {
height: 100%;
position: relative;
}
> a {
> div {
position: relative;
height: 100%;
padding: 1rem 0;
}
}
.description {
p {
width: calc(100% * 2/3);
margin-top: 0;
margin-bottom: 0;
padding: 1rem 0;
opacity: 0;
}
}
// didn't change for each category icon out of laziness
.category-icon {
content: '';
position: absolute;
bottom: 0;
right: 0;
height: auto;
font-size: 0.79rem;
color: $blue;
display: flex;
align-items: center;
padding: .35rem;
opacity: .7;
filter: grayscale(50%);
&:after {
content: '';
display: block;
margin-left: .5rem;
background-repeat: no-repeat;
-webkit-mask-image: url(//themjcl.com/wp-content/uploads/2019/02/sports_biotech_icon.svg);
mask-image: url(//themjcl.com/wp-content/uploads/2019/02/sports_biotech_icon.svg);
background-color: $blue;
height: 20px;
width: 21px;
}
}
// when an individual item is hovered
&:hover {
// increase width of the item
flex-basis: calc(100% * 2/3);
flex-basis: 66.66%;
max-width: calc(100% * 2/3);
max-width: 66.66%;
.title {
font-size: $font-size-h2;
color: $gray-900;
text-shadow: none;
@include transition-property(all);
@include transition-duration(.4s);
@include transition-timing-function(ease);
}
.subtitle {
opacity: 1;
color: $gray-700;
@include transition-property(opacity);
@include transition-duration(.2s);
@include transition-timing-function(ease);
@include transition-delay(.5s);
}
.category-icon {
opacity: 1;
filter: grayscale(0%);
}
.description {
p {
opacity: 1;
color: $gray-900;
@include transition-property(opacity);
@include transition-duration(.2s);
@include transition-timing-function(ease);
@include transition-delay(.5s);
}
}
// add white overlay
&:before {
background: rgba($gray-100, 0.8) !important;
content: "";
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
}
}
}
// Mobile styles
.mobile-wrapper {
height: initial;
max-width: 320px;
margin: 0 auto;
.row {
flex-direction: column;
> div {
position: relative;
height: auto;
max-width: none !important;
flex-basis: 100% !important;
// add image overlay for better contrast
&:before {
background: rgba($gray-900, 0.3);
content: "";
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
@include transition-property(all);
@include transition-duration(.2s);
}
&:first-child:hover {
margin-left: initial;
}
&:last-child:hover {
margin-right: initial;
}
> div {
opacity: .7;
position: relative;
padding: 2rem 0;
display: flex;
justify-content: space-evenly;
flex-direction: column;
align-content: center;
}
// didn't change for each category icon out of laziness
.category-icon {
flex-direction: row;
content: '';
position: absolute;
bottom: 0;
right: 0;
height: auto;
font-size: 0.79rem;
color: $blue;
display: flex;
align-items: center;
padding: .35rem;
opacity: .7;
filter: grayscale(50%);
&:after {
content: '';
display: block;
margin-left: .5rem;
background-repeat: no-repeat;
-webkit-mask-image: url(//themjcl.com/wp-content/uploads/2019/02/sports_biotech_icon.svg);
mask-image: url(//themjcl.com/wp-content/uploads/2019/02/sports_biotech_icon.svg);
background-color: $blue;
height: 20px;
width: 21px;
}
}
.title {
color: $gray-100;
}
.subtitle {
opacity: 1;
padding-bottom: 1rem;
color: rgba(tint($blue, 60%), .9);
}
.description {
padding-bottom: .5rem;
p {
width: 100%;
opacity: 1;
color: $gray-600;
}
a {
color: $gray-600;
}
}
// when an individual item is hovered
&:active {
> div {
opacity: 1;
@include transition-property(all);
@include transition-duration(.4s);
@include transition-timing-function(ease-out);
}
.title {
font-size: $font-size-h3;
color: $gray-100;
text-shadow: none;
@include transition-property(all);
@include transition-duration(.4s);
@include transition-timing-function(ease);
}
.subtitle {
opacity: 1;
color: tint($blue, 60%);
@include transition-property(opacity);
@include transition-duration(.3s);
@include transition-timing-function(ease);
}
.category-icon {
opacity: 1;
filter: grayscale(0%);
}
.description {
p {
opacity: 1;
color: $gray-100;
@include transition-property(opacity);
@include transition-duration(.3s);
@include transition-timing-function(ease);
}
a {
opacity: 1;
color: $gray-100;
letter-spacing: .06rem;
line-height: .9;
font-size: .9rem;
padding: .2rem .5rem .3rem;
background: rgba($gray-200, .1);
border: 1px solid rgba($gray-200, .2);
border-radius: 4px;
}
}
// add overlay
&:before {
background: rgba($gray-900, 0.9);
content: "";
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
}
}
}
}
// Center screen version titles
.container .row h4:first-of-type {
text-align: center;
margin: 0 auto;
padding-bottom: 1rem;
}
// Add background images
.wrapper .row, .mobile-wrapper .row {
&:first-child {
> :nth-child(1) {
background-color: darken(desaturate(adjust-hue($blue, 44), 72.11), 8.24);
background-image: url("//themjcl.com/wp-content/uploads/2019/02/playr.jpg");
background-position: center center;
background-size: cover;
}
> :nth-child(2) {
background-color: darken(desaturate(adjust-hue($blue, -180), 51.45), 15.69);
background-image: url("//themjcl.com/wp-content/uploads/2019/02/encased.jpg");
background-position: center center;
background-size: cover;
}
> :nth-child(3) {
background-color: darken(desaturate(adjust-hue($blue, -136), 55.70), 31.76);
background-image: url("//themjcl.com/wp-content/uploads/2019/02/orthomovement.jpg");
background-position: center center;
background-size: cover;
}
}
&:last-child {
> :nth-child(1) {
background-color: lighten(desaturate(adjust-hue($blue, 17), 37.63), 11.57);
background-image: url("//themjcl.com/wp-content/uploads/2019/02/spyslide.jpg");
background-position: center center;
background-size: cover;
}
> :nth-child(2) {
background: $gray-200;
background-image: url("//themjcl.com/wp-content/uploads/2019/02/tapedesign.jpg");
background-position: center center;
background-size: cover;
}
> :nth-child(3) {
background-color: darken(desaturate(adjust-hue($blue, 10), 33.77), 31.57);
background-image: url("//themjcl.com/wp-content/uploads/2019/02/bolleraven.jpg");
background-position: center center;
background-size: cover;
}
}
}
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.