---
layout: post
title: "Demo page"
toc: false
archive: "This page is, in fact, not archived, meaning it will receive content updates."
trigger: "This page contains blackjack and hookers, and bad jokes such as this one."
disclaimer: "
- All tricks in this page are performed by lab boys, don't try this at home.

- Don't expose yourself to 4000° kelvin.

- Don't take party escort submission position.

- Don't interact with asbestos and moon rocks."
---

> For ^these banners see page source <abbr title="The thingy wrapped in three dashes at very top of Markdown document">front matter</abbr>

Text can be **bold**, _italic_, or ~~strikethrough~~, it can also be _**thick**_.

[Link to another page](demo-page.md){:.page-link}

There should be whitespace between paragraphs.

There should be whitespace between paragraphs. We recommend including a README, or a file with information about your project.

# Header 1

This is a normal paragraph following a header. Codeberg is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.

## Header 2

> This is a blockquote following a header.
>
> When something is important enough, you do it even if the odds are not in your favor.

### Header 3

```js
// Javascript code with syntax highlighting.
var fun = function lang(l) {
  dateformat.i18n = require("./lang/" + l);
  return true;
};
```

```ruby
# Ruby code with syntax highlighting
GitHubPages::Dependencies.gems.each do |gem, version|
  s.add_dependency(gem, "= #{version}")
end
```

#### Header 4

- This is an unordered list following a header.
- This is an unordered list following a header.
- This is an unordered list following a header.

##### Header 5

1.  This is an ordered list following a header.
2.  This is an ordered list following a header.
3.  This is an ordered list following a header.

###### Header 6

| head1        | head two          | three |
| :----------- | :---------------- | :---- |
| ok           | good swedish fish | nice  |
| out of stock | good and plenty   | nice  |
| ok           | good `oreos`      | hmm   |
| ok           | good `zoute` drop | yumm  |

### There's a horizontal rule below this

---

### Here is an unordered list:

- Item foo
- Item bar
- Item baz
- Item zip

### And an ordered list:

1.  Item one
1.  Item two
1.  Item three
1.  Item four

### And a nested list:

- level 1 item
  - level 2 item
  - level 2 item
    - level 3 item
    - level 3 item
- level 1 item
  - level 2 item
  - level 2 item
  - level 2 item
- level 1 item
  - level 2 item
  - level 2 item
- level 1 item

### Small image

![Codeberg icon](https://codeberg.org/Codeberg/Design/raw/branch/main/logo/icon/png/codeberg-logo_icon_blue-64x64.png)

### Large image

![Codeberg horizontal](https://codeberg.org/Codeberg/Design/raw/branch/main/logo/horizontal/png/codeberg-logo_horizontal_blue-850x250.png)

### Definition lists can be used with HTML syntax

<dl>
<dt>Name</dt>
<dd>Godzilla</dd>
<dt>Born</dt>
<dd>1952</dd>
<dt>Birthplace</dt>
<dd>Japan</dd>
<dt>Color</dt>
<dd>Green</dd>
</dl>

```
Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.
```

```
The final element.
```

### Details

<details><summary>I may be a spoiler, I may be a long text, I may be anything.</summary>

Quack-quack!

<img class="full media" src="https://random-d.uk/api/randomimg">

</details>

### Small

<small>Small, cute text that doesn't catch attention.</small>

### Abbreviation

The <abbr title="American Standard Code for Information Interchange">ASCII</abbr> art are awesome!

### Special ASCII style

<pre class="ascii">
 _____________________________________________
|.'',        Public_Library_Halls         ,''.|
|.'.'',                                 ,''.'.|
|.'.'.'',                             ,''.'.'.|
|.'.'.'.'',                         ,''.'.'.'.|
|.'.'.'.'.|                         |.'.'.'.'.|
|.'.'.'.'.|===;                 ;===|.'.'.'.'.|
|.'.'.'.'.|:::|',             ,'|:::|.'.'.'.'.|
|.'.'.'.'.|---|'.|, _______ ,|.'|---|.'.'.'.'.|
|.'.'.'.'.|:::|'.|'|???????|'|.'|:::|.'.'.'.'.|
|,',',',',|---|',|'|???????|'|,'|---|,',',',',|
|.'.'.'.'.|:::|'.|'|???????|'|.'|:::|.'.'.'.'.|
|.'.'.'.'.|---|','   /%%%\   ','|---|.'.'.'.'.|
|.'.'.'.'.|===:'    /%%%%%\    ':===|.'.'.'.'.|
|.'.'.'.'.|%%%%%%%%%%%%%%%%%%%%%%%%%|.'.'.'.'.|
|.'.'.'.','       /%%%%%%%%%\       ','.'.'.'.|
|.'.'.','        /%%%%%%%%%%%\        ','.'.'.|
|.'.','         /%%%%%%%%%%%%%\         ','.'.|
|.','          /%%%%%%%%%%%%%%%\          ','.|
|;____________/%%%%%Spicer%%%%%%\____________;|
</pre>

### Pixel-art without anti-aliasing

```
{:.pixels}
```

![Pixels](https://pixeljoint.com/files/icons/full/animation_rewinded_mostfinal.gif){:.pixels}

[Source](https://pixeljoint.com/pixelart/15027.htm){:.site-link}

### Full-width image/video

```
{:.full}
```

### Shadow and rounded corners on image/video

```
{:.media}
```

### ...With zoom on hover

```
{:.media.hover}
```

### All together!

```
{:.full.media.hover}
```

![Portal Gun blueprint](https://i.imgur.com/Fr1ImW9.png){:.full.media.hover}

### Image descriptions

![The Office](https://i.imgur.com/ImMAXM3.png){:.media.full}

<figcaption>The Office where Stanley works, it has yellow floor and beige walls</figcaption>

### Video

Everything above can be applied to videos too.

<video controls src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"></video>{:.media.full}

<figcaption>Red flower wakes up</figcaption>

### Keyboard shortcut

```
<kbd>⌘ Super</kbd> + <kbd>Space</kbd>
```

<kbd>⌘ Super</kbd> + <kbd>Space</kbd>

### Link to page (rightwards arrow)

```
{:.page-link}
```

[Link to page](demo-page.md){:.page-link}

### Link to site (up-rightwards arrow)

```
{:.site-link}
```

[Link to site](https://example.org){:.site-link}

### Buttons

```
[Go to top](#top){: .inline-button}
[File an issue]({{site.issuesurl}})
{: .dialog-buttons}
```

> Look at the end of page xD