Skip to content

Instantly share code, notes, and snippets.

@dylanburkey

dylanburkey/index.html

Created August 6, 2018 16:31
Show Gist options
  • Save dylanburkey/c46ba55e52b5d1264ed3ef63e0d172ed to your computer and use it in GitHub Desktop.
Save dylanburkey/c46ba55e52b5d1264ed3ef63e0d172ed to your computer and use it in GitHub Desktop.
Download ZIP
LE Product Cards with Search
Raw
index.html
<section class="container">
<section class="row search-module">
<input class="search" id="text-search" placeholder="Search" type="text" name="text-search">
</section>
<div class="row">
<div class="cardContainer inactive">
<div class="card">
<div class="side front">
<div class="img img2"></div>
<div class="info">
<h2>Flexcut 80 (LC105m)</h2>
<p>A high-performance zero-turn with unsurpassed strength, speed &amp; reliability with a warranty to match.</p>
</div>
</div>
<div class="side back">
<div class="info">
<h2>At a glance</h2>
<ul>
<li>Your choice of VX4 decks ranging from 60 to 72 inches</li>
<li>The 37hp Vanguard BigBlock EFI makes short work out of big jobs enabling speeds up to 16mph</li>
<li>Massive 24" drive tires and 13" front caster tires</li>
</ul>
<div class="btn">
<h4>Learn More</h4>
<svg fill="#fff" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/><path d="M0-.25h24v24H0z" fill="none"/></svg>
</div>
</div>
</div>
</div>
</div>
<div class="cardContainer inactive">
<div class="card">
<div class="side front">
<div class="img img1"></div>
<div class="info">
<h2>Flexcut 80 (LC100M)</h2>
<p>Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper.</p>
</div>
</div>
<div class="side back">
<div class="info">
<h2>At a glance</h2>
<ul>
<li>Nozzle (80A)</li>
<li>Sold In Packs Of 5</li>
<li>Updated hip bolstering offers superior operator comfort and positioning</li>
</ul>
<div class="btn">
<h4>Learn More</h4>
<svg fill="#fff" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/><path d="M0-.25h24v24H0z" fill="none"/></svg>
</div>
</div>
</div>
</div>
</div>
<div class="cardContainer inactive">
<div class="card">
<div class="side front">
<div class="img img2"></div>
<div class="info">
<h2>Flexcut 80 (LC105m)</h2>
<p>A high-performance zero-turn with unsurpassed strength, speed &amp; reliability with a warranty to match.</p>
</div>
</div>
<div class="side back">
<div class="info">
<h2>At a glance</h2>
<ul>
<li>Your choice of VX4 decks ranging from 60 to 72 inches</li>
<li>The 37hp Vanguard BigBlock EFI makes short work out of big jobs enabling speeds up to 16mph</li>
<li>Massive 24" drive tires and 13" front caster tires</li>
</ul>
<div class="btn">
<h4>Learn More</h4>
<svg fill="#fff" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/><path d="M0-.25h24v24H0z" fill="none"/></svg>
</div>
</div>
</div>
</div>
</div>
<div class="cardContainer inactive">
<div class="card">
<div class="side front">
<div class="img img1"></div>
<div class="info">
<h2>Flexcut 80 (LC100M)</h2>
<p>Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper.</p>
</div>
</div>
<div class="side back">
<div class="info">
<h2>At a glance</h2>
<ul>
<li>Nozzle (80A)</li>
<li>Sold In Packs Of 5</li>
<li>Updated hip bolstering offers superior operator comfort and positioning</li>
</ul>
<div class="btn">
<h4>Learn More</h4>
<svg fill="#fff" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/><path d="M0-.25h24v24H0z" fill="none"/></svg>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="cardContainer inactive">
<div class="card">
<div class="side front">
<div class="img img2"></div>
<div class="info">
<h2>Flexcut 80 (LC105m)</h2>
<p>A high-performance zero-turn with unsurpassed strength, speed &amp; reliability with a warranty to match.</p>
</div>
</div>
<div class="side back">
<div class="info">
<h2>At a glance</h2>
<ul>
<li>Your choice of VX4 decks ranging from 60 to 72 inches</li>
<li>The 37hp Vanguard BigBlock EFI makes short work out of big jobs enabling speeds up to 16mph</li>
<li>Massive 24" drive tires and 13" front caster tires</li>
</ul>
<div class="btn">
<h4>Learn More</h4>
<svg fill="#fff" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/><path d="M0-.25h24v24H0z" fill="none"/></svg>
</div>
</div>
</div>
</div>
</div>
<div class="cardContainer inactive">
<div class="card">
<div class="side front">
<div class="img img2"></div>
<div class="info">
<h2>Flexcut 80 (LC105m)</h2>
<p>A high-performance zero-turn with unsurpassed strength, speed &amp; reliability with a warranty to match.</p>
</div>
</div>
<div class="side back">
<div class="info">
<h2>At a glance</h2>
<ul>
<li>Your choice of VX4 decks ranging from 60 to 72 inches</li>
<li>The 37hp Vanguard BigBlock EFI makes short work out of big jobs enabling speeds up to 16mph</li>
<li>Massive 24" drive tires and 13" front caster tires</li>
</ul>
<div class="btn">
<h4>Learn More</h4>
<svg fill="#fff" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/><path d="M0-.25h24v24H0z" fill="none"/></svg>
</div>
</div>
</div>
</div>
</div>
<div class="cardContainer inactive">
<div class="card">
<div class="side front">
<div class="img img2"></div>
<div class="info">
<h2>Flexcut 80 (LC105m)</h2>
<p>A high-performance zero-turn with unsurpassed strength, speed &amp; reliability with a warranty to match.</p>
</div>
</div>
<div class="side back">
<div class="info">
<h2>At a glance</h2>
<ul>
<li>Your choice of VX4 decks ranging from 60 to 72 inches</li>
<li>The 37hp Vanguard BigBlock EFI makes short work out of big jobs enabling speeds up to 16mph</li>
<li>Massive 24" drive tires and 13" front caster tires</li>
</ul>
<div class="btn">
<h4>Learn More</h4>
<svg fill="#fff" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/><path d="M0-.25h24v24H0z" fill="none"/></svg>
</div>
</div>
</div>
</div>
</div>
<div class="cardContainer inactive">
<div class="card">
<div class="side front">
<div class="img img2"></div>
<div class="info">
<h2>Flexcut 80 (LC105m)</h2>
<p>A high-performance zero-turn with unsurpassed strength, speed &amp; reliability with a warranty to match.</p>
</div>
</div>
<div class="side back">
<div class="info">
<h2>At a glance</h2>
<ul>
<li>Your choice of VX4 decks ranging from 60 to 72 inches</li>
<li>The 37hp Vanguard BigBlock EFI makes short work out of big jobs enabling speeds up to 16mph</li>
<li>Massive 24" drive tires and 13" front caster tires</li>
</ul>
<div class="btn">
<h4>Learn More</h4>
<svg fill="#fff" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/><path d="M0-.25h24v24H0z" fill="none"/></svg>
</div>
</div>
</div>
</div>
</div>
</section>
Raw
script.babel
const cards = document.querySelectorAll('.card');
function transition() {
if (this.classList.contains('active')) {
this.classList.remove('active')
} else {
this.classList.add('active');
}
}
cards.forEach(card => card.addEventListener('click', transition));
jQuery.fn.highlight = function(pat) {
function innerHighlight(node, pat) {
var skip = 0;
if (node.nodeType == 3) {
var pos = node.data.toUpperCase().indexOf(pat);
if (pos >= 0) {
var spannode = document.createElement('span');
spannode.className = 'highlight';
var middlebit = node.splitText(pos);
var endbit = middlebit.splitText(pat.length);
var middleclone = middlebit.cloneNode(true);
spannode.appendChild(middleclone);
middlebit.parentNode.replaceChild(spannode, middlebit);
skip = 1;
}
} else if (node.nodeType == 1 && node.childNodes && !/(script|style) /i.test(node.tagName)) {
for (var i = 0; i < node.childNodes.length; ++i) {
i += innerHighlight(node.childNodes[i], pat);
}
}
return skip;
}
return this.each(function() {
innerHighlight(this, pat.toUpperCase());
});
};
jQuery.fn.removeHighlight = function() {
function newNormalize(node) {
for (var i = 0, children = node.childNodes, nodeCount = children.length; i < nodeCount; i++) {
var child = children[i];
if (child.nodeType == 1) {
newNormalize(child);
continue;
}
if (child.nodeType != 3) { continue; }
var next = child.nextSibling;
if (next == null || next.nodeType != 3) { continue; }
var combined_text = child.nodeValue + next.nodeValue;
new_node = node.ownerDocument.createTextNode(combined_text);
node.insertBefore(new_node, child);
node.removeChild(child);
node.removeChild(next);
i--;
nodeCount--;
}
}
return this.find("span.highlight").each(function() {
var thisParent = this.parentNode;
thisParent.replaceChild(this.firstChild, this);
newNormalize(thisParent);
}).end();
};
$(function() {
$('#text-search').bind('keyup change', function(ev) {
// pull in the new value
var searchTerm = $(this).val();
// remove any old highlighted terms
$('body').removeHighlight();
// disable highlighting if empty
if ( searchTerm ) {
// highlight the new term
$('body').highlight( searchTerm );
}
});
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Raw
style.sass
// --------------
// Global styles
// --------------
*, *:after, *:before
box-sizing: border-box
// Color Variables
$l1: hsla(0, 0%, 100%, 1)
$l2: hsla(223, 13%, 87%, 1)
$l3: hsla(0, 0%, 77%, 1)
$d1: hsla(0, 0%, 20%, 1)
$d2: #555
$p1: #be1e2e
$p2: #333
$p3: #ddd
$g1: #FFB714
$g2: #FFE579
// Mixins
=size($x, $y)
width: $x
height: $y
// Text
h2, h4, p, ul, li
margin: 0
padding: 0
input
position: relative
top: 0
left: 0
width: 200px
clear: both
float: left
h2, h4
font-family: 'Oswald', sans-serif
text-transform: uppercase
color: $d1
h2
font-size: 1.75rem
font-size: 28px
font-weight: 600
letter-spacing: -0.2px
margin-bottom: 0.3125em
p, li
font-family: "Roboto", sans-serif
font-weight: 600
color: $d2
line-height: 1.7
ul, li
text-decoration: none
list-style: disc outside
ul
padding-left: 20px
svg
margin: 0px
min-width: 24px
min-height: 24px
// --------------
// Main styles begin
// --------------
body
background-color: $l2
background-image: linear-gradient(140deg, $l1, $l2)
margin: auto
width: 50rem
//min-height: 450px
min-height: 100vh
display: flex
align-items: center
justify-content: center
.search
position: flex
top: 30px
outline: 0
color: #666
padding: 5px
letter-spacing: 0.75px
line-height: 1.6
font-size: 1rem
font-weight: 800
border: #333 thin solid
&:focus
outline: #D5CA9E auto 3px
.row
width: 80rem
display: flex
justify-content: center
align-content: center
margin: 2em auto
clear: both
&:after
content: ''
display: block
clear: both
.highlight
background: #be1e2e
padding: 5px
color: #eee
// --------------
// Overall card
// --------------
.cardContainer
position: relative
+size(300px, 400px)
min-width: 300px
min-height: 400px
margin: 4px
perspective: 1000px
.chris > .image-info
background: 150%
// .active is applied to .card when .card is clicked.
.active
transform: translateZ(0px) rotateY(180deg) !important
&:after
display: none
// &:hover:after
// opacity: 0 !important
.card
display: inline-block
+size(100%, 100%)
cursor: pointer
-moz-backface-visibility: hidden
transform-style: preserve-3d
transform: translateZ(-100px)
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1)
// :after allows for a more performant box-shadow because only opacity is being animated.
&:after
content: ''
position: absolute
z-index: -1
+size(100%, 100%)
border-radius: 5px
box-shadow: 0 14px 50px -4px hsla(0, 0%, 0%, 0.15)
opacity: 0
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1.4)
&:hover
transform: translateZ(0px)
&:hover:after
opacity: 1
.side
-webkit-backface-visibility: hidden
backface-visibility: hidden
position: absolute
+size(100%, 100%)
border-radius: 5px
background-color: $l1
.front
z-index: 2
.back
transform: rotateY(180deg)
.info
padding: 16px
// --------------
// Front of card
// --------------
.front
.img
background-color: $l2
background-position: center
background-size: cover
border-radius: 5px 5px 0 0
+size(100%, 200px)
.img1
background: 100%
background-image: url(http://assets.lincolnelectric.com/assets/US/EN/store/thumbnails/tomahawk-375-promo.jpg)
.img2
background-image: url(https://assets.lincolnelectric.com/assets/global/Products/K1308-25/140x140.jpg)
.img3
background-image: url(http://assets.lincolnelectric.com/assets/US/EN/store/thumbnails/tomahawk-375-promo.jpg)
// --------------
// Back of card
// --------------
.back
position: relative
h2
margin-top: 6px
margin-bottom: 18px
.reviews
display: flex
align-items: center
margin-bottom: 12px
cursor: pointer
p
color: $l3
font-weight: 300
margin: 1px 0 0 6px
transition: 0.3s ease-in-out
&:hover
p
color: $d2
li
line-height: 1.8
margin: 2px 0 6px 0
.btn
// positioning
position: absolute
bottom: 16px
+size(calc(100% - 32px), 56px)
display: flex
align-items: center
justify-content: center
// style
background-color: $p1
background-image: linear-gradient(-50deg, $p1, $p2)
border-radius: 5px
cursor: pointer
h4
color: #fff
&:hover
h4
transform: translateX(0px)
svg
transform: translateX(0px)
opacity: 1
h4
transform: translateX(12px)
transition: transform 0.3s ease-out
svg
margin: 1px 0 0 4px
transform: translateX(-8px)
opacity: 0
transition: all 0.3s ease-out
img-info
background-size: 120%
background: red
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment