<html>
  <title>Dark Shadows</title>
  <body>
    <div class="logo"> <button type="button"><img src="https://res.cloudinary.com/dtw81jtxl/image/upload/v1468330136/logo_t_np0cvf.png" width="26%" height="6%";/> </button></div>
    <h1><span>Click button to see</span> <span>Dark</span> <span>Shadows</span></h1>
    <footer><p >&quot;Rivers Dark&quot; charcoal on paper &copy; 2008 Lori Labrie</p></footer>


    </body>
</html>
body {
  background-image: url("https://i.pinimg.com/originals/94/e5/d6/94e5d6d69afa4ddfeedcd85f29143dc8.jpg");
  background-size: cover;
  
}

h1 {
font-size: 36px;
text-align: center;
text-shadow: 2px 2px white;
}

h1 span {
display: inline-block;
}

h1 span:nth-of-type(1) {
transform: translateX(42px);
transition: transform 2s ease-in-out;
}

h1 span:nth-of-type(2) {
opacity: 0;
transition: opacity 2s ease-in-out 1s;
}

h1 span:nth-of-type(3) {
transform: translateX(-42px);
transition: transform 2s ease-in-out;
}

h1.visible span:nth-of-type(1) {
transform: translateX(0);
}

h1.visible span:nth-of-type(2) {
opacity: 1;
}

h1.visible span:nth-of-type(3) {
transform: translateX(0);
}

button {
  display: flex;
  margin-top: 2%;
  margin-left: 60%;
  justify-content: center;
  border-radius: 20px;
  
}

footer {
  display: flex;
  justify-content: center;
  color: black;
  text-shadow: 1px 1px white;
  font-size: 1.2em;
}

function toggleVisible() {
var heading = document.getElementsByTagName('h1')[0];
heading.classList.toggle('visible');
}

var button = document.getElementsByTagName('button')[0];
button.addEventListener('click', toggleVisible, false);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.