Skip to content

Instantly share code, notes, and snippets.

@TimPietrusky
Created June 9, 2013 17:24
Show Gist options
  • Save TimPietrusky/5744394 to your computer and use it in GitHub Desktop.
Save TimPietrusky/5744394 to your computer and use it in GitHub Desktop.
A CodePen by Tim Pietrusky. Breaking Bad - A tribute to the best fucking series in the world. Just some CSS and SVG. I created the SVG from the original Logo with Photoshop (path) and Illustrator (SVG). The making of: http://timpietrusky.com/breaking-bad-logo The original Logo is © by American Movie Classics Company LLC.
<!--
Breaking Bad
A tribute to the best fucking series in the world.
Just some CSS and SVG. I created the SVG from the original Logo with
Photoshop (path) and Illustrator (SVG).
The original Logo is © by American Movie Classics Company LLC.
2012 by Tim Pietrusky
timpietrusky.com
-->
<section id="breakingbad">
<span class="chemical-element">
Br
<div class="desc" role="top-left">79.904</div>
<div class="desc" role="top-right">
-1
+1
+5
</div>
<div class="desc big" role="bottom-left-1">35</div>
<div class="desc" role="bottom-left-2">2-8-18-7</div>
</span>
<span class="title-1">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="309px" height="110px" viewBox="-7.328 -8.539 309 110" enable-background="new -7.328 -8.539 309 110" xml:space="preserve">
<path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M234.672,83.211c1.315-3.006,4.31-4.078,5-4.25 c2-0.5-5,7.625,4,13.875C246.939,95.105,231.071,91.442,234.672,83.211z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M239.547,58.836c-1.689,0.422-4.875,3.5-3.25,9.125c0.646,2.237,3.795,3.512,6.345,4.617c1.575,0.682,2.558,1.774,3.879,2.201c1.694,0.547,3.702,0.403,5.651,1.182c3.125,1.25,17-3.375,24.75-0.875s10.125,11.875-1.375,14.125s-26,2.125-24.375,3.25s14.875,2.75,23.375-0.125s10.75-2.5,13.25-10.375s-9.625-13-23.125-11.75s-22.25-0.75-22.25-2.375c0,3.01-0.796-0.809-1.287-4.438C240.804,60.949,241.36,58.383,239.547,58.836z"/>
<g>
<g>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M281.297,30.461c0-1.5-11.625-6.125-14.875-7.125c-2.4-0.738-21.808-3.803-27.125,10c-6.5,16.875,10.398,26.224,11.375,27.125c1.625,1.5,8.5,2.375,14.125,0.75s12.5-9.125,15.125-12S281.297,31.961,281.297,30.461z M272.214,47.756c-0.713,4.616-4.275,7.217-7.917,8.08c-4.355,1.032-7.909,1.136-11.021-2.343c-4.526-5.062-3.002-18.75,6.753-19.821c7.16-0.786,9.268,3.681,12.143,6.789C273.6,42.004,272.496,45.934,272.214,47.756z"/>
</g>
</g>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M248.172,29.711c-1.362,0.545,14.754-13.052,23.875,2.5C269.023,27.055,249.813,29.054,248.172,29.711z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M277.922,26.586c-0.91,0,5.75-3.875,10.75,0.875c4.649,4.417,0.143,8.5-0.875,8.5c-3,0-7-0.125-1.625-7.25C289.032,24.919,277.895,26.586,277.922,26.586z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M180.672,71.336c1.031-0.75,3.625-3.625,4.625-5s-0.125-34.875-0.875-35.75s0-5.875-1.125-6s-3.125-0.375-2.875-1.125s8.5-1.75,9.875,1.125s3.25,3.125,4.125,2.875s2.375,4.625,1.375,5.5s2.625,1.125,5-1.5s8.375-4.625,15.875-5.375c6.441-0.644-6.66-3.593-8.375-3.25c-1.875,0.375,3.25-3.125,10.75-0.75s9.375,8.5,9.625,13.375c0.249,4.848,0.017,29.298,1.25,32.875c1.25,3.625,3.125,3,3.75,3.375s-13.625,0.75-14.625,0.25s2.625-2.125,4.125-4.375s-2.375-3.125-7.25-3.875c-0.378-0.058-1.122-33.775-1.5-30.75c0.125-1-6-6.5-17.5,6.5c-1.037,1.172,0.162,25.411-1.625,24.875c-1.25-0.375-5.375,1.25-3.75,3.625s5.625,3.5,4.5,3.75S179.297,72.336,180.672,71.336z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M160.672,70.461c1.25-0.375,2.25-0.25,2.125-4.25s0.25-30.625,0.5-31.625s1.625-0.75,2.375-1.75s0-5.125-1-5.5s-5.75-2.625-6.25-3.5s5-4.625,9.625-3.75c3.078,0.583,7.875,1.625,4,7.875c-2.15,3.469,1.827,34.449,0,39.625c-0.75,2.125,2.125,3.125,2.875,4.125c0.645,0.86-13.007,1.008-14,0.125C160.778,71.708,160.107,70.63,160.672,70.461z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M167.547,7.586c2.535-0.4,5.675-3.839,2.125-6.375c-4.035-2.882-6.007,0.215-6.5,0.75C161.122,4.182,164.722,8.032,167.547,7.586z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M100.672,71.336c-0.952,0,4.5-3.875,5-5.5s-0.5-60.75-0.5-60.75s-2.375-3.5-4.75-3.625s8.125-2.875,10.125,0.5s0.125,10,0.75,9.625s4.375,3,5,2.75s0.5,26.375,0.375,26.75s1.5,4.875,1.25,5.625s20.375-17.25,20.75-18.375s-1-2.625-4.125-4.625s16.25-2,18.625,0.875c0.14,0.169-7.432,3.081-6.875,4.75c0.125,0.375,0.75,2.75-0.75,2.75s-14.375,13.5-14.625,14.5s21.125,25.125,24.25,24.5c1.89-0.378-11.431,2.461-17.875,0.5c-2.875-0.875,4.625-3,3.875-4s-16.875-16.625-20.25-18.25s-4,3.125-4.75,3.625s1,11-0.375,11.375s-4.75,2.5-3.75,2.625
s0.75,3.375,3.875,4.625C119.88,73.169,103.463,71.336,100.672,71.336z"/>
<g>
<g>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M91.679,69.193c0.218-0.296-0.156-27.612-0.072-27.905c2.628-9.174-4.629-22.5-16.935-20.411c-3.036,0.516,6.358,2.869,7.721,3.457c3.471,1.497,4.934,4.976,3.279,5.46c-4.03,1.179-6.902-0.563-7.417-1c-0.799-0.679-14.84-0.877-15.333,0.333c0.01-0.024-3.955,1.886-5.167,0.5c-0.301-0.343-1.283-3.212-1.583-3.083c-1.682,0.721-6,11.5,2.417,11.417c7.517-0.074-1.568-4.709,15.917-5.5c6.846-0.31,7.442,5.796,7.302,7.107c-0.342,3.192-2.755,4.375-6.135,4.143c-6.083-0.417-22.167,3.417-25.667,11.917c-3.39,8.231,8.167,19.991,13.917,17.167c2.913-1.431-3.357-0.902-3.083-5.083c0.089-1.359,3.64-0.825,6.578-1.133c3.157-0.332,5.736-1.469,6.422-1.95c3.917-2.75,9.333-4,11.25-0.917c1.337,2.15,6.636,9.822,8.833,9.333C95.675,72.655,91.963,69.342,91.679,69.193z M80.755,56.877c-3.333,4.25-10.667,4.583-14,4.833c-3.333,0.25-8.083-1.167-6.333-5.667s13.45-9.873,19.167-8.833C81.527,47.563,80.4,57.331,80.755,56.877z"/>
</g>
</g>
<g>
<g>
<path fill="#fff" d="M46.088,45.377c-0.833-27.333-22.667-23.667-26.917-23.167s-19.5,2.5-19.167,27.667c0.333,25.167,23,24,22.417,23.833C20.066,73.038,6.05,64.78,10.505,62.127c0.965-0.574,10.617,2.468,11.809,2.718c8.407,1.765,17.338-1.1,17.607-1.885c-0.351,1.02-5.816,8.564-6.917,8.917c11.641-3.732,13.5-13.833,9.25-14.833s-4.75,1-14.583,3.75c-8.896,2.487-18.104-10.349-15.333-13.75C14.527,44.358,46.122,46.48,46.088,45.377z M24.838,22.877c7.75,0.25,6.917,1.583,0.5,3c-6.417,1.417-10.75,0.167-11.417,0.417C12.342,26.887,17.088,22.627,24.838,22.877z M13.672,40.377c0.684-0.214,0.667-9.583,11.5-9.75c9.755-0.15,9.824,9.594,9.417,10.083C34.172,41.211,12.338,40.794,13.672,40.377z"/>
</g>
</g>
</svg>
</span>
<br>
<span class="chemical-element">
Ba
<div class="desc" role="top-left">137.33</div>
<div class="desc" role="top-right">+2</div>
<div class="desc medium" role="bottom-left-1">56</div>
<div class="desc" role="bottom-left-2">2-8-18-7</div>
</span>
<span class="title-2">
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="63px" height="91px" viewBox="-6.379 -7.374 63 91" enable-background="new -6.379 -7.374 63 91" xml:space="preserve">
<g>
<g>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M48.455,71.626c-0.167-2.333-2.333-66.5-1.167-69c1.851-3.966-15.406-2.701-11.5-1c10.333,4.5,8.333,10,7.5,11.833c-0.833,1.833-6,1.333-5.333,2.833c0.667,1.5,0.667,18.5-1.333,19c-3.996,0.999-0.838-2.276-12.833-5.667c-8.569-2.422-13.6,1.171-17.367,4.968c-3.713,3.743-5.559,7.84-5.133,7.698c-1.523,0.508-6.476,33.714,22.667,35.333c5.335,0.296,9.349-3.76,7.667-4c0.636,0.091-11.414,3.298-14.5,1c-7.758-5.777-5.298-10.445-5.167-9.833c0.5,2.333,8.167,5.333,13.5,4.167c5.121-1.121,9.545-7.824,12.833-7.167c0.833,0.167,0.667,5,0.5,6c-0.167,1,2.833-0.333,4.167,0.5c1.333,0.833,0.5,2.667,1,5.333s7.5,1.5,8,0.667C52.455,73.46,48.621,73.96,48.455,71.626z M37.455,47.793c-0.5,3.667-1.833,14.167-13,15.833c-11.725,1.75-10.442-13.694-10.5-13.5c0.454-1.515-3.167-14.167,11.333-15.333C31.25,34.313,38.048,43.439,37.455,47.793z"/>
</g>
</g>
</svg>
</span>
<canvas id="smoke"></canvas>
</section>
<!-- Breaking Bad theme -->
<audio></audio>
<div id="player">
<svg role="paused" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.0" id="layer1" width="40px" height="40px" viewBox="0 0 75 75">
<g><polygon
points="39.389,13.769 22.235,28.606 6,28.606 6,47.699 21.989,47.699 39.389,62.75 39.389,13.769"
style="stroke:#fff;stroke-width:5;stroke-linejoin:round;fill:#fff;" />
<path
d="M 48.651772,50.269646 69.395223,25.971024"
style="fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cc" />
<path
d="M 69.395223,50.269646 48.651772,25.971024"
style="fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cc" />
</g>
</svg>
<svg role="playing" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://web.resource.org/cc/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.0" width="40px" height="40px" viewBox="0 0 75 75">
<g>
<polygon
points="39.389,13.769 22.235,28.606 6,28.606 6,47.699 21.989,47.699 39.389,62.75 39.389,13.769" style="stroke:#fff;stroke-width:5;stroke-linejoin:round;fill:#fff;"
/>
<path
d="M 48.128,49.03 C 50.057,45.934 51.19,42.291 51.19,38.377 C 51.19,34.399 50.026,30.703 48.043,27.577" style="fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round"/>
<path
d="M 55.082,20.537 C 58.777,25.523 60.966,31.694 60.966,38.377 C 60.966,44.998 58.815,51.115 55.178,56.076" style="fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round"/>
<path
d="M 61.71,62.611 C 66.977,55.945 70.128,47.531 70.128,38.378 C 70.128,29.161 66.936,20.696 61.609,14.01"
style="fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round"/>
</g>
</svg>
</div>
/**
Breaking Bad
A tribute to the best fucking series in the world.
The making of: http://timpietrusky.com/breaking-bad-logo
Just some CSS and SVG. I created the SVG from the original Logo with
Photoshop (path) and Illustrator (SVG).
The original Logo is © by American Movie Classics Company LLC.
2012 by Tim Pietrusky
timpietrusky.com
**/
/**
* @Gray Ghost Visuals: The theme is for you!
*
* Thanks to televisiontunes.com for the Breaking Bad theme
* http://www.televisiontunes.com/Breaking_Bad.html
*/
var audio = $('audio').get(0),
_paused = $('svg[role="paused"]'),
_playing = $('svg[role="playing"]');
audio.src = Modernizr.audio.ogg ?
'http://timpietrusky.com/cdn/breaking_bad_intro.ogg' :
'http://timpietrusky.com/cdn/breaking_bad_intro.mp3';
_paused.click(function() {
$(this).css('display', 'none');
_playing.css('display', 'block');
audio.play();
});
_playing.click(function() {
$(this).css('display', 'none');
_paused.css('display', 'block');
audio.pause();
});
// Set to start
$("audio").bind('ended', function(){
_playing.css('display', 'none');
_paused.css('display', 'block');
this.currentTime = 0;
});
/**
* Thanks to Ed Welch for his "smoke"-effect
* http://astronautz.com/wordpress/creating-realistic-particle-effect-with-html5-canvas/
*/
var lastRender = new Date().getTime();
var context;
var smoke_1 = new ParticleEmitter();
var smoke_2 = new ParticleEmitter();
var smoke_3 = new ParticleEmitter();
var CANVAS_WIDTH = 500;
var CANVAS_HEIGHT = 400;
var dirtyLeft = 0;
var dirtyTop = 0;
var dirtyRight = CANVAS_WIDTH;
var dirtyBottom = CANVAS_HEIGHT;
var windVelocity = 0.01;
var count = 0;
window.requestAnimFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function ( c ) {
window.setTimeout( c, 16.6 );
};
})();
init();
function init() {
var canvas = $('#smoke').get(0);
if (canvas.getContext) {
context = canvas.getContext('2d');
} else {
return;
}
canvas.width = CANVAS_WIDTH;
canvas.height = CANVAS_HEIGHT;
var img_smoke_1 = new Image(),
img_smoke_2 = new Image(),
img_smoke_3 = new Image();
img_smoke_1.src = 'http://timpietrusky.com/cdn/smoke_1.png';
img_smoke_2.src = 'http://timpietrusky.com/cdn/smoke_2.png';
img_smoke_3.src = 'http://timpietrusky.com/cdn/smoke_3.png';
smoke_1.m_alpha = 0.2;
smoke_3.m_speed = 0.001;
smoke_1.init(.142, .631, 90, img_smoke_1);
smoke_2.m_alpha = 0.3;
smoke_2.init(.322, .753, 90, img_smoke_2);
smoke_3.m_alpha = 0.1;
smoke_3.m_speed = 0.02;
smoke_3.init(.222, .553, 90, img_smoke_3);
requestAnimFrame(render);
}
function ParticleEmitter() {
this.m_x;
this.m_y;
this.m_dieRate;
this.m_image;
this.m_speed = 0.04;
this.m_alpha = 1.0;
this.m_listParticle = [];
// ParticleEmitter().init function
// xScale = number between 0 and 1. 0 = on left side 1 = on top
// yScale = number between 0 and 1. 0 = on top 1 = on bottom
// particles = number of particles
// image = smoke graphic for each particle
this.init = function(xScale, yScale, particles, image) {
// the effect is positioned relative to the width and height of the
// canvas
this.m_x = CANVAS_WIDTH * xScale;
this.m_y = CANVAS_HEIGHT * yScale;
this.m_image = image;
this.m_dieRate = 0.95;
// start with smoke already in place
for ( var n = 0; n < particles; n++) {
this.m_listParticle.push(new Particle());
this.m_listParticle[n].init(this, n * 50000 * this.m_speed);
}
}
this.update = function(timeElapsed) {
for ( var n = 0; n < this.m_listParticle.length; n++) {
this.m_listParticle[n].update(timeElapsed);
}
}
this.render = function(context) {
for ( var n = 0; n < this.m_listParticle.length; n++) {
this.m_listParticle[n].render(context);
}
}
};
function Particle() {
this.m_x;
this.m_y;
this.m_age;
this.m_xVector;
this.m_yVector;
this.m_scale;
this.m_alpha;
this.m_canRegen;
this.m_timeDie;
this.m_emitter;
this.init = function(emitter, age) {
this.m_age = age;
this.m_emitter = emitter;
this.m_canRegen = true;
this.startRand();
}
this.isAlive = function() {
return this.m_age < this.m_timeDie;
}
this.startRand = function() {
// smoke rises and spreads
this.m_xVector = Math.random() * 0.5 - 0.25;
this.m_yVector = -1.5 - Math.random();
this.m_timeDie = 20000 + Math.floor(Math.random() * 12000);
var invDist = 1.0 / Math.sqrt(this.m_xVector * this.m_xVector
+ this.m_yVector * this.m_yVector);
// normalise speed
this.m_xVector = this.m_xVector * invDist * this.m_emitter.m_speed;
this.m_yVector = this.m_yVector * invDist * this.m_emitter.m_speed;
// starting position within a 20 pixel area
this.m_x = (this.m_emitter.m_x + Math.floor(Math.random() * 20) - 10);
this.m_y = (this.m_emitter.m_y + Math.floor(Math.random() * 20) - 10);
// the initial age may be > 0. This is so there is already a smoke trail
// in
// place at the start
this.m_x += (this.m_xVector + windVelocity) * this.m_age;
this.m_y += this.m_yVector * this.m_age;
this.m_scale = 0.01;
this.m_alpha = 0.0;
}
this.update = function(timeElapsed) {
this.m_age += timeElapsed;
if (!this.isAlive()) {
// smoke eventually dies
if (Math.random() > this.m_emitter.m_dieRate) {
this.m_canRegen = false;
}
if (!this.m_canRegen) {
return;
}
// regenerate
this.m_age = 0;
this.startRand();
return;
}
// At start the particle fades in and expands rapidly (like in real
// life)
var fadeIn = this.m_timeDie * 0.05;
var startScale;
var maxStartScale = 0.3;
if (this.m_age < fadeIn) {
this.m_alpha = this.m_age / fadeIn;
startScale = this.m_alpha * maxStartScale;
// y increases quicker because particle is expanding quicker
this.m_y += this.m_yVector * 2.0 * timeElapsed;
} else {
this.m_alpha = 1.0 - (this.m_age - fadeIn)
/ (this.m_timeDie - fadeIn);
startScale = maxStartScale;
this.m_y += this.m_yVector * timeElapsed;
}
// the x direction is influenced by wind velocity
this.m_x += (this.m_xVector + windVelocity) * timeElapsed;
this.m_alpha *= this.m_emitter.m_alpha;
this.m_scale = 0.001 + startScale + this.m_age / 4000.0;
}
this.render = function(ctx) {
if (!this.isAlive())
return;
ctx.globalAlpha = this.m_alpha;
var height = this.m_emitter.m_image.height * this.m_scale;
var width = this.m_emitter.m_image.width * this.m_scale;
// round it to a integer to prevent subpixel positioning
var x = Math.round(this.m_x - width / 2);
var y = Math.round(this.m_y + height / 2);
ctx.drawImage(this.m_emitter.m_image, x, y, width, height);
if (x < dirtyLeft) {
dirtyLeft = x;
}
if (x + width > dirtyRight) {
dirtyRight = x + width;
}
if (y < dirtyTop) {
dirtyTop = y;
}
if (y + height > dirtyBottom) {
dirtyBottom = y + height;
}
}
};
function render() {
// time in milliseconds
var timeElapsed = new Date().getTime() - lastRender;
lastRender = new Date().getTime();
context.clearRect(dirtyLeft, dirtyTop, dirtyRight - dirtyLeft, dirtyBottom - dirtyTop);
dirtyLeft = 1000;
dirtyTop = 1000;
dirtyRight = 0;
dirtyBottom = 0;
smoke_1.update(timeElapsed);
smoke_1.render(context);
smoke_2.update(timeElapsed);
smoke_2.render(context);
smoke_3.update(timeElapsed);
smoke_3.render(context);
windVelocity += (Math.random() - 0.5) * 0.002;
if (windVelocity > 0.015) {
windVelocity = 0.015;
}
if (windVelocity < 0.0) {
windVelocity = 0.0;
}
requestAnimFrame(render);
}
* {
box-sizing: border-box;
}
body {
margin-top:15px;
background:#000;
background:
linear-gradient(left, rgba(33,53,18,.3) 0%,rgba(38,88,19,.4) 30%,rgba(73,91,9,.3) 74%,rgba(24,43,4,.3) 100%),
#000;
background:
linear-gradient(to left, rgba(33,53,18,.3) 0%,rgba(38,88,19,.4) 30%,rgba(73,91,9,.3) 74%,rgba(24,43,4,.3) 100%),
#000;
}
section {
position:relative;
width:400px;
height:330px;
margin:0 auto;
overflow:visible;
}
span {
color:#fff;
}
.chemical-element {
width:165px;
height:165px;
position:relative;
font: bold 95px Arial;
color:#fafffb;
padding:25px 25px 25px 30px;
border:3px solid #DDFFE2;
display:inline-block;
background: linear-gradient(-45deg, rgba(92,190,115,1) 1%,rgba(24,43,4,1) 100%);
box-shadow:inset 0 0 0 1px rgba(0, 0, 0, .15);
}
.chemical-element:nth-child(4) {
margin-left:165px;
padding-left:23px;
}
.desc {
position:absolute;
font: bold 13px Arial;
color:rgba(244, 247, 245, .95);
}
.big {
font: bold 20px Arial;
}
.medium {
font: bold 17px Arial;
}
div[role="top-left"] {
top:8px;
left:10px;
}
div[role="top-right"] {
top:8px;
right:5px;
text-align:right;
width:25px;
}
div[role="bottom-left-1"] {
bottom:20px;
left:5px;
text-align:left;
}
div[role="bottom-left-2"] {
bottom:5px;
left:5px;
text-align:left;
}
.title-1,
.title-2 {
width:50px;
display:inline-block;
height: 130px;
vertical-align: bottom;
}
.title-2 {
height: 134px;
}
#smoke {
position:absolute;
z-index:-1;
left:30%;
top:-15px;
}
audio {
display:none;
}
#player {
position:fixed;
top:20px;
right:20px;
transition:all .3s ease-in;
opacity:.1;
cursor:pointer;
}
#player:hover {
opacity:1;
}
#player svg[role="playing"] {
display:none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment