mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
2172 lines
79 KiB
HTML
2172 lines
79 KiB
HTML
<!doctype html>
|
||
<html lang="en" data-theme="dark">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<link rel="stylesheet" href="test.css">
|
||
</head>
|
||
<body>
|
||
<section class="section">
|
||
<div class="columns">
|
||
<div class="column is-2">
|
||
<p class="title">block</p>
|
||
</div>
|
||
<div class="column">
|
||
<div class="block">
|
||
<p>
|
||
Quisque ante lacus, malesuada ac auctor vitae, congue
|
||
<a href="#">non ante</a>. Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu
|
||
rutrum tellus.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="columns">
|
||
<div class="column is-2">
|
||
<p class="title">Title</p>
|
||
</div>
|
||
<div class="column">
|
||
<h2 class="title">Hello <strong>Big</strong> World <sub>Sub</sub> <sup>Sup</sup></h2>
|
||
|
||
<h3 class="subtitle">Vestibulum id ligula porta felis euismod semper.</h3>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="columns">
|
||
<div class="column is-2">
|
||
<p class="title">box</p>
|
||
</div>
|
||
<div class="column">
|
||
<div class="box">
|
||
<article class="media">
|
||
<div class="media-left">
|
||
<figure class="image is-64x64">
|
||
<img
|
||
src="https://bulma.io/assets/images/placeholders/128x128.png"
|
||
alt="Image"
|
||
>
|
||
</figure>
|
||
</div>
|
||
<div class="media-content">
|
||
<div class="content">
|
||
<p>
|
||
<strong>John Smith</strong> <small>@johnsmith</small>
|
||
<small>31m</small>
|
||
<br>
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla
|
||
egestas. Nullam condimentum luctus turpis.
|
||
</p>
|
||
</div>
|
||
|
||
<nav class="level is-mobile">
|
||
<div class="level-left">
|
||
<a class="level-item" aria-label="reply">
|
||
<span class="icon is-small">
|
||
<i class="fas fa-reply" aria-hidden="true"></i>
|
||
</span>
|
||
</a>
|
||
<a class="level-item" aria-label="retweet">
|
||
<span class="icon is-small">
|
||
<i class="fas fa-retweet" aria-hidden="true"></i>
|
||
</span>
|
||
</a>
|
||
<a class="level-item" aria-label="like">
|
||
<span class="icon is-small">
|
||
<i class="fas fa-heart" aria-hidden="true"></i>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
</nav>
|
||
|
||
<article class="media">
|
||
<figure class="media-left">
|
||
<p class="image is-48x48">
|
||
<img
|
||
src="https://bulma.io/assets/images/placeholders/96x96.png"
|
||
>
|
||
</p>
|
||
</figure>
|
||
<div class="media-content">
|
||
<div class="content">
|
||
<p>
|
||
<strong>Sean Brown</strong>
|
||
<br>
|
||
Donec sollicitudin urna eget eros malesuada sagittis. Pellentesque habitant morbi tristique
|
||
senectus et netus et malesuada fames ac turpis egestas. Aliquam blandit nisl a nulla sagittis, a
|
||
lobortis leo feugiat.
|
||
<br>
|
||
<small><a>Like</a> · <a>Reply</a> · 2 hrs</small>
|
||
</p>
|
||
</div>
|
||
|
||
<article class="media">
|
||
Vivamus quis semper metus, non tincidunt dolor. Vivamus in mi eu lorem cursus ullamcorper sit amet
|
||
nec massa.
|
||
</article>
|
||
|
||
<article class="media">
|
||
Morbi vitae diam et purus tincidunt porttitor vel vitae augue. Praesent malesuada metus sed
|
||
pharetra euismod. Cras tellus odio, tincidunt iaculis diam non, porta aliquet tortor.
|
||
</article>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
|
||
<a class="box">
|
||
<p>
|
||
<strong>John Smith</strong> <small>@johnsmith</small>
|
||
<small>31m</small>
|
||
<br>
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla
|
||
egestas. Nullam condimentum luctus turpis.
|
||
</p>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="columns">
|
||
<div class="column is-2">
|
||
<p class="title">button</p>
|
||
</div>
|
||
<div class="column">
|
||
<nav class="buttons">
|
||
<button class="button">Button</button>
|
||
<button class="button is-text">Text</button>
|
||
<button class="button is-white">White</button>
|
||
<button class="button is-light">Light</button>
|
||
<button class="button is-dark">Dark</button>
|
||
<button class="button is-black">Black</button>
|
||
</nav>
|
||
|
||
<nav class="buttons">
|
||
<button class="button is-primary">Primary</button>
|
||
<button class="button is-link">Link</button>
|
||
<button class="button is-info">Info</button>
|
||
<button class="button is-light is-primary">Primary</button>
|
||
<button class="button is-light is-link">Link</button>
|
||
<button class="button is-light is-info">Info</button>
|
||
</nav>
|
||
|
||
<nav class="buttons">
|
||
<button class="button is-success">Success</button>
|
||
<button class="button is-warning">Warning</button>
|
||
<button class="button is-danger">Danger</button>
|
||
<button class="button is-light is-success">Success</button>
|
||
<button class="button is-light is-warning">Warning</button>
|
||
<button class="button is-light is-danger">Danger</button>
|
||
</nav>
|
||
|
||
<!--
|
||
<nav class="buttons">
|
||
<button class="button is-small">Small</button>
|
||
<button class="button">Normal</button>
|
||
<button class="button is-medium">Medium</button>
|
||
<button class="button is-large">Large</button>
|
||
</nav>
|
||
-->
|
||
|
||
<nav class="buttons">
|
||
<button class="button is-outlined">Outline</button>
|
||
<button class="button is-primary is-outlined">Outline</button>
|
||
<button class="button is-link is-outlined">Outline</button>
|
||
</nav>
|
||
|
||
<nav class="buttons">
|
||
<button class="button is-info is-outlined">Outline</button>
|
||
<button class="button is-success is-outlined">Outline</button>
|
||
<button class="button is-danger is-outlined">Outline</button>
|
||
</nav>
|
||
|
||
<nav class="buttons">
|
||
<button class="button is-loading">Load</button>
|
||
<button class="button is-primary is-loading">Load</button>
|
||
<button class="button is-link is-loading">Load</button>
|
||
</nav>
|
||
|
||
<nav class="buttons">
|
||
<button class="button is-info is-loading">Load</button>
|
||
<button class="button is-success is-loading">Load</button>
|
||
<button class="button is-warning is-loading">Load</button>
|
||
<button class="button is-danger is-loading">Load</button>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="columns">
|
||
<div class="column is-2">
|
||
<p class="title">select</p>
|
||
</div>
|
||
<div class="column">
|
||
<div class="field">
|
||
<div class="select is-white">
|
||
<select>
|
||
<option>Select dropdown</option>
|
||
<option>With options</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<div class="select is-light">
|
||
<select>
|
||
<option>Select dropdown</option>
|
||
<option>With options</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<div class="select is-dark">
|
||
<select>
|
||
<option>Select dropdown</option>
|
||
<option>With options</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<div class="select is-black">
|
||
<select>
|
||
<option>Select dropdown</option>
|
||
<option>With options</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<div class="select is-primary">
|
||
<select>
|
||
<option>Select dropdown</option>
|
||
<option>With options</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<div class="select is-link">
|
||
<select>
|
||
<option>Select dropdown</option>
|
||
<option>With options</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<div class="select is-info">
|
||
<select>
|
||
<option>Select dropdown</option>
|
||
<option>With options</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<div class="select is-success">
|
||
<select>
|
||
<option>Select dropdown</option>
|
||
<option>With options</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<div class="select is-warning">
|
||
<select>
|
||
<option>Select dropdown</option>
|
||
<option>With options</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<div class="select is-danger">
|
||
<select>
|
||
<option>Select dropdown</option>
|
||
<option>With options</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="columns">
|
||
<div class="column is-2">
|
||
<p class="title">tag</p>
|
||
</div>
|
||
<div class="column">
|
||
<div class="tags">
|
||
<span class="tag is-black">Black</span>
|
||
<span class="tag is-dark">Dark</span>
|
||
<span class="tag is-light">Light</span>
|
||
<span class="tag is-white">White</span>
|
||
</div>
|
||
<div class="tags">
|
||
<span class="tag is-primary">Primary</span>
|
||
<span class="tag is-link">Link</span>
|
||
<span class="tag is-info">Info</span>
|
||
<span class="tag is-success">Success</span>
|
||
<span class="tag is-warning">Warning</span>
|
||
<span class="tag is-danger">Danger</span>
|
||
</div>
|
||
|
||
<div class="tags has-addons">
|
||
<span class="tag">Package</span>
|
||
<span class="tag is-primary">Bulma</span>
|
||
</div>
|
||
|
||
<div class="tags has-addons">
|
||
<span class="tag is-danger">Alex Smith</span>
|
||
<a class="tag is-delete"></a>
|
||
</div>
|
||
|
||
<div class="field is-grouped is-grouped-multiline">
|
||
<div class="control">
|
||
<div class="tags has-addons">
|
||
<span class="tag is-dark">npm</span>
|
||
<span class="tag is-info">0.7.0</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="control">
|
||
<div class="tags has-addons">
|
||
<span class="tag is-dark">build</span>
|
||
<span class="tag is-success">passing</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="control">
|
||
<div class="tags has-addons">
|
||
<span class="tag is-dark">chat</span>
|
||
<span class="tag is-primary">on gitter</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="columns">
|
||
<div class="column is-2">
|
||
<p class="title">card</p>
|
||
</div>
|
||
<div class="column">
|
||
<!--
|
||
<div class="card">
|
||
<div class="card-image">
|
||
<figure class="image is-4by3">
|
||
<img alt="Placeholder" src="images/placeholders/1280x960.png" alt="Placeholder image">
|
||
</figure>
|
||
</div>
|
||
<div class="card-content">
|
||
<div class="media">
|
||
<div class="media-left">
|
||
<figure class="image is-48x48">
|
||
<img alt="Placeholder" src="images/placeholders/96x96.png" alt="Placeholder image">
|
||
</figure>
|
||
</div>
|
||
<div class="media-content">
|
||
<p class="title is-4">John Smith</p>
|
||
<p class="subtitle is-6">@johnsmith</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content">
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||
Phasellus nec iaculis mauris. <a>@bulmaio</a>.
|
||
<a href="#">#css</a> <a href="#">#responsive</a>
|
||
<br>
|
||
<time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
-->
|
||
|
||
<div class="block">
|
||
<div class="card">
|
||
<header class="card-header">
|
||
<p class="card-header-title">Component</p>
|
||
<a href="#" class="card-header-icon" aria-label="more options">
|
||
<span class="icon">
|
||
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
||
</span>
|
||
</a>
|
||
</header>
|
||
<div class="card-content">
|
||
<div class="content">
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
|
||
<a href="#">@bulmaio</a>. <a href="#">#css</a>
|
||
<a href="#">#responsive</a>
|
||
<br>
|
||
<time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
|
||
</div>
|
||
</div>
|
||
<footer class="card-footer">
|
||
<a href="#" class="card-footer-item">Save</a>
|
||
<a href="#" class="card-footer-item">Edit</a>
|
||
<a href="#" class="card-footer-item">Delete</a>
|
||
</footer>
|
||
</div>
|
||
</div>
|
||
|
||
<!--
|
||
<div class="card">
|
||
<div class="card-content">
|
||
<p class="title">
|
||
“There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.”
|
||
</p>
|
||
<p class="subtitle">
|
||
Jeff Atwood
|
||
</p>
|
||
</div>
|
||
<footer class="card-footer">
|
||
<p class="card-footer-item">
|
||
<span>
|
||
View on <a href="https://twitter.com/codinghorror/status/506010907021828096">Twitter</a>
|
||
</span>
|
||
</p>
|
||
<p class="card-footer-item">
|
||
<span>
|
||
Share on <a href="#">Facebook</a>
|
||
</span>
|
||
</p>
|
||
</footer>
|
||
</div>
|
||
-->
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="columns">
|
||
<div class="column is-2">
|
||
<p class="title">progress</p>
|
||
</div>
|
||
<div class="column">
|
||
<progress class="progress" value="15" max="100">15%</progress>
|
||
<progress class="progress is-primary" value="15" max="100">15%</progress>
|
||
<progress class="progress is-link" value="30" max="100">30%</progress>
|
||
<progress class="progress is-info" value="45" max="100">45%</progress>
|
||
<progress class="progress is-success" value="60" max="100">60%</progress>
|
||
<progress class="progress is-warning" value="75" max="100">75%</progress>
|
||
<progress class="progress is-danger" value="90" max="100">90%</progress>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="columns">
|
||
<div class="column is-2">
|
||
<p class="title">notification</p>
|
||
</div>
|
||
<div class="column">
|
||
<div class="notification">
|
||
<button aria-label="delete" class="delete"></button>
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
|
||
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex
|
||
sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet
|
||
consectetur adipiscing elit. <code>Hello World</code> Aenean lacinia bibendum nulla sed consectetur. Donec
|
||
id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum.
|
||
<pre>Hello World</pre>
|
||
</div>
|
||
|
||
<div class="notification is-primary">
|
||
<button aria-label="delete" class="delete"></button>
|
||
Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
|
||
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex
|
||
sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet
|
||
consectetur adipiscing elit. <code>Hello World</code> Aenean lacinia bibendum nulla sed consectetur. Donec
|
||
id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum.
|
||
<pre>Hello World</pre>
|
||
</div>
|
||
|
||
<div class="notification is-link">
|
||
<button aria-label="delete" class="delete"></button>
|
||
Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
|
||
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex
|
||
sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet
|
||
consectetur adipiscing elit. <code>Hello World</code> Aenean lacinia bibendum nulla sed consectetur. Donec
|
||
id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum.
|
||
<pre>Hello World</pre>
|
||
</div>
|
||
|
||
<div class="notification is-info">
|
||
<button aria-label="delete" class="delete"></button>
|
||
Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
|
||
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex
|
||
sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet
|
||
consectetur adipiscing elit. <code>Hello World</code> Aenean lacinia bibendum nulla sed consectetur. Donec
|
||
id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum.
|
||
<pre>Hello World</pre>
|
||
</div>
|
||
|
||
<div class="notification is-success">
|
||
<button aria-label="delete" class="delete"></button>
|
||
Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
|
||
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex
|
||
sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet
|
||
consectetur adipiscing elit. <code>Hello World</code> Aenean lacinia bibendum nulla sed consectetur. Donec
|
||
id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum.
|
||
<pre>Hello World</pre>
|
||
</div>
|
||
|
||
<div class="notification is-warning">
|
||
<button aria-label="delete" class="delete"></button>
|
||
Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
|
||
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex
|
||
sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet
|
||
consectetur adipiscing elit. <code>Hello World</code> Aenean lacinia bibendum nulla sed consectetur. Donec
|
||
id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum.
|
||
<pre>Hello World</pre>
|
||
</div>
|
||
|
||
<div class="notification is-danger">
|
||
<button aria-label="delete" class="delete"></button>
|
||
Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
|
||
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex
|
||
sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet
|
||
consectetur adipiscing elit. <code>Hello World</code> Aenean lacinia bibendum nulla sed consectetur. Donec
|
||
id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum.
|
||
<pre>Hello World</pre>
|
||
</div>
|
||
|
||
<div class="notification is-black">
|
||
<button aria-label="delete" class="delete"></button>
|
||
Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
|
||
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex
|
||
sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet
|
||
consectetur adipiscing elit. <code>Hello World</code> Aenean lacinia bibendum nulla sed consectetur. Donec
|
||
id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum.
|
||
<pre>Hello World</pre>
|
||
</div>
|
||
|
||
<div class="notification is-dark">
|
||
<button aria-label="delete" class="delete"></button>
|
||
Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
|
||
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex
|
||
sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet
|
||
consectetur adipiscing elit. <code>Hello World</code> Aenean lacinia bibendum nulla sed consectetur. Donec
|
||
id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum.
|
||
<pre>Hello World</pre>
|
||
</div>
|
||
|
||
<div class="notification is-light">
|
||
<button aria-label="delete" class="delete"></button>
|
||
Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
|
||
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex
|
||
sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet
|
||
consectetur adipiscing elit. <code>Hello World</code> Aenean lacinia bibendum nulla sed consectetur. Donec
|
||
id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum.
|
||
<pre>Hello World</pre>
|
||
</div>
|
||
|
||
<div class="notification is-white">
|
||
<button aria-label="delete" class="delete"></button>
|
||
Primar lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor.
|
||
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex
|
||
sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet
|
||
consectetur adipiscing elit. <code>Hello World</code> Aenean lacinia bibendum nulla sed consectetur. Donec
|
||
id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum.
|
||
<pre>Hello World</pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="columns">
|
||
<div class="column is-2">
|
||
<p class="title">message</p>
|
||
</div>
|
||
<div class="column">
|
||
<article class="message is-test">
|
||
<div class="message-header">
|
||
<p>Hello World</p>
|
||
<button class="delete" aria-label="delete"></button>
|
||
</div>
|
||
<div class="message-body">
|
||
Lorem ipsum dolor sit ametfejsoum adipiscing
|
||
<strong>pellentesque risus mi</strong>, tempus quis placerat ut. Nullam gravida purus diam, et dictum
|
||
<a>felis venenatis</a> efficitur. Aenean <em>eleifend lacus</em> in mollis.
|
||
</div>
|
||
</article>
|
||
|
||
<!--
|
||
<article class="message">
|
||
<div class="message-header">
|
||
<p>Hello World</p>
|
||
<button class="delete" aria-label="delete"></button>
|
||
</div>
|
||
<div class="message-body">
|
||
Lorem ipsum dolor sit ametfejsoum adipiscing <strong>pellentesque risus mi</strong>, tempus quis placerat ut. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean <em>eleifend lacus</em> in mollis.
|
||
</div>
|
||
</article>
|
||
-->
|
||
|
||
<article class="message is-primary">
|
||
<div class="message-header">
|
||
<p>Primary</p>
|
||
<button class="delete" aria-label="delete"></button>
|
||
</div>
|
||
<div class="message-body">
|
||
Lorem ipsum dolor sit ametfejsoum adipiscing
|
||
<strong>pellentesque risus mi</strong>, tempus quis placerat ut. Nullam gravida purus diam, et dictum
|
||
<a>felis venenatis</a> efficitur. Aenean <em>eleifend lacus</em> in mollis.
|
||
</div>
|
||
</article>
|
||
|
||
<article class="message is-link">
|
||
<div class="message-header">
|
||
<p>Link</p>
|
||
<button class="delete" aria-label="delete"></button>
|
||
</div>
|
||
<div class="message-body">
|
||
Lorem ipsum dolor sit ametfejsoum adipiscing
|
||
<strong>pellentesque risus mi</strong>, tempus quis placerat ut. Nullam gravida purus diam, et dictum
|
||
<a>felis venenatis</a> efficitur. Aenean <em>eleifend lacus</em> in mollis.
|
||
</div>
|
||
</article>
|
||
|
||
<article class="message is-info">
|
||
<div class="message-header">
|
||
<p>Info</p>
|
||
<button class="delete" aria-label="delete"></button>
|
||
</div>
|
||
<div class="message-body">
|
||
Lorem ipsum dolor sit ametfejsoum adipiscing
|
||
<strong>pellentesque risus mi</strong>, tempus quis placerat ut. Nullam gravida purus diam, et dictum
|
||
<a>felis venenatis</a> efficitur. Aenean <em>eleifend lacus</em> in mollis.
|
||
</div>
|
||
</article>
|
||
|
||
<article class="message is-success">
|
||
<div class="message-header">
|
||
<p>Success</p>
|
||
<button class="delete" aria-label="delete"></button>
|
||
</div>
|
||
<div class="message-body">
|
||
Lorem ipsum dolor sit ametfejsoum adipiscing
|
||
<strong>pellentesque risus mi</strong>, tempus quis placerat ut. Nullam gravida purus diam, et dictum
|
||
<a>felis venenatis</a> efficitur. Aenean <em>eleifend lacus</em> in mollis.
|
||
</div>
|
||
</article>
|
||
|
||
<article class="message is-warning">
|
||
<div class="message-header">
|
||
<p>Warning</p>
|
||
<button class="delete" aria-label="delete"></button>
|
||
</div>
|
||
<div class="message-body">
|
||
Lorem ipsum dolor sit ametfejsoum adipiscing
|
||
<strong>pellentesque risus mi</strong>, tempus quis placerat ut. Nullam gravida purus diam, et dictum
|
||
<a>felis venenatis</a> efficitur. Aenean <em>eleifend lacus</em> in mollis.
|
||
</div>
|
||
</article>
|
||
|
||
<article class="message is-danger">
|
||
<div class="message-header">
|
||
<p>Danger</p>
|
||
<button class="delete" aria-label="delete"></button>
|
||
</div>
|
||
<div class="message-body">
|
||
Lorem ipsum dolor sit ametfejsoum adipiscing
|
||
<strong>pellentesque risus mi</strong>, tempus quis placerat ut. Nullam gravida purus diam, et dictum
|
||
<a>felis venenatis</a> efficitur. Aenean <em>eleifend lacus</em> in mollis.
|
||
</div>
|
||
</article>
|
||
|
||
<article class="message is-black">
|
||
<div class="message-header">
|
||
<p>Black</p>
|
||
<button class="delete" aria-label="delete"></button>
|
||
</div>
|
||
<div class="message-body">
|
||
Lorem ipsum dolor sit ametfejsoum adipiscing
|
||
<strong>pellentesque risus mi</strong>, tempus quis placerat ut. Nullam gravida purus diam, et dictum
|
||
<a>felis venenatis</a> efficitur. Aenean <em>eleifend lacus</em> in mollis.
|
||
</div>
|
||
</article>
|
||
|
||
<article class="message is-dark">
|
||
<div class="message-header">
|
||
<p>Dark</p>
|
||
<button class="delete" aria-label="delete"></button>
|
||
</div>
|
||
<div class="message-body">
|
||
Lorem ipsum dolor sit ametfejsoum adipiscing
|
||
<strong>pellentesque risus mi</strong>, tempus quis placerat ut. Nullam gravida purus diam, et dictum
|
||
<a>felis venenatis</a> efficitur. Aenean <em>eleifend lacus</em> in mollis.
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="columns">
|
||
<div class="column is-2">
|
||
<p class="title">tabs</p>
|
||
</div>
|
||
<div class="column">
|
||
<div class="tabs">
|
||
<ul>
|
||
<li class="is-active"><a>Pictures</a></li>
|
||
<li><a>Music</a></li>
|
||
<li><a>Videos</a></li>
|
||
<li><a>Documents</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="tabs is-boxed">
|
||
<ul>
|
||
<li class="is-active">
|
||
<a>
|
||
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
|
||
<span>Pictures</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a>
|
||
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
|
||
<span>Music</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a>
|
||
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
|
||
<span>Videos</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a>
|
||
<span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
|
||
<span>Documents</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="tabs is-toggle">
|
||
<ul>
|
||
<li class="is-active">
|
||
<a>
|
||
<span class="icon is-small"><i class="fas fa-image" aria-hidden="true"></i></span>
|
||
<span>Pictures</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a>
|
||
<span class="icon is-small"><i class="fas fa-music" aria-hidden="true"></i></span>
|
||
<span>Music</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a>
|
||
<span class="icon is-small"><i class="fas fa-film" aria-hidden="true"></i></span>
|
||
<span>Videos</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a>
|
||
<span class="icon is-small"><i class="far fa-file-alt" aria-hidden="true"></i></span>
|
||
<span>Documents</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="tabs is-fullwidth">
|
||
<ul>
|
||
<li>
|
||
<a>
|
||
<span class="icon"><i class="fas fa-angle-left" aria-hidden="true"></i></span>
|
||
<span>Left</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a>
|
||
<span class="icon"><i class="fas fa-angle-up" aria-hidden="true"></i></span>
|
||
<span>Up</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a>
|
||
<span>Right</span>
|
||
<span class="icon"><i class="fas fa-angle-right" aria-hidden="true"></i></span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="columns">
|
||
<div class="column is-2">
|
||
<p class="title">pagination</p>
|
||
</div>
|
||
<div class="column">
|
||
<nav class="pagination" role="navigation" aria-label="pagination">
|
||
<a class="pagination-previous">Previous</a>
|
||
<a class="pagination-next">Next page</a>
|
||
<ul class="pagination-list">
|
||
<li>
|
||
<a class="pagination-link" aria-label="Goto page 1">1</a>
|
||
</li>
|
||
<li>
|
||
<span class="pagination-ellipsis">…</span>
|
||
</li>
|
||
<li>
|
||
<a class="pagination-link" aria-label="Goto page 45">45</a>
|
||
</li>
|
||
<li>
|
||
<a
|
||
class="pagination-link is-current"
|
||
aria-label="Page 46"
|
||
aria-current="page"
|
||
>46</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a class="pagination-link" aria-label="Goto page 47">47</a>
|
||
</li>
|
||
<li>
|
||
<span class="pagination-ellipsis">…</span>
|
||
</li>
|
||
<li>
|
||
<a class="pagination-link" aria-label="Goto page 86">86</a>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="columns">
|
||
<div class="column is-2">
|
||
<p class="title">breadcrumb</p>
|
||
</div>
|
||
<div class="column">
|
||
<nav class="breadcrumb" aria-label="breadcrumbs">
|
||
<ul>
|
||
<li><a href="#">Bulma</a></li>
|
||
<li><a href="#">Documentation</a></li>
|
||
<li><a href="#">Components</a></li>
|
||
<li class="is-active">
|
||
<a href="#" aria-current="page">Breadcrumb</a>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" style="height: 20rem">
|
||
<div class="columns">
|
||
<div class="column is-2">
|
||
<p class="title">dropdown</p>
|
||
</div>
|
||
<div class="column">
|
||
<div class="dropdown is-active">
|
||
<div class="dropdown-trigger">
|
||
<button
|
||
class="button"
|
||
aria-haspopup="true"
|
||
aria-controls="dropdown-menu"
|
||
>
|
||
<span>Dropdown button</span>
|
||
<span class="icon is-small">
|
||
<i class="fas fa-angle-down" aria-hidden="true"></i>
|
||
</span>
|
||
</button>
|
||
</div>
|
||
<div class="dropdown-menu" id="dropdown-menu" role="menu">
|
||
<div class="dropdown-content">
|
||
<a href="#" class="dropdown-item"> Dropdown item </a>
|
||
<a class="dropdown-item"> Other dropdown item </a>
|
||
<a href="#" class="dropdown-item is-active"> Active dropdown item </a>
|
||
<a href="#" class="dropdown-item"> Other dropdown item </a>
|
||
<hr class="dropdown-divider">
|
||
<a href="#" class="dropdown-item"> With a divider </a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="columns">
|
||
<div class="column is-2">
|
||
<p class="title">general</p>
|
||
</div>
|
||
<div class="column">
|
||
<div class="field">
|
||
<label class="label">Name</label>
|
||
<div class="control">
|
||
<input class="input" type="text" placeholder="Text input">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label class="label">Username</label>
|
||
<div class="control has-icons-left has-icons-right">
|
||
<input
|
||
class="input is-success"
|
||
type="text"
|
||
placeholder="Text input"
|
||
value="bulma"
|
||
>
|
||
<span class="icon is-small is-left">
|
||
<i class="fas fa-user"></i>
|
||
</span>
|
||
<span class="icon is-small is-right">
|
||
<i class="fas fa-check"></i>
|
||
</span>
|
||
</div>
|
||
<p class="help is-success">This username is available</p>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label class="label">Email</label>
|
||
<div class="control has-icons-left has-icons-right">
|
||
<input
|
||
class="input is-danger"
|
||
type="email"
|
||
placeholder="Email input"
|
||
value="hello@"
|
||
>
|
||
<span class="icon is-small is-left">
|
||
<i class="fas fa-envelope"></i>
|
||
</span>
|
||
<span class="icon is-small is-right">
|
||
<i class="fas fa-exclamation-triangle"></i>
|
||
</span>
|
||
</div>
|
||
<p class="help is-danger">This email is invalid</p>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label class="label">Subject</label>
|
||
<div class="control">
|
||
<div class="select">
|
||
<select>
|
||
<option>Select dropdown</option>
|
||
<option>With options</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label class="label">Message</label>
|
||
<div class="control">
|
||
<textarea class="textarea" placeholder="Textarea"></textarea>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<div class="control">
|
||
<label class="checkbox">
|
||
<input type="checkbox">
|
||
I agree to the <a href="#">terms and conditions</a>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<div class="control">
|
||
<label class="radio">
|
||
<input type="radio" name="question">
|
||
Yes
|
||
</label>
|
||
<label class="radio">
|
||
<input type="radio" name="question">
|
||
No
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="field is-grouped">
|
||
<div class="control">
|
||
<button class="button is-link">Submit</button>
|
||
</div>
|
||
<div class="control">
|
||
<button class="button is-text">Cancel</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="field has-addons">
|
||
<div class="control">
|
||
<input
|
||
class="input"
|
||
type="text"
|
||
placeholder="Find a repository"
|
||
>
|
||
</div>
|
||
<div class="control">
|
||
<a class="button is-info"> Search </a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="field has-addons">
|
||
<p class="control">
|
||
<input class="input" type="text" placeholder="Your email">
|
||
</p>
|
||
<p class="control">
|
||
<a class="button is-static"> @gmail.com </a>
|
||
</p>
|
||
</div>
|
||
|
||
<div class="field has-addons">
|
||
<p class="control">
|
||
<span class="select">
|
||
<select>
|
||
<option>$</option>
|
||
<option>£</option>
|
||
<option>€</option>
|
||
</select>
|
||
</span>
|
||
</p>
|
||
<p class="control">
|
||
<input class="input" type="text" placeholder="Amount of money">
|
||
</p>
|
||
<p class="control">
|
||
<a class="button"> Transfer </a>
|
||
</p>
|
||
</div>
|
||
|
||
<div class="field has-addons">
|
||
<p class="control">
|
||
<span class="select">
|
||
<select>
|
||
<option>$</option>
|
||
<option>£</option>
|
||
<option>€</option>
|
||
</select>
|
||
</span>
|
||
</p>
|
||
<p class="control is-expanded">
|
||
<input class="input" type="text" placeholder="Amount of money">
|
||
</p>
|
||
<p class="control">
|
||
<a class="button"> Transfer </a>
|
||
</p>
|
||
</div>
|
||
|
||
<div class="field has-addons">
|
||
<div class="control is-expanded">
|
||
<div class="select is-fullwidth">
|
||
<select name="country">
|
||
<option value="Argentina">Argentina</option>
|
||
<option value="Bolivia">Bolivia</option>
|
||
<option value="Brazil">Brazil</option>
|
||
<option value="Chile">Chile</option>
|
||
<option value="Colombia">Colombia</option>
|
||
<option value="Ecuador">Ecuador</option>
|
||
<option value="Guyana">Guyana</option>
|
||
<option value="Paraguay">Paraguay</option>
|
||
<option value="Peru">Peru</option>
|
||
<option value="Suriname">Suriname</option>
|
||
<option value="Uruguay">Uruguay</option>
|
||
<option value="Venezuela">Venezuela</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="control">
|
||
<button type="submit" class="button is-primary">Choose</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="field is-grouped is-grouped-multiline">
|
||
<p class="control">
|
||
<a class="button"> One </a>
|
||
</p>
|
||
<p class="control">
|
||
<a class="button"> Two </a>
|
||
</p>
|
||
<p class="control">
|
||
<a class="button"> Three </a>
|
||
</p>
|
||
<p class="control">
|
||
<a class="button"> Four </a>
|
||
</p>
|
||
<p class="control">
|
||
<a class="button"> Five </a>
|
||
</p>
|
||
<p class="control">
|
||
<a class="button"> Six </a>
|
||
</p>
|
||
<p class="control">
|
||
<a class="button"> Seven </a>
|
||
</p>
|
||
<p class="control">
|
||
<a class="button"> Eight </a>
|
||
</p>
|
||
<p class="control">
|
||
<a class="button"> Nine </a>
|
||
</p>
|
||
<p class="control">
|
||
<a class="button"> Ten </a>
|
||
</p>
|
||
<p class="control">
|
||
<a class="button"> Eleven </a>
|
||
</p>
|
||
<p class="control">
|
||
<a class="button"> Twelve </a>
|
||
</p>
|
||
<p class="control">
|
||
<a class="button"> Thirteen </a>
|
||
</p>
|
||
</div>
|
||
|
||
<div class="field is-horizontal">
|
||
<div class="field-label is-normal">
|
||
<label class="label">From</label>
|
||
</div>
|
||
<div class="field-body">
|
||
<div class="field">
|
||
<p class="control is-expanded has-icons-left">
|
||
<input class="input" type="text" placeholder="Name">
|
||
<span class="icon is-small is-left">
|
||
<i class="fas fa-user"></i>
|
||
</span>
|
||
</p>
|
||
</div>
|
||
<div class="field">
|
||
<p class="control is-expanded has-icons-left has-icons-right">
|
||
<input
|
||
class="input is-success"
|
||
type="email"
|
||
placeholder="Email"
|
||
value="alex@smith.com"
|
||
>
|
||
<span class="icon is-small is-left">
|
||
<i class="fas fa-envelope"></i>
|
||
</span>
|
||
<span class="icon is-small is-right">
|
||
<i class="fas fa-check"></i>
|
||
</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="field is-horizontal">
|
||
<div class="field-label"></div>
|
||
<div class="field-body">
|
||
<div class="field is-expanded">
|
||
<div class="field has-addons">
|
||
<p class="control">
|
||
<a class="button is-static"> +44 </a>
|
||
</p>
|
||
<p class="control is-expanded">
|
||
<input
|
||
class="input"
|
||
type="tel"
|
||
placeholder="Your phone number"
|
||
>
|
||
</p>
|
||
</div>
|
||
<p class="help">Do not enter the first zero</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="field is-horizontal">
|
||
<div class="field-label is-normal">
|
||
<label class="label">Department</label>
|
||
</div>
|
||
<div class="field-body">
|
||
<div class="field is-narrow">
|
||
<div class="control">
|
||
<div class="select is-fullwidth">
|
||
<select>
|
||
<option>Business development</option>
|
||
<option>Marketing</option>
|
||
<option>Sales</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="field is-horizontal">
|
||
<div class="field-label">
|
||
<label class="label">Already a member?</label>
|
||
</div>
|
||
<div class="field-body">
|
||
<div class="field is-narrow">
|
||
<div class="control">
|
||
<label class="radio">
|
||
<input type="radio" name="member">
|
||
Yes
|
||
</label>
|
||
<label class="radio">
|
||
<input type="radio" name="member">
|
||
No
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="field is-horizontal">
|
||
<div class="field-label is-normal">
|
||
<label class="label">Subject</label>
|
||
</div>
|
||
<div class="field-body">
|
||
<div class="field">
|
||
<div class="control">
|
||
<input
|
||
class="input is-danger"
|
||
type="text"
|
||
placeholder="e.g. Partnership opportunity"
|
||
>
|
||
</div>
|
||
<p class="help is-danger">This field is required</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="field is-horizontal">
|
||
<div class="field-label is-normal">
|
||
<label class="label">Question</label>
|
||
</div>
|
||
<div class="field-body">
|
||
<div class="field">
|
||
<div class="control">
|
||
<textarea
|
||
class="textarea"
|
||
placeholder="Explain how we can help you"
|
||
></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="field is-horizontal">
|
||
<div class="field-label">
|
||
<!-- Left empty for spacing -->
|
||
</div>
|
||
<div class="field-body">
|
||
<div class="field">
|
||
<div class="control">
|
||
<button class="button is-primary">Send message</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="columns">
|
||
<div class="column is-2">
|
||
<p class="title">file</p>
|
||
</div>
|
||
<div class="column">
|
||
<div class="file">
|
||
<label class="file-label">
|
||
<input class="file-input" type="file" name="resume">
|
||
<span class="file-cta">
|
||
<span class="file-icon">
|
||
<i class="fas fa-upload"></i>
|
||
</span>
|
||
<span class="file-label"> Choose a file… </span>
|
||
</span>
|
||
</label>
|
||
</div>
|
||
|
||
<div class="file has-name is-boxed">
|
||
<label class="file-label">
|
||
<input class="file-input" type="file" name="resume">
|
||
<span class="file-cta">
|
||
<span class="file-icon">
|
||
<i class="fas fa-upload"></i>
|
||
</span>
|
||
<span class="file-label"> Choose a file… </span>
|
||
</span>
|
||
<span class="file-name"> Screen Shot 2017-07-29 at 15.54.25.png </span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="columns">
|
||
<div class="column is-2">
|
||
<p class="title">icon</p>
|
||
</div>
|
||
<div class="column">
|
||
<div class="block">
|
||
<span class="icon is-small has-text-info">
|
||
<i class="fas fa-info-circle"></i>
|
||
</span>
|
||
|
||
<span class="icon has-text-success">
|
||
<i class="fas fa-check-square"></i>
|
||
</span>
|
||
|
||
<span class="icon is-medium has-text-warning">
|
||
<i class="fas fa-exclamation-triangle"></i>
|
||
</span>
|
||
|
||
<span class="icon is-large has-text-danger">
|
||
<i class="fas fa-ban"></i>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="columns">
|
||
<div class="column is-2">
|
||
<p class="title">delete</p>
|
||
</div>
|
||
<div class="column">
|
||
<div class="block">
|
||
<a class="delete is-small"></a>
|
||
<a class="delete"></a>
|
||
<a class="delete is-medium"></a>
|
||
<a class="delete is-large"></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="columns">
|
||
<div class="column is-2">
|
||
<p class="title">menu</p>
|
||
</div>
|
||
<div class="column">
|
||
<div class="block">
|
||
<aside class="menu">
|
||
<p class="menu-label">General</p>
|
||
<ul class="menu-list">
|
||
<li><a>Dashboard</a></li>
|
||
<li><a>Customers</a></li>
|
||
</ul>
|
||
<p class="menu-label">Administration</p>
|
||
<ul class="menu-list">
|
||
<li><a>Team Settings</a></li>
|
||
<li>
|
||
<a class="is-active">Manage Your Team</a>
|
||
<ul>
|
||
<li><a>Members</a></li>
|
||
<li><a>Plugins</a></li>
|
||
<li><a>Add a member</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a>Invitations</a></li>
|
||
<li><a>Cloud Storage Environment Settings</a></li>
|
||
<li><a>Authentication</a></li>
|
||
</ul>
|
||
<p class="menu-label">Transactions</p>
|
||
<ul class="menu-list">
|
||
<li><a>Payments</a></li>
|
||
<li><a>Transfers</a></li>
|
||
<li><a>Balance</a></li>
|
||
</ul>
|
||
</aside>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="columns">
|
||
<div class="column is-2">
|
||
<p class="title">panel</p>
|
||
</div>
|
||
<div class="column">
|
||
<nav class="panel">
|
||
<p class="panel-heading">Repositories</p>
|
||
<div class="panel-block">
|
||
<p class="control has-icons-left">
|
||
<input class="input" type="text" placeholder="search">
|
||
<span class="icon is-left">
|
||
<i class="fas fa-search" aria-hidden="true"></i>
|
||
</span>
|
||
</p>
|
||
</div>
|
||
<p class="panel-tabs">
|
||
<a class="is-active">All</a>
|
||
<a>Public</a>
|
||
<a>Private</a>
|
||
<a>Sources</a>
|
||
<a>Forks</a>
|
||
</p>
|
||
<a class="panel-block is-active">
|
||
<span class="panel-icon">
|
||
<i class="fas fa-book" aria-hidden="true"></i>
|
||
</span>
|
||
bulma
|
||
</a>
|
||
<a class="panel-block">
|
||
<span class="panel-icon">
|
||
<i class="fas fa-book" aria-hidden="true"></i>
|
||
</span>
|
||
marksheet
|
||
</a>
|
||
<a class="panel-block">
|
||
<span class="panel-icon">
|
||
<i class="fas fa-book" aria-hidden="true"></i>
|
||
</span>
|
||
minireset.css
|
||
</a>
|
||
<a class="panel-block">
|
||
<span class="panel-icon">
|
||
<i class="fas fa-book" aria-hidden="true"></i>
|
||
</span>
|
||
jgthms.github.io
|
||
</a>
|
||
<a class="panel-block">
|
||
<span class="panel-icon">
|
||
<i class="fas fa-code-branch" aria-hidden="true"></i>
|
||
</span>
|
||
daniellowtw/infboard
|
||
</a>
|
||
<a class="panel-block">
|
||
<span class="panel-icon">
|
||
<i class="fas fa-code-branch" aria-hidden="true"></i>
|
||
</span>
|
||
mojs
|
||
</a>
|
||
<label class="panel-block">
|
||
<input type="checkbox">
|
||
remember me
|
||
</label>
|
||
<div class="panel-block">
|
||
<button class="button is-link is-outlined is-fullwidth">reset all filters</button>
|
||
</div>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="columns">
|
||
<div class="column is-2">
|
||
<p class="title">table</p>
|
||
</div>
|
||
<div class="column">
|
||
<table class="table">
|
||
<thead>
|
||
<tr>
|
||
<th><abbr title="Position">Pos</abbr></th>
|
||
<th>Team</th>
|
||
<th><abbr title="Played">Pld</abbr></th>
|
||
<th><abbr title="Won">W</abbr></th>
|
||
<th><abbr title="Drawn">D</abbr></th>
|
||
<th><abbr title="Lost">L</abbr></th>
|
||
<th><abbr title="Goals for">GF</abbr></th>
|
||
<th><abbr title="Goals against">GA</abbr></th>
|
||
<th><abbr title="Goal difference">GD</abbr></th>
|
||
<th><abbr title="Points">Pts</abbr></th>
|
||
<th>Qualification or relegation</th>
|
||
</tr>
|
||
</thead>
|
||
<tfoot>
|
||
<tr>
|
||
<th><abbr title="Position">Pos</abbr></th>
|
||
<th>Team</th>
|
||
<th><abbr title="Played">Pld</abbr></th>
|
||
<th><abbr title="Won">W</abbr></th>
|
||
<th><abbr title="Drawn">D</abbr></th>
|
||
<th><abbr title="Lost">L</abbr></th>
|
||
<th><abbr title="Goals for">GF</abbr></th>
|
||
<th><abbr title="Goals against">GA</abbr></th>
|
||
<th><abbr title="Goal difference">GD</abbr></th>
|
||
<th><abbr title="Points">Pts</abbr></th>
|
||
<th>Qualification or relegation</th>
|
||
</tr>
|
||
</tfoot>
|
||
<tbody>
|
||
<tr>
|
||
<th>1</th>
|
||
<td>
|
||
<a
|
||
href="https://en.wikipedia.org/wiki/Leicester_City_F.C."
|
||
title="Leicester City F.C."
|
||
>Leicester City</a
|
||
>
|
||
<strong>(C)</strong>
|
||
</td>
|
||
<td>38</td>
|
||
<td>23</td>
|
||
<td>12</td>
|
||
<td>3</td>
|
||
<td>68</td>
|
||
<td>36</td>
|
||
<td>+32</td>
|
||
<td>81</td>
|
||
<td>
|
||
Qualification for the
|
||
<a
|
||
href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Group_stage"
|
||
title="2016–17 UEFA Champions League"
|
||
>Champions League group stage</a
|
||
>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th>2</th>
|
||
<td>
|
||
<a
|
||
href="https://en.wikipedia.org/wiki/Arsenal_F.C."
|
||
title="Arsenal F.C."
|
||
>Arsenal</a
|
||
>
|
||
</td>
|
||
<td>38</td>
|
||
<td>20</td>
|
||
<td>11</td>
|
||
<td>7</td>
|
||
<td>65</td>
|
||
<td>36</td>
|
||
<td>+29</td>
|
||
<td>71</td>
|
||
<td>
|
||
Qualification for the
|
||
<a
|
||
href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Group_stage"
|
||
title="2016–17 UEFA Champions League"
|
||
>Champions League group stage</a
|
||
>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th>3</th>
|
||
<td>
|
||
<a
|
||
href="https://en.wikipedia.org/wiki/Tottenham_Hotspur_F.C."
|
||
title="Tottenham Hotspur F.C."
|
||
>Tottenham Hotspur</a
|
||
>
|
||
</td>
|
||
<td>38</td>
|
||
<td>19</td>
|
||
<td>13</td>
|
||
<td>6</td>
|
||
<td>69</td>
|
||
<td>35</td>
|
||
<td>+34</td>
|
||
<td>70</td>
|
||
<td>
|
||
Qualification for the
|
||
<a
|
||
href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Group_stage"
|
||
title="2016–17 UEFA Champions League"
|
||
>Champions League group stage</a
|
||
>
|
||
</td>
|
||
</tr>
|
||
<tr class="is-selected">
|
||
<th>4</th>
|
||
<td>
|
||
<a
|
||
href="https://en.wikipedia.org/wiki/Manchester_City_F.C."
|
||
title="Manchester City F.C."
|
||
>Manchester City</a
|
||
>
|
||
</td>
|
||
<td>38</td>
|
||
<td>19</td>
|
||
<td>9</td>
|
||
<td>10</td>
|
||
<td>71</td>
|
||
<td>41</td>
|
||
<td>+30</td>
|
||
<td>66</td>
|
||
<td>
|
||
Qualification for the
|
||
<a
|
||
href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Play-off_round"
|
||
title="2016–17 UEFA Champions League"
|
||
>Champions League play-off round</a
|
||
>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th>5</th>
|
||
<td>
|
||
<a
|
||
href="https://en.wikipedia.org/wiki/Manchester_United_F.C."
|
||
title="Manchester United F.C."
|
||
>Manchester United</a
|
||
>
|
||
</td>
|
||
<td>38</td>
|
||
<td>19</td>
|
||
<td>9</td>
|
||
<td>10</td>
|
||
<td>49</td>
|
||
<td>35</td>
|
||
<td>+14</td>
|
||
<td>66</td>
|
||
<td>
|
||
Qualification for the
|
||
<a
|
||
href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Europa_League#Group_stage"
|
||
title="2016–17 UEFA Europa League"
|
||
>Europa League group stage</a
|
||
>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th>6</th>
|
||
<td>
|
||
<a
|
||
href="https://en.wikipedia.org/wiki/Southampton_F.C."
|
||
title="Southampton F.C."
|
||
>Southampton</a
|
||
>
|
||
</td>
|
||
<td>38</td>
|
||
<td>18</td>
|
||
<td>9</td>
|
||
<td>11</td>
|
||
<td>59</td>
|
||
<td>41</td>
|
||
<td>+18</td>
|
||
<td>63</td>
|
||
<td>
|
||
Qualification for the
|
||
<a
|
||
href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Europa_League#Group_stage"
|
||
title="2016–17 UEFA Europa League"
|
||
>Europa League group stage</a
|
||
>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th>7</th>
|
||
<td>
|
||
<a
|
||
href="https://en.wikipedia.org/wiki/West_Ham_United_F.C."
|
||
title="West Ham United F.C."
|
||
>West Ham United</a
|
||
>
|
||
</td>
|
||
<td>38</td>
|
||
<td>16</td>
|
||
<td>14</td>
|
||
<td>8</td>
|
||
<td>65</td>
|
||
<td>51</td>
|
||
<td>+14</td>
|
||
<td>62</td>
|
||
<td>
|
||
Qualification for the
|
||
<a
|
||
href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Europa_League#Third_qualifying_round"
|
||
title="2016–17 UEFA Europa League"
|
||
>Europa League third qualifying round</a
|
||
>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th>8</th>
|
||
<td>
|
||
<a
|
||
href="https://en.wikipedia.org/wiki/Liverpool_F.C."
|
||
title="Liverpool F.C."
|
||
>Liverpool</a
|
||
>
|
||
</td>
|
||
<td>38</td>
|
||
<td>16</td>
|
||
<td>12</td>
|
||
<td>10</td>
|
||
<td>63</td>
|
||
<td>50</td>
|
||
<td>+13</td>
|
||
<td>60</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<th>9</th>
|
||
<td>
|
||
<a
|
||
href="https://en.wikipedia.org/wiki/Stoke_City_F.C."
|
||
title="Stoke City F.C."
|
||
>Stoke City</a
|
||
>
|
||
</td>
|
||
<td>38</td>
|
||
<td>14</td>
|
||
<td>9</td>
|
||
<td>15</td>
|
||
<td>41</td>
|
||
<td>55</td>
|
||
<td>−14</td>
|
||
<td>51</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<th>10</th>
|
||
<td>
|
||
<a
|
||
href="https://en.wikipedia.org/wiki/Chelsea_F.C."
|
||
title="Chelsea F.C."
|
||
>Chelsea</a
|
||
>
|
||
</td>
|
||
<td>38</td>
|
||
<td>12</td>
|
||
<td>14</td>
|
||
<td>12</td>
|
||
<td>59</td>
|
||
<td>53</td>
|
||
<td>+6</td>
|
||
<td>50</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<th>11</th>
|
||
<td>
|
||
<a
|
||
href="https://en.wikipedia.org/wiki/Everton_F.C."
|
||
title="Everton F.C."
|
||
>Everton</a
|
||
>
|
||
</td>
|
||
<td>38</td>
|
||
<td>11</td>
|
||
<td>14</td>
|
||
<td>13</td>
|
||
<td>59</td>
|
||
<td>55</td>
|
||
<td>+4</td>
|
||
<td>47</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<th>12</th>
|
||
<td>
|
||
<a
|
||
href="https://en.wikipedia.org/wiki/Swansea_City_A.F.C."
|
||
title="Swansea City A.F.C."
|
||
>Swansea City</a
|
||
>
|
||
</td>
|
||
<td>38</td>
|
||
<td>12</td>
|
||
<td>11</td>
|
||
<td>15</td>
|
||
<td>42</td>
|
||
<td>52</td>
|
||
<td>−10</td>
|
||
<td>47</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<th>13</th>
|
||
<td>
|
||
<a
|
||
href="https://en.wikipedia.org/wiki/Watford_F.C."
|
||
title="Watford F.C."
|
||
>Watford</a
|
||
>
|
||
</td>
|
||
<td>38</td>
|
||
<td>12</td>
|
||
<td>9</td>
|
||
<td>17</td>
|
||
<td>40</td>
|
||
<td>50</td>
|
||
<td>−10</td>
|
||
<td>45</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<th>14</th>
|
||
<td>
|
||
<a
|
||
href="https://en.wikipedia.org/wiki/West_Bromwich_Albion_F.C."
|
||
title="West Bromwich Albion F.C."
|
||
>West Bromwich Albion</a
|
||
>
|
||
</td>
|
||
<td>38</td>
|
||
<td>10</td>
|
||
<td>13</td>
|
||
<td>15</td>
|
||
<td>34</td>
|
||
<td>48</td>
|
||
<td>−14</td>
|
||
<td>43</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<th>15</th>
|
||
<td>
|
||
<a
|
||
href="https://en.wikipedia.org/wiki/Crystal_Palace_F.C."
|
||
title="Crystal Palace F.C."
|
||
>Crystal Palace</a
|
||
>
|
||
</td>
|
||
<td>38</td>
|
||
<td>11</td>
|
||
<td>9</td>
|
||
<td>18</td>
|
||
<td>39</td>
|
||
<td>51</td>
|
||
<td>−12</td>
|
||
<td>42</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<th>16</th>
|
||
<td>
|
||
<a
|
||
href="https://en.wikipedia.org/wiki/A.F.C._Bournemouth"
|
||
title="A.F.C. Bournemouth"
|
||
>AFC Bournemouth</a
|
||
>
|
||
</td>
|
||
<td>38</td>
|
||
<td>11</td>
|
||
<td>9</td>
|
||
<td>18</td>
|
||
<td>45</td>
|
||
<td>67</td>
|
||
<td>−22</td>
|
||
<td>42</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<th>17</th>
|
||
<td>
|
||
<a
|
||
href="https://en.wikipedia.org/wiki/Sunderland_A.F.C."
|
||
title="Sunderland A.F.C."
|
||
>Sunderland</a
|
||
>
|
||
</td>
|
||
<td>38</td>
|
||
<td>9</td>
|
||
<td>12</td>
|
||
<td>17</td>
|
||
<td>48</td>
|
||
<td>62</td>
|
||
<td>−14</td>
|
||
<td>39</td>
|
||
<td></td>
|
||
</tr>
|
||
<tr>
|
||
<th>18</th>
|
||
<td>
|
||
<a
|
||
href="https://en.wikipedia.org/wiki/Newcastle_United_F.C."
|
||
title="Newcastle United F.C."
|
||
>Newcastle United</a
|
||
>
|
||
<strong>(R)</strong>
|
||
</td>
|
||
<td>38</td>
|
||
<td>9</td>
|
||
<td>10</td>
|
||
<td>19</td>
|
||
<td>44</td>
|
||
<td>65</td>
|
||
<td>−21</td>
|
||
<td>37</td>
|
||
<td>
|
||
Relegation to the
|
||
<a
|
||
href="https://en.wikipedia.org/wiki/2016%E2%80%9317_Football_League_Championship"
|
||
title="2016–17 Football League Championship"
|
||
>Football League Championship</a
|
||
>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th>19</th>
|
||
<td>
|
||
<a
|
||
href="https://en.wikipedia.org/wiki/Norwich_City_F.C."
|
||
title="Norwich City F.C."
|
||
>Norwich City</a
|
||
>
|
||
<strong>(R)</strong>
|
||
</td>
|
||
<td>38</td>
|
||
<td>9</td>
|
||
<td>7</td>
|
||
<td>22</td>
|
||
<td>39</td>
|
||
<td>67</td>
|
||
<td>−28</td>
|
||
<td>34</td>
|
||
<td>
|
||
Relegation to the
|
||
<a
|
||
href="https://en.wikipedia.org/wiki/2016%E2%80%9317_Football_League_Championship"
|
||
title="2016–17 Football League Championship"
|
||
>Football League Championship</a
|
||
>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<th>20</th>
|
||
<td>
|
||
<a
|
||
href="https://en.wikipedia.org/wiki/Aston_Villa_F.C."
|
||
title="Aston Villa F.C."
|
||
>Aston Villa</a
|
||
>
|
||
<strong>(R)</strong>
|
||
</td>
|
||
<td>38</td>
|
||
<td>3</td>
|
||
<td>8</td>
|
||
<td>27</td>
|
||
<td>27</td>
|
||
<td>76</td>
|
||
<td>−49</td>
|
||
<td>17</td>
|
||
<td>
|
||
Relegation to the
|
||
<a
|
||
href="https://en.wikipedia.org/wiki/2016%E2%80%9317_Football_League_Championship"
|
||
title="2016–17 Football League Championship"
|
||
>Football League Championship</a
|
||
>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<nav class="navbar is-">
|
||
<div class="navbar-brand">
|
||
<a class="navbar-item">
|
||
<img
|
||
src="images/bulma-logo.png"
|
||
alt="Bulma: a modern CSS framework based on Flexbox"
|
||
width="112"
|
||
height="28"
|
||
>
|
||
|
||
Test
|
||
</a>
|
||
<div class="navbar-burger burger" data-target="navMenuColor-example">
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="navMenuColor-example" class="navbar-menu is-active">
|
||
<div class="navbar-start">
|
||
<a class="navbar-item" href=""> Home </a>
|
||
<div class="navbar-item has-dropdown is-hoverable">
|
||
<a class="navbar-link" href="documentation/overview/start/"> Docs </a>
|
||
<div class="navbar-dropdown">
|
||
<a class="navbar-item" href="documentation/overview/start/"> Overview </a>
|
||
<a class="navbar-item" href="documentation/modifiers/syntax/"> Modifiers </a>
|
||
<a class="navbar-item" href="documentation/columns/basics/"> Columns </a>
|
||
<a class="navbar-item" href="documentation/layout/container/"> Layout </a>
|
||
<a class="navbar-item" href="documentation/form/general/"> Form </a>
|
||
<hr class="navbar-divider">
|
||
<a class="navbar-item" href="documentation/elements/box/"> Elements </a>
|
||
<a
|
||
class="navbar-item is-active"
|
||
href="documentation/components/breadcrumb/"
|
||
>
|
||
Components
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="navbar-end">
|
||
<div class="navbar-item">
|
||
<a class="button is-primary" href="#">
|
||
<span class="icon">
|
||
<i class="fas fa-download"></i>
|
||
</span>
|
||
<span>Download</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<section class="section">
|
||
<div class="columns">
|
||
<div class="column is-2">
|
||
<p class="title">content</p>
|
||
</div>
|
||
<div class="column">
|
||
<div class="content">
|
||
<h1>Hello World</h1>
|
||
<p>
|
||
Lorem ipsum<sup><a>[1]</a></sup> dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus
|
||
ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper
|
||
dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub<sub>script</sub> works as
|
||
well!
|
||
</p>
|
||
<h2>Second level</h2>
|
||
<p>
|
||
Curabitur accumsan turpis pharetra
|
||
<strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id.
|
||
Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus
|
||
facilisis. Donec at dignissim dui. Ut et neque nisl.
|
||
</p>
|
||
<ul>
|
||
<li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
|
||
<li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
|
||
<li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
|
||
<li>Ut non enim metus.</li>
|
||
</ul>
|
||
<h3>Third level</h3>
|
||
<p>
|
||
Quisque ante lacus, malesuada ac auctor vitae, congue
|
||
<a href="#">non ante</a>. Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu
|
||
rutrum tellus.
|
||
</p>
|
||
<ol>
|
||
<li>Donec blandit a lorem id convallis.</li>
|
||
<li>Cras gravida arcu at diam gravida gravida.</li>
|
||
<li>Integer in volutpat libero.</li>
|
||
<li>Donec a diam tellus.</li>
|
||
<li>Aenean nec tortor orci.</li>
|
||
<li>Quisque aliquam cursus urna, non bibendum massa viverra eget.</li>
|
||
<li>Vivamus maximus ultricies pulvinar.</li>
|
||
</ol>
|
||
<blockquote>
|
||
Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus
|
||
sit amet turpis.
|
||
</blockquote>
|
||
<p>
|
||
Quisque at semper enim, eu hendrerit odio. Etiam auctor nisl et
|
||
<em>justo sodales</em> elementum. Maecenas ultrices lacus quis neque consectetur, et lobortis nisi
|
||
molestie.
|
||
</p>
|
||
<p>
|
||
Sed sagittis enim ac tortor maximus rutrum. Nulla facilisi. Donec mattis vulputate risus in luctus.
|
||
Maecenas vestibulum interdum commodo.
|
||
</p>
|
||
<dl>
|
||
<dt>Web</dt>
|
||
<dd>The part of the Internet that contains websites and web pages</dd>
|
||
<dt>HTML</dt>
|
||
<dd>A markup language for creating web pages</dd>
|
||
<dt>CSS</dt>
|
||
<dd>A technology to make HTML look better</dd>
|
||
</dl>
|
||
<p>
|
||
Suspendisse egestas sapien non felis placerat elementum. Morbi tortor nisl, suscipit sed mi sit amet,
|
||
mollis malesuada nulla. Nulla facilisi. Nullam ac erat ante.
|
||
</p>
|
||
<h4>Fourth level</h4>
|
||
<p>
|
||
Nulla efficitur eleifend nisi, sit amet bibendum sapien fringilla ac. Mauris euismod metus a tellus
|
||
laoreet, at elementum ex efficitur.
|
||
</p>
|
||
<pre>
|
||
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<title>Hello World</title>
|
||
</head>
|
||
<body>
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p>
|
||
</body>
|
||
</html>
|
||
</pre>
|
||
<p>
|
||
Maecenas eleifend sollicitudin dui, faucibus sollicitudin augue cursus non. Ut finibus eleifend arcu ut
|
||
vehicula. Mauris eu est maximus est porta condimentum in eu justo. Nulla id iaculis sapien.
|
||
</p>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>One</th>
|
||
<th>Two</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Three</td>
|
||
<td>Four</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Five</td>
|
||
<td>Six</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Seven</td>
|
||
<td>Eight</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Nine</td>
|
||
<td>Ten</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Eleven</td>
|
||
<td>Twelve</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<p>
|
||
Phasellus porttitor enim id metus volutpat ultricies. Ut nisi nunc, blandit sed dapibus at, vestibulum in
|
||
felis. Etiam iaculis lorem ac nibh bibendum rhoncus. Nam interdum efficitur ligula sit amet ullamcorper.
|
||
Etiam tristique, leo vitae porta faucibus, mi lacus laoreet metus, at cursus leo est vel tellus. Sed ac
|
||
posuere est. Nunc ultricies nunc neque, vitae ultricies ex sodales quis. Aliquam eu nibh in libero
|
||
accumsan pulvinar. Nullam nec nisl placerat, pretium metus vel, euismod ipsum. Proin tempor cursus nisl
|
||
vel condimentum. Nam pharetra varius metus non pellentesque.
|
||
</p>
|
||
<h5>Fifth level</h5>
|
||
<p>
|
||
Aliquam sagittis rhoncus vulputate. Cras non luctus sem, sed tincidunt ligula. Vestibulum at nunc elit.
|
||
Praesent aliquet ligula mi, in luctus elit volutpat porta. Phasellus molestie diam vel nisi sodales, a
|
||
eleifend augue laoreet. Sed nec eleifend justo. Nam et sollicitudin odio.
|
||
</p>
|
||
<figure>
|
||
<img alt="Placeholder" src="images/placeholders/256x256.png">
|
||
<img alt="Placeholder" src="images/placeholders/256x256.png">
|
||
<figcaption>Figure 1: Some beautiful placeholders</figcaption>
|
||
</figure>
|
||
<h6>Sixth level</h6>
|
||
<p>
|
||
Cras in nibh lacinia, venenatis nisi et, auctor urna. Donec pulvinar lacus sed diam dignissim, ut eleifend
|
||
eros accumsan. Phasellus non tortor eros. Ut sed rutrum lacus. Etiam purus nunc, scelerisque quis enim
|
||
vitae, malesuada ultrices turpis. Nunc vitae maximus purus, nec consectetur dui. Suspendisse euismod, elit
|
||
vel rutrum commodo, ipsum tortor maximus dui, sed varius sapien odio vitae est. Etiam at cursus metus.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</body>
|
||
</html>
|