{{< progress 999.99 theme "Name of progress bar" >}}
{{< progress 80 green "Name of progress bar" >}}
{{< progress 77.54 red "Name of progress bar" >}}
{{< progress 123.45 blue "Name of progress bar" >}}
{{< progress 11.11 orange "Name of progress bar" >}}

{{< accordion "Foods" open >}}
* Vegetables
* Fruits
* Fish
{{< /accordion >}}

{{< accordion "Travel Destinations" false >}}
- Paris
- Tokyo
- New York City
- Sydney
{{< /accordion >}}

{{< line "This is the divided line text" >}}

{{< line >}}

{{< blur "This text is blurred" >}}
This is a {{< blur "Hide text" >}}

{{< spoiler name="Hello World" >}}
```py
print("Hello World!")
```
{{< /spoiler >}}

{{< link-card title="This is an example link card" url="https://unsplash.it" desc="This is an example link card. This is an example link card." img="https://unsplash.it/1920/1080/?random=1" >}}
{{< link-card title="This is an example link card" url="https://unsplash.it" desc="This is an example link card." >}}

{{< dzi id="seadragon-viewer" url="/dzi/mountain_files/" format="jpg" imgWidth="15920" imgHeight="9800" >}}

{{< carousel height="500" unit="px" items="3" duration="2000" images="https://unsplash.it/1920/1080/?random=1,https://unsplash.it/1920/1080/?random=2,https://unsplash.it/1920/1080/?random=5,https://unsplash.it/1920/1080/?random=4" >}}

```py
WRITE THE CODE HERE
```

import random


def askForGuess():
    while True:
        guess = input('> ')  # Enter the guess.

        if guess.isdecimal():
            return int(guess)  # Convert string guess to an integer.
        print('Please enter a number between 1 and 100.')


print('Guess the Number, by Al Sweigart al@inventwithpython.com')
print()
secretNumber = random.randint(1, 100)  # Select a random number.
print('I am thinking of a number between 1 and 100.')

for i in range(10):  # Give the player 10 guesses.
    print('You have {} guesses left. Take a guess.'.format(10 - i))

    guess = askForGuess()
    if guess == secretNumber:
        break  # Break out of the for loop if the guess is correct.

    # Offer a hint:
    if guess < secretNumber:
        print('Your guess is too low.')
    if guess > secretNumber:
        print('Your guess is too high.')

# Reveal the results:
if guess == secretNumber:
    print('Yay! You guessed my number!')
else:
    print('Game over. The number I was thinking of was', secretNumber)

{{< highlight html "linenos=table,hl_lines=11-15,linenostart=1,title='index.html'" >}}
WRITE THE CODE HERE
{{< / highlight >}}

// or

```html {linenos=table,hl_lines=["11-15"],linenostart=1,title="index.html"}
WRITE THE CODE HERE
```

{{< tabs "Languages" >}}

{{< tab "JS" >}}
```js
console.log("This is the JS tab.")
```
{{< /tab >}}

{{< tab "Python" >}}
```py
print("This is the Python tab.")
```
{{< /tab >}}

{{< tab "C" >}}
```c
#include <stdio.h>

int main()
{
	printf("This is the C tab.");
	return 0;
}
```
{{< /tab >}}

{{< tab "Java" >}}
```java
public class Main {
    public static void main(String[] args) {
        System.out.println("This is the Java tab.");
    }
}
```
{{< /tab >}}

{{< /tabs >}}

{{< diagram >}}
flowchart TD
    Start --> Input
    Input --> Condition
    Condition -- Yes --> Process1
    Condition -- No --> Process2
    Process1 --> Process3
    Process2 --> Process4
    Process3 --> Process5
    Process4 --> Process5
    Process5 --> Output
    Output --> End
{{< /diagram >}}

{{< diagram >}}
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>Bob: Request
    Bob->>Alice: Response
{{< /diagram >}}

{{< diagram >}}
gantt
    title Project Timeline
    dateFormat  YYYY-MM-DD
    section Phase 1
    Task 1           :a1, 2023-06-01, 10d
    Task 2           :a2, 2023-06-12, 5d
    section Phase 2
    Task 3           :a3, 2023-06-19, 8d
    Task 4           :a4, 2023-06-28, 3d
{{< /diagram >}}

{{< diagram >}}
---
title: Animal example
---
classDiagram
    note "From Duck till Zebra"
    Animal <|-- Duck
    note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
        +String beakColor
        +swim()
        +quack()
    }
    class Fish{
        -int sizeInFeet
        -canEat()
    }
    class Zebra{
        +bool is_wild
        +run()
    }
{{< /diagram >}}

{{< chart "myChart" "line" "{\"labels\": [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\"], \"datasets\": [{ \"label\": \"Sales\", \"data\": [50, 80, 30, 70, 60, 90], \"backgroundColor\": \"rgba(54, 162, 235, 0.2)\", \"borderColor\": \"rgba(54, 162, 235, 1)\", \"borderWidth\": 1, \"pointBackgroundColor\": \"rgba(54, 162, 235, 1)\", \"pointBorderColor\": \"#fff\", \"pointHoverBackgroundColor\": \"#fff\", \"pointHoverBorderColor\": \"rgba(54, 162, 235, 1)\" }, { \"label\": \"Expenses\", \"data\": [40, 60, 45, 55, 70, 50], \"backgroundColor\": \"rgba(255, 99, 132, 0.2)\", \"borderColor\": \"rgba(255, 99, 132, 1)\", \"borderWidth\": 1, \"pointBackgroundColor\": \"rgba(255, 99, 132, 1)\", \"pointBorderColor\": \"#fff\", \"pointHoverBackgroundColor\": \"#fff\", \"pointHoverBorderColor\": \"rgba(255, 99, 132, 1)\" }] }" "{\"responsive\": true, \"scales\": { \"y\": { \"beginAtZero\": true, \"title\": { \"display\": true, \"text\": \"Amount\" } } } }" >}}

Here is some inline math: {{< math `
$$ E = mc^2 $$

$$ 3 < 4 $$
` >}}

And here is a displayed equation:
{{< math `
$$ E={\sqrt  {p^{2}c^{2}+m^{2}c^{4}}}=\gamma mc^{2} $$

\[
\int_{-\infty}^{\infty} e^{-x^2} \, dx = \sqrt{\pi}
\]

\begin{align}
    p(v_i=1|\mathbf{h}) & = \sigma\left(\sum_j w_{ij}h_j + b_i\right)
\end{align}
` >}}