A Pen by Paul Howarth

Thumbnail
This awesome code was written by 1439cw, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 1439cw ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Paul Howarth</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  <link rel='stylesheet prefetch' href='http://www.paul-howarth.net/pta3/css/slick.css'>
<link rel='stylesheet prefetch' href='http://www.paul-howarth.net/pta3/css/slick-theme.css'>

      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      html,
body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

body {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 40px;
  color: #fff;
  text-align: center;
  background: #638;
}

h1 {
  margin: 20px 0;
}

p {
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: normal;
  line-height: 20px;
  margin: 0 0 10px 0;
}

a {
  color: #fff;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

#artist-grid {
  position: relative;
  width: 100%;
  max-width: 1024px;
  background: #638;
  height: auto;
  overflow: hidden;
  margin: 0 auto;
}

.artists {
  position: relative;
  width: 100%;
  max-width: 328px;
  height: 100%;
  max-height: 185px;
  float: left;
  margin: 0 20px 20px 0;
  background: #222;
  z-index: 000;
}

.artists:nth-child(3n+1) {
  margin: 0 0 20px 0;
}

.artist-image {
  width: 100%;
}

img.artist-image {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  transition: grayscale 0.5s ease;
}

.artists h2 {
  color: #fff;
  position: absolute;
  text-align: center;
  top: 38%;
  z-index: 999;
  width: 100%;
}

.artists:hover .artists h2 {
  opacity: 1;
}

.close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}

.hide-bio {
  position: relative;
  display: none;
  clear: both;
  background: #222;
  padding: 20px 50px;
  margin: 0 0 20px 0;
}

.title {
  opacity: 0;
}

img.artist-image {
  opacity: 1;
}

.social {
  width: 100%;
  text-align: center;
  margin: 0 0 5px 0;
}

.social img {
  width: 25px;
  margin: 0 10px;
}

.artists img {
  width: 100%;
}

.slider {
  width: 50%;
  margin: 100px auto;
}

.slick-slide {
  margin: 0px 20px;
}

.slick-slide img {
  width: 100%;
}

.slick-prev:before,
.slick-next:before {
  color: black;
}

.slick-slide[style] {
  margin: 0;
}

