2019-01-27 09:58:28 +01:00
<!DOCTYPE html>
< html lang = "en-US" >
2019-01-25 15:27:27 +01:00
< head >
2019-01-25 17:25:13 +01:00
< meta charset = "UTF-8" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" / >
< meta http-equiv = "X-UA-Compatible" content = "ie=edge" / >
2019-01-27 09:58:28 +01:00
< link rel = "apple-touch-icon" sizes = "57x57" href = "/favicon/apple-icon-57x57.png" >
< link rel = "apple-touch-icon" sizes = "60x60" href = "/favicon/apple-icon-60x60.png" >
< link rel = "apple-touch-icon" sizes = "72x72" href = "/favicon/apple-icon-72x72.png" >
< link rel = "apple-touch-icon" sizes = "76x76" href = "/favicon/apple-icon-76x76.png" >
< link rel = "apple-touch-icon" sizes = "114x114" href = "/favicon/apple-icon-114x114.png" >
< link rel = "apple-touch-icon" sizes = "120x120" href = "/favicon/apple-icon-120x120.png" >
< link rel = "apple-touch-icon" sizes = "144x144" href = "/favicon/apple-icon-144x144.png" >
< link rel = "apple-touch-icon" sizes = "152x152" href = "/favicon/apple-icon-152x152.png" >
< link rel = "apple-touch-icon" sizes = "180x180" href = "/favicon/apple-icon-180x180.png" >
< link rel = "icon" type = "image/png" sizes = "192x192" href = "/favicon/android-icon-192x192.png" >
< link rel = "icon" type = "image/png" sizes = "32x32" href = "/favicon/favicon-32x32.png" >
< link rel = "icon" type = "image/png" sizes = "96x96" href = "/favicon/favicon-96x96.png" >
< link rel = "icon" type = "image/png" sizes = "16x16" href = "/favicon/favicon-16x16.png" >
< link rel = "manifest" href = "/manifest.json" >
< meta name = "msapplication-TileColor" content = "#ffffff" >
< meta name = "msapplication-TileImage" content = "/favicon/ms-icon-144x144.png" >
< meta name = "theme-color" content = "#ffffff" >
2019-01-25 17:25:13 +01:00
< title > Terminal CSS< / title >
< meta name = "description" content = "Modern and minimalistic CSS framework for terminal lovers ❤️" / >
2019-01-25 15:27:27 +01:00
< link rel = "stylesheet" href = "/terminal.min.css" / >
< / head >
< style >
2019-01-27 09:06:31 +01:00
@font-face{
font-family: 'Fira Code';
src: url('/fonts/eot/FiraCode-Light.eot');
src: url('/fonts/eot/FiraCode-Light.eot') format('embedded-opentype'),
url('/fonts/woff2/FiraCode-Light.woff2') format('woff2'),
url('/fonts/woff/FiraCode-Light.woff') format('woff'),
url('/fonts/ttf/FiraCode-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
font-display: fallback;
}
@font-face{
font-family: 'Fira Code';
src: url('/fonts/eot/FiraCode-Regular.eot');
src: url('/fonts/eot/FiraCode-Regular.eot') format('embedded-opentype'),
url('/fonts/woff2/FiraCode-Regular.woff2') format('woff2'),
url('/fonts/woff/FiraCode-Regular.woff') format('woff'),
url('/fonts/ttf/FiraCode-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: fallback;
}
@font-face{
font-family: 'Fira Code';
src: url('/fonts/eot/FiraCode-Medium.eot');
src: url('/fonts/eot/FiraCode-Medium.eot') format('embedded-opentype'),
url('/fonts/woff2/FiraCode-Medium.woff2') format('woff2'),
url('/fonts/woff/FiraCode-Medium.woff') format('woff'),
url('/fonts/ttf/FiraCode-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
font-display: fallback;
}
@font-face{
font-family: 'Fira Code';
src: url('/fonts/eot/FiraCode-Bold.eot');
src: url('/fonts/eot/FiraCode-Bold.eot') format('embedded-opentype'),
url('/fonts/woff2/FiraCode-Bold.woff2') format('woff2'),
url('/fonts/woff/FiraCode-Bold.woff') format('woff'),
url('/fonts/ttf/FiraCode-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: fallback;
}
2019-01-25 15:27:27 +01:00
.components-grid {
display: grid;
grid-column-gap: 1em;
grid-template-columns: auto;
grid-template-rows: auto;
}
.image-grid {
display: grid;
grid-gap: 1em;
grid-template-rows: auto;
display: grid;
grid-gap: 1em;
grid-template-rows: auto;
grid-template-columns: repeat(
auto-fit,
minmax(calc(var(--page-width) / 12), 1fr)
);
}
@media only screen and (min-width: 70em) {
.components-grid {
grid-template-columns: 3fr 9fr;
}
}
< / style >
< body >
2019-01-25 15:42:00 +01:00
< a href = "https://github.com/Gioni06/terminal.css" class = "github-corner" > < svg width = "80" height = "80" viewBox = "0 0 250 250" style = "fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" > < path d = "M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" > < / path > < path d = "M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill = "currentColor" style = "transform-origin: 130px 106px;" class = "octo-arm" > < / path > < path d = "M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill = "currentColor" class = "octo-body" > < / path > < / svg > < / a >
2019-01-25 15:27:27 +01:00
< div class = "container" >
2019-01-26 11:18:40 +01:00
< section class = "terminal-header" >
< header class = "terminal-logo" >
< div class = "logo" > < a href = "/" class = "no-style" > Terminal CSS< / a > < / div >
< / header >
< nav class = "terminal-menu" >
< ul >
2019-01-26 11:57:54 +01:00
< li >
< a class = "menu-item" href = "/dark/" > Dark Version< / a >
< / li >
2019-01-26 11:18:40 +01:00
< li >
2019-01-26 11:22:53 +01:00
< a class = "menu-item" href = "https://github.com/Gioni06/terminal.css" > Github< / a >
< / li >
2019-01-26 11:18:40 +01:00
< li >
2019-01-26 11:22:53 +01:00
< a class = "menu-item" href = "https://www.npmjs.com/package/terminal.css" > npm< / a >
2019-01-26 11:18:40 +01:00
< / li >
< / ul >
< / nav >
< / section >
< / div >
< div class = "container" >
2019-01-25 15:27:27 +01:00
< p >
Modern and minimalistic CSS framework for < em > terminal< / em > lovers ❤️
< / p >
< section >
< h2 > Goal< / h2 >
< p >
There are so many CSS frameworks out there with great features but
most of them come at the cost of < b > bloated< / b > html code.
2019-01-25 15:39:25 +01:00
< b > Terminal CSS< / b > is here for purists who want minimal overhead and
2019-01-25 15:27:27 +01:00
maximal control.
< / p >
< / section >
< section >
< h2 > Credits< / h2 >
< p >
This project is heavily inspired by
< a href = "https://egoist.sh/" target = "_blank" rel = "noopener noreferer"
>@egoist's< /a
>
work -
< a href = "https://hackcss.egoist.moe/" rel = "noopener noreferer"
>hack.css< /a
>
< / p >
< / section >
< hr / >
< div class = "components components-grid" >
< aside id = "menu" >
< h2 > Components< / h2 >
< nav >
< ul >
< li > < a href = "#GridSystem" > Grid System< / a > < / li >
2019-01-26 11:18:40 +01:00
< li > < a href = "#Header" > Header< / a > < / li >
2019-01-25 15:27:27 +01:00
< li > < a href = "#Lists" > Lists< / a > < / li >
< li > < a href = "#Typography" > Typography< / a > < / li >
< li > < a href = "#Tables" > Tables< / a > < / li >
< li >
< a href = "#SpecialElements" > Special Elements< / a >
< ul >
< li > < a href = "#Blockquote" > Blockquote< / a > < / li >
< li > < a href = "#CodeBlocks" > Code Blocks< / a > < / li >
< li > < a href = "#Misc" > Misc< / a > < / li >
< / ul >
< / li >
< li > < a href = "#Forms" > Forms< / a > < / li >
< li > < a href = "#Progress" > Progress Bar< / a > < / li >
< li > < a href = "#Cards" > Cards< / a > < / li >
< li > < a href = "#Alerts" > Alerts< / a > < / li >
2019-01-26 11:18:40 +01:00
< li > < a href = "#Media" > Media< / a > < / li >
2019-01-27 10:25:32 +01:00
< li > < a href = "#ImageWithCaption" > Image with caption< / a > < / li >
2019-01-25 15:27:27 +01:00
< / ul >
< / nav >
< / aside >
< section >
< h2 id = "GridSystem" > Grid System< / h2 >
< p >
2019-01-25 15:39:25 +01:00
Terminal CSS doens't come with a build in grid system. It encourages
2019-01-25 15:27:27 +01:00
you to use your own - whether it's Flexbox or CSS Grid.
< / p >
< div class = "image-grid" >
< a href = "https://picsum.photos"
style="border: none;"
>< img
src="https://picsum.photos/200/300?random& 1"
width="auto"
height="auto"
alt="random image"
/>< / a >
< a href = "https://picsum.photos"
style="border: none;"
>< img
src="https://picsum.photos/200/300?random& 2"
width="auto"
height="auto"
alt="random image"
/>< / a >
< a href = "https://picsum.photos"
style="border: none;"
>< img
src="https://picsum.photos/200/300?random& 3"
width="auto"
height="auto"
alt="random image"
/>< / a >
< a href = "https://picsum.photos"
style="border: none;"
>< img
src="https://picsum.photos/200/300?random& 4"
width="auto"
height="auto"
alt="random image"
/>< / a >
< a href = "https://picsum.photos"
style="border: none;"
>< img
src="https://picsum.photos/200/300?random& 5"
width="auto"
height="auto"
alt="random image"
/>< / a >
< a href = "https://picsum.photos"
style="border: none;"
>< img
src="https://picsum.photos/200/300?random& 6"
width="auto"
height="auto"
alt="random image"
/>< / a >
< a href = "https://picsum.photos"
style="border: none;"
>< img
src="https://picsum.photos/200/300?random& 7"
width="auto"
height="auto"
alt="random image"
/>< / a >
< / div >
< hr / >
2019-01-26 11:18:40 +01:00
< div >
< h2 id = "Header" > Header< / h2 >
< section class = "terminal-header" >
< header class = "terminal-logo" >
< div class = "logo" > < a href = "#" class = "no-style" > Logo< / a > < / div >
< / header >
< nav class = "terminal-menu" >
< ul >
< li >
< a class = "menu-item" href = "#" > Item #1< / a >
< / li >
< li >
< a class = "menu-item active" href = "#" > Active Item #2< / a >
< / li >
< li >
< a class = "menu-item" href = "#" > Item #3< / a >
< / li >
< / ul >
< / nav >
< / section >
< / div >
< hr >
2019-01-25 15:27:27 +01:00
< h2 id = "Lists" > Lists< / h2 >
< section >
< ul >
< li > This is a list item< / li >
< li > So is this - there could be more< / li >
< li >
Make sure to style list items to:
< ul >
< li > Not forgetting child list items< / li >
< li > Not forgetting child list items< / li >
< li > Not forgetting child list items< / li >
< li > Not forgetting child list items< / li >
< / ul >
< / li >
< li > A couple more< / li >
< li > top level list items< / li >
< / ul >
< p > Don't forget < strong > Ordered lists< / strong > :< / p >
< ol >
< li > Lorem ipsum dolor sit amet, consectetuer adipiscing elit.< / li >
< li >
Aliquam tincidunt mauris eu risus.
< ol >
< li >
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
< / li >
< li > Aliquam tincidunt mauris eu risus.< / li >
< / ol >
< / li >
< li > Lorem ipsum dolor sit amet, consectetuer adipiscing elit.< / li >
< li > Aliquam tincidunt mauris eu risus.< / li >
< / ol >
2019-01-26 11:57:54 +01:00
< p > < strong > Description lists< / strong > are also included.< / p >
2019-01-25 15:27:27 +01:00
< dl >
< dt > Description list title 01< / dt >
< dd > Description list description 01< / dd >
< dt > Description list title 02< / dt >
< dd > Description list description 02< / dd >
< dd > Description list description 03< / dd >
< / dl >
< / section >
< hr / >
< section >
< h2 id = "Typography" > Typography< / h2 >
< h1 > Level 1 Heading< / h1 >
< p >
Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat
vitae, ultricies eget, tempor sit amet, ante.
< / p >
< h2 > Level 2 Heading< / h2 >
< p >
Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat
vitae, ultricies eget, tempor sit amet, ante.
< / p >
< h3 > Level 3 Heading< / h3 >
< p >
Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat
vitae, ultricies eget, tempor sit amet, ante.
< / p >
< h4 > Level 4 Heading< / h4 >
< h5 > Level 5 Heading< / h5 >
< h6 > Level 5 Heading< / h6 >
< / section >
< hr / >
< section >
< h2 id = "Tables" > Tables< / h2 >
< table >
< caption >
Most Downloaded Movies on BitTorrent, 2011
< / caption >
< thead >
< tr >
< th > Rank< / th >
< th > Movie< / th >
< th > Downloads< / th >
< th > Grosses< / th >
< / tr >
< / thead >
< tfoot >
< tr >
< th colspan = "4" > torrentfreak.com< / th >
< / tr >
< / tfoot >
< tbody >
< tr >
< th > 1< / th >
< td > Fast Five< / td >
< td > 9,260,000< / td >
< td > $626,137,675< / td >
< / tr >
< tr >
< th > 2< / th >
< td > The Hangover II< / td >
< td > 8,840,000< / td >
< td > $581,464,305< / td >
< / tr >
< tr >
< th > 3< / th >
< td > Thor< / td >
< td > 8,330,000< / td >
< td > $449,326,618< / td >
< / tr >
< tr >
< th > 4< / th >
< td > Source Code< / td >
< td > 7,910,000< / td >
< td > $123,278,618< / td >
< / tr >
< tr >
< th > 5< / th >
< td > I Am Number Four< / td >
< td > 7,670,000< / td >
< td > $144,500,437< / td >
< / tr >
< tr >
< th > 6< / th >
< td > Sucker Punch< / td >
< td > 7,200,000< / td >
< td > $89,792,502< / td >
< / tr >
< tr >
< th > 7< / th >
< td > 127 Hours< / td >
< td > 6,910,000< / td >
< td > $60,738,797< / td >
< / tr >
< tr >
< th > 8< / th >
< td > Rango< / td >
< td > 6,480,000< / td >
< td > $245,155,348< / td >
< / tr >
< tr >
< th > 9< / th >
< td > The King’ < / td >
< td > 6,250,000< / td >
< td > $414,211,549< / td >
< / tr >
< tr >
< th > 10< / th >
< td > Harry Potter and the Deathly Hallows Part 2< / td >
< td > 6,030,000< / td >
< td > $1,328,111,219< / td >
< / tr >
< / tbody >
< / table >
< / section >
< h3 id = "SpecialElements" > Special Elements< / h3 >
2019-01-25 15:39:25 +01:00
< p > Terminal CSS also supports a range of special elements.< / p >
2019-01-25 15:27:27 +01:00
< h4 id = "Blockquote" > Blockquote< / h4 >
< blockquote >
< p >
< em > This is a properly formatted blockquote, btw.< / em > Measuring
programming progress by lines of code is like measuring aircraft
building progress by weight.
< / p >
< footer >
—
< cite > < a href = "http://www.thegatesnotes.com" > Bill Gates< / a > < / cite >
< / footer >
< / blockquote >
< h4 id = "CodeBlocks" > Code Blocks< / h4 >
< pre >
< code >
:root {
--global-font-size: 14px;
--global-line-height: 1.4rem;
--global-space: 10px;
--font-stack: 'Fira Code',Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
--background-color: #fff;
--page-width: 70em;
--primary-color: rgb(206, 4, 105);
--font-color: #151513;
--tertiary-color: #727680;
--grid-gap: 1em;
}
< / code >
< / pre >
< h4 id = "Misc" > Misc< / h4 >
< p >
I am < a href = "?abc123" > the a tag< / a > example< br / >
I am < abbr title = "test" > the abbr tag< / abbr > example< br / >
I am < acronym > the acronym tag< / acronym > example< br / >
I am < b > the b tag< / b > example< br / >
I am < big > the big tag< / big > example< br / >
I am < cite > the cite tag< / cite > example< br / >
I am < code > the code tag< / code > example< br / >
I am < del > the del tag< / del > example< br / >
I am < dfn > the dfn tag< / dfn > example< br / >
I am < em > the em tag< / em > example< br / >
I am < i > the i tag< / i > example< br / >
I am < ins > the ins tag< / ins > example< br / >
I am < kbd > the kbd tag< / kbd > example< br / >
I am < q > the q tag< / q > example< br / >
I am < samp > the samp tag< / samp > example< br / >
I am < small > the small tag< / small > example< br / >
I am < span > the span tag< / span > example< br / >
I am < strong > the strong tag< / strong > example< br / >
I am < sub > the sub tag< / sub > example< br / >
I am < sup > the sup tag< / sup > example< br / >
I am < tt > the tt tag< / tt > example< br / >
I am < var > the var tag< / var > example< br / >
I am the < span class = "small" > small class< / span > example< br / >
I am the < span class = "large" > large class< / span > example< br / >
I am the < span class = "quiet" > quiet class< / span > example< br / >
< / p >
< h4 id = "Address" >
Address
< / h4 >
< address >
Mozilla Foundation< br / >
1981 Landings Drive< br / >
Building K< br / >
Mountain View, CA 94043-0801< br / >
USA
< / address >
< br >
< h4 id = "Forms" > Forms< / h4 >
< form action = "#" >
< fieldset >
< legend > Form legend< / legend >
< div class = "form-group" >
< label for = "email" > Email input:< / label >
< input id = "email" name = "email" type = "email" required minlength = "5" placeholder = "test" / >
< / div >
< div class = "form-group" >
< label for = "text" > Text input:< / label >
< input id = "text" name = "text" type = "text" required minlength = "5" placeholder = "test" / >
< / div >
< div class = "form-group" >
< label for = "itext" > Invalid input (min-length 10):< / label >
< input id = "itext" name = "itext" type = "text" minlength = "10" / >
< / div >
< div class = "form-group" >
< label for = "pw" > Password input:< / label >
< input type = "password" id = "pw" name = "pw" value = "password" / >
< / div >
< div class = "form-group" >
< label for = "radio" > Radio input:< / label >
< input name = "radio" type = "radio" id = "radio" / >
< / div >
< div class = "form-group" >
< label for = "check" > Checkbox input:< / label >
< input for = "check" type = "checkbox" id = "check" / >
< / div >
< div class = "form-group" >
< label for = "select" > Select field:< / label >
< select id = "select" name = "select" >
< option > Option 01 < / option >
< option > Option 02 < / option >
< / select >
< / div >
< div class = "form-group" >
< label for = "tarea" > Textarea:< / label >
< textarea id = "tarea" cols = "30" rows = "5" name = ="tarea" > Textarea text< / textarea >
< / div >
< div class = "form-group" >
< label for = "submit" > Input Button:< / label >
2019-01-26 11:18:40 +01:00
< button class = "btn btn-default" type = "submit" role = "button" name = "submit" id = "submit" > Submit< / button >
2019-01-25 15:27:27 +01:00
< / div >
< / fieldset >
< / form >
< br >
< h4 id = "Progress" > Progress Bar< / h4 >
< p > With only an arrow< / p >
< div class = "progress-bar" >
< div class = "progress-bar-filled" style = "width: 40%" > < / div >
< / div >
< p > With a percentage showing above the arrow< / p >
< div class = "progress-bar progress-bar-show-percent" >
< div class = "progress-bar-filled" style = "width: 30%" data-filled = "Loading 30%" > < / div >
< / div >
< p > Without arrow< / p >
< div class = "progress-bar progress-bar-no-arrow" >
< div class = "progress-bar-filled" style = "width: 60%" data-filled = "Loading 60%" > < / div >
< / div >
< br >
< h4 id = "Buttons" > Buttons< / h4 >
< button class = "btn btn-default" > Default< / button > < br / > < br / >
< button class = "btn btn-primary" > Primary< / button > < br / > < br / >
< button class = "btn btn-error" > Error< / button > < br / > < br / >
< button class = "btn btn-default btn-ghost" > Ghost Button< / button > < br / > < br / >
< button class = "btn btn-primary btn-ghost" > Ghost Button< / button > < br / > < br / >
< button class = "btn btn-error btn-ghost" > Ghost Button< / button > < br / > < br / >
< button class = "btn btn-primary btn-block" > Block Level Button< / button > < br / > < br / >
< p > Button Group< / p >
< div class = "btn-group" >
< button class = "btn btn-default btn-ghost" > Left< / button >
< button class = "btn btn-default btn-ghost" > Middle< / button >
< button class = "btn btn-default btn-ghost" > Right< / button >
< / div >
< br / >
< h4 id = "Cards" > Cards< / h4 >
< div class = "card" >
< header > title< / header >
< div >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, quas ex vero enim in doloribus officiis ullam vel nam esse sapiente velit incidunt. Eaque quod et, aut maiores excepturi sint.
< / div >
< / div >
< br / >
< h4 id = "Alerts" > Alerts< / h4 >
2019-01-26 11:18:40 +01:00
< div class = "alert" > Default message< / div >
< div class = "alert alert-primary" > Primary message< / div >
2019-01-25 15:27:27 +01:00
< div class = "alert alert-error" > Error message< / div >
< hr >
2019-01-26 11:18:40 +01:00
< h2 id = "Media" > Media< / h2 >
< div class = "terminal-media" >
< div class = "terminal-media-left" >
< div class = "terminal-avatarholder" > < img width = "50" height = "50" src = "https://picsum.photos/50/50?random&mediaLeft" alt = "Picsum" > < / div >
< / div >
< div class = "terminal-media-body" >
< div class = "terminal-media-heading" > Media Left Element< / div >
< div class = "terminal-media-content" > This is the media content< / div >
< / div >
< / div >
< div class = "terminal-media" >
< div class = "terminal-media-body" >
< div class = "terminal-media-heading" > Media Right Element< / div >
< div class = "terminal-media-content" > This is the media content< / div >
< / div >
< div class = "terminal-media-right" >
< div class = "terminal-avatarholder" > < img width = "50" height = "50" src = "https://picsum.photos/50/50?random&mediaRight" alt = "Picsum" > < / div >
< / div >
< / div >
2019-01-27 10:25:32 +01:00
< hr >
< h2 id = "ImageWithCaption" > Image with caption< / h2 >
< figure >
< img src = "https://picsum.photos/1000/600?random&imageWithCaption" alt = "Image with caption" title = "Image with caption" >
< figcaption >
Image with caption
< / figcaption >
< / figure >
2019-01-26 11:18:40 +01:00
< hr >
2019-01-27 09:37:16 +01:00
< p > Version: 0.3.0 < a href = "#menu" > Top< / a > < / p >
2019-01-25 15:27:27 +01:00
< / section >
< / div >
< / div >
2019-01-26 11:18:40 +01:00
< script src = "//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js" > < / script >
< script >
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('pre code').forEach((block) => {
window.hljs.highlightBlock(block);
});
})
< / script >
2019-01-25 15:27:27 +01:00
< / body >
< / html >
