diff --git a/docs/content/html-docs/webpack-runtime-edbfc.js b/docs/content/html-docs/webpack-runtime-edbfc.js index a37add20f5..27d8f9a3fc 100644 --- a/docs/content/html-docs/webpack-runtime-edbfc.js +++ b/docs/content/html-docs/webpack-runtime-edbfc.js @@ -1,227 +1,239 @@ -!( function ( e ) { - function t( t ) { - for ( var n, o, s = t[ 0 ], d = t[ 1 ], f = t[ 2 ], l = 0, p = []; l < s.length; l++ ) - ( o = s[ l ] ), Object.prototype.hasOwnProperty.call( c, o ) && c[ o ] && p.push( c[ o ][ 0 ] ), ( c[ o ] = 0 ); - for ( n in d ) Object.prototype.hasOwnProperty.call( d, n ) && ( e[ n ] = d[ n ] ); - for ( u && u( t ); p.length; ) p.shift()(); - return a.push.apply( a, f || [] ), r(); - } - - function r() { - for ( var e, t = 0; t < a.length; t++ ) { - for ( var r = a[ t ], n = !0, o = 1; o < r.length; o++ ) { - var d = r[ o ]; - 0 !== c[ d ] && ( n = !1 ); - } - n && ( a.splice( t--, 1 ), ( e = s( ( s.s = r[ 0 ] ) ) ) ); +!(function (e) { + function t(t) { + for (var n, o, s = t[0], d = t[1], f = t[2], l = 0, p = []; l < s.length; l++) + (o = s[l]), Object.prototype.hasOwnProperty.call(c, o) && c[o] && p.push(c[o][0]), (c[o] = 0); + for (n in d) Object.prototype.hasOwnProperty.call(d, n) && (e[n] = d[n]); + for (u && u(t); p.length; ) p.shift()(); + return a.push.apply(a, f || []), r(); } - return e; - } - var n = {}, - o = { - 5: 0 - }, - c = { - 5: 0 - }, - a = []; - function s( t ) { - if ( n[ t ] ) return n[ t ].exports; - var r = ( n[ t ] = { - i: t, - l: !1, - exports: {} - } ); - return e[ t ].call( r.exports, r, r.exports, s ), ( r.l = !0 ), r.exports; - } - ( s.e = function ( e ) { - var t = []; - o[ e ] ? - t.push( o[ e ] ) : - 0 !== o[ e ] && { - 2: 1 - } [ e ] && - t.push( - ( o[ e ] = new Promise( function ( t, r ) { - for ( - var n = - ( { - 0: '29107295', - 1: 'commons', - 2: 'styles', - 3: '0f7106e4636c39179bdca46b0242ae73d2d832f3', - 7: 'component---src-templates-advanced-js', - 8: 'component---src-templates-blog-js', - 9: 'component---src-templates-docs-js', - 10: 'component---src-templates-page-js', - 11: 'component---src-templates-post-js' - } [ e ] || e ) + - '.' + { - 0: '31d6cfe0d16ae931b73c', - 1: '31d6cfe0d16ae931b73c', - 2: '9ec07c865aac99f55058', - 3: '31d6cfe0d16ae931b73c', - 7: '31d6cfe0d16ae931b73c', - 8: '31d6cfe0d16ae931b73c', - 9: '31d6cfe0d16ae931b73c', - 10: '31d6cfe0d16ae931b73c', - 11: '31d6cfe0d16ae931b73c' - } [ e ] + - '.css', - c = s.p + n, - a = document.getElementsByTagName( 'link' ), - d = 0; d < a.length; d++ - ) { - var f = ( u = a[ d ] ).getAttribute( 'data-href' ) || u.getAttribute( 'href' ); - if ( 'stylesheet' === u.rel && ( f === n || f === c ) ) return t(); - } - var l = document.getElementsByTagName( 'style' ); - for ( d = 0; d < l.length; d++ ) { - var u; - if ( ( f = ( u = l[ d ] ).getAttribute( 'data-href' ) ) === n || f === c ) return t(); - } - var p = document.createElement( 'link' ); - ( p.rel = 'stylesheet' ), - ( p.type = 'text/css' ), - ( p.onload = t ), - ( p.onerror = function ( t ) { - var n = ( t && t.target && t.target.src ) || c, - a = new Error( 'Loading CSS chunk ' + e + ' failed.\n(' + n + ')' ); - ( a.code = 'CSS_CHUNK_LOAD_FAILED' ), ( a.request = n ), delete o[ e ], p.parentNode.removeChild( p ), r( a ); - } ), - ( p.href = c ), - document.getElementsByTagName( 'head' )[ 0 ].appendChild( p ); - } ).then( function () { - o[ e ] = 0; - } ) ) - ); - var r = c[ e ]; - if ( 0 !== r ) - if ( r ) t.push( r[ 2 ] ); - else { - var n = new Promise( function ( t, n ) { - r = c[ e ] = [ t, n ]; - } ); - t.push( ( r[ 2 ] = n ) ); - var a, - d = document.createElement( 'script' ); - ( d.charset = 'utf-8' ), - ( d.timeout = 120 ), - s.nc && d.setAttribute( 'nonce', s.nc ), - ( d.src = ( function ( e ) { - return ( - s.p + - '' + - ( { - 0: '29107295', - 1: 'commons', - 2: 'styles', - 3: '0f7106e4636c39179bdca46b0242ae73d2d832f3', - 7: 'component---src-templates-advanced-js', - 8: 'component---src-templates-blog-js', - 9: 'component---src-templates-docs-js', - 10: 'component---src-templates-page-js', - 11: 'component---src-templates-post-js' - } [ e ] || e ) + - '-' + { - 0: 'e9457ed2135dcbbf6ce8', - 1: '5965a56c7b6ef2e118ee', - 2: '7d4153d260c0197f0043', - 3: 'f15f5d2275b51ea85fd3', - 7: '6f213d193b5ecf8f0dd1', - 8: 'd1d7372de9a72caa6ec8', - 9: '731339ed0815d7cada90', - 10: 'dcb6b8bc1563f876e59f', - 11: '8dfc6c5f64f9cf30c603' - } [ e ] + - '.js' - ); - } )( e ) ); - var f = new Error(); - a = function ( t ) { - ( d.onerror = d.onload = null ), clearTimeout( l ); - var r = c[ e ]; - if ( 0 !== r ) { - if ( r ) { - var n = t && ( 'load' === t.type ? 'missing' : t.type ), - o = t && t.target && t.target.src; - ( f.message = 'Loading chunk ' + e + ' failed.\n(' + n + ': ' + o + ')' ), - ( f.name = 'ChunkLoadError' ), - ( f.type = n ), - ( f.request = o ), - r[ 1 ]( f ); + function r() { + for (var e, t = 0; t < a.length; t++) { + for (var r = a[t], n = !0, o = 1; o < r.length; o++) { + var d = r[o]; + 0 !== c[d] && (n = !1); } - c[ e ] = void 0; - } - }; - var l = setTimeout( function () { - a( { - type: 'timeout', - target: d - } ); - }, 12e4 ); - ( d.onerror = d.onload = a ), document.head.appendChild( d ); - } - return Promise.all( t ); - } ), - ( s.m = e ), - ( s.c = n ), - ( s.d = function ( e, t, r ) { - s.o( e, t ) || Object.defineProperty( e, t, { - enumerable: !0, - get: r - } ); - } ), - ( s.r = function ( e ) { - 'undefined' != typeof Symbol && Symbol.toStringTag && Object.defineProperty( e, Symbol.toStringTag, { - value: 'Module' - } ), - Object.defineProperty( e, '__esModule', { - value: !0 - } ); - } ), - ( s.t = function ( e, t ) { - if ( ( 1 & t && ( e = s( e ) ), 8 & t ) ) return e; - if ( 4 & t && 'object' == typeof e && e && e.__esModule ) return e; - var r = Object.create( null ); - if ( ( s.r( r ), Object.defineProperty( r, 'default', { - enumerable: !0, - value: e - } ), 2 & t && 'string' != typeof e ) ) - for ( var n in e ) - s.d( - r, - n, - function ( t ) { - return e[ t ]; - }.bind( null, n ) - ); - return r; - } ), - ( s.n = function ( e ) { - var t = - e && e.__esModule ? - function () { - return e.default; - } : - function () { + n && (a.splice(t--, 1), (e = s((s.s = r[0])))); + } return e; - }; - return s.d( t, 'a', t ), t; - } ), - ( s.o = function ( e, t ) { - return Object.prototype.hasOwnProperty.call( e, t ); - } ), - ( s.p = '/' ), - ( s.oe = function ( e ) { - throw ( console.error( e ), e ); - } ); - var d = ( window.webpackJsonp = window.webpackJsonp || [] ), - f = d.push.bind( d ); - ( d.push = t ), ( d = d.slice() ); - for ( var l = 0; l < d.length; l++ ) t( d[ l ] ); - var u = f; - r(); -} )( [] ); + } + var n = {}, + o = { + 5: 0 + }, + c = { + 5: 0 + }, + a = []; + + function s(t) { + if (n[t]) return n[t].exports; + var r = (n[t] = { + i: t, + l: !1, + exports: {} + }); + return e[t].call(r.exports, r, r.exports, s), (r.l = !0), r.exports; + } + (s.e = function (e) { + var t = []; + o[e] + ? t.push(o[e]) + : 0 !== o[e] && + { + 2: 1 + }[e] && + t.push( + (o[e] = new Promise(function (t, r) { + for ( + var n = + ({ + 0: '29107295', + 1: 'commons', + 2: 'styles', + 3: '0f7106e4636c39179bdca46b0242ae73d2d832f3', + 7: 'component---src-templates-advanced-js', + 8: 'component---src-templates-blog-js', + 9: 'component---src-templates-docs-js', + 10: 'component---src-templates-page-js', + 11: 'component---src-templates-post-js' + }[e] || e) + + '.' + + { + 0: '31d6cfe0d16ae931b73c', + 1: '31d6cfe0d16ae931b73c', + 2: '9ec07c865aac99f55058', + 3: '31d6cfe0d16ae931b73c', + 7: '31d6cfe0d16ae931b73c', + 8: '31d6cfe0d16ae931b73c', + 9: '31d6cfe0d16ae931b73c', + 10: '31d6cfe0d16ae931b73c', + 11: '31d6cfe0d16ae931b73c' + }[e] + + '.css', + c = s.p + n, + a = document.getElementsByTagName('link'), + d = 0; + d < a.length; + d++ + ) { + var f = (u = a[d]).getAttribute('data-href') || u.getAttribute('href'); + if ('stylesheet' === u.rel && (f === n || f === c)) return t(); + } + var l = document.getElementsByTagName('style'); + for (d = 0; d < l.length; d++) { + var u; + if ((f = (u = l[d]).getAttribute('data-href')) === n || f === c) return t(); + } + var p = document.createElement('link'); + (p.rel = 'stylesheet'), + (p.type = 'text/css'), + (p.onload = t), + (p.onerror = function (t) { + var n = (t && t.target && t.target.src) || c, + a = new Error('Loading CSS chunk ' + e + ' failed.\n(' + n + ')'); + (a.code = 'CSS_CHUNK_LOAD_FAILED'), (a.request = n), delete o[e], p.parentNode.removeChild(p), r(a); + }), + (p.href = c), + document.getElementsByTagName('head')[0].appendChild(p); + }).then(function () { + o[e] = 0; + })) + ); + var r = c[e]; + if (0 !== r) + if (r) t.push(r[2]); + else { + var n = new Promise(function (t, n) { + r = c[e] = [t, n]; + }); + t.push((r[2] = n)); + var a, + d = document.createElement('script'); + (d.charset = 'utf-8'), + (d.timeout = 120), + s.nc && d.setAttribute('nonce', s.nc), + (d.src = (function (e) { + return ( + s.p + + '' + + ({ + 0: '29107295', + 1: 'commons', + 2: 'styles', + 3: '0f7106e4636c39179bdca46b0242ae73d2d832f3', + 7: 'component---src-templates-advanced-js', + 8: 'component---src-templates-blog-js', + 9: 'component---src-templates-docs-js', + 10: 'component---src-templates-page-js', + 11: 'component---src-templates-post-js' + }[e] || e) + + '-' + + { + 0: 'e9457ed2135dcbbf6ce8', + 1: '5965a56c7b6ef2e118ee', + 2: '7d4153d260c0197f0043', + 3: 'f15f5d2275b51ea85fd3', + 7: '6f213d193b5ecf8f0dd1', + 8: 'd1d7372de9a72caa6ec8', + 9: '731339ed0815d7cada90', + 10: 'dcb6b8bc1563f876e59f', + 11: '8dfc6c5f64f9cf30c603' + }[e] + + '.js' + ); + })(e)); + var f = new Error(); + a = function (t) { + (d.onerror = d.onload = null), clearTimeout(l); + var r = c[e]; + if (0 !== r) { + if (r) { + var n = t && ('load' === t.type ? 'missing' : t.type), + o = t && t.target && t.target.src; + (f.message = 'Loading chunk ' + e + ' failed.\n(' + n + ': ' + o + ')'), + (f.name = 'ChunkLoadError'), + (f.type = n), + (f.request = o), + r[1](f); + } + c[e] = void 0; + } + }; + var l = setTimeout(function () { + a({ + type: 'timeout', + target: d + }); + }, 12e4); + (d.onerror = d.onload = a), document.head.appendChild(d); + } + return Promise.all(t); + }), + (s.m = e), + (s.c = n), + (s.d = function (e, t, r) { + s.o(e, t) || + Object.defineProperty(e, t, { + enumerable: !0, + get: r + }); + }), + (s.r = function (e) { + 'undefined' != typeof Symbol && + Symbol.toStringTag && + Object.defineProperty(e, Symbol.toStringTag, { + value: 'Module' + }), + Object.defineProperty(e, '__esModule', { + value: !0 + }); + }), + (s.t = function (e, t) { + if ((1 & t && (e = s(e)), 8 & t)) return e; + if (4 & t && 'object' == typeof e && e && e.__esModule) return e; + var r = Object.create(null); + if ( + (s.r(r), + Object.defineProperty(r, 'default', { + enumerable: !0, + value: e + }), + 2 & t && 'string' != typeof e) + ) + for (var n in e) + s.d( + r, + n, + function (t) { + return e[t]; + }.bind(null, n) + ); + return r; + }), + (s.n = function (e) { + var t = + e && e.__esModule + ? function () { + return e.default; + } + : function () { + return e; + }; + return s.d(t, 'a', t), t; + }), + (s.o = function (e, t) { + return Object.prototype.hasOwnProperty.call(e, t); + }), + (s.p = '/'), + (s.oe = function (e) { + throw (console.error(e), e); + }); + var d = (window.webpackJsonp = window.webpackJsonp || []), + f = d.push.bind(d); + (d.push = t), (d = d.slice()); + for (var l = 0; l < d.length; l++) t(d[l]); + var u = f; + r(); +})([]); //# sourceMappingURL=webpack-runtime-e0d945bfc04076092229.js.map diff --git a/docs/content/learning-area/css/introduction-to-css/debugging-css-finished/index.html b/docs/content/learning-area/css/introduction-to-css/debugging-css-finished/index.html index 5c8f01ab17..7cc6a747d3 100644 --- a/docs/content/learning-area/css/introduction-to-css/debugging-css-finished/index.html +++ b/docs/content/learning-area/css/introduction-to-css/debugging-css-finished/index.html @@ -1,46 +1,41 @@ - - - - CSS comprehension - - - - -
-

My imperfect page

-
- -
-

My article

- - firefox logo - -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante - dapibus diam. Sed nisi. Nulla quis - sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. - Mauris massa. Vestibulum lacinia - arcu eget nulla. -

- - - -

- Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales - ligula in libero. Sed dignissim - lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. -

-
- - - - + + + CSS comprehension + + + + +
+

My imperfect page

+
+ +
+

My article

+ + firefox logo + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis + sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia + arcu eget nulla. +

+ + + +

+ Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim + lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. +

+
+ + + diff --git a/docs/content/learning-area/css/introduction-to-css/how-css-works/index.html b/docs/content/learning-area/css/introduction-to-css/how-css-works/index.html index 1dcd69c7e0..2423314568 100644 --- a/docs/content/learning-area/css/introduction-to-css/how-css-works/index.html +++ b/docs/content/learning-area/css/introduction-to-css/how-css-works/index.html @@ -1,15 +1,13 @@ + + + My CSS experiment + + - - - My CSS experiment - - - - -

Hello World!

-

This is my first CSS example

- - + +

Hello World!

+

This is my first CSS example

+ diff --git a/docs/content/learning-area/css/styling-boxes/advanced_box_effects/background-clip-text.html b/docs/content/learning-area/css/styling-boxes/advanced_box_effects/background-clip-text.html index 2d97c96941..6207b998ef 100644 --- a/docs/content/learning-area/css/styling-boxes/advanced_box_effects/background-clip-text.html +++ b/docs/content/learning-area/css/styling-boxes/advanced_box_effects/background-clip-text.html @@ -1,35 +1,32 @@ + + + CSS filters examples + - - - -

WOW

-

WOW

- + .text-clip { + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + + + +

WOW

+

WOW

+ diff --git a/docs/content/learning-area/css/styling-boxes/advanced_box_effects/blend-modes.html b/docs/content/learning-area/css/styling-boxes/advanced_box_effects/blend-modes.html index 57644d3716..d89957f4e1 100644 --- a/docs/content/learning-area/css/styling-boxes/advanced_box_effects/blend-modes.html +++ b/docs/content/learning-area/css/styling-boxes/advanced_box_effects/blend-modes.html @@ -1,232 +1,229 @@ + + + CSS blend modes examples + + + + +

Background blend modes

+ +
No blend mode
+ +
Multiply
- .darken { - background-blend-mode: darken; - } +
Screen
- .darken-mix { - mix-blend-mode: darken; - } +
Overlay
- .lighten { - background-blend-mode: lighten; - } +
Color-dodge
- .lighten-mix { - mix-blend-mode: lighten; - } +
Color-burn
- .color-dodge { - background-blend-mode: color-dodge; - } - - .color-dodge-mix { - mix-blend-mode: color-dodge; - } - - .color-burn { - background-blend-mode: color-burn; - } - - .color-burn-mix { - mix-blend-mode: color-burn; - } - - .hard-light { - background-blend-mode: hard-light; - } - - .hard-light-mix { - mix-blend-mode: hard-light; - } - - .soft-light { - background-blend-mode: soft-light; - } - - .soft-light-mix { - mix-blend-mode: soft-light; - } - - .difference { - background-blend-mode: difference; - } - - .difference-mix { - mix-blend-mode: difference; - } +
Hard-light
- .hue { - background-blend-mode: hue; - } +
Soft-light
- .hue-mix { - mix-blend-mode: hue; - } +
Difference
- - +
Hue
- -

Background blend modes

+

Mix blend modes

-
No blend mode
+
+ No mix blend mode +
+
+
-
Multiply
+
+ Multiply mix +
+
+
-
Screen
+
+ Screen mix +
+
+
-
Overlay
+
+ Overlay mix +
+
+
-
Color-dodge
+
+ Color-dodge mix +
+
+
-
Color-burn
+
+ Color-burn mix +
+
+
-
Hard-light
+
+ Hard-light mix +
+
+
-
Soft-light
+
+ Soft-light mix +
+
+
-
Difference
- -
Hue
- -

Mix blend modes

- -
- No mix blend mode -
-
-
- -
- Multiply mix -
-
-
- -
- Screen mix -
-
-
- -
- Overlay mix -
-
-
- -
- Color-dodge mix -
-
-
- -
- Color-burn mix -
-
-
- -
- Hard-light mix -
-
-
- -
- Soft-light mix -
-
-
- -
- Difference mix -
-
-
- -
- Hue mix -
-
-
- +
+ Difference mix +
+
+
+
+ Hue mix +
+
+
+ diff --git a/docs/content/learning-area/css/styling-boxes/advanced_box_effects/box-shadow.html b/docs/content/learning-area/css/styling-boxes/advanced_box_effects/box-shadow.html index fab8ea3c77..7f9ff32cd3 100644 --- a/docs/content/learning-area/css/styling-boxes/advanced_box_effects/box-shadow.html +++ b/docs/content/learning-area/css/styling-boxes/advanced_box_effects/box-shadow.html @@ -1,71 +1,68 @@ - - - - CSS box shadow examples - - - - -

Basic box shadow example

- -
-

Warning: The thermostat on the cosmic transcender has reached a critical level.

-
- -

Multiple box shadows example

- -
-

Warning: The thermostat on the cosmic transcender has reached a critical level.

-
- -

Inner shadows example

- - - - + + + CSS box shadow examples + + + + +

Basic box shadow example

+ +
+

Warning: The thermostat on the cosmic transcender has reached a critical level.

+
+ +

Multiple box shadows example

+ +
+

Warning: The thermostat on the cosmic transcender has reached a critical level.

+
+ +

Inner shadows example

+ + + diff --git a/docs/content/learning-area/css/styling-boxes/advanced_box_effects/filters.html b/docs/content/learning-area/css/styling-boxes/advanced_box_effects/filters.html index b5cf8595ab..33d9fa7574 100644 --- a/docs/content/learning-area/css/styling-boxes/advanced_box_effects/filters.html +++ b/docs/content/learning-area/css/styling-boxes/advanced_box_effects/filters.html @@ -1,122 +1,119 @@ - - - - CSS filters examples - - - - -
- a colorful prism heart -
Blur filter
-
- -
- a colorful prism heart -
Brightness filter
-
- -
- a colorful prism heart -
Drop shadow filter
-
- -
- a colorful prism heart -
Grayscale filter
-
- -
- a colorful prism heart -
Sepia filter
-
- -
- a colorful prism heart -
Inversion filter
-
- -
- a colorful prism heart -
Saturation filter
-
- -
- a colorful prism heart -
Opacity filter
-
- -
- a colorful prism heart -
Hue rotation filter
-
- - + + + CSS filters examples + + + + +
+ a colorful prism heart +
Blur filter
+
+ +
+ a colorful prism heart +
Brightness filter
+
+ +
+ a colorful prism heart +
Drop shadow filter
+
+ +
+ a colorful prism heart +
Grayscale filter
+
+ +
+ a colorful prism heart +
Sepia filter
+
+ +
+ a colorful prism heart +
Inversion filter
+
+ +
+ a colorful prism heart +
Saturation filter
+
+ +
+ a colorful prism heart +
Opacity filter
+
+ +
+ a colorful prism heart +
Hue rotation filter
+
+ diff --git a/docs/content/learning-area/css/styling-boxes/backgrounds/background-attachment.html b/docs/content/learning-area/css/styling-boxes/backgrounds/background-attachment.html index a9ae5c184e..fb99922973 100644 --- a/docs/content/learning-area/css/styling-boxes/backgrounds/background-attachment.html +++ b/docs/content/learning-area/css/styling-boxes/backgrounds/background-attachment.html @@ -1,48 +1,42 @@ - - - - Background attachment example - - - - -

Background attachment example

- -
-
-

- background-attachment: scroll causes the element's background to be fixed to the page, so that it - scrolls when the page is - scrolled. If the element content is scrolled, the background does not move. -

- -

-    
- -
-

- background-attachment: fixed causes an element's background to be fixed to the viewport, so that it - doesn't scroll when the - page or element content is scrolled. It will always remain in the same position on the screen. -

- -

-    
- -
-

- background-attachment: local, new to CSS3, causes an element's background to be fixed to the actual - element itself. So When the - page is scrolled, the element's background will move along with it only if the element does so (so not in the - case of elements with - position: fixed.) When the element's content is scrolled, the background will scroll along with it. -

- -

-    
-
- - + + + Background attachment example + + + + +

Background attachment example

+ +
+
+

+ background-attachment: scroll causes the element's background to be fixed to the page, so that it scrolls when the page is + scrolled. If the element content is scrolled, the background does not move. +

+ +

+            
+ +
+

+ background-attachment: fixed causes an element's background to be fixed to the viewport, so that it doesn't scroll when the + page or element content is scrolled. It will always remain in the same position on the screen. +

+ +

+            
+ +
+

+ background-attachment: local, new to CSS3, causes an element's background to be fixed to the actual element itself. So When the + page is scrolled, the element's background will move along with it only if the element does so (so not in the case of elements with + position: fixed.) When the element's content is scrolled, the background will scroll along with it. +

+ +

+            
+
+ diff --git a/docs/content/learning-area/css/styling-boxes/backgrounds/index.html b/docs/content/learning-area/css/styling-boxes/backgrounds/index.html index 2757c860c9..1e908c4abc 100644 --- a/docs/content/learning-area/css/styling-boxes/backgrounds/index.html +++ b/docs/content/learning-area/css/styling-boxes/backgrounds/index.html @@ -1,23 +1,20 @@ + + + Backgrounds example + + - - - Backgrounds example - - - - -

Exciting box!

- - + +

Exciting box!

+ diff --git a/docs/content/learning-area/css/styling-boxes/backgrounds/repeating-background.html b/docs/content/learning-area/css/styling-boxes/backgrounds/repeating-background.html index 56d5ff7b41..4f9f1d9336 100644 --- a/docs/content/learning-area/css/styling-boxes/backgrounds/repeating-background.html +++ b/docs/content/learning-area/css/styling-boxes/backgrounds/repeating-background.html @@ -1,38 +1,34 @@ + + + Repeating background example + + - div { - width: 100%; - height: 400px; - /* background properties */ - background-color: red; - background-image: url(tile.png); - } - - - - - -

- A single instance of the image looks like this: a background tile. If we use it as a - repeating background image along - with a solid background color, it could look like this: -

- -
- + +

+ A single instance of the image looks like this: a background tile. If we use it as a repeating background image along + with a solid background color, it could look like this: +

+
+ diff --git a/docs/content/learning-area/css/styling-boxes/borders/border-image.html b/docs/content/learning-area/css/styling-boxes/borders/border-image.html index f9169b1337..55e77346f3 100644 --- a/docs/content/learning-area/css/styling-boxes/borders/border-image.html +++ b/docs/content/learning-area/css/styling-boxes/borders/border-image.html @@ -1,37 +1,34 @@ + + + Border image + - - - -
-

Border image

-
- + div { + width: 300px; + padding: 20px; + margin: 10px auto; + line-height: 3; + background-color: #f66; + text-align: center; + /* border-related properties */ + border: 20px solid black; + background-clip: padding-box; + border-image-source: url(border-image.png); + border-image-slice: 40; + border-image-repeat: round; + border-image-outset: 5px; + } + + + +
+

Border image

+
+ diff --git a/docs/content/learning-area/css/styling-boxes/borders/border-longhand.html b/docs/content/learning-area/css/styling-boxes/borders/border-longhand.html index 2b312bf8ab..8896b9e41c 100644 --- a/docs/content/learning-area/css/styling-boxes/borders/border-longhand.html +++ b/docs/content/learning-area/css/styling-boxes/borders/border-longhand.html @@ -1,78 +1,75 @@ - - - - Writing progress - - - - -

Writing progress

- -
-

Chapter 1: I was born

-
- -
-

Chapter 2: School

-
- -
-

Chapter 3: University

-
- -
-

Chapter 4: Rock and roll

-
- -
-

Chapter 5: Fell in love

-
- -
-

Chapter 6: Children

-
- -
-

Chapter 7: Tired!

-
- - + + + Writing progress + + + + +

Writing progress

+ +
+

Chapter 1: I was born

+
+ +
+

Chapter 2: School

+
+ +
+

Chapter 3: University

+
+ +
+

Chapter 4: Rock and roll

+
+ +
+

Chapter 5: Fell in love

+
+ +
+

Chapter 6: Children

+
+ +
+

Chapter 7: Tired!

+
+ diff --git a/docs/content/learning-area/css/styling-boxes/borders/rounded-corners.html b/docs/content/learning-area/css/styling-boxes/borders/rounded-corners.html index 0f14d3e8ce..a76e918dda 100644 --- a/docs/content/learning-area/css/styling-boxes/borders/rounded-corners.html +++ b/docs/content/learning-area/css/styling-boxes/borders/rounded-corners.html @@ -1,32 +1,29 @@ + + + Rounded corners + - - - -
-

Rounded corners are groovy!

-
- + div { + width: 220px; + padding: 20px; + margin: 10px; + line-height: 2; + background-color: yellow; + text-align: center; + border-style: dashed; + border-radius: 20px; + } + + + +
+

Rounded corners are groovy!

+
+ diff --git a/docs/content/learning-area/css/styling-boxes/box-model-recap/box-sizing-example.html b/docs/content/learning-area/css/styling-boxes/box-model-recap/box-sizing-example.html index c7ce6fea38..a2de8d4997 100644 --- a/docs/content/learning-area/css/styling-boxes/box-model-recap/box-sizing-example.html +++ b/docs/content/learning-area/css/styling-boxes/box-model-recap/box-sizing-example.html @@ -1,31 +1,28 @@ - - - - Box sizing example - - - - -
- -
- - - - + + + Box sizing example + + + + +
+ +
+ + + diff --git a/docs/content/learning-area/css/styling-boxes/box-model-recap/css-tables-example.html b/docs/content/learning-area/css/styling-boxes/box-model-recap/css-tables-example.html index 58685d3446..9376f112b0 100644 --- a/docs/content/learning-area/css/styling-boxes/box-model-recap/css-tables-example.html +++ b/docs/content/learning-area/css/styling-boxes/box-model-recap/css-tables-example.html @@ -1,66 +1,63 @@ - - - - CSS tables example - - - - -
-

First of all, tell us your name and age.

-
- - -
-
- - -
-
- - -
-
- - + + + CSS tables example + + + + +
+

First of all, tell us your name and age.

+
+ + +
+
+ + +
+
+ + +
+
+ diff --git a/docs/content/learning-area/css/styling-boxes/box-model-recap/flexbox-example.html b/docs/content/learning-area/css/styling-boxes/box-model-recap/flexbox-example.html index fccb94bc1e..f1591dc112 100644 --- a/docs/content/learning-area/css/styling-boxes/box-model-recap/flexbox-example.html +++ b/docs/content/learning-area/css/styling-boxes/box-model-recap/flexbox-example.html @@ -1,76 +1,72 @@ + + + Flexbox example + + - section, - div { - border: 5px solid rgba(0, 0, 0, 0.85); - padding: 10px; - } + +
+
This is a box
+
This is a box
+
This is a box
+
- - + + - -
-
This is a box
-
This is a box
-
This is a box
-
+ - + createBtn.onclick = createBox; + resetBtn.onclick = function () { + while (section.firstChild) { + section.removeChild(section.firstChild); + } + createBox(); + createBox(); + createBox(); + }; + + diff --git a/docs/content/learning-area/css/styling-boxes/box-model-recap/min-max-container.html b/docs/content/learning-area/css/styling-boxes/box-model-recap/min-max-container.html index a024c2b68b..8d25c0123a 100644 --- a/docs/content/learning-area/css/styling-boxes/box-model-recap/min-max-container.html +++ b/docs/content/learning-area/css/styling-boxes/box-model-recap/min-max-container.html @@ -1,32 +1,26 @@ + + + Min and max width example + + - - - Min and max width example - - + +

Min and max width example

- -

Min and max width example

+

+ Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork + belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings + salvia iPhone photo booth health goth gastropub hammock. +

-

- Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl - typewriter. Tacos PBR&B pork - belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B - tattooed trust fund twee, leggings - salvia iPhone photo booth health goth gastropub hammock. -

- - A teddy bear in a box - -

- Cray food truck brunch, XOXO +1 keffiyeh pickled chambray waistcoat ennui. Organic small batch paleo 8-bit. - Intelligentsia umami wayfarers pickled, - asymmetrical kombucha letterpress kitsch leggings cold-pressed squid chartreuse put a bird on it. Listicle pickled - man bun cornhole heirloom art - party. -

- + A teddy bear in a box +

+ Cray food truck brunch, XOXO +1 keffiyeh pickled chambray waistcoat ennui. Organic small batch paleo 8-bit. Intelligentsia umami wayfarers pickled, + asymmetrical kombucha letterpress kitsch leggings cold-pressed squid chartreuse put a bird on it. Listicle pickled man bun cornhole heirloom art + party. +

+ diff --git a/docs/content/learning-area/css/styling-boxes/box-model-recap/min-max-image-container.html b/docs/content/learning-area/css/styling-boxes/box-model-recap/min-max-image-container.html index 70dc0821c1..07a4a422a5 100644 --- a/docs/content/learning-area/css/styling-boxes/box-model-recap/min-max-image-container.html +++ b/docs/content/learning-area/css/styling-boxes/box-model-recap/min-max-image-container.html @@ -1,32 +1,26 @@ + + + Max width image example + + - - - Max width image example - - + +

Max width image example

- -

Max width image example

+

+ Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork + belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings + salvia iPhone photo booth health goth gastropub hammock. +

-

- Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl - typewriter. Tacos PBR&B pork - belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B - tattooed trust fund twee, leggings - salvia iPhone photo booth health goth gastropub hammock. -

- - A teddy bear in a box - -

- Cray food truck brunch, XOXO +1 keffiyeh pickled chambray waistcoat ennui. Organic small batch paleo 8-bit. - Intelligentsia umami wayfarers pickled, - asymmetrical kombucha letterpress kitsch leggings cold-pressed squid chartreuse put a bird on it. Listicle pickled - man bun cornhole heirloom art - party. -

- + A teddy bear in a box +

+ Cray food truck brunch, XOXO +1 keffiyeh pickled chambray waistcoat ennui. Organic small batch paleo 8-bit. Intelligentsia umami wayfarers pickled, + asymmetrical kombucha letterpress kitsch leggings cold-pressed squid chartreuse put a bird on it. Listicle pickled man bun cornhole heirloom art + party. +

+ diff --git a/docs/content/learning-area/css/styling-boxes/cool-information-box-finished/index.html b/docs/content/learning-area/css/styling-boxes/cool-information-box-finished/index.html index 9e2acb53ae..528eaf71a2 100644 --- a/docs/content/learning-area/css/styling-boxes/cool-information-box-finished/index.html +++ b/docs/content/learning-area/css/styling-boxes/cool-information-box-finished/index.html @@ -1,14 +1,12 @@ + + + Cool box + + - - - Cool box - - - - -

This is a cool box

- - + +

This is a cool box

+ diff --git a/docs/content/learning-area/css/styling-boxes/cool-information-box-start/index.html b/docs/content/learning-area/css/styling-boxes/cool-information-box-start/index.html index b082dc47a7..8ffcf502a4 100644 --- a/docs/content/learning-area/css/styling-boxes/cool-information-box-start/index.html +++ b/docs/content/learning-area/css/styling-boxes/cool-information-box-start/index.html @@ -1,13 +1,11 @@ + + + Cool box + - - - Cool box - - - -

This is a cool box

- - + +

This is a cool box

+ diff --git a/docs/content/learning-area/css/styling-boxes/letterheaded-paper-finished/index.html b/docs/content/learning-area/css/styling-boxes/letterheaded-paper-finished/index.html index ecb6e94952..3e1f249e3a 100644 --- a/docs/content/learning-area/css/styling-boxes/letterheaded-paper-finished/index.html +++ b/docs/content/learning-area/css/styling-boxes/letterheaded-paper-finished/index.html @@ -1,27 +1,25 @@ + + + Fancy letterheaded paper + + - - - Fancy letterheaded paper - - - - -
-

Awesome
Company

- -
-

The Awesome Company

-

- 102-112 Frail Bend Bridge
- The Dwindlings
- Little Hornet
- HX3 9ZQ
- UK -

-
-
- + +
+

Awesome
Company

+
+

The Awesome Company

+

+ 102-112 Frail Bend Bridge
+ The Dwindlings
+ Little Hornet
+ HX3 9ZQ
+ UK +

+
+
+ diff --git a/docs/content/learning-area/css/styling-boxes/letterheaded-paper-start/index.html b/docs/content/learning-area/css/styling-boxes/letterheaded-paper-start/index.html index 37b1f51298..c6cda92330 100644 --- a/docs/content/learning-area/css/styling-boxes/letterheaded-paper-start/index.html +++ b/docs/content/learning-area/css/styling-boxes/letterheaded-paper-start/index.html @@ -1,26 +1,24 @@ + + + Fancy letterheaded paper + - - - Fancy letterheaded paper - - - -
-

Awesome
Company

- -
-

The Awesome Company

-

- 102-112 Frail Bend Bridge
- The Dwindlings
- Little Hornet
- HX3 9ZQ
- UK -

-
-
- + +
+

Awesome
Company

+
+

The Awesome Company

+

+ 102-112 Frail Bend Bridge
+ The Dwindlings
+ Little Hornet
+ HX3 9ZQ
+ UK +

+
+
+ diff --git a/docs/content/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html b/docs/content/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html index d75145c5ee..fa9550eb20 100644 --- a/docs/content/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html +++ b/docs/content/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html @@ -1,83 +1,81 @@ + + + UK punk bands + + + - - - UK punk bands - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- A summary of the UK's most famous punk bands -
BandYear formedNo. of AlbumsMost famous song
Buzzcocks19769Ever fallen in love (with someone you shouldn't've)
The Clash19766London Calling
The Damned197610Smash it up
Sex Pistols19751Anarchy in the UK
Sham 69197613If The Kids Are United
Siouxsie and the Banshees197611Hong Kong Garden
Stiff Little Fingers197710Suspect Device
The Stranglers197417No More Heroes
Total albums77
- - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ A summary of the UK's most famous punk bands +
BandYear formedNo. of AlbumsMost famous song
Buzzcocks19769Ever fallen in love (with someone you shouldn't've)
The Clash19766London Calling
The Damned197610Smash it up
Sex Pistols19751Anarchy in the UK
Sham 69197613If The Kids Are United
Siouxsie and the Banshees197611Hong Kong Garden
Stiff Little Fingers197710Suspect Device
The Stranglers197417No More Heroes
Total albums77
+ diff --git a/docs/content/learning-area/css/styling-boxes/styling-tables/punk-bands-unstyled.html b/docs/content/learning-area/css/styling-boxes/styling-tables/punk-bands-unstyled.html index 339a01c40c..40bbe744f0 100644 --- a/docs/content/learning-area/css/styling-boxes/styling-tables/punk-bands-unstyled.html +++ b/docs/content/learning-area/css/styling-boxes/styling-tables/punk-bands-unstyled.html @@ -1,81 +1,79 @@ + + + UK punk bands + - - - UK punk bands - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- A summary of the UK's most famous punk bands -
BandYear formedNo. of AlbumsMost famous song
Buzzcocks19769Ever fallen in love (with someone you shouldn't've)
The Clash19766London Calling
The Damned197610Smash it up
Sex Pistols19751Anarchy in the UK
Sham 69197613If The Kids Are United
Siouxsie and the Banshees197611Hong Kong Garden
Stiff Little Fingers197710Suspect Device
The Stranglers197417No More Heroes
Total albums77
- - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ A summary of the UK's most famous punk bands +
BandYear formedNo. of AlbumsMost famous song
Buzzcocks19769Ever fallen in love (with someone you shouldn't've)
The Clash19766London Calling
The Damned197610Smash it up
Sex Pistols19751Anarchy in the UK
Sham 69197613If The Kids Are United
Siouxsie and the Banshees197611Hong Kong Garden
Stiff Little Fingers197710Suspect Device
The Stranglers197417No More Heroes
Total albums77
+ diff --git a/docs/content/learning-area/css/styling-text/fundamentals/index.html b/docs/content/learning-area/css/styling-text/fundamentals/index.html index 1c4ed607f5..445193db58 100644 --- a/docs/content/learning-area/css/styling-text/fundamentals/index.html +++ b/docs/content/learning-area/css/styling-text/fundamentals/index.html @@ -1,54 +1,49 @@ - - - - Fundamental text styling - - - - -

Tommy the cat

- -

Well I remember it as though it were a meal ago...

- -

- Said Tommy the Cat as he reeled back to clear whatever foreign matter may have nestled its way into his mighty - throat. Many a fat alley rat had met - its demise while staring point blank down the cavernous barrel of this awesome prowling machine. Truly a wonder of - nature this urban predator — - Tommy the cat had many a story to tell. But it was a rare occasion such as this that he did. -

- - + + + Fundamental text styling + + + + +

Tommy the cat

+ +

Well I remember it as though it were a meal ago...

+ +

+ Said Tommy the Cat as he reeled back to clear whatever foreign matter may have nestled its way into his mighty throat. Many a fat alley rat had met + its demise while staring point blank down the cavernous barrel of this awesome prowling machine. Truly a wonder of nature this urban predator — + Tommy the cat had many a story to tell. But it was a rare occasion such as this that he did. +

+ diff --git a/docs/content/learning-area/css/styling-text/styling-links/default-styles.html b/docs/content/learning-area/css/styling-text/styling-links/default-styles.html index 6c055cfa76..73088fb35f 100644 --- a/docs/content/learning-area/css/styling-text/styling-links/default-styles.html +++ b/docs/content/learning-area/css/styling-text/styling-links/default-styles.html @@ -1,20 +1,17 @@ + + + Default link styles + + - - - Default link styles - - - - -

A link to the Mozilla homepage

- - + +

A link to the Mozilla homepage

+ diff --git a/docs/content/learning-area/css/styling-text/styling-links/external-link-icon.html b/docs/content/learning-area/css/styling-text/styling-links/external-link-icon.html index 38e205e6ab..2f62dd3346 100644 --- a/docs/content/learning-area/css/styling-text/styling-links/external-link-icon.html +++ b/docs/content/learning-area/css/styling-text/styling-links/external-link-icon.html @@ -1,58 +1,55 @@ - - - - External link icon - - - - -

- For more information on the weather, visit our weather page, look at - weather on Wikipedia, or check out - weather on Extreme Science. -

- - + + + External link icon + + + + +

+ For more information on the weather, visit our weather page, look at + weather on Wikipedia, or check out + weather on Extreme Science. +

+ diff --git a/docs/content/learning-area/css/styling-text/styling-links/link-buttons.html b/docs/content/learning-area/css/styling-text/styling-links/link-buttons.html index e1c8fb1d43..53d7f0ffe7 100644 --- a/docs/content/learning-area/css/styling-text/styling-links/link-buttons.html +++ b/docs/content/learning-area/css/styling-text/styling-links/link-buttons.html @@ -1,66 +1,63 @@ - - - - Link buttons - - - - - - - + + + Link buttons + + + + + + diff --git a/docs/content/learning-area/css/styling-text/styling-links/styled-links.html b/docs/content/learning-area/css/styling-text/styling-links/styled-links.html index 806debc183..97c4a67826 100644 --- a/docs/content/learning-area/css/styling-text/styling-links/styled-links.html +++ b/docs/content/learning-area/css/styling-text/styling-links/styled-links.html @@ -1,58 +1,55 @@ - - - - Styled links - - - - -

- There are several browsers available, such as Mozilla Firefox, - Google Chrome, and - Microsoft Edge. -

- - + + + Styled links + + + + +

+ There are several browsers available, such as Mozilla Firefox, + Google Chrome, and + Microsoft Edge. +

+ diff --git a/docs/content/learning-area/css/styling-text/styling-lists/index.html b/docs/content/learning-area/css/styling-text/styling-lists/index.html index 621d6a95e3..4d8266cda9 100644 --- a/docs/content/learning-area/css/styling-text/styling-lists/index.html +++ b/docs/content/learning-area/css/styling-text/styling-lists/index.html @@ -1,119 +1,111 @@ - - - - Styling lists - - - - -

Shopping (unordered) list

- -

- Paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for - reference, paragraph for - reference. -

- - - -

Recipe (ordered) list

- -

- Paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for - reference, paragraph for - reference. -

- -
    -
  1. Toast pitta, leave to cool, then slice down the edge.
  2. -
  3. Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
  4. -
  5. Wash and chop the salad.
  6. -
  7. Fill pitta with salad, humous, and fried halloumi.
  8. -
- -

Ingredient description list

- -

- Paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for - reference, paragraph for - reference. -

- -
-
Humous
-
A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other - ingredients.
-
Pitta
-
A soft, slightly leavened flatbread.
-
Halloumi
-
A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk. -
-
Green salad
-
That green healthy stuff that many of us just use to garnish kebabs.
-
- - + + + Styling lists + + + + +

Shopping (unordered) list

+ +

+ Paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for + reference. +

+ + + +

Recipe (ordered) list

+ +

+ Paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for + reference. +

+ +
    +
  1. Toast pitta, leave to cool, then slice down the edge.
  2. +
  3. Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
  4. +
  5. Wash and chop the salad.
  6. +
  7. Fill pitta with salad, humous, and fried halloumi.
  8. +
+ +

Ingredient description list

+ +

+ Paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for + reference. +

+ +
+
Humous
+
A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.
+
Pitta
+
A soft, slightly leavened flatbread.
+
Halloumi
+
A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.
+
Green salad
+
That green healthy stuff that many of us just use to garnish kebabs.
+
+ diff --git a/docs/content/learning-area/css/styling-text/styling-lists/unstyled-list.html b/docs/content/learning-area/css/styling-text/styling-lists/unstyled-list.html index 949d64b4a0..82ade8edd6 100644 --- a/docs/content/learning-area/css/styling-text/styling-lists/unstyled-list.html +++ b/docs/content/learning-area/css/styling-text/styling-lists/unstyled-list.html @@ -1,62 +1,55 @@ - - - - Styling lists - - - -

Shopping (unordered) list

- -

- Paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for - reference, paragraph for - reference. -

- - - -

Recipe (ordered) list

- -

- Paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for - reference, paragraph for - reference. -

- -
    -
  1. Toast pitta, leave to cool, then slice down the edge.
  2. -
  3. Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
  4. -
  5. Wash and chop the salad
  6. -
  7. Fill Pitta with salad, humous, and fried halloumi.
  8. -
- -

Ingredient description list

- -

- Paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for - reference, paragraph for - reference. -

- -
-
Humous
-
A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other - ingredients.
-
Pitta
-
A soft, slightly leavened flatbread.
-
Halloumi
-
A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk. -
-
Green salad
-
That green healthy stuff that many of us just use to garnish kebabs.
-
- - + + + Styling lists + + + +

Shopping (unordered) list

+ +

+ Paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for + reference. +

+ + + +

Recipe (ordered) list

+ +

+ Paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for + reference. +

+ +
    +
  1. Toast pitta, leave to cool, then slice down the edge.
  2. +
  3. Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
  4. +
  5. Wash and chop the salad
  6. +
  7. Fill Pitta with salad, humous, and fried halloumi.
  8. +
+ +

Ingredient description list

+ +

+ Paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for + reference. +

+ +
+
Humous
+
A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.
+
Pitta
+
A soft, slightly leavened flatbread.
+
Halloumi
+
A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.
+
Green salad
+
That green healthy stuff that many of us just use to garnish kebabs.
+
+ diff --git a/docs/content/learning-area/css/styling-text/typesetting-a-homepage-finished/index.html b/docs/content/learning-area/css/styling-text/typesetting-a-homepage-finished/index.html index 2066d5788e..91a686d88b 100644 --- a/docs/content/learning-area/css/styling-text/typesetting-a-homepage-finished/index.html +++ b/docs/content/learning-area/css/styling-text/typesetting-a-homepage-finished/index.html @@ -1,96 +1,88 @@ - - - - St Huxley's Community College - - - - -
-

St Huxley's Community College

-
- -
-

Brave new world

- -

- It's a brave new world out there. Our children are being put in increasing more competitive situations, both - during recreation, and as they - start to move into the adult world of examinations, - jobs, careers, - and other life choices. - Having the wrong mindset, becoming too emotional, or making - the wrong choices can contribute - to them experiencing difficulty in taking their rightful place in today's ideal society. -

- -

- As concerned parents, guardians or carers, you will no doubt want to give your children the best possible start in - life — and you've come to the - right place. -

- -

The best start in life

- -

- At St. Huxley's, we pride ourselves in not only giving our students a top quality education, but also giving them - the societal and emotional - intelligence they need to win big in the coming utopia. We not only excel at subjects such as genetics, data - mining, and chemistry, but we also - include compulsory lessons in: -

- - - -

If you are interested, then you next steps will likely be to:

- -
    -
  1. Call us for more information
  2. -
  3. Ask for a brochure, which includes signup form
  4. -
  5. Book a visit!
  6. -
-
- - - - - - - - + + + St Huxley's Community College + + + + +
+

St Huxley's Community College

+
+ +
+

Brave new world

+ +

+ It's a brave new world out there. Our children are being put in increasing more competitive situations, both during recreation, and as they + start to move into the adult world of examinations, + jobs, careers, and other life choices. + Having the wrong mindset, becoming too emotional, or making the wrong choices can contribute + to them experiencing difficulty in taking their rightful place in today's ideal society. +

+ +

+ As concerned parents, guardians or carers, you will no doubt want to give your children the best possible start in life — and you've come to the + right place. +

+ +

The best start in life

+ +

+ At St. Huxley's, we pride ourselves in not only giving our students a top quality education, but also giving them the societal and emotional + intelligence they need to win big in the coming utopia. We not only excel at subjects such as genetics, data mining, and chemistry, but we also + include compulsory lessons in: +

+ + + +

If you are interested, then you next steps will likely be to:

+ +
    +
  1. Call us for more information
  2. +
  3. Ask for a brochure, which includes signup form
  4. +
  5. Book a visit!
  6. +
+
+ + + + + + + diff --git a/docs/content/learning-area/css/styling-text/web-fonts/fonts/cicle_fina-demo.html b/docs/content/learning-area/css/styling-text/web-fonts/fonts/cicle_fina-demo.html index e07696cdb0..87e6313630 100644 --- a/docs/content/learning-area/css/styling-text/web-fonts/fonts/cicle_fina-demo.html +++ b/docs/content/learning-area/css/styling-text/web-fonts/fonts/cicle_fina-demo.html @@ -1,1519 +1,1413 @@ - + + + + + + + - - - - - - + - + + - Cicle Fina Specimen + +
+ + - - +
+
+ A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​; +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
10 + abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ +
11 + abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ +
12 + abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ +
13 + abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ +
14 + abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ +
16 + abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ +
18 + abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ +
20 + abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ +
24 + abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ +
30 + abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ +
36 + abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ +
48 + abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ +
60 + abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ +
72 + abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ +
90 + abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ +
+
+
- -
- - +
+
+
+ ◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼body +
+
body
+
body
+
body
+
+
bodyCicle Fina
+
bodyArial
+
bodyVerdana
+
bodyGeorgia
+
-
-
-
-
-
AaBb
-
-
+
+
+

+ 10.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris + condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. +

+
+
+

+ 11.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris + condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. +

+
+
+

+ 12.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris + condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. +

+
+
+

+ 13.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris + condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. +

+
+
+
+
+
+

+ 14.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris + condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. +

+
+
+

+ 16.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris + condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. +

+
+
+

+ 18.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris + condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. +

+
-
-
- A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​; -
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
10 - abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ -
11 - abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ -
12 - abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ -
13 - abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ -
14 - abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ -
16 - abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ -
18 - abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ -
20 - abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ -
24 - abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ -
30 - abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ -
36 - abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ -
48 - abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ -
60 - abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ -
72 - abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ -
90 - abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ -
-
-
+
+
-
-
-
- ◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼body -
-
body
-
body
-
body
-
-
bodyCicle Fina
-
bodyArial
-
bodyVerdana
-
bodyGeorgia
-
+
+
+

+ 20.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris + condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. +

+
+
+

+ 24.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris + condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. +

+
-
-
-

- 10.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, - tortor mauris - condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut - id elit. Cum sociis - natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a - pharetra augue. -

-
-
-

- 11.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, - tortor mauris - condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut - id elit. Cum sociis - natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a - pharetra augue. -

-
-
-

- 12.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, - tortor mauris - condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut - id elit. Cum sociis - natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a - pharetra augue. -

-
-
-

- 13.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, - tortor mauris - condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut - id elit. Cum sociis - natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a - pharetra augue. -

-
-
-
-
-
-

- 14.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, - tortor mauris - condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut - id elit. Cum sociis - natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a - pharetra augue. -

-
-
-

- 16.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, - tortor mauris - condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut - id elit. Cum sociis - natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a - pharetra augue. -

-
-
-

- 18.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, - tortor mauris - condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut - id elit. Cum sociis - natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a - pharetra augue. -

-
+
+
-
-
+
+
+

+ 30.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris + condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. +

+
+
+
-
-
-

- 20.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, - tortor mauris - condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut - id elit. Cum sociis - natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a - pharetra augue. -

-
-
-

- 24.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, - tortor mauris - condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut - id elit. Cum sociis - natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a - pharetra augue. -

-
+
+
+

+ 10.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris + condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. +

+
+
+

+ 11.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris + condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. +

+
+
+

+ 12.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris + condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. +

+
+
+

+ 13.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris + condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. +

+
+
+
-
-
+
+
+

+ 14.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris + condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. +

+
+
+

+ 16.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris + condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. +

+
+
+

+ 18.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris + condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. +

+
+
+
-
-
-

- 30.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, - tortor mauris - condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut - id elit. Cum sociis - natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a - pharetra augue. -

-
-
-
+
+
+

+ 20.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris + condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. +

+
+
+

+ 24.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris + condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. +

+
-
-
-

- 10.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, - tortor mauris - condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut - id elit. Cum sociis - natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a - pharetra augue. -

-
-
-

- 11.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, - tortor mauris - condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut - id elit. Cum sociis - natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a - pharetra augue. -

-
-
-

- 12.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, - tortor mauris - condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut - id elit. Cum sociis - natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a - pharetra augue. -

-
-
-

- 13.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, - tortor mauris - condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut - id elit. Cum sociis - natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a - pharetra augue. -

-
-
-
+
+
-
-
-

- 14.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, - tortor mauris - condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut - id elit. Cum sociis - natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a - pharetra augue. -

-
-
-

- 16.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, - tortor mauris - condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut - id elit. Cum sociis - natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a - pharetra augue. -

-
-
-

- 18.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, - tortor mauris - condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut - id elit. Cum sociis - natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a - pharetra augue. -

-
-
-
+
+
+

+ 30.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris + condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. +

+
+
+
+
-
-
-

- 20.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, - tortor mauris - condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut - id elit. Cum sociis - natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a - pharetra augue. -

-
-
-

- 24.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, - tortor mauris - condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut - id elit. Cum sociis - natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a - pharetra augue. -

-
+
+
+
+

Lorem Ipsum Dolor

+

Etiam porta sem malesuada magna mollis euismod

-
-
+ +
+
+
+
+

+ Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, + tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. +

-
-
-

- 30.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, - tortor mauris - condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut - id elit. Cum sociis - natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a - pharetra augue. -

-
-
-
-
+

Pellentesque ornare sem

-
-
-
-

Lorem Ipsum Dolor

-

Etiam porta sem malesuada magna mollis euismod

+

+ Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non + metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id + elit. +

- -
-
-
-
-

- Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac - cursus commodo, - tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. -

+

+ Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur + adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. +

-

Pellentesque ornare sem

+

+ Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia + bibendum nulla sed consectetur. +

-

- Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec - ullamcorper nulla non - metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh - ultricies vehicula ut id - elit. -

+

+ Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam + eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. +

-

- Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, - consectetur - adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. -

+

Cras mattis consectetur

-

- Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur - et. Aenean lacinia - bibendum nulla sed consectetur. -

+

+ Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. + Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. +

-

- Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu - leo. Maecenas sed diam - eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. -

+

+ Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis + consectetur purus sit amet fermentum. +

+
-

Cras mattis consectetur

+ +

+ Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum + id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit + amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet + risus. +

- +
+
-

- Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere - velit aliquet. Vestibulum - id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget - risus varius blandit sit - amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum - massa justo sit amet - risus. -

+
+
+
+

Language Support

+

+ The subset of Cicle Fina in this kit supports the following languages:
-

- Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean - lacinia bibendum nulla - sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia - bibendum nulla sed - consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. -

+ Albanian, Basque, Chamorro, English, Faroese, Galician, German, Icelandic, Italian, Spanish +

+

Glyph Chart

+

+ The subset of Cicle Fina in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to + help you insert individual characters into your layout. +

+
+
+

&#32;

+ +
+
+

&#33;

+ ! +
+
+

&#34;

+ " +
+
+

&#35;

+ # +
+
+

&#36;

+ $ +
+
+

&#38;

+ & +
+
+

&#39;

+ ' +
+
+

&#40;

+ ( +
+
+

&#41;

+ ) +
+
+

&#42;

+ * +
+
+

&#43;

+ + +
+
+

&#44;

+ , +
+
+

&#45;

+ - +
+
+

&#46;

+ . +
+
+

&#47;

+ / +
+
+

&#48;

+ 0 +
+
+

&#49;

+ 1 +
+
+

&#50;

+ 2 +
+
+

&#51;

+ 3 +
+
+

&#52;

+ 4 +
+
+

&#53;

+ 5 +
+
+

&#54;

+ 6 +
+
+

&#55;

+ 7 +
+
+

&#56;

+ 8 +
+
+

&#57;

+ 9 +
+
+

&#58;

+ : +
+
+

&#59;

+ ; +
+
+

&#60;

+ < +
+
+

&#61;

+ = +
+
+

&#62;

+ > +
+
+

&#63;

+ ? +
+
+

&#64;

+ @ +
+
+

&#65;

+ A +
+
+

&#66;

+ B +
+
+

&#67;

+ C +
+
+

&#68;

+ D +
+
+

&#69;

+ E +
+
+

&#70;

+ F +
+
+

&#71;

+ G +
+
+

&#72;

+ H +
+
+

&#73;

+ I +
+
+

&#74;

+ J +
+
+

&#75;

+ K +
+
+

&#76;

+ L +
+
+

&#77;

+ M +
+
+

&#78;

+ N +
+
+

&#79;

+ O +
+
+

&#80;

+ P +
+
+

&#81;

+ Q +
+
+

&#82;

+ R +
+
+

&#83;

+ S +
+
+

&#84;

+ T +
+
+

&#85;

+ U +
+
+

&#86;

+ V +
+
+

&#87;

+ W +
+
+

&#88;

+ X +
+
+

&#89;

+ Y +
+
+

&#90;

+ Z +
+
+

&#91;

+ [ +
+
+

&#92;

+ \ +
+
+

&#93;

+ ] +
+
+

&#94;

+ ^ +
+
+

&#95;

+ _ +
+
+

&#96;

+ ` +
+
+

&#97;

+ a +
+
+

&#98;

+ b +
+
+

&#99;

+ c +
+
+

&#100;

+ d +
+
+

&#101;

+ e +
+
+

&#102;

+ f +
+
+

&#103;

+ g +
+
+

&#104;

+ h +
+
+

&#105;

+ i +
+
+

&#106;

+ j +
+
+

&#107;

+ k +
+
+

&#108;

+ l +
+
+

&#109;

+ m +
+
+

&#110;

+ n +
+
+

&#111;

+ o +
+
+

&#112;

+ p +
+
+

&#113;

+ q +
+
+

&#114;

+ r +
+
+

&#115;

+ s +
+
+

&#116;

+ t +
+
+

&#117;

+ u +
+
+

&#118;

+ v +
+
+

&#119;

+ w +
+
+

&#120;

+ x +
+
+

&#121;

+ y +
+
+

&#122;

+ z +
+
+

&#123;

+ { +
+
+

&#124;

+ | +
+
+

&#125;

+ } +
+
+

&#126;

+ ~ +
+
+

&#160;

+   +
+
+

&#161;

+ ¡ +
+
+

&#162;

+ ¢ +
+
+

&#163;

+ £ +
+
+

&#165;

+ ¥ +
+
+

&#166;

+ ¦ +
+
+

&#167;

+ § +
+
+

&#168;

+ ¨ +
+
+

&#170;

+ ª +
+
+

&#171;

+ « +
+
+

&#172;

+ ¬ +
+
+

&#173;

+ ­ +
+
+

&#176;

+ ° +
+
+

&#177;

+ ± +
+
+

&#178;

+ ² +
+
+

&#179;

+ ³ +
+
+

&#180;

+ ´ +
+
+

&#182;

+ ¶ +
+
+

&#183;

+ · +
+
+

&#185;

+ ¹ +
+
+

&#186;

+ º +
+
+

&#187;

+ » +
+
+

&#188;

+ ¼ +
+
+

&#189;

+ ½ +
+
+

&#190;

+ ¾ +
+
+

&#191;

+ ¿ +
+
+

&#192;

+ À +
+
+

&#193;

+ Á +
+
+

&#194;

+ Â +
+
+

&#195;

+ Ã +
+
+

&#196;

+ Ä +
+
+

&#198;

+ Æ +
+
+

&#199;

+ Ç +
+
+

&#200;

+ È +
+
+

&#201;

+ É +
+
+

&#203;

+ Ë +
+
+

&#204;

+ Ì +
+
+

&#205;

+ Í +
+
+

&#206;

+ Î +
+
+

&#207;

+ Ï +
+
+

&#208;

+ Ð +
+
+

&#209;

+ Ñ +
+
+

&#210;

+ Ò +
+
+

&#211;

+ Ó +
+
+

&#213;

+ Õ +
+
+

&#214;

+ Ö +
+
+

&#215;

+ × +
+
+

&#216;

+ Ø +
+
+

&#217;

+ Ù +
+
+

&#218;

+ Ú +
+
+

&#220;

+ Ü +
+
+

&#221;

+ Ý +
+
+

&#222;

+ Þ +
+
+

&#223;

+ ß +
+
+

&#224;

+ à +
+
+

&#225;

+ á +
+
+

&#226;

+ â +
+
+

&#227;

+ ã +
+
+

&#228;

+ ä +
+
+

&#230;

+ æ +
+
+

&#231;

+ ç +
+
+

&#232;

+ è +
+
+

&#233;

+ é +
+
+

&#234;

+ ê +
+
+

&#235;

+ ë +
+
+

&#236;

+ ì +
+
+

&#237;

+ í +
+
+

&#238;

+ î +
+
+

&#239;

+ ï +
+
+

&#240;

+ ð +
+
+

&#241;

+ ñ +
+
+

&#242;

+ ò +
+
+

&#243;

+ ó +
+
+

&#244;

+ ô +
+
+

&#245;

+ õ +
+
+

&#246;

+ ö +
+
+

&#247;

+ ÷ +
+
+

&#248;

+ ø +
+
+

&#249;

+ ù +
+
+

&#250;

+ ú +
+
+

&#251;

+ û +
+
+

&#252;

+ ü +
+
+

&#253;

+ ý +
+
+

&#254;

+ þ +
+
+

&#255;

+ ÿ +
+
+

&#338;

+ Œ +
+
+

&#339;

+ œ +
+
+

&#376;

+ Ÿ +
+
+

&#710;

+ ˆ +
+
+

&#732;

+ ˜ +
+
+

&#8192;

+   +
+
+

&#8193;

+   +
+
+

&#8194;

+   +
+
+

&#8195;

+   +
+
+

&#8196;

+   +
+
+

&#8197;

+   +
+
+

&#8198;

+   +
+
+

&#8199;

+   +
+
+

&#8200;

+   +
+
+

&#8201;

+   +
+
+

&#8202;

+   +
+
+

&#8208;

+ ‐ +
+
+

&#8209;

+ ‑ +
+
+

&#8210;

+ ‒ +
+
+

&#8211;

+ – +
+
+

&#8212;

+ — +
+
+

&#8216;

+ ‘ +
+
+

&#8217;

+ ’ +
+
+

&#8218;

+ ‚ +
+
+

&#8220;

+ “ +
+
+

&#8221;

+ ” +
+
+

&#8222;

+ „ +
+
+

&#8226;

+ • +
+
+

&#8230;

+ … +
+
+

&#8239;

+   +
+
+

&#8249;

+ ‹ +
+
+

&#8250;

+ › +
+
+

&#8287;

+   +
+
+

&#8364;

+ € +
+
+

&#8482;

+ ™ +
+
+

&#9724;

+ ◼ +
+
+

&#64257;

+ fi +
+
+

&#64258;

+ fl +
+
+
+
+
-

- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus - auctor fringilla. Maecenas - faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut - fermentum massa justo sit - amet risus. -

-
-
-
+
-
-
-
-

Language Support

-

- The subset of Cicle Fina in this kit supports the following languages:
+

+
+
+

Installing Webfonts

- Albanian, Basque, Chamorro, English, Faroese, Galician, German, Icelandic, Italian, Spanish -

-

Glyph Chart

-

- The subset of Cicle Fina in this kit includes all the glyphs listed below. Unicode entities are included - above each glyph to - help you insert individual characters into your layout. -

-
-
-

&#32;

- -
-
-

&#33;

- ! -
-
-

&#34;

- " -
-
-

&#35;

- # -
-
-

&#36;

- $ -
-
-

&#38;

- & -
-
-

&#39;

- ' -
-
-

&#40;

- ( -
-
-

&#41;

- ) -
-
-

&#42;

- * -
-
-

&#43;

- + -
-
-

&#44;

- , -
-
-

&#45;

- - -
-
-

&#46;

- . -
-
-

&#47;

- / -
-
-

&#48;

- 0 -
-
-

&#49;

- 1 -
-
-

&#50;

- 2 -
-
-

&#51;

- 3 -
-
-

&#52;

- 4 -
-
-

&#53;

- 5 -
-
-

&#54;

- 6 -
-
-

&#55;

- 7 -
-
-

&#56;

- 8 -
-
-

&#57;

- 9 -
-
-

&#58;

- : -
-
-

&#59;

- ; -
-
-

&#60;

- < -
-
-

&#61;

- = -
-
-

&#62;

- > -
-
-

&#63;

- ? -
-
-

&#64;

- @ -
-
-

&#65;

- A -
-
-

&#66;

- B -
-
-

&#67;

- C -
-
-

&#68;

- D -
-
-

&#69;

- E -
-
-

&#70;

- F -
-
-

&#71;

- G -
-
-

&#72;

- H -
-
-

&#73;

- I -
-
-

&#74;

- J -
-
-

&#75;

- K -
-
-

&#76;

- L -
-
-

&#77;

- M -
-
-

&#78;

- N -
-
-

&#79;

- O -
-
-

&#80;

- P -
-
-

&#81;

- Q -
-
-

&#82;

- R -
-
-

&#83;

- S -
-
-

&#84;

- T -
-
-

&#85;

- U -
-
-

&#86;

- V -
-
-

&#87;

- W -
-
-

&#88;

- X -
-
-

&#89;

- Y -
-
-

&#90;

- Z -
-
-

&#91;

- [ -
-
-

&#92;

- \ -
-
-

&#93;

- ] -
-
-

&#94;

- ^ -
-
-

&#95;

- _ -
-
-

&#96;

- ` -
-
-

&#97;

- a -
-
-

&#98;

- b -
-
-

&#99;

- c -
-
-

&#100;

- d -
-
-

&#101;

- e -
-
-

&#102;

- f -
-
-

&#103;

- g -
-
-

&#104;

- h -
-
-

&#105;

- i -
-
-

&#106;

- j -
-
-

&#107;

- k -
-
-

&#108;

- l -
-
-

&#109;

- m -
-
-

&#110;

- n -
-
-

&#111;

- o -
-
-

&#112;

- p -
-
-

&#113;

- q -
-
-

&#114;

- r -
-
-

&#115;

- s -
-
-

&#116;

- t -
-
-

&#117;

- u -
-
-

&#118;

- v -
-
-

&#119;

- w -
-
-

&#120;

- x -
-
-

&#121;

- y -
-
-

&#122;

- z -
-
-

&#123;

- { -
-
-

&#124;

- | -
-
-

&#125;

- } -
-
-

&#126;

- ~ -
-
-

&#160;

-   -
-
-

&#161;

- ¡ -
-
-

&#162;

- ¢ -
-
-

&#163;

- £ -
-
-

&#165;

- ¥ -
-
-

&#166;

- ¦ -
-
-

&#167;

- § -
-
-

&#168;

- ¨ -
-
-

&#170;

- ª -
-
-

&#171;

- « -
-
-

&#172;

- ¬ -
-
-

&#173;

- ­ -
-
-

&#176;

- ° -
-
-

&#177;

- ± -
-
-

&#178;

- ² -
-
-

&#179;

- ³ -
-
-

&#180;

- ´ -
-
-

&#182;

- ¶ -
-
-

&#183;

- · -
-
-

&#185;

- ¹ -
-
-

&#186;

- º -
-
-

&#187;

- » -
-
-

&#188;

- ¼ -
-
-

&#189;

- ½ -
-
-

&#190;

- ¾ -
-
-

&#191;

- ¿ -
-
-

&#192;

- À -
-
-

&#193;

- Á -
-
-

&#194;

- Â -
-
-

&#195;

- Ã -
-
-

&#196;

- Ä -
-
-

&#198;

- Æ -
-
-

&#199;

- Ç -
-
-

&#200;

- È -
-
-

&#201;

- É -
-
-

&#203;

- Ë -
-
-

&#204;

- Ì -
-
-

&#205;

- Í -
-
-

&#206;

- Î -
-
-

&#207;

- Ï -
-
-

&#208;

- Ð -
-
-

&#209;

- Ñ -
-
-

&#210;

- Ò -
-
-

&#211;

- Ó -
-
-

&#213;

- Õ -
-
-

&#214;

- Ö -
-
-

&#215;

- × -
-
-

&#216;

- Ø -
-
-

&#217;

- Ù -
-
-

&#218;

- Ú -
-
-

&#220;

- Ü -
-
-

&#221;

- Ý -
-
-

&#222;

- Þ -
-
-

&#223;

- ß -
-
-

&#224;

- à -
-
-

&#225;

- á -
-
-

&#226;

- â -
-
-

&#227;

- ã -
-
-

&#228;

- ä -
-
-

&#230;

- æ -
-
-

&#231;

- ç -
-
-

&#232;

- è -
-
-

&#233;

- é -
-
-

&#234;

- ê -
-
-

&#235;

- ë -
-
-

&#236;

- ì -
-
-

&#237;

- í -
-
-

&#238;

- î -
-
-

&#239;

- ï -
-
-

&#240;

- ð -
-
-

&#241;

- ñ -
-
-

&#242;

- ò -
-
-

&#243;

- ó -
-
-

&#244;

- ô -
-
-

&#245;

- õ -
-
-

&#246;

- ö -
-
-

&#247;

- ÷ -
-
-

&#248;

- ø -
-
-

&#249;

- ù -
-
-

&#250;

- ú -
-
-

&#251;

- û -
-
-

&#252;

- ü -
-
-

&#253;

- ý -
-
-

&#254;

- þ -
-
-

&#255;

- ÿ -
-
-

&#338;

- Œ -
-
-

&#339;

- œ -
-
-

&#376;

- Ÿ -
-
-

&#710;

- ˆ -
-
-

&#732;

- ˜ -
-
-

&#8192;

-   -
-
-

&#8193;

-   -
-
-

&#8194;

-   -
-
-

&#8195;

-   -
-
-

&#8196;

-   -
-
-

&#8197;

-   -
-
-

&#8198;

-   -
-
-

&#8199;

-   -
-
-

&#8200;

-   -
-
-

&#8201;

-   -
-
-

&#8202;

-   -
-
-

&#8208;

- ‐ -
-
-

&#8209;

- ‑ -
-
-

&#8210;

- ‒ -
-
-

&#8211;

- – -
-
-

&#8212;

- — -
-
-

&#8216;

- ‘ -
-
-

&#8217;

- ’ -
-
-

&#8218;

- ‚ -
-
-

&#8220;

- “ -
-
-

&#8221;

- ” -
-
-

&#8222;

- „ -
-
-

&#8226;

- • -
-
-

&#8230;

- … -
-
-

&#8239;

-   -
-
-

&#8249;

- ‹ -
-
-

&#8250;

- › -
-
-

&#8287;

-   -
-
-

&#8364;

- € -
-
-

&#8482;

- ™ -
-
-

&#9724;

- ◼ -
-
-

&#64257;

- fi -
-
-

&#64258;

- fl -
-
-
-
-
+

+ Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font + formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG. +

-
+

1. Upload your webfonts

+

You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

-
-
-
-

Installing Webfonts

+

2. Include the webfont stylesheet

+

+ A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch + of headaches. Learn more about this syntax by reading the + Fontspring blog post about it. The + code for it is as follows: +

-

- Webfonts are supported by all major browser platforms but not all in the same way. There are currently - four different font - formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG. -

+ + @font-face{ font-family: 'MyWebFont'; src: url('WebFont.eot'); src: url('WebFont.eot?#iefix') format('embedded-opentype'), + url('WebFont.woff') format('woff'), url('WebFont.ttf') format('truetype'), url('WebFont.svg#webfont') format('svg'); } + -

1. Upload your webfonts

-

You must upload your webfont kit to your website. They should be in or near the same directory as your - CSS files.

+

+ We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this: +

+ <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" + /> -

2. Include the webfont stylesheet

-

- A special CSS @font-face declaration helps the various browsers select the appropriate font it needs - without causing you a bunch - of headaches. Learn more about this syntax by reading the - Fontspring blog - post about it. The - code for it is as follows: -

+

3. Modify your own stylesheet

+

+ To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration + above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that + webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example: +

+ p { font-family: 'WebFont', Arial, sans-serif; } - - @font-face{ font-family: 'MyWebFont'; src: url('WebFont.eot'); src: url('WebFont.eot?#iefix') - format('embedded-opentype'), - url('WebFont.woff') format('woff'), url('WebFont.ttf') format('truetype'), url('WebFont.svg#webfont') - format('svg'); } - +

4. Test

+

+ Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that + fonts aren't loading in a particular browser. +

+
-

- We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in - your HTML, like this: -

- <link rel="stylesheet" href="stylesheet.css" type="text/css" - charset="utf-8" - /> + +
+
+ -
-
-
- -
- - + diff --git a/docs/content/learning-area/css/styling-text/web-fonts/fonts/zantroke-demo.html b/docs/content/learning-area/css/styling-text/web-fonts/fonts/zantroke-demo.html index f200ee0158..04c3438f63 100644 --- a/docs/content/learning-area/css/styling-text/web-fonts/fonts/zantroke-demo.html +++ b/docs/content/learning-area/css/styling-text/web-fonts/fonts/zantroke-demo.html @@ -1,1569 +1,1462 @@ - + + + + + + + - - - - - - + - + + - Zantroke Regular Specimen + +
+ + - - +
+
+ A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​; +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
10 + abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ +
11 + abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ +
12 + abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ +
13 + abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ +
14 + abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ +
16 + abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ +
18 + abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ +
20 + abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ +
24 + abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ +
30 + abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ +
36 + abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ +
48 + abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ +
60 + abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ +
72 + abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ +
90 + abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ +
+
+
- -
- - +
+
+
+ ◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼body +
+
body
+
body
+
body
+
+
bodyZantroke Regular
+
bodyArial
+
bodyVerdana
+
bodyGeorgia
+
-
-
-
-
-
AaBb
-
-
+
+
+

+ 10.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris + condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. +

+
+
+

+ 11.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris + condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. +

+
+
+

+ 12.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris + condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. +

+
+
+

+ 13.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris + condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. +

+
+
+
+
+
+

+ 14.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris + condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. +

+
+
+

+ 16.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris + condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. +

+
+
+

+ 18.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris + condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. +

+
-
-
- A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​; -
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
10 - abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ -
11 - abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ -
12 - abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ -
13 - abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ -
14 - abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ -
16 - abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ -
18 - abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ -
20 - abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ -
24 - abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ -
30 - abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ -
36 - abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ -
48 - abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ -
60 - abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ -
72 - abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ -
90 - abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ -
-
-
+
+
-
-
-
- ◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼◼body -
-
body
-
body
-
body
-
-
bodyZantroke Regular
-
bodyArial
-
bodyVerdana
-
bodyGeorgia
-
+
+
+

+ 20.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris + condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. +

+
+
+

+ 24.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris + condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. +

+
-
-
-

- 10.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, - tortor mauris - condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut - id elit. Cum sociis - natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a - pharetra augue. -

-
-
-

- 11.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, - tortor mauris - condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut - id elit. Cum sociis - natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a - pharetra augue. -

-
-
-

- 12.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, - tortor mauris - condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut - id elit. Cum sociis - natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a - pharetra augue. -

-
-
-

- 13.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, - tortor mauris - condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut - id elit. Cum sociis - natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a - pharetra augue. -

-
-
-
-
-
-

- 14.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, - tortor mauris - condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut - id elit. Cum sociis - natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a - pharetra augue. -

-
-
-

- 16.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, - tortor mauris - condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut - id elit. Cum sociis - natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a - pharetra augue. -

-
-
-

- 18.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, - tortor mauris - condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut - id elit. Cum sociis - natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a - pharetra augue. -

-
+
+
-
-
+
+
+

+ 30.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris + condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. +

+
+
+
-
-
-

- 20.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, - tortor mauris - condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut - id elit. Cum sociis - natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a - pharetra augue. -

-
-
-

- 24.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, - tortor mauris - condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut - id elit. Cum sociis - natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a - pharetra augue. -

-
+
+
+

+ 10.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris + condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. +

+
+
+

+ 11.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris + condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. +

+
+
+

+ 12.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris + condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. +

+
+
+

+ 13.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris + condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. +

+
+
+
-
-
+
+
+

+ 14.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris + condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. +

+
+
+

+ 16.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris + condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. +

+
+
+

+ 18.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris + condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. +

+
+
+
-
-
-

- 30.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, - tortor mauris - condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut - id elit. Cum sociis - natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a - pharetra augue. -

-
-
-
+
+
+

+ 20.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris + condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. +

+
+
+

+ 24.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris + condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. +

+
-
-
-

- 10.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, - tortor mauris - condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut - id elit. Cum sociis - natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a - pharetra augue. -

-
-
-

- 11.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, - tortor mauris - condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut - id elit. Cum sociis - natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a - pharetra augue. -

-
-
-

- 12.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, - tortor mauris - condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut - id elit. Cum sociis - natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a - pharetra augue. -

-
-
-

- 13.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, - tortor mauris - condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut - id elit. Cum sociis - natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a - pharetra augue. -

-
-
-
+
+
-
-
-

- 14.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, - tortor mauris - condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut - id elit. Cum sociis - natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a - pharetra augue. -

-
-
-

- 16.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, - tortor mauris - condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut - id elit. Cum sociis - natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a - pharetra augue. -

-
-
-

- 18.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, - tortor mauris - condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut - id elit. Cum sociis - natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a - pharetra augue. -

-
-
-
+
+
+

+ 30.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris + condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. +

+
+
+
+
-
-
-

- 20.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, - tortor mauris - condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut - id elit. Cum sociis - natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a - pharetra augue. -

-
-
-

- 24.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, - tortor mauris - condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut - id elit. Cum sociis - natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a - pharetra augue. -

-
+
+
+
+

Lorem Ipsum Dolor

+

Etiam porta sem malesuada magna mollis euismod

-
-
+ +
+
+
+
+

+ Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, + tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. +

-
-
-

- 30.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, - tortor mauris - condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut - id elit. Cum sociis - natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a - pharetra augue. -

-
-
-
-
+

Pellentesque ornare sem

-
-
-
-

Lorem Ipsum Dolor

-

Etiam porta sem malesuada magna mollis euismod

+

+ Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non + metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id + elit. +

- -
-
-
-
-

- Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac - cursus commodo, - tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. -

+

+ Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur + adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. +

-

Pellentesque ornare sem

+

+ Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia + bibendum nulla sed consectetur. +

-

- Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec - ullamcorper nulla non - metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh - ultricies vehicula ut id - elit. -

+

+ Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam + eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. +

-

- Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, - consectetur - adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. -

+

Cras mattis consectetur

-

- Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur - et. Aenean lacinia - bibendum nulla sed consectetur. -

+

+ Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. + Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. +

-

- Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu - leo. Maecenas sed diam - eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla. -

+

+ Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis + consectetur purus sit amet fermentum. +

+
-

Cras mattis consectetur

+ +

+ Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum + id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit + amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet + risus. +

- +
+
-

- Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere - velit aliquet. Vestibulum - id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget - risus varius blandit sit - amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum - massa justo sit amet - risus. -

+
+
+
+

Language Support

+

+ The subset of Zantroke Regular in this kit supports the following languages:
-

- Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean - lacinia bibendum nulla - sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia - bibendum nulla sed - consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. -

+ Albanian, Basque, Breton, Chamorro, Danish, Dutch, English, Faroese, Finnish, French, Frisian, Galician, German, Icelandic, + Italian, Malagasy, Norwegian, Portuguese, Spanish, Swedish +

+

Glyph Chart

+

+ The subset of Zantroke Regular in this kit includes all the glyphs listed below. Unicode entities are included above each glyph + to help you insert individual characters into your layout. +

+
+
+

&#13;

+ +
+
+

&#32;

+ +
+
+

&#33;

+ ! +
+
+

&#34;

+ " +
+
+

&#35;

+ # +
+
+

&#36;

+ $ +
+
+

&#37;

+ % +
+
+

&#38;

+ & +
+
+

&#39;

+ ' +
+
+

&#40;

+ ( +
+
+

&#41;

+ ) +
+
+

&#42;

+ * +
+
+

&#43;

+ + +
+
+

&#44;

+ , +
+
+

&#45;

+ - +
+
+

&#46;

+ . +
+
+

&#47;

+ / +
+
+

&#48;

+ 0 +
+
+

&#49;

+ 1 +
+
+

&#50;

+ 2 +
+
+

&#51;

+ 3 +
+
+

&#52;

+ 4 +
+
+

&#53;

+ 5 +
+
+

&#54;

+ 6 +
+
+

&#55;

+ 7 +
+
+

&#56;

+ 8 +
+
+

&#57;

+ 9 +
+
+

&#58;

+ : +
+
+

&#59;

+ ; +
+
+

&#60;

+ < +
+
+

&#61;

+ = +
+
+

&#62;

+ > +
+
+

&#63;

+ ? +
+
+

&#64;

+ @ +
+
+

&#65;

+ A +
+
+

&#66;

+ B +
+
+

&#67;

+ C +
+
+

&#68;

+ D +
+
+

&#69;

+ E +
+
+

&#70;

+ F +
+
+

&#71;

+ G +
+
+

&#72;

+ H +
+
+

&#73;

+ I +
+
+

&#74;

+ J +
+
+

&#75;

+ K +
+
+

&#76;

+ L +
+
+

&#77;

+ M +
+
+

&#78;

+ N +
+
+

&#79;

+ O +
+
+

&#80;

+ P +
+
+

&#81;

+ Q +
+
+

&#82;

+ R +
+
+

&#83;

+ S +
+
+

&#84;

+ T +
+
+

&#85;

+ U +
+
+

&#86;

+ V +
+
+

&#87;

+ W +
+
+

&#88;

+ X +
+
+

&#89;

+ Y +
+
+

&#90;

+ Z +
+
+

&#91;

+ [ +
+
+

&#92;

+ \ +
+
+

&#93;

+ ] +
+
+

&#94;

+ ^ +
+
+

&#95;

+ _ +
+
+

&#96;

+ ` +
+
+

&#97;

+ a +
+
+

&#98;

+ b +
+
+

&#99;

+ c +
+
+

&#100;

+ d +
+
+

&#101;

+ e +
+
+

&#102;

+ f +
+
+

&#103;

+ g +
+
+

&#104;

+ h +
+
+

&#105;

+ i +
+
+

&#106;

+ j +
+
+

&#107;

+ k +
+
+

&#108;

+ l +
+
+

&#109;

+ m +
+
+

&#110;

+ n +
+
+

&#111;

+ o +
+
+

&#112;

+ p +
+
+

&#113;

+ q +
+
+

&#114;

+ r +
+
+

&#115;

+ s +
+
+

&#116;

+ t +
+
+

&#117;

+ u +
+
+

&#118;

+ v +
+
+

&#119;

+ w +
+
+

&#120;

+ x +
+
+

&#121;

+ y +
+
+

&#122;

+ z +
+
+

&#123;

+ { +
+
+

&#124;

+ | +
+
+

&#125;

+ } +
+
+

&#126;

+ ~ +
+
+

&#160;

+   +
+
+

&#161;

+ ¡ +
+
+

&#162;

+ ¢ +
+
+

&#163;

+ £ +
+
+

&#164;

+ ¤ +
+
+

&#165;

+ ¥ +
+
+

&#166;

+ ¦ +
+
+

&#167;

+ § +
+
+

&#168;

+ ¨ +
+
+

&#169;

+ © +
+
+

&#170;

+ ª +
+
+

&#171;

+ « +
+
+

&#172;

+ ¬ +
+
+

&#173;

+ ­ +
+
+

&#174;

+ ® +
+
+

&#175;

+ ¯ +
+
+

&#176;

+ ° +
+
+

&#177;

+ ± +
+
+

&#178;

+ ² +
+
+

&#179;

+ ³ +
+
+

&#180;

+ ´ +
+
+

&#181;

+ µ +
+
+

&#182;

+ ¶ +
+
+

&#183;

+ · +
+
+

&#184;

+ ¸ +
+
+

&#185;

+ ¹ +
+
+

&#186;

+ º +
+
+

&#187;

+ » +
+
+

&#191;

+ ¿ +
+
+

&#192;

+ À +
+
+

&#193;

+ Á +
+
+

&#194;

+ Â +
+
+

&#195;

+ Ã +
+
+

&#196;

+ Ä +
+
+

&#197;

+ Å +
+
+

&#198;

+ Æ +
+
+

&#199;

+ Ç +
+
+

&#200;

+ È +
+
+

&#201;

+ É +
+
+

&#202;

+ Ê +
+
+

&#203;

+ Ë +
+
+

&#204;

+ Ì +
+
+

&#205;

+ Í +
+
+

&#206;

+ Î +
+
+

&#207;

+ Ï +
+
+

&#208;

+ Ð +
+
+

&#209;

+ Ñ +
+
+

&#210;

+ Ò +
+
+

&#211;

+ Ó +
+
+

&#212;

+ Ô +
+
+

&#213;

+ Õ +
+
+

&#214;

+ Ö +
+
+

&#215;

+ × +
+
+

&#216;

+ Ø +
+
+

&#217;

+ Ù +
+
+

&#218;

+ Ú +
+
+

&#219;

+ Û +
+
+

&#220;

+ Ü +
+
+

&#221;

+ Ý +
+
+

&#222;

+ Þ +
+
+

&#223;

+ ß +
+
+

&#224;

+ à +
+
+

&#225;

+ á +
+
+

&#226;

+ â +
+
+

&#227;

+ ã +
+
+

&#228;

+ ä +
+
+

&#229;

+ å +
+
+

&#230;

+ æ +
+
+

&#231;

+ ç +
+
+

&#232;

+ è +
+
+

&#233;

+ é +
+
+

&#234;

+ ê +
+
+

&#235;

+ ë +
+
+

&#236;

+ ì +
+
+

&#237;

+ í +
+
+

&#238;

+ î +
+
+

&#239;

+ ï +
+
+

&#240;

+ ð +
+
+

&#241;

+ ñ +
+
+

&#242;

+ ò +
+
+

&#243;

+ ó +
+
+

&#244;

+ ô +
+
+

&#245;

+ õ +
+
+

&#246;

+ ö +
+
+

&#247;

+ ÷ +
+
+

&#248;

+ ø +
+
+

&#249;

+ ù +
+
+

&#250;

+ ú +
+
+

&#251;

+ û +
+
+

&#252;

+ ü +
+
+

&#253;

+ ý +
+
+

&#254;

+ þ +
+
+

&#255;

+ ÿ +
+
+

&#338;

+ Œ +
+
+

&#339;

+ œ +
+
+

&#376;

+ Ÿ +
+
+

&#710;

+ ˆ +
+
+

&#732;

+ ˜ +
+
+

&#8192;

+   +
+
+

&#8193;

+   +
+
+

&#8194;

+   +
+
+

&#8195;

+   +
+
+

&#8196;

+   +
+
+

&#8197;

+   +
+
+

&#8198;

+   +
+
+

&#8199;

+   +
+
+

&#8200;

+   +
+
+

&#8201;

+   +
+
+

&#8202;

+   +
+
+

&#8208;

+ ‐ +
+
+

&#8209;

+ ‑ +
+
+

&#8210;

+ ‒ +
+
+

&#8211;

+ – +
+
+

&#8212;

+ — +
+
+

&#8216;

+ ‘ +
+
+

&#8217;

+ ’ +
+
+

&#8218;

+ ‚ +
+
+

&#8220;

+ “ +
+
+

&#8221;

+ ” +
+
+

&#8222;

+ „ +
+
+

&#8226;

+ • +
+
+

&#8230;

+ … +
+
+

&#8239;

+   +
+
+

&#8249;

+ ‹ +
+
+

&#8250;

+ › +
+
+

&#8287;

+   +
+
+

&#8364;

+ € +
+
+

&#8482;

+ ™ +
+
+

&#9724;

+ ◼ +
+
+

&#64257;

+ fi +
+
+

&#64258;

+ fl +
+
+

&#64259;

+ ffi +
+
+

&#64260;

+ ffl +
+
+
+
+
-

- Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus - auctor fringilla. Maecenas - faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut - fermentum massa justo sit - amet risus. -

-
-
-
+
-
-
-
-

Language Support

-

- The subset of Zantroke Regular in this kit supports the following languages:
+

+
+
+

Installing Webfonts

- Albanian, Basque, Breton, Chamorro, Danish, Dutch, English, Faroese, Finnish, French, Frisian, Galician, - German, Icelandic, - Italian, Malagasy, Norwegian, Portuguese, Spanish, Swedish -

-

Glyph Chart

-

- The subset of Zantroke Regular in this kit includes all the glyphs listed below. Unicode entities are - included above each glyph - to help you insert individual characters into your layout. -

-
-
-

&#13;

- -
-
-

&#32;

- -
-
-

&#33;

- ! -
-
-

&#34;

- " -
-
-

&#35;

- # -
-
-

&#36;

- $ -
-
-

&#37;

- % -
-
-

&#38;

- & -
-
-

&#39;

- ' -
-
-

&#40;

- ( -
-
-

&#41;

- ) -
-
-

&#42;

- * -
-
-

&#43;

- + -
-
-

&#44;

- , -
-
-

&#45;

- - -
-
-

&#46;

- . -
-
-

&#47;

- / -
-
-

&#48;

- 0 -
-
-

&#49;

- 1 -
-
-

&#50;

- 2 -
-
-

&#51;

- 3 -
-
-

&#52;

- 4 -
-
-

&#53;

- 5 -
-
-

&#54;

- 6 -
-
-

&#55;

- 7 -
-
-

&#56;

- 8 -
-
-

&#57;

- 9 -
-
-

&#58;

- : -
-
-

&#59;

- ; -
-
-

&#60;

- < -
-
-

&#61;

- = -
-
-

&#62;

- > -
-
-

&#63;

- ? -
-
-

&#64;

- @ -
-
-

&#65;

- A -
-
-

&#66;

- B -
-
-

&#67;

- C -
-
-

&#68;

- D -
-
-

&#69;

- E -
-
-

&#70;

- F -
-
-

&#71;

- G -
-
-

&#72;

- H -
-
-

&#73;

- I -
-
-

&#74;

- J -
-
-

&#75;

- K -
-
-

&#76;

- L -
-
-

&#77;

- M -
-
-

&#78;

- N -
-
-

&#79;

- O -
-
-

&#80;

- P -
-
-

&#81;

- Q -
-
-

&#82;

- R -
-
-

&#83;

- S -
-
-

&#84;

- T -
-
-

&#85;

- U -
-
-

&#86;

- V -
-
-

&#87;

- W -
-
-

&#88;

- X -
-
-

&#89;

- Y -
-
-

&#90;

- Z -
-
-

&#91;

- [ -
-
-

&#92;

- \ -
-
-

&#93;

- ] -
-
-

&#94;

- ^ -
-
-

&#95;

- _ -
-
-

&#96;

- ` -
-
-

&#97;

- a -
-
-

&#98;

- b -
-
-

&#99;

- c -
-
-

&#100;

- d -
-
-

&#101;

- e -
-
-

&#102;

- f -
-
-

&#103;

- g -
-
-

&#104;

- h -
-
-

&#105;

- i -
-
-

&#106;

- j -
-
-

&#107;

- k -
-
-

&#108;

- l -
-
-

&#109;

- m -
-
-

&#110;

- n -
-
-

&#111;

- o -
-
-

&#112;

- p -
-
-

&#113;

- q -
-
-

&#114;

- r -
-
-

&#115;

- s -
-
-

&#116;

- t -
-
-

&#117;

- u -
-
-

&#118;

- v -
-
-

&#119;

- w -
-
-

&#120;

- x -
-
-

&#121;

- y -
-
-

&#122;

- z -
-
-

&#123;

- { -
-
-

&#124;

- | -
-
-

&#125;

- } -
-
-

&#126;

- ~ -
-
-

&#160;

-   -
-
-

&#161;

- ¡ -
-
-

&#162;

- ¢ -
-
-

&#163;

- £ -
-
-

&#164;

- ¤ -
-
-

&#165;

- ¥ -
-
-

&#166;

- ¦ -
-
-

&#167;

- § -
-
-

&#168;

- ¨ -
-
-

&#169;

- © -
-
-

&#170;

- ª -
-
-

&#171;

- « -
-
-

&#172;

- ¬ -
-
-

&#173;

- ­ -
-
-

&#174;

- ® -
-
-

&#175;

- ¯ -
-
-

&#176;

- ° -
-
-

&#177;

- ± -
-
-

&#178;

- ² -
-
-

&#179;

- ³ -
-
-

&#180;

- ´ -
-
-

&#181;

- µ -
-
-

&#182;

- ¶ -
-
-

&#183;

- · -
-
-

&#184;

- ¸ -
-
-

&#185;

- ¹ -
-
-

&#186;

- º -
-
-

&#187;

- » -
-
-

&#191;

- ¿ -
-
-

&#192;

- À -
-
-

&#193;

- Á -
-
-

&#194;

- Â -
-
-

&#195;

- Ã -
-
-

&#196;

- Ä -
-
-

&#197;

- Å -
-
-

&#198;

- Æ -
-
-

&#199;

- Ç -
-
-

&#200;

- È -
-
-

&#201;

- É -
-
-

&#202;

- Ê -
-
-

&#203;

- Ë -
-
-

&#204;

- Ì -
-
-

&#205;

- Í -
-
-

&#206;

- Î -
-
-

&#207;

- Ï -
-
-

&#208;

- Ð -
-
-

&#209;

- Ñ -
-
-

&#210;

- Ò -
-
-

&#211;

- Ó -
-
-

&#212;

- Ô -
-
-

&#213;

- Õ -
-
-

&#214;

- Ö -
-
-

&#215;

- × -
-
-

&#216;

- Ø -
-
-

&#217;

- Ù -
-
-

&#218;

- Ú -
-
-

&#219;

- Û -
-
-

&#220;

- Ü -
-
-

&#221;

- Ý -
-
-

&#222;

- Þ -
-
-

&#223;

- ß -
-
-

&#224;

- à -
-
-

&#225;

- á -
-
-

&#226;

- â -
-
-

&#227;

- ã -
-
-

&#228;

- ä -
-
-

&#229;

- å -
-
-

&#230;

- æ -
-
-

&#231;

- ç -
-
-

&#232;

- è -
-
-

&#233;

- é -
-
-

&#234;

- ê -
-
-

&#235;

- ë -
-
-

&#236;

- ì -
-
-

&#237;

- í -
-
-

&#238;

- î -
-
-

&#239;

- ï -
-
-

&#240;

- ð -
-
-

&#241;

- ñ -
-
-

&#242;

- ò -
-
-

&#243;

- ó -
-
-

&#244;

- ô -
-
-

&#245;

- õ -
-
-

&#246;

- ö -
-
-

&#247;

- ÷ -
-
-

&#248;

- ø -
-
-

&#249;

- ù -
-
-

&#250;

- ú -
-
-

&#251;

- û -
-
-

&#252;

- ü -
-
-

&#253;

- ý -
-
-

&#254;

- þ -
-
-

&#255;

- ÿ -
-
-

&#338;

- Œ -
-
-

&#339;

- œ -
-
-

&#376;

- Ÿ -
-
-

&#710;

- ˆ -
-
-

&#732;

- ˜ -
-
-

&#8192;

-   -
-
-

&#8193;

-   -
-
-

&#8194;

-   -
-
-

&#8195;

-   -
-
-

&#8196;

-   -
-
-

&#8197;

-   -
-
-

&#8198;

-   -
-
-

&#8199;

-   -
-
-

&#8200;

-   -
-
-

&#8201;

-   -
-
-

&#8202;

-   -
-
-

&#8208;

- ‐ -
-
-

&#8209;

- ‑ -
-
-

&#8210;

- ‒ -
-
-

&#8211;

- – -
-
-

&#8212;

- — -
-
-

&#8216;

- ‘ -
-
-

&#8217;

- ’ -
-
-

&#8218;

- ‚ -
-
-

&#8220;

- “ -
-
-

&#8221;

- ” -
-
-

&#8222;

- „ -
-
-

&#8226;

- • -
-
-

&#8230;

- … -
-
-

&#8239;

-   -
-
-

&#8249;

- ‹ -
-
-

&#8250;

- › -
-
-

&#8287;

-   -
-
-

&#8364;

- € -
-
-

&#8482;

- ™ -
-
-

&#9724;

- ◼ -
-
-

&#64257;

- fi -
-
-

&#64258;

- fl -
-
-

&#64259;

- ffi -
-
-

&#64260;

- ffl -
-
-
-
-
+

+ Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font + formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG. +

-
+

1. Upload your webfonts

+

You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

-
-
-
-

Installing Webfonts

+

2. Include the webfont stylesheet

+

+ A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch + of headaches. Learn more about this syntax by reading the + Fontspring blog post about it. The + code for it is as follows: +

-

- Webfonts are supported by all major browser platforms but not all in the same way. There are currently - four different font - formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG. -

+ + @font-face{ font-family: 'MyWebFont'; src: url('WebFont.eot'); src: url('WebFont.eot?#iefix') format('embedded-opentype'), + url('WebFont.woff') format('woff'), url('WebFont.ttf') format('truetype'), url('WebFont.svg#webfont') format('svg'); } + -

1. Upload your webfonts

-

You must upload your webfont kit to your website. They should be in or near the same directory as your - CSS files.

+

+ We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this: +

+ <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" + /> -

2. Include the webfont stylesheet

-

- A special CSS @font-face declaration helps the various browsers select the appropriate font it needs - without causing you a bunch - of headaches. Learn more about this syntax by reading the - Fontspring blog - post about it. The - code for it is as follows: -

+

3. Modify your own stylesheet

+

+ To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration + above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that + webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example: +

+ p { font-family: 'WebFont', Arial, sans-serif; } - - @font-face{ font-family: 'MyWebFont'; src: url('WebFont.eot'); src: url('WebFont.eot?#iefix') - format('embedded-opentype'), - url('WebFont.woff') format('woff'), url('WebFont.ttf') format('truetype'), url('WebFont.svg#webfont') - format('svg'); } - +

4. Test

+

+ Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that + fonts aren't loading in a particular browser. +

+
-

- We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in - your HTML, like this: -

- <link rel="stylesheet" href="stylesheet.css" type="text/css" - charset="utf-8" - /> + +
+
+ -
-
-
- -
- - + diff --git a/docs/content/learning-area/css/styling-text/web-fonts/google-font.html b/docs/content/learning-area/css/styling-text/web-fonts/google-font.html index ae42e5d1fa..15e08a8228 100644 --- a/docs/content/learning-area/css/styling-text/web-fonts/google-font.html +++ b/docs/content/learning-area/css/styling-text/web-fonts/google-font.html @@ -1,60 +1,47 @@ - - - - Web font example - - - - - -

Hipster ipsum is the best

- -

- Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl - typewriter. Tacos PBR&B pork - belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B - tattooed trust fund twee, leggings - salvia iPhone photo booth health goth gastropub hammock. -

- -

- Cray food truck brunch, XOXO +1 keffiyeh pickled chambray waistcoat ennui. Organic small batch paleo 8-bit. - Intelligentsia umami wayfarers pickled, - asymmetrical kombucha letterpress kitsch leggings cold-pressed squid chartreuse put a bird on it. Listicle pickled - man bun cornhole heirloom art - party. -

- -

It is the quaintest

- -

- Bespoke green juice aesthetic leggings DIY williamsburg selvage. Bespoke health goth tote bag, fingerstache venmo - ennui thundercats butcher trust - fund cardigan hella. Wolf vinyl you probably haven't heard of them taxidermy, ugh quinoa neutra meditation - asymmetrical mixtape church-key kitsch - man bun occupy. Knausgaard butcher raw denim ramps, offal seitan williamsburg venmo gastropub mlkshk cardigan - chillwave chartreuse single-origin - coffee twee. Ethical asymmetrical banjo typewriter fap. Polaroid waistcoat tousled selfies four dollar toast - locavore thundercats. Truffaut - post-ironic skateboard trust fund. -

- -

No, really...

- -

- Trust fund celiac farm-to-table PBR&B. Brunch art party mumblecore, fingerstache cred echo park literally stumptown - humblebrag chambray. Mlkshk - vinyl distillery humblebrag crucifix. Mustache craft beer put a bird on it, irony deep v poutine ramps williamsburg - heirloom brooklyn. -

- -

- Taxidermy tofu YOLO, sustainable etsy flexitarian art party stumptown portland. Ethical williamsburg retro paleo. - Put a bird on it leggings yuccie - actually, skateboard jean shorts paleo lomo salvia plaid you probably haven't heard of them. -

- - + + + Web font example + + + + + +

Hipster ipsum is the best

+ +

+ Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork + belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings + salvia iPhone photo booth health goth gastropub hammock. +

+ +

+ Cray food truck brunch, XOXO +1 keffiyeh pickled chambray waistcoat ennui. Organic small batch paleo 8-bit. Intelligentsia umami wayfarers pickled, + asymmetrical kombucha letterpress kitsch leggings cold-pressed squid chartreuse put a bird on it. Listicle pickled man bun cornhole heirloom art + party. +

+ +

It is the quaintest

+ +

+ Bespoke green juice aesthetic leggings DIY williamsburg selvage. Bespoke health goth tote bag, fingerstache venmo ennui thundercats butcher trust + fund cardigan hella. Wolf vinyl you probably haven't heard of them taxidermy, ugh quinoa neutra meditation asymmetrical mixtape church-key kitsch + man bun occupy. Knausgaard butcher raw denim ramps, offal seitan williamsburg venmo gastropub mlkshk cardigan chillwave chartreuse single-origin + coffee twee. Ethical asymmetrical banjo typewriter fap. Polaroid waistcoat tousled selfies four dollar toast locavore thundercats. Truffaut + post-ironic skateboard trust fund. +

+ +

No, really...

+ +

+ Trust fund celiac farm-to-table PBR&B. Brunch art party mumblecore, fingerstache cred echo park literally stumptown humblebrag chambray. Mlkshk + vinyl distillery humblebrag crucifix. Mustache craft beer put a bird on it, irony deep v poutine ramps williamsburg heirloom brooklyn. +

+ +

+ Taxidermy tofu YOLO, sustainable etsy flexitarian art party stumptown portland. Ethical williamsburg retro paleo. Put a bird on it leggings yuccie + actually, skateboard jean shorts paleo lomo salvia plaid you probably haven't heard of them. +

+ diff --git a/docs/content/learning-area/css/styling-text/web-fonts/web-font-finished.html b/docs/content/learning-area/css/styling-text/web-fonts/web-font-finished.html index 8026f44d66..1b1590ea78 100644 --- a/docs/content/learning-area/css/styling-text/web-fonts/web-font-finished.html +++ b/docs/content/learning-area/css/styling-text/web-fonts/web-font-finished.html @@ -1,59 +1,46 @@ - - - - Web font example - - - - -

Hipster ipsum is the best

- -

- Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl - typewriter. Tacos PBR&B pork - belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B - tattooed trust fund twee, - leggings salvia iPhone photo booth health goth gastropub hammock. -

- -

- Cray food truck brunch, XOXO +1 keffiyeh pickled chambray waistcoat ennui. Organic small batch paleo 8-bit. - Intelligentsia umami wayfarers pickled, - asymmetrical kombucha letterpress kitsch leggings cold-pressed squid chartreuse put a bird on it. Listicle pickled - man bun cornhole heirloom art - party. -

- -

It is the quaintest

- -

- Bespoke green juice aesthetic leggings DIY williamsburg selvage. Bespoke health goth tote bag, fingerstache venmo - ennui thundercats butcher trust - fund cardigan hella. Wolf vinyl you probably haven't heard of them taxidermy, ugh quinoa neutra meditation - asymmetrical mixtape church-key kitsch - man bun occupy. Knausgaard butcher raw denim ramps, offal seitan williamsburg venmo gastropub mlkshk cardigan - chillwave chartreuse single-origin - coffee twee. Ethical asymmetrical banjo typewriter fap. Polaroid waistcoat tousled selfies four dollar toast - locavore thundercats. Truffaut - post-ironic skateboard trust fund. -

- -

No, really...

- -

- Trust fund celiac farm-to-table PBR&B. Brunch art party mumblecore, fingerstache cred echo park literally - stumptown humblebrag chambray. Mlkshk - vinyl distillery humblebrag crucifix. Mustache craft beer put a bird on it, irony deep v poutine ramps williamsburg - heirloom brooklyn. -

- -

- Taxidermy tofu YOLO, sustainable etsy flexitarian art party stumptown portland. Ethical williamsburg retro paleo. - Put a bird on it leggings yuccie - actually, skateboard jean shorts paleo lomo salvia plaid you probably haven't heard of them. -

- - + + + Web font example + + + + +

Hipster ipsum is the best

+ +

+ Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork + belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, + leggings salvia iPhone photo booth health goth gastropub hammock. +

+ +

+ Cray food truck brunch, XOXO +1 keffiyeh pickled chambray waistcoat ennui. Organic small batch paleo 8-bit. Intelligentsia umami wayfarers pickled, + asymmetrical kombucha letterpress kitsch leggings cold-pressed squid chartreuse put a bird on it. Listicle pickled man bun cornhole heirloom art + party. +

+ +

It is the quaintest

+ +

+ Bespoke green juice aesthetic leggings DIY williamsburg selvage. Bespoke health goth tote bag, fingerstache venmo ennui thundercats butcher trust + fund cardigan hella. Wolf vinyl you probably haven't heard of them taxidermy, ugh quinoa neutra meditation asymmetrical mixtape church-key kitsch + man bun occupy. Knausgaard butcher raw denim ramps, offal seitan williamsburg venmo gastropub mlkshk cardigan chillwave chartreuse single-origin + coffee twee. Ethical asymmetrical banjo typewriter fap. Polaroid waistcoat tousled selfies four dollar toast locavore thundercats. Truffaut + post-ironic skateboard trust fund. +

+ +

No, really...

+ +

+ Trust fund celiac farm-to-table PBR&B. Brunch art party mumblecore, fingerstache cred echo park literally stumptown humblebrag chambray. Mlkshk + vinyl distillery humblebrag crucifix. Mustache craft beer put a bird on it, irony deep v poutine ramps williamsburg heirloom brooklyn. +

+ +

+ Taxidermy tofu YOLO, sustainable etsy flexitarian art party stumptown portland. Ethical williamsburg retro paleo. Put a bird on it leggings yuccie + actually, skateboard jean shorts paleo lomo salvia plaid you probably haven't heard of them. +

+ diff --git a/docs/content/learning-area/css/styling-text/web-fonts/web-font-start.html b/docs/content/learning-area/css/styling-text/web-fonts/web-font-start.html index 90834cb99f..09ee18c3bd 100644 --- a/docs/content/learning-area/css/styling-text/web-fonts/web-font-start.html +++ b/docs/content/learning-area/css/styling-text/web-fonts/web-font-start.html @@ -1,59 +1,46 @@ - - - - Web font example - - - - -

Hipster ipsum is the best

- -

- Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl - typewriter. Tacos PBR&B pork - belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B - tattooed trust fund twee, - leggings salvia iPhone photo booth health goth gastropub hammock. -

- -

- Cray food truck brunch, XOXO +1 keffiyeh pickled chambray waistcoat ennui. Organic small batch paleo 8-bit. - Intelligentsia umami wayfarers pickled, - asymmetrical kombucha letterpress kitsch leggings cold-pressed squid chartreuse put a bird on it. Listicle pickled - man bun cornhole heirloom art - party. -

- -

It is the quaintest

- -

- Bespoke green juice aesthetic leggings DIY williamsburg selvage. Bespoke health goth tote bag, fingerstache venmo - ennui thundercats butcher trust - fund cardigan hella. Wolf vinyl you probably haven't heard of them taxidermy, ugh quinoa neutra meditation - asymmetrical mixtape church-key kitsch - man bun occupy. Knausgaard butcher raw denim ramps, offal seitan williamsburg venmo gastropub mlkshk cardigan - chillwave chartreuse single-origin - coffee twee. Ethical asymmetrical banjo typewriter fap. Polaroid waistcoat tousled selfies four dollar toast - locavore thundercats. Truffaut - post-ironic skateboard trust fund. -

- -

No, really...

- -

- Trust fund celiac farm-to-table PBR&B. Brunch art party mumblecore, fingerstache cred echo park literally - stumptown humblebrag chambray. Mlkshk - vinyl distillery humblebrag crucifix. Mustache craft beer put a bird on it, irony deep v poutine ramps williamsburg - heirloom brooklyn. -

- -

- Taxidermy tofu YOLO, sustainable etsy flexitarian art party stumptown portland. Ethical williamsburg retro paleo. - Put a bird on it leggings yuccie - actually, skateboard jean shorts paleo lomo salvia plaid you probably haven't heard of them. -

- - + + + Web font example + + + + +

Hipster ipsum is the best

+ +

+ Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork + belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, + leggings salvia iPhone photo booth health goth gastropub hammock. +

+ +

+ Cray food truck brunch, XOXO +1 keffiyeh pickled chambray waistcoat ennui. Organic small batch paleo 8-bit. Intelligentsia umami wayfarers pickled, + asymmetrical kombucha letterpress kitsch leggings cold-pressed squid chartreuse put a bird on it. Listicle pickled man bun cornhole heirloom art + party. +

+ +

It is the quaintest

+ +

+ Bespoke green juice aesthetic leggings DIY williamsburg selvage. Bespoke health goth tote bag, fingerstache venmo ennui thundercats butcher trust + fund cardigan hella. Wolf vinyl you probably haven't heard of them taxidermy, ugh quinoa neutra meditation asymmetrical mixtape church-key kitsch + man bun occupy. Knausgaard butcher raw denim ramps, offal seitan williamsburg venmo gastropub mlkshk cardigan chillwave chartreuse single-origin + coffee twee. Ethical asymmetrical banjo typewriter fap. Polaroid waistcoat tousled selfies four dollar toast locavore thundercats. Truffaut + post-ironic skateboard trust fund. +

+ +

No, really...

+ +

+ Trust fund celiac farm-to-table PBR&B. Brunch art party mumblecore, fingerstache cred echo park literally stumptown humblebrag chambray. Mlkshk + vinyl distillery humblebrag crucifix. Mustache craft beer put a bird on it, irony deep v poutine ramps williamsburg heirloom brooklyn. +

+ +

+ Taxidermy tofu YOLO, sustainable etsy flexitarian art party stumptown portland. Ethical williamsburg retro paleo. Put a bird on it leggings yuccie + actually, skateboard jean shorts paleo lomo salvia plaid you probably haven't heard of them. +

+ diff --git a/docs/content/learning-area/html/forms/basic-input-examples/index.html b/docs/content/learning-area/html/forms/basic-input-examples/index.html index 1b364ba2bb..909f38c62b 100644 --- a/docs/content/learning-area/html/forms/basic-input-examples/index.html +++ b/docs/content/learning-area/html/forms/basic-input-examples/index.html @@ -1,93 +1,90 @@ + + + + Basic input types + - - - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- -
-
- - + button { + width: 70%; + margin: 0 auto; + } + + + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+ + diff --git a/docs/content/learning-area/html/forms/color-example/index.html b/docs/content/learning-area/html/forms/color-example/index.html index 3cb8376d31..0bc058225f 100644 --- a/docs/content/learning-area/html/forms/color-example/index.html +++ b/docs/content/learning-area/html/forms/color-example/index.html @@ -1,69 +1,66 @@ + + + + <input type="color"> example + - - - -
-
- - -
-
- -
-
- - + button { + width: 70%; + margin: 0 auto; + } + + + +
+
+ + +
+
+ +
+
+ + diff --git a/docs/content/learning-area/html/forms/date-picker-fallback/index.html b/docs/content/learning-area/html/forms/date-picker-fallback/index.html index dcbd19f524..e0c93618d2 100644 --- a/docs/content/learning-area/html/forms/date-picker-fallback/index.html +++ b/docs/content/learning-area/html/forms/date-picker-fallback/index.html @@ -1,191 +1,186 @@ - - - - date control with fallback - - - - -
-
- - - -
-

Enter your birthday:

-
- - - - - - - - - - - - -
-
- - - - + + + date control with fallback + + + + +
+
+ + + +
+

Enter your birthday:

+
+ + + + + + + + + + + + +
+
+ + + diff --git a/docs/content/learning-area/html/forms/datetime-local-example/index.html b/docs/content/learning-area/html/forms/datetime-local-example/index.html index 3e5d1eb6ef..241753ac75 100644 --- a/docs/content/learning-area/html/forms/datetime-local-example/index.html +++ b/docs/content/learning-area/html/forms/datetime-local-example/index.html @@ -1,48 +1,51 @@ + + + <input type="datetime-local"> example + - - - -
-
- - - -
-
- -
- -
- + input:valid + span:after { + content: '✓'; + padding-left: 5px; + } + + + +
+
+ + + +
+
+ +
+ +
+ diff --git a/docs/content/learning-area/html/forms/datetime-local-picker-fallback/index.html b/docs/content/learning-area/html/forms/datetime-local-picker-fallback/index.html index 2f6af97694..02de9f8005 100644 --- a/docs/content/learning-area/html/forms/datetime-local-picker-fallback/index.html +++ b/docs/content/learning-area/html/forms/datetime-local-picker-fallback/index.html @@ -1,229 +1,224 @@ - - - - datetime-local control with fallback - - - - -
-
- - - -
-

Choose a date and time for your party:

-
-
- - - - - - - - - - - - -
-
- - - - - - - - -
-
-
- - - - + + + datetime-local control with fallback + + + + +
+
+ + + +
+

Choose a date and time for your party:

+
+
+ + + + + + + + + + + + +
+
+ + + + + + + + +
+
+
+ + + diff --git a/docs/content/learning-area/html/forms/editable-input-example/editable_input.html b/docs/content/learning-area/html/forms/editable-input-example/editable_input.html index 7cd5a3036d..6add2eca7a 100644 --- a/docs/content/learning-area/html/forms/editable-input-example/editable_input.html +++ b/docs/content/learning-area/html/forms/editable-input-example/editable_input.html @@ -1,80 +1,77 @@ + + + Editable form <input> example + + - section input { - display: block; - margin: 5px; - } + +
- - - - -
- - - -
- -
- - - + reset.addEventListener('click', function () { + textarea.value = code; + fillSection(); + }); + textarea.addEventListener('input', fillSection); + window.addEventListener('load', fillSection); + diff --git a/docs/content/learning-area/html/forms/file-examples/file-example.html b/docs/content/learning-area/html/forms/file-examples/file-example.html index a39b93f66c..338fffdfce 100644 --- a/docs/content/learning-area/html/forms/file-examples/file-example.html +++ b/docs/content/learning-area/html/forms/file-examples/file-example.html @@ -1,155 +1,151 @@ - - - Complete file example - - - - -
-
- - -
-
-

No files currently selected for upload

-
-
- -
-
- - - + + Complete file example + + + + +
+
+ + +
+
+

No files currently selected for upload

+
+
+ +
+
+ + diff --git a/docs/content/learning-area/html/forms/file-examples/file-with-accept.html b/docs/content/learning-area/html/forms/file-examples/file-with-accept.html index 1911a9b4ef..62c553a4b5 100644 --- a/docs/content/learning-area/html/forms/file-examples/file-with-accept.html +++ b/docs/content/learning-area/html/forms/file-examples/file-with-accept.html @@ -1,30 +1,26 @@ + + File upload example with accept + + - - File upload example with accept - - - - -
-
- - -
-
- -
-
- - - + +
+
+ + +
+
+ +
+
+ + diff --git a/docs/content/learning-area/html/forms/file-examples/simple-file.html b/docs/content/learning-area/html/forms/file-examples/simple-file.html index 9fa1685c30..173ba2f5c0 100644 --- a/docs/content/learning-area/html/forms/file-examples/simple-file.html +++ b/docs/content/learning-area/html/forms/file-examples/simple-file.html @@ -1,30 +1,26 @@ + + File upload example + + - - File upload example - - - - -
-
- - -
-
- -
-
- - - + +
+
+ + +
+
+ +
+
+ + diff --git a/docs/content/learning-area/html/forms/form-validation/custom-error-message.html b/docs/content/learning-area/html/forms/form-validation/custom-error-message.html index 81cd2a4927..aa2b0730eb 100644 --- a/docs/content/learning-area/html/forms/form-validation/custom-error-message.html +++ b/docs/content/learning-area/html/forms/form-validation/custom-error-message.html @@ -1,40 +1,36 @@ - - - - Simple custom error message - - - - -
- - - -
- - - - + + + Simple custom error message + + + + +
+ + + +
+ + + diff --git a/docs/content/learning-area/html/forms/form-validation/detailed-custom-validation.html b/docs/content/learning-area/html/forms/form-validation/detailed-custom-validation.html index 1cc1a4a0d3..e02b46e9d6 100644 --- a/docs/content/learning-area/html/forms/form-validation/detailed-custom-validation.html +++ b/docs/content/learning-area/html/forms/form-validation/detailed-custom-validation.html @@ -1,132 +1,127 @@ - - - - Detailed custom validation - - - - -
-

- -

- -
- - - - + + + Detailed custom validation + + + + +
+

+ +

+ +
+ + + diff --git a/docs/content/learning-area/html/forms/form-validation/fruit-length.html b/docs/content/learning-area/html/forms/form-validation/fruit-length.html index 2ba8f45aef..2e8d46f9c7 100644 --- a/docs/content/learning-area/html/forms/form-validation/fruit-length.html +++ b/docs/content/learning-area/html/forms/form-validation/fruit-length.html @@ -1,39 +1,36 @@ + + + Favorite fruit length constraint + - - - -
-
- - -
-
- - -
-
- -
-
- + div { + margin-bottom: 10px; + } + + + +
+
+ + +
+
+ + +
+
+ +
+
+ diff --git a/docs/content/learning-area/html/forms/form-validation/fruit-pattern.html b/docs/content/learning-area/html/forms/form-validation/fruit-pattern.html index 1a1438dbae..e83c93f9d3 100644 --- a/docs/content/learning-area/html/forms/form-validation/fruit-pattern.html +++ b/docs/content/learning-area/html/forms/form-validation/fruit-pattern.html @@ -1,27 +1,24 @@ + + + Favorite fruit with required and pattern attributes + - - - -
- - - -
- + input:valid { + border: 2px solid black; + } + + + +
+ + + +
+ diff --git a/docs/content/learning-area/html/forms/form-validation/fruit-required.html b/docs/content/learning-area/html/forms/form-validation/fruit-required.html index 7dad2e0e0d..306bc4cdc1 100644 --- a/docs/content/learning-area/html/forms/form-validation/fruit-required.html +++ b/docs/content/learning-area/html/forms/form-validation/fruit-required.html @@ -1,31 +1,28 @@ + + + Favorite fruit with required attribute + - - - -
- - - -
- + input:valid { + border: 2px solid black; + } + + + +
+ + + +
+ diff --git a/docs/content/learning-area/html/forms/form-validation/fruit-start.html b/docs/content/learning-area/html/forms/form-validation/fruit-start.html index ddd98a5ec8..c352fb266f 100644 --- a/docs/content/learning-area/html/forms/form-validation/fruit-start.html +++ b/docs/content/learning-area/html/forms/form-validation/fruit-start.html @@ -1,27 +1,24 @@ + + + Favorite fruit start + - - - -
- - - -
- + input:valid { + border: 2px solid black; + } + + + +
+ + + +
+ diff --git a/docs/content/learning-area/html/forms/form-validation/min-max.html b/docs/content/learning-area/html/forms/form-validation/min-max.html index 321dde2e85..c9b3281fdd 100644 --- a/docs/content/learning-area/html/forms/form-validation/min-max.html +++ b/docs/content/learning-area/html/forms/form-validation/min-max.html @@ -1,35 +1,32 @@ + + + Minimum and maximum examples + - - - -
-

- - -

-

- - -

-

- -

-
- + input:valid { + border: 2px solid black; + } + + + +
+

+ + +

+

+ + +

+

+ +

+
+ diff --git a/docs/content/learning-area/html/forms/hidden-input-example/index.html b/docs/content/learning-area/html/forms/hidden-input-example/index.html index f9b6d5bfdd..6a86de4b84 100644 --- a/docs/content/learning-area/html/forms/hidden-input-example/index.html +++ b/docs/content/learning-area/html/forms/hidden-input-example/index.html @@ -1,62 +1,60 @@ - - - - <input type="hidden"> example - - - - -
-
- - -
-
- - -
-
- -
- -
- - + + +
+ +
+ + + diff --git a/docs/content/learning-area/html/forms/html-form-structure/checkbox-label.html b/docs/content/learning-area/html/forms/html-form-structure/checkbox-label.html index 312fd5ba90..47fad09dd6 100644 --- a/docs/content/learning-area/html/forms/html-form-structure/checkbox-label.html +++ b/docs/content/learning-area/html/forms/html-form-structure/checkbox-label.html @@ -1,22 +1,20 @@ + + + Checkbox label example + - - - Checkbox label example - - - -
-

- - -

-

- - -

-
- - + +
+

+ + +

+

+ + +

+
+ diff --git a/docs/content/learning-area/html/forms/html-form-structure/fieldset-legend.html b/docs/content/learning-area/html/forms/html-form-structure/fieldset-legend.html index 83f79c08ee..72bc859983 100644 --- a/docs/content/learning-area/html/forms/html-form-structure/fieldset-legend.html +++ b/docs/content/learning-area/html/forms/html-form-structure/fieldset-legend.html @@ -1,20 +1,18 @@ + + + fieldset and legend example + - - - fieldset and legend example - - - -
-
- Fruit juice size -

-

-

-
-
- - + +
+
+ Fruit juice size +

+

+

+
+
+ diff --git a/docs/content/learning-area/html/forms/html-form-structure/payment-form.html b/docs/content/learning-area/html/forms/html-form-structure/payment-form.html index 8e64302ee9..3abd8caa33 100644 --- a/docs/content/learning-area/html/forms/html-form-structure/payment-form.html +++ b/docs/content/learning-area/html/forms/html-form-structure/payment-form.html @@ -1,97 +1,95 @@ + + + Payment form example + + - - - Payment form example - - - - -
-

Payment form

-

- Required fields are followed by *. -

-
-

Contact information

-
- Title -
    -
  • - -
  • -
  • - -
  • -
  • - -
  • -
-
-

- - -

-

- - -

-

- - -

-
-
-

Payment information

-

- - -

-

- - -

-

- - -

-
-
-

-
-
- - + +
+

Payment form

+

+ Required fields are followed by *. +

+
+

Contact information

+
+ Title +
    +
  • + +
  • +
  • + +
  • +
  • + +
  • +
+
+

+ + +

+

+ + +

+

+ + +

+
+
+

Payment information

+

+ + +

+

+ + +

+

+ + +

+
+
+

+
+
+