/*@media (min-width: 480px) {
  .slick-track[style] {
    width: 100% !important;
    transform: none !important;
  }
  .slick-slide[style] {
    display: block !important;
    margin: 0;
  }
}

@media (max-width: 480px) {
  .slick-track[style] {
    width: 100% !important;
    transform: none !important;
  }
  .hide-bio {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
  }
  .close {
    cursor: pointer;
    position: absolute;
    top: 20px;
    right: 20px;
  }
}
    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <link href='https://fonts.googleapis.com/css?family=Oswald:700|Open+Sans' rel='stylesheet' type='text/css'>

<div id="artist-grid">

  <h1>Artists</h1>

  <div class="artists">
    <a href="javascript:showonlyone('Karnzii');"><img class="artist-image" src="http://www.paul-howarth.net/pta3/images/artists/karnzii.jpg">
      <h2 class="title">KARNZII</h2>
    </a>
  </div>

  <div class="artists">
    <a href="javascript:showonlyone('Kev');">
      <img class="artist-image" src="http://www.paul-howarth.net/pta3/images/artists/kev.jpg">
      <h2 class="title">KEV THE POET</h2>
    </a>
  </div>

  <div class="artists">
    <a href="javascript:showonlyone('SoFreer');">
      <img class="artist-image" src="http://www.paul-howarth.net/pta3/images/artists/sofreer.jpg">
      <h2 class="title">SOFREER</h2>
    </a>
  </div>

  <div class="hide-bio" id="Karnzii">
    <p class="close">X</p>
    <h1>KARNZII</h1>
    <p>Karnzii is a Slam Poet performing anything from firey political tirades to earthen forest walks, painting rhymic pictures with his words his style can change from serious topics to rhymeing psycadelic rants in as many seconds. Also raps with the Poet Tree Alliance Hip-Hop project.</p>
    <div class="social">
      <img src="http://www.paul-howarth.net/pta3/images/icon-fb.svg">
      <img src="http://www.paul-howarth.net/pta3/images/icon-yt.svg">
      <img src="http://www.paul-howarth.net/pta3/images/icon-ig.svg">
    </div>
  </div>

  <div class="hide-bio" id="Kev">
    <p class="close">X</p>
    <h1>KEV THE POET</h1>
    <p>Kev is a gifted writer and performer. As well being a rapper and a poet, he writes philosophical essays and describes himself as 'an initiated Bard of a Druid Order, dub poet and conscious Hip-Hop MC'. Among his many achievements; he has supported Chester P, Zion Train, Gaudi, Congo Natty, toured with Dub Revolution, Daniel Waples and performed on stage with KRS-ONE.</p>
    <div class="social">
      <a href="https://www.youtube.com/kevthepoet"><img src="http://www.paul-howarth.net/pta3/images/icon-yt.svg"></a>
    </div>
  </div>

  <div class="hide-bio" id="SoFreer">
    <p class="close">X</p>
    <h1>SOFREER</h1>
    <p>SoFreer likes to be free and abstract with a unique expression of her soul through her music. She uses it as a spiritual tool, to connect, share, embrace, heal, feel, to transcend her mind and body into vibration.</p>
    <div class="social">
      <img src="http://www.paul-howarth.net/pta3/images/icon-fb.svg">
      <img src="http://www.paul-howarth.net/pta3/images/icon-yt.svg">
      <img src="http://www.paul-howarth.net/pta3/images/icon-ig.svg">
    </div>
  </div>

  <div class="artists">
    <a href="javascript:showonlyone('SianMcgill');">
      <img class="artist-image" src="http://www.paul-howarth.net/pta3/images/artists/sianmcgill.jpg">
      <h2 class="title">SIAN MCGILL</h2>
    </a>
  </div>

  <div class="artists">
    <a href="javascript:showonlyone('Kamen');">
      <img class="artist-image" src="http://www.paul-howarth.net/pta3/images/artists/kamen.jpg">
      <h2 class="title">KAMEN</h2>
    </a>
  </div>

  <div class="artists">
    <a href="javascript:showonlyone('Reeds');">
      <img class="artist-image" src="http://www.paul-howarth.net/pta3/images/artists/reeds.jpg">
      <h2 class="title">REEDS</h2>
    </a>
  </div>

  <div class="hide-bio" id="SianMcgill">
    <p class="close">X</p>
    <h1>SIAN MCGILL</h1>
    <p>Sian Magill revives the curiousity and vitality in live music. Her soulful notes will touch hearts and minds in any audience. A consumate finger-picking and percussive guitarist, a thoughtful lyricist and a powerful singer, she writes with flair and conviction.</p>
    <div class="social">
      <a href="https://www.sianmagill.co.uk/"><p>Website</p></a>
    </div>
  </div>

  <div class="hide-bio" id="Kamen">
    <p class="close">X</p>
    <h1>KAMEN</h1>
    <p>I am a very versatile artist specializing in obscure and abstract pieces as well as portraiture and realism. Comfortable with any media and surface! I also perform rap and spoken word using my creative flow with pen and brush work.</p>
    <div class="social">
      <a href="https://www.facebook.com/Kamens-Kreations-763803133650887/?fref=nf"><img src="http://www.paul-howarth.net/pta3/images/icon-fb.svg"></a>
      <a href="https://www.youtube.com/watch?v=z7f8GYIcdyg"><img src="http://www.paul-howarth.net/pta3/images/icon-yt.svg"></a>
    </div>
  </div>

  <div class="hide-bio" id="Reeds">
    <p class="close">X</p>
    <h1>REEDS</h1>
    <p>Reeds are a Pop/Rock group from Milton Keynes, born of busking and open mic nights Reeds have developed their sound, feel and direction from street entertainment to stage. Combining elements of soulful vocals, punked up energy and feet shuffling beats Reeds have found themselves playing on a variety of stages and events.</p>
    <div class="social">
      <a href="www.amongstreeds.com"><p>Website</p></a>
    </div>
  </div>

  <div class="artists">
    <a href="javascript:showonlyone('Jausme');">
      <img class="artist-image" src="http://www.paul-howarth.net/pta3/images/artists/jausme.jpg">
      <h2 class="title">JAUSME</h2>
    </a>
  </div>

  <div class="artists">
    <a href="javascript:showonlyone('OpenBeing');">
      <img class="artist-image" src="http://www.paul-howarth.net/pta3/images/artists/openbeing.jpg">
      <h2 class="title">OPEN BEING</h2>
    </a>
  </div>

  <div class="artists">
    <a href="javascript:showonlyone('Disciples');">
      <img class="artist-image" src="http://www.paul-howarth.net/pta3/images/artists/disciples.jpg">
      <h2 class="title">DISCIPLES</h2>
    </a>
  </div>

  <div class="hide-bio" id="Jausme">
    <p class="close">X</p>
    <h1>JAUSME</h1>
    <p>(Pronounced Yo-s-meh), or Jausme. Vocalist/songwriter/instrumentalist, hailing from the Baltic lands of Lithuania, creates unique sounds of soul, jazz and folklore with Kanklės and its 29 strings. Her style is best described as 'urban etherealism'. Main inspiration: nature. Main aim: to soothe and inspire. Main theme: trees. Main drive: variety. Jausmė has collaborated with bass producers and sung on some deep subs, dubtechno, garage and more.</p>
    <div class="social">
      <a href="https://www.youtube.com/watch?v=7EF9MnXopJA&feature=youtu.be"><img src="http://www.paul-howarth.net/pta3/images/icon-yt.svg"></a>
    </div>
  </div>

  <div class="hide-bio" id="OpenBeing">
    <p class="close">X</p>
    <h1>OPEN BEING</h1>
    <p>Open Being is a passionate force of nature that thrives upon turntables, vocalises upon microphones and ignites pages with honest insight. In 2015 he released the first pressing of Open Minds To Realise Peace – the culmination of several years study into realising peace on personal, communal and global levels. Although embracing of openness he has a solid core... A paradox that is Open Being.</p>
    <div class="social">
      <a href="www.openbeing.co.uk"><p>Website</p></a>
    </div>
  </div>

  <div class="hide-bio" id="Disciples">
    <p class="close">X</p>
    <h1>DISCIPLES OF DIONYSUS</h1>
    <p>Disciples of Dionysus is a wondering troubador group of musicans newly formed and sprouting from the seeds of the Poet Tree Forestry, they play a fusion of FunkySka/Dub/JazzyReggae with some Hip-Hop vibes thrown in and in their first few months of existing supported King Prawn.</p>
    <div class="social">
      <img src="http://www.paul-howarth.net/pta3/images/icon-fb.svg">
      <img src="http://www.paul-howarth.net/pta3/images/icon-yt.svg">
      <img src="http://www.paul-howarth.net/pta3/images/icon-ig.svg">
    </div>
  </div>

  <div class="artists">
    <a href="javascript:showonlyone('TaylorSmith');">
      <img class="artist-image" src="http://www.paul-howarth.net/pta3/images/artists/taylorsmith.jpg">
      <h2 class="title">TAYLOR SMITH</h2>
    </a>
  </div>

  <div class="artists">
    <a href="javascript:showonlyone('Bodhi');">
      <img class="artist-image" src="http://www.paul-howarth.net/pta3/images/artists/bodhi.jpg">
      <h2 class="title">BODHI</h2>
    </a>
  </div>

  <div class="hide-bio" id="TaylorSmith">
    <p class="close">X</p>
    <h1>TAYLOR SMITH</h1>
    <p>Taylor Smith started busking for spare change due to unemployment and social boredom. This quickly turned into an inspired musical duo with their sights set both on startling and enlightening the general public on stage and on the street. Having busked the Centre MK almost religiously, Mitchell Taylor and Nick Smith are easily recognised as the musicians that might open your eyes, even to things you might not want.</p>
    <div class="social">
      <img src="http://www.paul-howarth.net/pta3/images/icon-fb.svg">
      <img src="http://www.paul-howarth.net/pta3/images/icon-yt.svg">
      <img src="http://www.paul-howarth.net/pta3/images/icon-ig.svg">
    </div>
  </div>

  <div class="hide-bio" id="Bodhi">
    <p class="close">X</p>
    <h1>BODHI</h1>
    <p>Coming from a back ground of fine art, animation and character design I've come to love mixing reality with the weird and slightly unhinged. My style has refined over the years through being inspired by a mixture of illustration and graffiti artists to a place of fun colours enclosed by that crisp clean black out line. There's enough seriousness in the world, time for some silliness to keep us sane.</p>
    <div class="social">
      <img src="http://www.paul-howarth.net/pta3/images/icon-fb.svg">
      <img src="http://www.paul-howarth.net/pta3/images/icon-yt.svg">
      <img src="http://www.paul-howarth.net/pta3/images/icon-ig.svg">
    </div>
  </div>

</div>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='http://www.paul-howarth.net/pta3/js/slick.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/1439cw/a-pen-by-paul-howarth-zBoXwd */
html,
body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

