2017-10-01 21:01:18 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
2023-12-27 16:32:10 +01:00
|
|
|
|
2017-10-04 01:12:15 +02:00
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<title>CSS example</title>
|
2020-09-29 19:23:00 +02:00
|
|
|
<link type="text/css" rel="stylesheet" href="css/style.css" />
|
|
|
|
|
<link type="text/css" rel="stylesheet" href="css/custom.css" />
|
2017-10-04 01:12:15 +02:00
|
|
|
</head>
|
2023-12-27 16:32:10 +01:00
|
|
|
|
2017-10-04 01:12:15 +02:00
|
|
|
<body>
|
|
|
|
|
<input type="radio" id="radio-page-1" name="pages">
|
|
|
|
|
<input type="radio" id="radio-page-2" name="pages">
|
2017-10-06 19:31:01 +02:00
|
|
|
<input type="radio" id="radio-page-3" name="pages">
|
2017-10-04 01:12:15 +02:00
|
|
|
<nav>
|
|
|
|
|
<li>
|
2017-10-06 19:31:01 +02:00
|
|
|
<ul>BOTSYM.EXE</ul>
|
|
|
|
|
<ul tabindex="0" class="list-symbol">File
|
2017-10-04 01:12:15 +02:00
|
|
|
<li>
|
|
|
|
|
<ul>Save</ul>
|
|
|
|
|
<ul>Save As</ul>
|
|
|
|
|
<ul>Exit</ul>
|
|
|
|
|
</li>
|
2017-10-06 19:31:01 +02:00
|
|
|
</ul>
|
|
|
|
|
<ul tabindex="0" class="list-symbol">Edit
|
2017-10-04 01:12:15 +02:00
|
|
|
<li>
|
|
|
|
|
<ul>Scale</ul>
|
|
|
|
|
<ul>Something</ul>
|
2017-10-06 19:31:01 +02:00
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
<ul tabindex="0" class="list-symbol">View
|
|
|
|
|
<li>
|
|
|
|
|
<ul>Style</ul>
|
|
|
|
|
<ul>Another style</ul>
|
|
|
|
|
</li>
|
2023-12-27 16:32:10 +01:00
|
|
|
</ul>
|
|
|
|
|
<ul tabindex="0" class="list-symbol">Pages
|
2017-10-06 19:31:01 +02:00
|
|
|
<li>
|
|
|
|
|
<ul><label for="radio-page-1">Page 1</label></ul>
|
|
|
|
|
<ul><label for="radio-page-2">Page 2</label></ul>
|
|
|
|
|
<ul><label for="radio-page-3">Test page</label></ul>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
<ul tabindex="0" class="list-symbol">Help
|
|
|
|
|
<li>
|
2017-10-06 19:44:59 +02:00
|
|
|
<ul><a href="https://git.teasca.de/teascade/botsym-css">What is this?</a></ul>
|
|
|
|
|
<ul><a href="https://git.teasca.de/teascade/botsym-css/issues">Oh no</a></ul>
|
2023-12-27 16:32:10 +01:00
|
|
|
<ul>
|
|
|
|
|
<hr>
|
|
|
|
|
</ul>
|
2017-10-06 19:31:01 +02:00
|
|
|
<ul>A thing under hr</ul>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</li>
|
|
|
|
|
</nav>
|
|
|
|
|
<div class="page-3">
|
|
|
|
|
<div class="box white width-100">
|
|
|
|
|
<div class="padding-1">
|
|
|
|
|
<b>A test form!</b>
|
|
|
|
|
<p>Name: <label for="name" class="textinput"><input type="text" id="name"></label></p>
|
2023-12-27 16:32:10 +01:00
|
|
|
<p><input type="checkbox" id="checkbox"><label class="checkbox-right no-select" for="checkbox"> Yes or no?
|
|
|
|
|
</label></p>
|
|
|
|
|
<p><input type="radio" id="radio1" name="radio"><label for="radio1" class="radio-right no-select"> Radiobutton 1
|
|
|
|
|
</label></p>
|
|
|
|
|
<p><input type="radio" id="radio2" name="radio"><label for="radio2" class="radio-right no-select"> Radiobutton 2
|
|
|
|
|
</label></p>
|
2017-10-06 19:31:01 +02:00
|
|
|
<p><button name="button" label="button">Button</button></p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="page-1">
|
|
|
|
|
<p>Good day! <b>Bold!</b></p>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="box inline white width-50">
|
|
|
|
|
<p><b>Links!</b></p>
|
|
|
|
|
<li class="button-list">
|
2020-09-29 19:23:00 +02:00
|
|
|
<ul><a href="https://teascade.net/">Teasca.de</a></ul>
|
2017-10-06 19:31:01 +02:00
|
|
|
<ul><a href="https://github.com/teascade">GitHub</a></ul>
|
2020-09-29 19:23:00 +02:00
|
|
|
<ul><a href="https://cybergay.space/@teascade">Mastodon</a></ul>
|
2017-10-06 19:31:01 +02:00
|
|
|
</li>
|
|
|
|
|
<hr>
|
|
|
|
|
<p>Stuff under the hr!</p>
|
2023-12-27 16:32:10 +01:00
|
|
|
</li>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="box inline double white width-50">
|
2017-10-06 19:31:01 +02:00
|
|
|
<p>Welcome to a thing! This is a list, hello!</p>
|
|
|
|
|
<p>The list:</p>
|
|
|
|
|
<li>
|
|
|
|
|
<ul>Thing in a list </ul>
|
|
|
|
|
<ul>Another thing</ul>
|
|
|
|
|
</li>
|
|
|
|
|
<div class="space-1"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="box blue width-100">
|
|
|
|
|
<div class="padding-1">
|
|
|
|
|
<div class="">
|
2023-12-27 16:32:10 +01:00
|
|
|
<p>Dolorem iusto nihil modi perspiciatis. Omnis nemo sed nam sed sunt qui. Laudantium accusantium architecto
|
|
|
|
|
sint et necessitatibus quibusdam. Doloribus hic similique ut reiciendis rem ut placeat. Sit doloremque
|
|
|
|
|
autem dicta quasi commodi nihil qui.</p>
|
2017-10-06 19:31:01 +02:00
|
|
|
<div class="space-1"></div>
|
|
|
|
|
<p><b>Some stuff</b></p>
|
|
|
|
|
<div class="space-1"></div>
|
|
|
|
|
<p>This is a blue box</p>
|
|
|
|
|
<hr>
|
|
|
|
|
<p>Hello! I'm under hr!</p>
|
2017-10-04 01:12:15 +02:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2017-10-06 19:31:01 +02:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="box white width-100">
|
|
|
|
|
<div class="padding-1">
|
|
|
|
|
<b>A test form!</b>
|
|
|
|
|
<p>Name: <label for="name" class="textinput"><input type="text" id="name"></label></p>
|
2023-12-27 16:32:10 +01:00
|
|
|
<p><input type="checkbox" id="checkbox"><label class="checkbox-right no-select" for="checkbox"> Yes or no?
|
|
|
|
|
</label></p>
|
|
|
|
|
<p><input type="radio" id="radio1" name="radio"><label for="radio1" class="radio-right no-select"> Radiobutton
|
|
|
|
|
1 </label></p>
|
|
|
|
|
<p><input type="radio" id="radio2" name="radio"><label for="radio2" class="radio-right no-select"> Radiobutton
|
|
|
|
|
2 </label></p>
|
2017-10-06 19:31:01 +02:00
|
|
|
<p><button name="button" label="button">Button</button></p>
|
2017-10-01 21:55:29 +02:00
|
|
|
</div>
|
2017-10-06 19:31:01 +02:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="page-2">
|
|
|
|
|
<p>Hello! Welcome to <b>Page 2</b></p>
|
2023-12-27 16:32:10 +01:00
|
|
|
|
|
|
|
|
<div class="box white inline width-percentage-50">
|
|
|
|
|
<div class="padding-1">
|
|
|
|
|
<b>A test form!</b>
|
|
|
|
|
<p>Hello there</p>
|
|
|
|
|
<p>Some text here!</p>
|
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non porta odio. Nam ac pretium felis. Fusce erat
|
|
|
|
|
purus, tempus in finibus non, vestibulum eu diam. Vivamus neque ligula, ornare vitae mi sit amet, cursus
|
|
|
|
|
lobortis nunc. Cras augue enim, tincidunt sit amet fringilla eu, pretium in tellus. Vivamus vitae vehicula
|
|
|
|
|
nisl, a tristique mi. Fusce varius pretium gravida. </p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="box white inline width-percentage-45">
|
|
|
|
|
<div class="padding-1">
|
|
|
|
|
<b>A test form!</b>
|
|
|
|
|
<p>Hello there</p>
|
|
|
|
|
<p>Some text here!</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2017-10-06 19:31:01 +02:00
|
|
|
</div>
|
|
|
|
|
</body>
|
2023-12-27 16:32:10 +01:00
|
|
|
|
|
|
|
|
</html>
|
