daw/page-music.php

<?php
/*
Template Name: Music
*/

get_header(); ?>
<style media="screen" type="text/css">
.albums {
  position: relative;
}
.albums:after {
  content: "";
  display: table;
  clear: both;
}
.album {
  float: left;
  height: auto;
  position: relative;
  font-size: 12px;
  -webkit-transition: -webkit-transform 0.4s ease-in-out, z-index 0.4s ease-in-out;
  -moz-transition: -moz-transform 0.4s ease-in-out, z-index 0.4s ease-in-out;
  -ms-transition: -ms-transform 0.4s ease-in-out, z-index 0.4s ease-in-out;
  -o-transition: -o-transform 0.4s ease-in-out, z-index 0.4s ease-in-out;
  transition: transform 0.4s ease-in-out, z-index 0.4s ease-in-out;
  -webkit-perspective: 600px;
  perspective: 600px;
}
.album img {
  width: 100%;
  height: auto;
}
.album h1, .album h2, .album h3 {
  font-size: 13px;
  line-height: 15px;
}
.album .front, .album .back {
  float: none;
  width: 100%;
  height: auto;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
  -moz-transition: -moz-transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
  -ms-transition: -ms-transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
  -o-transition: -o-transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
  transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
}
.album .front {
  z-index: 1;
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
.album .front .alpha {
  -webkit-transition: opacity 0.4s ease-in-out;
  -moz-transition: opacity 0.4s ease-in-out;
  -ms-transition: opacity 0.4s ease-in-out;
  -o-transition: opacity 0.4s ease-in-out;
  transition: opacity 0.4s ease-in-out;
  display: block;
  content: '';
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.75);
  opacity: 0;
}
.album .back {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  text-align: center;
  font-family: sans-serif;
  padding: 10px;
  opacity: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  -o-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}
.album.flip {
  -webkit-transform: scale(1.1, 1.1);
  -moz-transform: scale(1.1, 1.1);
  -ms-transform: scale(1.1, 1.1);
  -o-transform: scale(1.1, 1.1);
  transform: scale(1.1, 1.1);
  z-index: 10;
}
.album.flip .front {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.album.flip .front .alpha {
  opacity: 1;
}
.album.flip .back {
  z-index: 2;
  opacity: 1;
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
.album {
  width: 20%;
  -webkit-text-size-adjust: none;
}
@media screen and (max-width: 768px) {
  .album h1, .album h2, .album h3 {
    font-size: 13px;
    line-height: 15px;
  }
  .album {
    width: 25%;
  }
}
@media screen and (min-width: 992px) {
  .album h1, .album h2, .album h3 {
    font-size: 15px;
    line-height: 17px;
  }
}
</style>

	<div class="container">
		<article id="content" class="single" role="main">
			<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
			<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
				<div class="entry-content">
					<h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'daw' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
					<?php the_content(); ?>
					<div class="albums"></div>
				</div>
			</div>
			<?php endwhile; ?>
		</article>
	</div>
<?php get_footer(); ?>