Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
64 lines (63 sloc) 1.76 KB
<!DOCTYPE html>
<link href="|Roboto:400,500" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
body {
margin: 0;
font-size: 1em;
background-color: aquamarine;
border: palegreen solid 15px;
/* bisque darkturquoise coral mediumspringgreen palegreen turquoise */
#timer {
font-size: 1.5em;
font-weight: 500;
.flex--row-reverse {
flex-direction: row-reverse;
justify-content: center;
.flex--column {
flex-direction: column;
.attribution {
font-size: 0.5em;
text-align: right;
.lookaway {
width: 200px;
height: 200px;
display: block;
margin: 0 auto;
.title-box {
align-items: flex-start;
.content-box {
border-right: 1px solid #333;
<body class="pv1">
<div class="flex flex--row-reverse p1">
<div class="flex flex--column pv1 pl2 title-box">
<div class="pt3">
<img src="lookaway.gif" alt="An animated gif that says to look away" class="lookaway"/>
<p class="attribution">Gif by <a href="" target="_blank" rel="noreferrer">@feibim</a></p>
<div class="flex flex--column pr2 content-box">
<div class="mt5">
<p id="timer" class="right pv1">&nbsp;</p>
<p class="right">Every 20 minutes</p>
<p class="right">Take a 20 second break</p>
<p class="right">Look 20 meters away.</p>
<script src="timer.js"></script>