<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Muli:400,700" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
* {
box-sizing: border-box;
}
::-webkit-scrollbar {
/* Webkit */
width: 0;
height: 0;
}
.hs {
display: flex;
overflow-x: scroll;
justify-content: space-between;
scrollbar-width: none;
/* Firefox */
-ms-overflow-style: none;
/* IE 10+ */
-webkit-overflow-scrolling: touch;
margin: 0 -20px;
}
.hs__header {
display: flex;
align-items: center;
width: 100%;
}
.hs__headline {
flex: 1;
}
.hs__arrows {
align-self: center;
}
.hs__arrows .arrow:before {
content: "";
display: inline-block;
vertical-align: middle;
content: "";
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNSIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTUgOSI+Cgk8cGF0aCBmaWxsPSIjMzMzMzMzIiBkPSJNNy44NjcgOC41NzRsLTcuMjItNy4yMi43MDctLjcwOEw3Ljg2NyA3LjE2IDE0LjA1Ljk4bC43MDYuNzA3Ii8+Cjwvc3ZnPgo=");
background-size: contain;
filter: brightness(5);
width: 18px;
height: 12px;
cursor: pointer;
}
.hs__arrows .arrow.disabled:before {
filter: brightness(2);
}
.hs__arrows .arrow.arrow-prev:before {
transform: rotate(90deg);
margin-right: 10px;
}
.hs__arrows .arrow.arrow-next:before {
transform: rotate(-90deg);
}
.hs__item {
flex-grow: 1;
flex-shrink: 0;
flex-basis: calc(25% - 10px * 2 - 5px);
margin: 10px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.hs__item:last-child:after {
content: "";
display: block;
position: absolute;
width: 10px;
height: 1px;
right: calc(10px * 2 * -1);
}
.hs__item:first-child {
margin-left: calc(10px * 2);
}
.hs__item__description {
z-index: 1;
align-self: flex-start;
margin: 10px 0;
}
.hs__item__subtitle {
color: #aaa;
display: block;
}
.hs__item__image__wrapper {
position: relative;
width: 100%;
height: 0;
padding-bottom: 100%;
}
.hs__item__image {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
@media (hover: none) and (pointer: coarse) {
.hs__wrapper .hs__arrows {
display: none;
}
.hs__wrapper .hs__item {
flex: 1 0 calc(23% - 10px * 2);
}
}
@media only screen and (hover: none) and (pointer: coarse) and (max-width: 990px) {
.hs__wrapper .hs__item {
flex: 1 0 calc(45% - 10px * 2);
}
}
/* Base Styling */
body {
margin: 0;
padding: 0;
overflow-x: hidden;
font-family: "Muli", sans-serif;
color: white;
background: white;
line-height: 1.5;
letter-spacing: 0.15px;
}
.container {
max-width: 990px;
padding: calc(10px * 2);
margin: 0 auto;
background: #121212;
mix-blend-mode: invert;
position: relative;
}
.container:after {
content: "";
width: 100vw;
height: 100%;
background: #212121;
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
z-index: -1;
}
@media only screen and (min-width: 990px) {
.container {
padding: calc(10px * 4) calc(10px * 8);
}
}
.description {
max-width: 990px;
color: #212121;
margin: 0 auto;
padding: calc(10px * 4);
}
ul {
padding: 0;
margin: 0;
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
</head>
<body translate="no">
<div class="container">
<div class="hs__wrapper">
<div class="hs__header">
<h2 class="hs__headline">Headline 1
</h2>
<div class="hs__arrows"><a class="arrow disabled arrow-prev"></a><a class="arrow arrow-next"></a></div>
</div>
<ul class="hs">
<li class="hs__item">
<div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&sig12" alt=""/></div>
<div class="hs__item__description"><span class="hs__item__title">Amazing title 1</span><span class="hs__item__subtitle">some subtitle</span></div>
</li>
<li class="hs__item">
<div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&sig22" alt=""/></div>
<div class="hs__item__description"><span class="hs__item__title">Amazing title 2</span><span class="hs__item__subtitle">some subtitle</span></div>
</li>
<li class="hs__item">
<div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&sig32" alt=""/></div>
<div class="hs__item__description"><span class="hs__item__title">Amazing title 3</span><span class="hs__item__subtitle">some subtitle</span></div>
</li>
<li class="hs__item">
<div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&sig42" alt=""/></div>
<div class="hs__item__description"><span class="hs__item__title">Amazing title 4</span><span class="hs__item__subtitle">some subtitle</span></div>
</li>
<li class="hs__item">
<div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&sig52" alt=""/></div>
<div class="hs__item__description"><span class="hs__item__title">Amazing title 5</span><span class="hs__item__subtitle">some subtitle</span></div>
</li>
<li class="hs__item">
<div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&sig62" alt=""/></div>
<div class="hs__item__description"><span class="hs__item__title">Amazing title 6</span><span class="hs__item__subtitle">some subtitle</span></div>
</li>
<li class="hs__item">
<div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&sig72" alt=""/></div>
<div class="hs__item__description"><span class="hs__item__title">Amazing title 7</span><span class="hs__item__subtitle">some subtitle</span></div>
</li>
<li class="hs__item">
<div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&sig82" alt=""/></div>
<div class="hs__item__description"><span class="hs__item__title">Amazing title 8</span><span class="hs__item__subtitle">some subtitle</span></div>
</li>
<li class="hs__item">
<div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&sig92" alt=""/></div>
<div class="hs__item__description"><span class="hs__item__title">Amazing title 9</span><span class="hs__item__subtitle">some subtitle</span></div>
</li>
<li class="hs__item">
<div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&sig102" alt=""/></div>
<div class="hs__item__description"><span class="hs__item__title">Amazing title 10</span><span class="hs__item__subtitle">some subtitle</span></div>
</li>
<li class="hs__item">
<div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&sig112" alt=""/></div>
<div class="hs__item__description"><span class="hs__item__title">Amazing title 11</span><span class="hs__item__subtitle">some subtitle</span></div>
</li>
<li class="hs__item">
<div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&sig122" alt=""/></div>
<div class="hs__item__description"><span class="hs__item__title">Amazing title 12</span><span class="hs__item__subtitle">some subtitle</span></div>
</li>
<li class="hs__item">
<div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&sig132" alt=""/></div>
<div class="hs__item__description"><span class="hs__item__title">Amazing title 13</span><span class="hs__item__subtitle">some subtitle</span></div>
</li>
<li class="hs__item">
<div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&sig142" alt=""/></div>
<div class="hs__item__description"><span class="hs__item__title">Amazing title 14</span><span class="hs__item__subtitle">some subtitle</span></div>
</li>
<li class="hs__item">
<div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&sig152" alt=""/></div>
<div class="hs__item__description"><span class="hs__item__title">Amazing title 15</span><span class="hs__item__subtitle">some subtitle</span></div>
</li>
<li class="hs__item">
<div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&sig162" alt=""/></div>
<div class="hs__item__description"><span class="hs__item__title">Amazing title 16</span><span class="hs__item__subtitle">some subtitle</span></div>
</li>
<li class="hs__item">
<div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&sig172" alt=""/></div>
<div class="hs__item__description"><span class="hs__item__title">Amazing title 17</span><span class="hs__item__subtitle">some subtitle</span></div>
</li>
<li class="hs__item">
<div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&sig182" alt=""/></div>
<div class="hs__item__description"><span class="hs__item__title">Amazing title 18</span><span class="hs__item__subtitle">some subtitle</span></div>
</li>
<li class="hs__item">
<div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&sig192" alt=""/></div>
<div class="hs__item__description"><span class="hs__item__title">Amazing title 19</span><span class="hs__item__subtitle">some subtitle</span></div>
</li>
<li class="hs__item">
<div class="hs__item__image__wrapper"><img class="hs__item__image" src="https://source.unsplash.com/random/300×300/?album&sig202" alt=""/></div>
<div class="hs__item__description"><span class="hs__item__title">Amazing title 20</span><span class="hs__item__subtitle">some subtitle</span></div>
</li>
</ul>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js'></script>
<script id="rendered-js" >
// work in progress - needs some refactoring and will drop JQuery i promise :)
var instance = $(".hs__wrapper"),x;
$.each(instance, function (key, value) {
var arrows = $(instance[key]).find(".arrow"),
box = $(instance[key]).find(".hs"),x,
mx = 0,
maxScrollWidth = box[0].scrollWidth - box[0].clientWidth / 2 - 10;
$(arrows).on('click', function () {
if ($(this).hasClass("arrow-next")) {
x = box.width() / 2 + box.scrollLeft() - 10;
box.animate({
scrollLeft: x });
if (x < maxScrollWidth - box.width() / 2) {
$(this).prev().removeClass('disabled');
} else {
$(this).addClass('disabled');
}
} else {
x = box.width() / 2 - box.scrollLeft() - 10;
box.animate({
scrollLeft: -x });
if (x > -10) {
$(this).addClass('disabled');
} else {
$(this).next().removeClass('disabled');
}
}
});
$(box).on({
mousemove: function (e) {
var mx2 = e.pageX - this.offsetLeft;
if (mx) this.scrollLeft = this.sx + mx - mx2;
},
mousedown: function (e) {
this.sx = this.scrollLeft;
mx = e.pageX - this.offsetLeft;
} });
$(document).on("mouseup", function () {
mx = 0;
});
});
//# sourceURL=pen.js
</script>
</body>
</html>