botsym-css/index.html

152 lines
5.2 KiB
HTML
Raw Permalink Normal View History

2017-10-01 21:01:18 +02:00
<!DOCTYPE html>
<html>
2023-12-27 16:32:10 +01: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" />
</head>
2023-12-27 16:32:10 +01:00
<body>
<input type="radio" id="radio-page-1" name="pages">
<input type="radio" id="radio-page-2" name="pages">
<input type="radio" id="radio-page-3" name="pages">
<nav>
<li>
<ul>BOTSYM.EXE</ul>
<ul tabindex="0" class="list-symbol">File
<li>
<ul>Save</ul>
<ul>Save As</ul>
<ul>Exit</ul>
</li>
</ul>
<ul tabindex="0" class="list-symbol">Edit
<li>
<ul>Scale</ul>
<ul>Something</ul>
</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
<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>
<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>
<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>
<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>
</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">
<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>
<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>
</div>
</div>
</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>
<p><button name="button" label="button">Button</button></p>
2017-10-01 21:55:29 +02:00
</div>
</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>
</div>
</body>
2023-12-27 16:32:10 +01:00
</html>