<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 >"Rivers Dark" charcoal on paper © 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);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.