An even more educational version of the Bandolier for Learn JS the Hard Way.
https://learnjsthehardway.com/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
38 lines
700 B
38 lines
700 B
10 months ago
|
<!doctype html>
|
||
|
|
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<script src="/alpine.js"></script>
|
||
|
|
<title>Bandolier2</title>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
@import "/open-props.min.css";
|
||
|
|
|
||
|
|
blockquote {
|
||
|
|
--_accent-1: var(--lime-5);
|
||
|
|
--_accent-2: var(--lime-4);
|
||
|
|
--_bg: var(--surface-2);
|
||
|
|
--_ink: var(--text-1);
|
||
|
|
|
||
|
|
color: var(--_ink);
|
||
|
|
border-color: var(--_accent-2);
|
||
|
|
background-color: var(--_bg);
|
||
|
|
justify-self: flex-start;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<head>
|
||
|
|
<body>
|
||
|
|
<h1>Test!</h1>
|
||
|
|
<div x-data="{ open: false }">
|
||
|
|
<button @click="open = !open">Expand</button>
|
||
|
|
<span x-show="open">
|
||
|
|
Content...
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<blockquote>
|
||
|
|
One day I will learn how to run without falling.
|
||
|
|
</blockquote>
|
||
|
|
</body>
|
||
|
|
</html>
|