|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
<head>
|
|
|
<meta charset="utf-8">
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
|
<link rel='stylesheet' href='http://www.cnap.graphismeenfrance.fr/faune/styles/faune-fontes.css'>
|
|
|
|
|
|
<style>
|
|
|
@font-face {
|
|
|
font-family: faune;
|
|
|
src: url(Faune-TextRegular.otf);
|
|
|
}
|
|
|
|
|
|
@font-face {
|
|
|
font-family: fauneit;
|
|
|
src: url(Faune-DisplayBoldItalic.otf);
|
|
|
}
|
|
|
|
|
|
@font-face {
|
|
|
font-family: faunei;
|
|
|
src: url(Faune-TextItalic.otf);
|
|
|
}
|
|
|
|
|
|
body {
|
|
|
background: white;
|
|
|
margin-top: 2.5%;
|
|
|
margin-left: 18%;
|
|
|
color: #193bc4;
|
|
|
white-space: pre-wrap;
|
|
|
font-family: faune, sans-serif;
|
|
|
font-size: 16px;
|
|
|
text-align: 22px;
|
|
|
text-justify: inter-word;
|
|
|
columns: 420px;
|
|
|
column-gap: 24px;
|
|
|
column-fill: auto; /* balance */
|
|
|
width: 1500px;
|
|
|
height: 92%;
|
|
|
position: absolute;
|
|
|
overflow-y: hidden;
|
|
|
}
|
|
|
|
|
|
.nav {
|
|
|
height: 100%;
|
|
|
width: 16%;
|
|
|
position: fixed;
|
|
|
z-index: 1;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
background: linear-gradient(to right, #193bc4, white);
|
|
|
overflow-x: hidden;
|
|
|
text-align: center;
|
|
|
color: yellow;
|
|
|
}
|
|
|
|
|
|
|
|
|
::selection {
|
|
|
background: #ffce3f;
|
|
|
}
|
|
|
|
|
|
a {
|
|
|
color: yellow;
|
|
|
text-decoration: none;
|
|
|
}
|
|
|
|
|
|
|
|
|
h1{
|
|
|
font-size: 100px;
|
|
|
font-family: fauneit;
|
|
|
line-height: 92px;
|
|
|
margin-top: 16%;
|
|
|
}
|
|
|
|
|
|
.printtit{
|
|
|
display: none;
|
|
|
}
|
|
|
|
|
|
.button {
|
|
|
background-color: Transparent;
|
|
|
background-repeat:no-repeat;
|
|
|
border: 0.5px solid yellow;
|
|
|
border-radius: 5px;
|
|
|
cursor: pointer;
|
|
|
overflow: hidden;
|
|
|
outline:none;
|
|
|
color: yellow;
|
|
|
font-size: 16px;
|
|
|
width: 30px;
|
|
|
height: 25px;
|
|
|
padding: 3px 3px;
|
|
|
}
|
|
|
|
|
|
.button2 {
|
|
|
background-color: Transparent;
|
|
|
background-repeat:no-repeat;
|
|
|
border: none;
|
|
|
cursor: pointer;
|
|
|
font-size: 16px;
|
|
|
}
|
|
|
|
|
|
.navp{
|
|
|
line-height: 30px;
|
|
|
}
|
|
|
|
|
|
textarea{
|
|
|
font-family: faune, sans-serif;
|
|
|
font-size: 16px;
|
|
|
text-align: 26px;
|
|
|
color: #193bc4;
|
|
|
}
|
|
|
|
|
|
#output{
|
|
|
white-space: pre-wrap;
|
|
|
}
|
|
|
|
|
|
.credit{
|
|
|
padding-top: 75px;
|
|
|
font-size: 12px;
|
|
|
line-height: 15px;
|
|
|
}
|
|
|
|
|
|
@media print {
|
|
|
|
|
|
body {
|
|
|
columns: 250px;
|
|
|
column-gap: 25px;
|
|
|
width: 1000px;
|
|
|
height: 96%;
|
|
|
overflow-y: scroll;
|
|
|
font-size: 12px;
|
|
|
text-align: 15px;
|
|
|
margin-left:3%;
|
|
|
}
|
|
|
|
|
|
.nav{
|
|
|
display: none;
|
|
|
}
|
|
|
|
|
|
.printtit{
|
|
|
display: inline-block;
|
|
|
text-align: center;
|
|
|
font-size: 15px;
|
|
|
}
|
|
|
|
|
|
h1{
|
|
|
font-style: oblique;
|
|
|
font-size: 36px;
|
|
|
}
|
|
|
|
|
|
.ta{
|
|
|
display: none;
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
@media only screen and (max-width: 600px) {
|
|
|
body {
|
|
|
columns: 280px;
|
|
|
margin-left: 21%;
|
|
|
height: 94%;
|
|
|
margin-top: 5%;
|
|
|
}
|
|
|
|
|
|
.nav {
|
|
|
width: 19%;
|
|
|
}
|
|
|
|
|
|
h1{
|
|
|
font-size: 48px;
|
|
|
line-height: 45px;
|
|
|
}
|
|
|
|
|
|
.button {
|
|
|
font-size: 12px;
|
|
|
width: 24px;
|
|
|
height: 24px;
|
|
|
padding: 3px 3px;
|
|
|
}
|
|
|
|
|
|
.credit{
|
|
|
padding-top: 45px;
|
|
|
font-size: 10px;
|
|
|
line-height: 13px;
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
</style>
|
|
|
<title></title>
|
|
|
|
|
|
|
|
|
|
|
|
</head>
|
|
|
<body><div class="nav"><h1><a href="index_ori.html">Z<br>E<br>R<br>O</a></h1><p class="navp"><a href="zero.html"><button class="button">∙</button></a><br><a href="zero2.html"><button class="button">∶</button></a><br><input type="button" class="button" value="⎙" onClick="window.print()"><br><button class="button"><a href="../" style="font-size: 14px;">☖</a></button></p><p class="credit">Original Artistic Response<br> by Ogutu MURAYA<br> Reinpreted <br> by Euna LEE</p></div><div class="printtit"><h1>Zero</h1><br>by Ogutu Muraya<br><br><br><br><br><br></div><div><span style="font-family: faunei">Zero is zero but what else can it be?</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<form name="myform">
|
|
|
<p class="ta">Zero is <textarea name="inputtext" cols="44" rows="1" onKeyDown={this.onEnterPress}></textarea> <input type="button" class="button2" style="color:#193bc4" value="✒" onClick="addtext();"></p>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<p id="output"></p>
|
|
|
</form>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<script language="javascript" type="text/javascript">
|
|
|
/*var c = 0 and add c before "zero is" and c=c+1 on next line*/
|
|
|
|
|
|
function addtext() {
|
|
|
var newtext = document.myform.inputtext.value;
|
|
|
|
|
|
var p = document.getElementById("output")
|
|
|
p.innerHTML += "Zero is " + newtext + "<br><br>";
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|