Typography
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
A small element
A Link
Lorem ipsum dolor sit amet, consectetur adip* isicing elit, sed do eiusmod *tempor incididunt ut labore et dolore magna aliqua.
Duis aute irure dolor in A link reprehenderit in voluptate velit esse cillum bold text dolore eu fugiat nulla pariatur. Excepteur span element sint occaecat cupidatat non proident, sunt italicised text in culpa qui officia deserunt mollit anim id some code est laborum.
Lists
Unordered List
- An item
- An item
- An item
- An item
- An item
Unordered List
- Item one
- Item two
- Item three
- Item four
- Item five
A simple blockquote that appears with a typing effect.
- Author Name
A simple blockquote
Some HTML…
<blockquote cite="http://www.imdb.com/title/tt0284978/quotes/qt1375101">
<p>You planning a vacation, Mr. Sullivan?</p>
<footer>
<a href="http://www.imdb.com/title/tt0284978/quotes/qt1375101">Sunways Security Guard</a>
</footer>
</blockquote>
…CSS…
blockquote {
text-align: center;
font-weight: bold;
}
blockquote footer {
font-size: .8rem;
}
…and JavaScript
const blockquote = document.querySelector("blockquote")
const bolden = (keyString, string) =>
string.replace(new RegExp(keyString, 'g'), '<strong>'+keyString+'</strong>')
blockquote.innerHTML = bolden("Mr. Sullivan", blockquote.innerHTML)
Single line of code
HTML Includes
Contact form
{% include site-form.html %}
Demo map embed
{% include map.html id="XXXXXX" title="Coffee shop map" %}
Button include
{% include button.html text="A button" link="https://david.darn.es" %}
{% include button.html text="A button with icon" link="https://twitter.com/imswarnil" icon="home" %}
{% include button.html text="Primary Button" link="#" color="primary" %}
{% include button.html text="Info Button" link="#" color="info" %}
{% include button.html text="Success Button" link="#" color="success" %}
{% include button.html text="Warning Button" link="#" color="warning" %}
{% include button.html text="Danger Button" link="#" color="danger" %}
{% include button.html text="Small Primary" link="#" color="primary" size="small" %}
{% include button.html text="Large Primary" link="#" color="primary" size="large" %}
{% include button.html text="Full Width Button" link="#" color="primary" fullwidth=true %}
{% include button.html text="Outlined Button" link="#" color="primary" outlined=true %}
{% include button.html text="Rounded Button" link="#" color="primary" rounded=true %}
{% include button.html text="Hovered Button" link="#" color="primary" hovered=true %}
{% include button.html text="Active Button" link="#" color="primary" active=true %}
{% include button.html text="Button with Icon" link="#" color="primary" icon="bold" %}
Embed
Youtube Video Embed
Rick Astley - Never Gonna Give You Up
Music video by Rick Astley performing Never Gonna Give You Up.
by
Rick Astley
{% include embed/youtube.html
id="uV3eTXpEBOg"
title="Rick Astley - Never Gonna Give You Up"
description="Music video by Rick Astley performing Never Gonna Give You Up."
author="Rick Astley"
date = "15-July-1995"
start_time="0"
end_time="0"
autoplay="false"
controls="true"
muted="false"
showinfo="true"
loop="false"
%}
Tweet Embed
{% include embed/tweet.html
id="1465053672593784834"
custom_title="Check out this amazing tweet!"
user_handle="tweet"
%}
Instagram Embed
Sample Instagram Embed
Check out this amazing post!
Posted by @frazmohammad
Spotify Embed
Check out this amazing track!
Shared by @yourusername
home
Image includes
{% include figure.html image="https://picsum.photos/600/800?image=894" caption="Image with caption" width="300" height="800" %}
{% include figure.html image="https://picsum.photos/600/800?image=894" caption="Right aligned image" position="right" width="300" height="800" %}
{% include figure.html image="https://picsum.photos/600/800?image=894" caption="Left aligned image" position="left" width="300" height="800" %}
{% include figure.html image="https://picsum.photos/1600/800?image=894" alt="Image with just alt text" %}
</head>