Changing text with one click

Question

I'm building a website with Html and Css.

When you click on the link to the website, a black background meets you with some white text appears. (Let's just say, "Hello! Click to get started!") Then when you click it, an image fades in and some new text is replaced by the old plus a navigation bar appears at the top as well.

I've got the fading images thing down, no problem. But the text is the one that's the most difficult (I use fadeAndScale animations with the text). Any help would be appreciated!

This is what I've got so far:

Website html code Website css code

(Note: I can't use Javascript and using Cloud 9...sorry...also I'm new with this website)

Please provide the relevant parts of your code that you have so far in your question, it's difficult to help you otherwise. — Patrick Hund, Apr 15 '17 at 09:52
@PatrickHund edited the question...also if I edit the question, will people who comment be notifed? — Cat Optimist, Apr 15 '17 at 10:00
Better, but please include the code in your question. The links you provide may be dead at some point in the future, rendering your question useless. — Patrick Hund, Apr 15 '17 at 10:00

score 0 · Accepted Answer · answered Apr 15 '17 at 12:25

See if help (to click works on div without js, you need tabindex). When you ask a question, please provide your code (not image of code :)

.box {
  color: #FFF;
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  background-color: #000;
  padding: 30px;
}

.state-2 {
display: none;
}

.box:focus .state-2 {
  display: block;
}

.box:focus .state-1 {
  display: none;
}

<div class="box" tabindex="0">
  <div class="state-1">Hello World</div>
  <div class="state-2">I'm Clicked!</div>
</div>

Changing text with one click

1 Answers1