Keep Calm and Carry On Coding - Solved

In this example below you will see how to do a Keep Calm and Carry On Coding - Solved with some HTML / CSS and Javascript

This awesome code was written by 101Computing, you can see more from this user in the personal repository.
You can find the original code on
Copyright 101Computing ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>Keep Calm and Carry On Coding - Solved</title>
      <link rel="stylesheet" href="css/style.css">



  <div id="poster" class="poster">
<img id="icon" src="" width="130">
<span class="and">and</span>
<span class="message" id="message">Carry on Coding</span>

<center><input type="button" value="Change Text" onClick="JavaScript: changeText();"></center>

<center><input type="button" value="Blue" onClick="JavaScript: changeColor('#3050D0');"><input type="button" value="Yellow" onClick="JavaScript: changeColor('#CEC110');"><input type="button" value="Orange" onClick="JavaScript: changeColor('#ED3300');"><input type="button" value="Red" onClick="JavaScript: changeColor('#DB0000');"></center>

<center><input type="button" value="Crown Logo" onClick="JavaScript: changePicture('');"><input type="button" value="HTML Logo" onClick="JavaScript: changePicture('');"><input type="button" value="CSS Logo" onClick="JavaScript: changePicture('');"><input type="button" value="JavaScript Logo" onClick="JavaScript: changePicture('');"></center>

    <script  src="js/index.js"></script>



/*Downloaded from */
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%;

/*Downloaded from */
function changeText() {
  var text;
  text=prompt("Type a message (e.g. Carry On):");

function changeColor(colorCode) {
  document.getElementById("poster").style.backgroundColor = colorCode;

function changePicture(url) {
  document.getElementById("icon").src = url;