Teletext

index.html

<div id='header'>
  &nbsp;
</div>
<div id='main'>
  <h1>Lorem ipsum</h1>
  <h2>Lorem ipsum dolor sit amet</h2>
  
    <div class='listleft'>
      Consectetur adipisicing elit
    </div>
    <div class='listright'>
      300
    </div>
    <div class='listleft'>
      Sed do eiusmod tempor
    </div>
    <div class='listright'>
      301
    </div>
    <div class='listleft'>
      Incididunt ut labore et dolore
    </div>
    <div class='listright'>
      302
    </div>
    <div class='listleft'>
      Magna aliqua
    </div>
    <div class='listright'>
      303
    </div>
  
  <hr>
  
  <h3>Lorem ipsum dolor sit amet</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean fringilla gravida pulvinar. Ut scelerisque, tortor eget tempus maximus, eros enim mattis nibh, non elementum ligula turpis sollicitudin odio. Morbi imperdiet lacinia dolor in vulputate. Nullam vel viverra arcu. Suspendisse a nibh eu ex semper condimentum a eget orci. Integer nec ipsum sollicitudin, imperdiet magna eu, eleifend magna. Nulla et lobortis tellus.</p>

<p>Donec facilisis augue et orci congue maximus. Ut accumsan erat eget dictum lacinia. Duis eu purus et arcu aliquet cursus a vel nisi. Sed et neque ut sem consequat egestas. Phasellus faucibus nunc sagittis tortor venenatis, eu volutpat ipsum iaculis. Vivamus eleifend commodo nibh eu accumsan. Integer a elit mattis, varius lorem eget, bibendum nisi. In vitae libero blandit, ultricies erat vel, consectetur orci. Praesent nec leo ut nulla luctus scelerisque ac nec libero. Nunc mollis dapibus lacus a finibus. Curabitur cursus libero vel dui volutpat ornare. Aenean dignissim pulvinar aliquet. Curabitur cursus eros nibh, eu ornare lacus aliquam quis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
</div>
<div id='footer'>
  <div id='red'>
    Lorem
  </div>
  <div id='green'>
    Ipsum
  </div>
  <div id='yellow'>
    Dolor
  </div>
  <div id='blue'>
    Sit amet
  </div>
</div>

script.js

var months = [
  "Jan",
  "Feb",
  "Mar",
  "Apr",
  "May",
  "Jun",
  "Jul",
  "Aug",
  "Sep",
  "Oct",
  "Nov",
  "Dec"
];
var days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

document.addEventListener("DOMContentLoaded", function(e) {

function tick() {
  var currTime = new Date();
  var currMin;
  var currHour;

  //leading zeroes
  if (String(currTime.getMinutes()).length == 1) {
    currMin = "0" + String(currTime.getMinutes());
  } else {
    currMin = String(currTime.getMinutes());
  }

  if (String(currTime.getHours()).length == 1) {
    currHour = "0" + String(currTime.getHours());
  } else {
    currHour = String(currTime.getHours());
  }

  document.getElementById("header").innerHTML =
    days[currTime.getDay()] +
    " " +
    months[currTime.getMonth()] +
    " " +
    currTime.getDate() +
    " " +
    currHour +
    ":" +
    currMin;
}

var secondCheck = setInterval(tick, 1000);
  
});

style.css

body {
  background-color:black;
  color:#ffffff;
  font-family: 'Press Start 2P', monospace;
}

#main, #header, #footer {
  width:850px;
  margin-left:auto;
  margin-right:auto;
}

#header {
  text-align:right;
}

#main {
  min-height:730px;
}

.listleft, .listright {
  float:left;
  margin:5px 0px;
}

.listleft {
  width:90%;
  color:#00ffff;
}

.listright {
  width:10%;
  text-align:right;
}

h1 {
  text-align:center;
  background-color:#0000ff;
  color:#ffff00;
  margin:0px;
  padding:20px 0px;
}

h3 {
  color:#ffff00;
}

hr {
  height:6px;
  width:100%;
  color:#0000ff;
  background-color:#0000ff;
  border:1px solid #0000ff;
  margin:20px 0px;
}

#red, #green, #yellow, #blue {
  width:25%;
  display:inline;
  border:0px;
  float:left;
  text-align:center;
}

#red {
  color:#ff0000;
}

#green {
  color:#00ff00;
}

#yellow {
  color:#ffff00;
}

#blue {
  color:#00ffff;
}

@media screen and (max-width: 850px) {
  #header, #main, #footer {
    width:100%;
  }
}

teletext.markdown

Teletext

Just a nostalgia moment. Vanilla HTML, CSS, JS.

A Pen by J Sanderson on CodePen.

License.