You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

198 lines
3.9 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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;
}
}
</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>