HTML ⛶ <div id="poster" class="poster"> <img id="icon" src="https://www.101computing.net/wp/wp-content/uploads/Keep-calm-and-carry-on-crown.png" width="130"> <p> <span>Keep</span> <span>Calm</span> <span class="and">and</span> <span class="message" id="message">Carry on Coding</span> </p> </div> <center><input type="button" value="Change Text" onClick="JavaScript: changeText();"></center>
CSS 🛠⛶ body { background-color: #FFFFFF; color: #FFFFFF; text-align: center; font-family: "Gill Sans", "Gill Sans MT", "Arial"; } .poster { background-color: #db0000; margin: 10px auto; max-width: 350px; padding: 30px 10px; border: 5px double #FFFFFF; } .poster p { font-size: 60px; letter-spacing: 2px; text-transform: uppercase; margin-top: 30px; margin-bottom: 0; } .poster p span { display: block; } .poster p span.and { font-size: 50%; } .poster p span.message { font-size: 100%; }
JavaScript ⛶ function changeText() { var text; text=prompt("Type a message (e.g. Carry On):"); document.getElementById("message").innerHTML=text; }