body {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 40px;
  color: #fff;
  text-align: center;
  background: #638;
}

h1 {
  margin: 20px 0;
}

p {
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: normal;
  line-height: 20px;
  margin: 0 0 10px 0;
}

a {
  color: #fff;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

#artist-grid {
  position: relative;
  width: 100%;
  max-width: 1024px;
  background: #638;
  height: auto;
  overflow: hidden;
  margin: 0 auto;
}

.artists {
  position: relative;
  width: 100%;
  max-width: 328px;
  height: 100%;
  max-height: 185px;
  float: left;
  margin: 0 20px 20px 0;
  background: #222;
  z-index: 000;
}

.artists:nth-child(3n+1) {
  margin: 0 0 20px 0;
}

.artist-image {
  width: 100%;
}

img.artist-image {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  transition: grayscale 0.5s ease;
}

.artists h2 {
  color: #fff;
  position: absolute;
  text-align: center;
  top: 38%;
  z-index: 999;
  width: 100%;
}

.artists:hover .artists h2 {
  opacity: 1;
}

.close {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}

.hide-bio {
  position: relative;
  display: none;
  clear: both;
  background: #222;
  padding: 20px 50px;
  margin: 0 0 20px 0;
}

.title {
  opacity: 0;
}

img.artist-image {
  opacity: 1;
}

