- Entête de fichier markdown pour serveur statique jekyll
- jekyll tips
- Vidéos
- Images
- Fichiers
- Syntaxe makdown
- Désactiver les balises liquid
- Etendre Réduire un contenu
- Emphasis
- Lists
- Links
- Code and Syntax Highlighting
- Liste des formats du bloc de code Markdown
- Tables
- Blockquotes
- Horizontal Rule
- Line Breaks
- Headers
- H1
- H2
- Additional styles
- Alert
- Tag
- Image
- Icons Image Item
- Size
- Item
- Content
- Image and Content
- Image Size
- Button
- Type
- Shape
- BUTTON Size
- Extreme Small BUTTON Size
- Small BUTTON Size
- Middle BUTTON Size
- Large BUTTON Size
- Extreme Large BUTTON Size
- card
- Image
- Content
- Image and Content
- Image Overlay
- Flat
- Clickable
- Hero
- Normal
- Center
- Dark Theme
- Background Image
- Height
- Background Image + Center
- swiper
- Normal
- Light Theme
- Dark Theme
- Images
- Without Animation
Entête de fichier markdown pour serveur statique jekyll
---
layout: article
title: tmux
aside: true
toc: true
create: 2020-08-03
modif: 2019-03-06
tags: [tmux,divers]
ref: (falcutatif)
lang: fr (falcutatif)
description: (falcutatif)
---
- layout : toujours post (Obligatoire)
- title : le titre du billet (Obligatoire)
- toc : true pour avoir un menu de lien des différentes entêtes du billet
- date : respecter le format aaaa-mm-jj (Obligatoire)
- categories et tags : un mot entre crochets sans espace ni caractères spéciaux , si plusieurs une virgule pour les séparer
jekyll tips
Faire un lien interne sur un autre billet
Welcome to my Jekyll Blog. I’m exploring how Jekyll handles links:
* [An absolute link](http://203.0.113.0:4000/about/)
* [A root relative link](/jekyll/update/welcome-to-jekyll/)
Vidéos
Alternative N°1
Syntaxe dans le “post” pour inclure une video
Exemple vidéo youtube : Markdown tutorial lien https://www.youtube.com/watch?v=6A5EpqqDOdk
{%- include extensions/youtube.html id=’6A5EpqqDOdk’ -%}
Alternative N°2
On affiche la première image de la vidéo , un clic permet la lecture sur le site youtube
Syntaxe dans le “post”
[![IMAGE ALT TEXT](https://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](https://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE "Video Title")
Exemple vidéo youtube : Markdown tutorial
Alternative N°3
Syntaxe directe
<iframe src="https://player.vimeo.com/video/193567768?title=0&byline=0&portrait=0" autostart="false" width="640" height="360" frameborder="0" ></iframe>
Alternative N°4
Pour les autres processeurs, vous pouvez toujours écrire du HTML brut dans votre document “de balisage”markdown” :
<video width="640" height="480" controls>
<source src="/files/k-9mail01.mp4" type="video/mp4">
</video>
Images
![alt text](/images/A20-olinuxino-micro-top.png "Top view")
Images largeur fixée (si hauteur ajouter height="36px"
)
Avec hauteur et largeur image {:height="36px" width="30px"}
![image](/images/A20-olinuxino-micro-top.png){:width="300px"}
Fichiers
Les fichiers sont dans le dossier /files
[Fichier téléchargeable](/files/nomFichier)
Syntaxe makdown
This is intended as a quick reference and showcase. For more complete info, see John Gruber’s original spec and the Github-flavored Markdown info page.
Note that there is also a Cheatsheet specific to Markdown Here if that’s what you’re looking for. You can also check out more Markdown tools.
Désactiver les balises liquid
Il est possible de désactiver les balises liquid en utilisant raw / endraw
Exemple
Etendre Réduire un contenu
Etendre Réduire
Syntaxe
<details>
<summary><b>Etendre Réduire</b></summary>
{% highlight text %}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quam augue, volutpat a vehicula in, elementum ac nibh. Duis gravida sodales lobortis.
Nullam venenatis nec mauris ac cursus. Duis tempor volutpat sapien vel molestie. Fusce velit ante, volutpat vitae dui tincidunt, pharetra pulvinar magna.
Pellentesque tincidunt scelerisque sapien, sit amet semper risus dignissim at. Quisque laoreet gravida metus, pharetra egestas urna ultricies eget.
Integer eu lobortis dolor. Donec sollicitudin pulvinar quam, ac tempus lectus convallis ut. Sed ut mollis mi, vel tempor ex.
In quis purus porta, fermentum libero a, luctus nulla. Nulla eget risus scelerisque, maximus sem a, accumsan ante.
Praesent consequat sed odio ac commodo. Maecenas sit amet dictum lorem.
Nullam libero augue, suscipit vitae fermentum aliquet, malesuada at arcu.
{% endhighlight %}
</details>
Emphasis
Emphasis, aka italics, with *asterisks* or _underscores_.
Strong emphasis, aka bold, with ***asterisks*** or __underscores__.
Combined emphasis with ***asterisks* and _underscores_**.
Emphasis, aka italics, with asterisks or underscores.
Strong emphasis, aka bold, with asterisks or underscores.
Combined emphasis with asterisks and underscores.
Test ~~texte raturé~~
<s>this is strike through text</s>
Test texte raturé
Lists
(In this example, leading and trailing spaces are shown with with dots: ⋅)
1. First ordered list item
2. Another item
....* Unordered sub-list.
1. Actual numbers don't matter, just that it's a number
....1. Ordered sub-list
4. And another item.
⋅⋅⋅You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown).
⋅⋅⋅To have a line break without a paragraph, you will need to use two trailing spaces.⋅⋅
⋅⋅⋅Note that this line is separate, but within the same paragraph.⋅⋅
* Unordered list can use asterisks
- Or minuses
+ Or pluses
- First ordered list item
- Another item
- Unordered sub-list.
- Actual numbers don’t matter, just that it’s a number
- Ordered sub-list
-
And another item.
You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we’ll use three here to also align the raw Markdown).
To have a line break without a paragraph, you will need to use two trailing spaces.
Note that this line is separate, but within the same paragraph.
- Unordered list can use asterisks
- Or minuses
-
Or pluses
- List 0
- List
-
Hello!
Hello
Item 2 Hello
Hibuli habuli!Code here
- Item 3
-
Hello again
Hassd *code*
Code here
- Stuff
Hello
Markdown FTW!
1986. What a great season. A link here: http://www.example.com/ that should be automatically detected.
Stuff here!. This is pretty cool.
- Hello
- Booboo
What [up to the ][name] cats n dogs :) Hello!! Some emphasized stuff here. A * star * has [born]. This * i dont know what*will happen.
- Stuff
- Hello
- Again
- Stuff
This is an example inline link.
Hello **`strong text** here
These * should * not *be* selected. This* neither! should be. This *neither should* be
Links
There are two ways to create links.
[I'm an inline-style link](https://www.google.com)
[I'm an inline-style link with title](https://www.google.com "Google's Homepage")
[You can use numbers for reference-style link definitions][1]
URLs and URLs in angle brackets will automatically get turned into links in the preview.
http://www.example.com or <http://www.example.com>
[1]: http://www.qownnotes.org
You can also put the [link URL][1] below the current paragraph
like [this][2].
[1]: http://url
[2]: http://another.url "A funky title"
I’m an inline-style link with title
You can use numbers for reference-style link definitions
URLs and URLs in angle brackets will automatically get turned into links in the preview. http://www.example.com or http://www.example.com
You can also put the link URL below the current paragraph like this.
Code and Syntax Highlighting
Inline `code` has `back-ticks around` it.
Inline code
has back-ticks around
it.
Blocks of code are either fenced by lines with three back-ticks, or are indented with four spaces. I recommend only using the fenced code blocks – they’re easier and only they support syntax highlighting.
s = "Code with space indent"
print s
highlighting codes
#!/bin/sh
#lancement jekyll
cd /srv/wikistatic/
#bundle exec jekyll serve
/usr/local/bin/bundle exec jekyll build --watch
Exemples de code
bash
#/bin/bash
fichierindex="indexA.html"
echo '<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Fichiers html</title>
</head>
<body>
<ul>' > $fichierindex
OIFS=$IFS
IFS=$'\n'
for file in $(find /home/yannick/Documents/html/ -name "*.html")
do
lien=$(basename ${file%.*})
echo '<li><a href="'$lien'.html">'$lien'</a></li>' >> $fichierindex
done
IFS=$OIFS
echo '
</ul>
</body>
</html>' >> $fichierindex
Entre deux ` ` (altgr 7)
entre deux altgr 7
python
#!/usr/bin/env python
import os
from gi.repository import Gtk
from gi.repository import AppIndicator3
class AppIndicatorExample:
def __init__(self, indicator_id):
self.ind = AppIndicator3.Indicator.new(str(indicator_id), os.path.abspath('sample_icon.svg'), AppIndicator3.IndicatorCategory.SYSTEM_SERVICES)
self.ind.set_status(AppIndicator3.IndicatorStatus.ACTIVE)
# create a menu
self.menu = Gtk.Menu()
item = Gtk.MenuItem(str(indicator_id))
item.show()
self.menu.append(item)
image = Gtk.ImageMenuItem(Gtk.STOCK_QUIT)
self.menu.append(image)
self.menu.show()
self.ind.set_menu(self.menu)
def quit(self, widget, data=None):
Gtk.main_quit()
if __name__ == "__main__":
indicator = AppIndicatorExample(1)
Gtk.main()
perl
#!/usr/bin/perl -w
use strict;
use warnings;
use constant VERSION => 0.03;
if(scalar @ARGV != 4) {
&help;
}
my $image_web;
my $dimensions;
# Détermination des arguments
for(my $i = 0; $i < scalar @ARGV; $i +=2) {
if($ARGV[$i] eq "-s") {
$dimensions = $ARGV[$i + 1];
}
elsif($ARGV[$i] eq "-i") {
$image_web = $ARGV[$i + 1];
}
else {
print STDERR "Argument $ARGV[$i] inconnu\n";
&help;
}
}
javascript
function init() {
/* Sidebar height set */
$sidebarStyles = $('.sidebar').attr('style')
$sidebarStyles += ' min-height: ' + $(document).height() + 'px;';
$('.sidebar').attr('style', $sidebarStyles);
/* Secondary contact links */
var $scontacts = $('#contact-list-secondary');
var $contactList = $('#contact-list');
$scontacts.hide();
$contactList.mouseenter(function(){ $scontacts.fadeIn(); });
$contactList.mouseleave(function(){ $scontacts.fadeOut(); });
/**
* Tags & categories tab activation based on hash value. If hash is undefined then first tab is activated.
*/
function activateTab() {
if(['/tags.html', '/categories.html'].indexOf(window.location.pathname) > -1) {
var hash = window.location.hash;
if(hash)
$('.tab-pane').length && $('a[href="' + hash + '"]').tab('show');
else
$('.tab-pane').length && $($('.cat-tag-menu li a')[0]).tab('show');
}
}
// watch hash change and activate relevant tab
$(window).on('hashchange', activateTab);
// initial activation
activateTab();
};
Liste des formats du bloc de code Markdown
Les langues prises en charge dépendent fortement de l’analyseur Markdown que vous utilisez. Ce qui suit est une liste de plusieurs langues et formats courants que vous pouvez essayer. Si votre langue ne figure pas dans cette liste, je vous suggère d’essayer simplement si elle est supportée. Vous pouvez également consulter la documentation de votre langage Markdown spécifique.
actionscript3
apache
applescript
asp
brainfuck
c
cfm
clojure
cmake
coffee-script, coffeescript, coffee
cpp – C++
cs
csharp
css
csv
bash
diff
elixir
erb – HTML + Embedded Ruby
go
haml
http
java
javascript
json
jsx
less
lolcode
make – Makefile
markdown
matlab
nginx
objectivec
pascal
PHP
Perl
python
profile – python profiler output
rust
salt, saltstate – Salt
shell, sh, zsh, bash – Shell scripting
scss
sql
svg
swift
rb, jruby, ruby – Ruby
smalltalk
vim, viml – Vim Script
volt
vhdl
vue
xml – XML and also used for HTML with inline CSS and Javascript
yaml
Tables
Tables aren’t part of the core Markdown spec, but the QOwnNotes preview supports them.
Colons can be used to align columns.
| Tables | Are | Cool |
| ------------- |:-------------:| -----:|
| col 3 is | right-aligned | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |
There must be at least 3 dashes separating each header cell.
The outer pipes (|) are optional, and you don't need to make the
raw Markdown line up prettily. You can also use inline Markdown.
Markdown | Less | Pretty
--- | --- | ---
*Still* | `renders` | **nicely**
1 | 2 | 3
Colons can be used to align columns.
Tables | Are | Cool |
---|---|---|
col 3 is | right-aligned | $1600 |
col 2 is | centered | $12 |
zebra stripes | are neat | $1 |
There must be at least 3 dashes separating each header cell. The outer pipes ( | ) are optional, and you don’t need to make the raw Markdown line up prettily. You can also use inline Markdown. |
Markdown | Less | Pretty |
---|---|---|
Still | renders |
nicely |
1 | 2 | 3 |
Blockquotes
> Blockquotes are very handy in email to emulate reply text.
> This line is part of the same quote.
Quote break.
> This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can *put* **Markdown** into a blockquote.
Blockquotes are very handy in email to emulate reply text. This line is part of the same quote.
Quote break.
This is a very long line that will still be quoted properly when it wraps. Oh boy let’s keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can put Markdown into a blockquote.
Horizontal Rule
Three or more...
---
Hyphens
***
Asterisks
___
Underscores
Three or more…
Hyphens
Asterisks
Underscores
Line Breaks
Here's a line for us to start with.
This line is separated from the one above by two newlines, so it will be a *separate paragraph*.
This line is also begins a separate paragraph, but...
This line is only separated by two trailing spaces and a single newline, so it's a separate line in the *same paragraph*.
Here’s a line for us to start with.
This line is separated from the one above by two newlines, so it will be a separate paragraph.
This line is also begins a separate paragraph, but…
This line is only separated by two trailing spaces and a single newline, so it’s a separate line in the same paragraph.
Escapes and HTML
What if you want to just show asterisks, not italics?
- this shows up in italics: a happy day
- this shows the asterisks: *a happy day*
Output:
this shows up in italics: a happy day
this shows the asterisks: *a happy day*
The backslashes will disappear and leave the asterisks. You can do the same with any of the characters that have a special meaning for Markdown.
Many simple HTML tags are allowed, for example And unknown tags will be dropped. To show a literal or an unknown tag like
<b>this will be bold</b>
you should escape <unknown> tags
© special entities work
&copy; if you want to escape it
Output:
this will be bold
you should escape <unknown> tags
© special entities work
© if you want to escape it
HTML tags that are block-level like <div> can be used, but if there is markdown formatting within it, you must add a “markdown” attribute: <div markdown> Some safe attributes are also allowed, permitting basic styling and layout: <div markdown style="float:left">
Individual ampersands (&) and less-than signs (<) are fine, they will be shown as expected.
un | deux | trois |
---|---|---|
Foo1 | Foo2 | Foo3 |
Headers
# H1
## H2
### H3
#### H4
##### H5
###### H6
Alternatively, for H1 and H2, an underline-ish style:
Alt-H1
======
Alt-H2
------
H1
H2
H3
H4
H5
H6
Alternatively, for H1 and H2, an underline-ish style:
Alt-H1
Alt-H2
Another header
Let’s see _if the emphasis
carries over_ to another paragraph.
And ` maybe this ` should Hello not be
Header
Header
Credit: markdown-here
License: CC-BY
Additional styles
Jekyll use kramdown as the default markdown processor. kramdown can adding attributes to block and span-level elements thgird-containre ALDs1 feature. with the help of ALDs, we can defined class names to an element by {:.class-name1.class-name-2}
.
TeXt offer some CSS classes that you can use in the post. You can refer to THIS POST.
Alert
Class Names |
---|
success |
info |
warning |
error |
Success Text.
Info Text.
Warning Text.
Error Text.
markdown:
Success Text.
{:.success}
Info Text.
{:.info}
Warning Text.
{:.warning}
Error Text.
{:.error}
Tag
Class Names |
---|
success |
info |
warning |
error |
success
info
warning
error
markdown:
`success`{:.success}
`info`{:.info}
`warning`{:.warning}
`error`{:.error}
Image
Class Names |
---|
border |
shadow |
rounded |
circle |
Border
![Image](path-to-image){:.border}
Shadow
![Image](path-to-image){:.shadow}
Rounded
![Image](path-to-image){:.rounded}
Circle
![Image](path-to-image){:.circle}
Mixture
![Image](path-to-image){:.border.rounded}
![Image](path-to-image){:.circle.shadow}
![Image](path-to-image){:.circle.border.shadow}
Icons Image Item
TeXt uses Font Awesome for icons, you can search available icon code snippet HERE.
<i class="fas fa-download"></i>
<a class="button button--success button--rounded button--lg" href="#"><i class="fas fa-download"></i> Download TeXt Theme</a>
Type | Class Names |
---|---|
base | image |
size | image--md (default), image--xs, image--sm, image--lg, image--xl |
Size
Extreme Small
<img class="image image--xs" src=""/>
Small
<img class="image image--sm" src=""/>
Middle
<img class="image image--md" src=""/>
Large
<img class="image image--lg" src=""/>
Extreme Large
<img class="image image--xl" src=""/>
Item
Content
Photograph
A photograph is an image created by light falling on a photosensitive surface, usually photographic film or an electronic image sensor, such as a CCD or a CMOS chip.
<div class="item">
<div class="item__content">
<div class="item__header">
<h4>Photograph</h4>
</div>
<div class="item__description">
<p>...</p>
</div>
</div>
</div>
Image and Content
Photograph
<div class="item">
<div class="item__image">
<img class="image" src=""/>
</div>
<div class="item__content">
<div class="item__header">
<h4>Photograph</h4>
</div>
</div>
</div>
Photograph
A photograph is an image created by light falling on a photosensitive surface, usually photographic film or an electronic image sensor, such as a CCD or a CMOS chip.
<div class="item">
<div class="item__image">
<img class="image" src=""/>
</div>
<div class="item__content">
<div class="item__header">
<h4>Photograph</h4>
</div>
<div class="item__description">
<p>...</p>
</div>
</div>
</div>
Image Size
Photograph
<div class="item">
<div class="item__image">
<img class="image image--xs" src=""/>
</div>
<div class="item__content">
<div class="item__header">
<h4>Photograph</h4>
</div>
</div>
</div>
Photograph
A photograph is an image created by light falling on a photosensitive surface, usually photographic film or an electronic image sensor, such as a CCD or a CMOS chip.
<div class="item">
<div class="item__image">
<img class="image image--sm" src=""/>
</div>
<div class="item__content">
<div class="item__header">
<h4>Photograph</h4>
</div>
<div class="item__description">
<p>...</p>
</div>
</div>
</div>
Photograph
A photograph is an image created by light falling on a photosensitive surface, usually photographic film or an electronic image sensor, such as a CCD or a CMOS chip.
<div class="item">
<div class="item__image">
<img class="image image--lg" src=""/>
</div>
<div class="item__content">
<div class="item__header">
<h4>Photograph</h4>
</div>
<div class="item__description">
<p>...</p>
</div>
</div>
</div>
Button
Type | Class Names |
---|---|
base | button |
type | button--primary, button--secondary, button--success, button--info, button--warning, button--error, button--outline-primary, button--outline-secondary, button--outline-success, button--outline-info, button--outline-warning, button--outline-error |
shape | button--pill, button--rounded, button--circle |
size | button--md (default), button--xs, button--sm, button--lg, button--xl |
Type
Primary
[BUTTON](#){:.button.button--primary.button--pill}
<a class="button button--primary button--pill" href="">BUTTON</a>
Secondary
[BUTTON](#){:.button.button--secondary.button--pill}
<a class="button button--secondary button--pill" href="">BUTTON</a>
Success
[BUTTON](#){:.button.button--success.button--pill}
<a class="button button--success button--pill" href="">BUTTON</a>
Outline
[BUTTON](#){:.button.button--outline-success.button--pill}
<a class="button button--outline-success button--pill" href="">BUTTON</a>
Shape
Pill
[BUTTON](#){:.button.button--primary.button--pill}
<a class="button button--primary button--pill" href="">BUTTON</a>
Rounded
[BUTTON](#){:.button.button--primary.button--rounded}
<a class="button button--primary button--rounded" href="">BUTTON</a>
Circle
[X](#){:.button.button--primary.button--circle}
<a class="button button--primary button--circle" href="">X</a>
BUTTON Size
Extreme Small BUTTON Size
[BUTTON](#){:.button.button--primary.button--rounded.button--xs}
<a class="button button--primary button--rounded button--xs" href="">BUTTON</a>
Small BUTTON Size
[BUTTON](#){:.button.button--primary.button--rounded.button--sm}
<a class="button button--primary button--rounded button--sm" href="">BUTTON</a>
Middle BUTTON Size
[BUTTON](#){:.button.button--primary.button--rounded}
<a class="button button--primary button--rounded" href="">BUTTON</a>
Large BUTTON Size
[BUTTON](#){:.button.button--primary.button--rounded.button--lg}
<a class="button button--primary button--rounded button--lg" href="">BUTTON</a>
Extreme Large BUTTON Size
[BUTTON](#){:.button.button--primary.button--rounded.button--xl}
<a class="button button--primary button--rounded button--xl" href="">BUTTON</a>
card
Image
<div class="card">
<div class="card__image">
<img class="image" src=""/>
</div>
</div>
Content
Photograph
A photograph is an image created by light falling on a photosensitive surface, usually photographic film or an electronic image sensor, such as a CCD or a CMOS chip.
<div class="card">
<div class="card__content">
<div class="card__header">
<h4>Photograph</h4>
</div>
<p>...</p>
</div>
</div>
Image and Content
Photograph
<div class="card">
<div class="card__image">
<img class="image" src=""/>
</div>
<div class="card__content">
<div class="card__header">
<h4>Photograph</h4>
</div>
</div>
</div>
Photograph
A photograph is an image created by light falling on a photosensitive surface, usually photographic film or an electronic image sensor, such as a CCD or a CMOS chip.
<div class="card">
<div class="card__image">
<img class="image" src=""/>
</div>
<div class="card__content">
<div class="card__header">
<h4>Photograph</h4>
</div>
<p>...</p>
</div>
</div>
Image Overlay
<div class="card">
<div class="card__image">
<img class="image" src=""/>
<div class="overlay">
<p>Photograph</p>
</div>
</div>
</div>
<div class="card">
<div class="card__image">
<img class="image" src=""/>
<div class="overlay overlay--bottom">
<p>Photograph</p>
</div>
</div>
</div>
Flat
Photograph
<div class="card card--flat">
<div class="card__image">
<img class="image" src=""/>
</div>
<div class="card__content">
<div class="card__header">
<h4>Photograph</h4>
</div>
</div>
</div>
Clickable
<a href="">
<div class="card card--clickable">
<div class="card__image">
<img class="image" src=""/>
</div>
</div>
</a>
Hero
Normal
Hero
<div class="hero" style="background-color: #ccc;">
<div class="hero__content">
<h3>Hero</h3>
</div>
</div>
Center
Hero
<div class="hero hero--center" style="background-color: #ccc;">
<div class="hero__content">
<h3>Hero</h3>
</div>
</div>
Dark Theme
Hero
<div class="hero hero--dark" style="background-color: #123;">
<div class="hero__content">
<h3>Hero</h3>
</div>
</div>
Background Image
Hero
<div class="hero hero--dark" style='background-image: url("path-to-image");'>
<div class="hero__content">
<h3>Hero</h3>
</div>
</div>
Hero
There's a hero, If you look inside your heart,
You don't have to be afraid of what you are.
<div class="hero hero--dark" style='background-image: url("path-to-image");'>
<div class="hero__content">
<h3>Hero</h3>
<p>...</p>
</div>
</div>
Height
Hero
There's a hero, If you look inside your heart,
You don't have to be afraid of what you are.
<div class="hero hero--dark" style='height: 500px; background-image: url("path-to-image");'>
<div class="hero__content">
<h3>Hero</h3>
<p>...</p>
</div>
</div>
Background Image + Center
Hero
There's a hero, If you look inside your heart,
You don't have to be afraid of what you are.
<div class="hero hero--center hero--dark" style='background-image: url("path-to-image");'>
<div class="hero__content">
<h3>Hero</h3>
<p>...</p>
</div>
</div>
Hero
There's a hero, If you look inside your heart,
You don't have to be afraid of what you are.
<style>
.hero-example--linear-gradient {
background-image: linear-gradient(135deg, rgba(255, 69, 0, .5), rgba(255, 197, 0, .2)), url("path-to-image");
}
</style>
<div class="hero hero--center hero--dark hero-example--linear-gradient">
<div class="hero__content">
<h3>Hero</h3>
<p>...</p>
</div>
</div>
swiper
Alpha
Normal
.swiper-demo {
height: 220px;
}
<div class="swiper swiper-demo">
<div class="swiper__wrapper">
<div class="swiper__slide">1</div>
<div class="swiper__slide">2</div>
<div class="swiper__slide">3</div>
<div class="swiper__slide">4</div>
<div class="swiper__slide">5</div>
<div class="swiper__slide">6</div>
<div class="swiper__slide">7</div>
</div>
<div class="swiper__button swiper__button--prev fas fa-chevron-left"></div>
<div class="swiper__button swiper__button--next fas fa-chevron-right"></div>
</div>
{%- include scripts/lib/swiper.js -%}
var SOURCES = window.TEXT_VARIABLES.sources;
window.Lazyload.js(SOURCES.jquery, function() {
$('.swiper-demo').swiper();
});