HTML/CSS - base64 encoded images: created by Richard Myatt Online Editor and JavaScript Compiler

html

<!-- Created by Richard 
Myatt, edited by James 
Boblak: https://code.
sololearn.com/WUDLPY7kf40v/?
ref=app (although this image 
is a still from my own 
blender animation, you can 
paste your own.base64 over 
line 60 below :)-->
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Reference 
material-icons style sheet 
-->
  <link href="https://fonts.
googleapis.com/icon?
family=Material+Icons"
          rel="stylesheet">
  <meta charset="UTF-8">
  <title>base64 images</
title>
</head>
<body>
  <!-- HEADER -->
  <header class="header">

css

/* Created by Richard Myatt */
/******************************************************************************
TABLE OF CONTENTS
AUTHOR            - Richard Myatt
DATE              - 27 September 2017
GENERAL STYLING                - html elements and shared styles
INFO ICON AND PANEL            - styling for info icon and panel
FOOTER                         - styling for footer
COLOUR PALETTE
white                 - background for header, article and footer
silver                - body background appears as borders
rgb(230, 230, 230)    - background for info panel
rgb(100, 100, 100)    - advisory text at base of info panel
Note: https://autoprefixer.github.io was used to add the prefixed additions in
      the code below.
******************************************************************************/

// Created by Richard Myatt
/*****************************************************************************
Author:  Richard Myatt
Code activated by info button designed to show and information panel
previously hidden throught the use of 'display: none;' in the css code.
Requires a reference to material-icons in the head of the html file i.e.
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
           rel="stylesheet">
together with a reference to this script.
******************************************************************************/
// Set initial state of the information panel
var infoVisible = false;
/* This function is activated by an onclick event on the info icon setting the
   state of the display to true or false and the visibility of the panel through
   the 'display' attribute */
function showInfo(panel) {
  var elem = document.getElementById(panel);
  if(infoVisible) {
    elem.style.display = 'none';
    infoVisible = false;
  } else {
    elem.style.display = 'block';

BROWSER

Console