.social {
  width: 100%;
  text-align: center;
  margin: 0 0 5px 0;
}

.social img {
  width: 25px;
  margin: 0 10px;
}

.artists img {
  width: 100%;
}

.slider {
  width: 50%;
  margin: 100px auto;
}

.slick-slide {
  margin: 0px 20px;
}

.slick-slide img {
  width: 100%;
}

.slick-prev:before,
.slick-next:before {
  color: black;
}

.slick-slide[style] {
  margin: 0;
}

/*@media (min-width: 480px) {
  .slick-track[style] {
    width: 100% !important;
    transform: none !important;
  }
  .slick-slide[style] {
    display: block !important;
    margin: 0;
  }
}

@media (max-width: 480px) {
  .slick-track[style] {
    width: 100% !important;
    transform: none !important;
  }
  .hide-bio {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
  }
  .close {
    cursor: pointer;
    position: absolute;
    top: 20px;
    right: 20px;
  }
}

/*Downloaded from https://www.codeseek.co/1439cw/a-pen-by-paul-howarth-zBoXwd */
// Slick
$('.artists').slick({
  dots: false,
  arrows: false,
  infinite: false,
  slidesToShow: 1,
  slidesToScroll: 1,
  responsive: [{
      breakpoint: 480,
      settings: {
        dots: true,
        arrows: true,
        infinite: true,
        speed: 300,
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ]
});

// Title reveal
$(document).ready(function(){
	$('.artists').hover(
		function(){
			$(this).find('img').animate({opacity: "0.7"}, 300);
			$(this).find('.title').animate({opacity: "1"}, 300);
		},
		function(){
			$(this).find('img').animate({opacity: "1.0"}, 300);
			$(this).find('.title').animate({opacity: "0"}, 100);
}		
	);			
});

// Artists bio expand/collapse
function showonlyone(thechosenone) {
     $('.hide-bio').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
              $(this).toggle(0);
          }
          else {
               $(this).hide(0);
          }
     });
}

$('.close').click(function(){
     $('.hide-bio').hide(0);
});

Comments