Grille responsive basée sur flexbox
  • Toutes les colonnes ont 100% de largeur si le périphérique est < 600px
  • Mobiles 600 pixels : .sml-
  • Tablettes 900 pixels : .med-
  • Desktop 1280 pixels : .lrg-

démo-auto
démo-auto
démo-auto
démo-auto
démo-auto
démo-auto
démo-auto
démo-auto
démo-auto
démo-auto
démo-auto
démo-auto
démo-auto
démo-auto
démo-auto
démo-auto
démo-auto
démo-auto
démo-auto
démo-auto
démo-auto
<div class="grid">
    <div class="col-auto">
        <div class="demo">démo-auto</div>
    </div>
    <div class="col-auto">
        <div class="demo">démo-auto</div>
    </div>
</div>
Vous pouvez mettre autant de colonnes que vous voulez. Evitez toutefois de dépasser 12 colonnes.

Colonnes responsive et imbriquées
sml-12
sml-9
démo-auto
col
col
col
col
col
col
col
col
col
démo
démo
démo
démo
démo
démo
démo
démo
<div class="grid">
    <div class="sml-12">
        <div class="demo">
            <div class="grid">
                <div class="sml-12 med-4 lrg-4">
                    <div class="demo">démo</div>
                </div>
                <div class="sml-12 med-4 lrg-4">
                    <div class="demo">démo</div>
                </div>
                <div class="sml-12 med-4 lrg-4">
                    <div class="demo">démo</div>
                </div>
            </div>
        </div>
    </div>
</div>

Sans gouttière
Utilisation : .no-gutter après la class .grid
Ex : <div class="grid no-gutter">
démo
démo
démo
démo
col
col
col
<div class="grid no-gutter">
    <div class="sml-12 ">
        <div class="demo">sml-12</div>
    </div>
</div>

Multiligne
Se comporte idéalement pour faire de l'affichage type masonry sans JS. Le dernier article créé apparaîtra en haut à gauche. Le classement des articles s'effectue de gauche à droite.
1
2
3
4
5
6
7
8
9
<div class="grid">
    <div class="sml-6 med-6 lrg-4">
        <div class="demo">1</div>
    </div>
    <div class="sml-6 med-6 lrg-4">
        <div class="demo">2</div>
    </div>
    <div class="sml-6 med-6 lrg-4">
        <div class="demo">3</div>
    </div>
</div>

Inverser l’ordre des colonnes sur les mobiles et/ou les tablettes
Modificateurs pour ordonner les colonnes .position-[Num]-sml .position-[Num]-med
6 positions possibles .position-1-sml, .position-2-med ...
1
2
3

Grille et décallage
Pour créer un espace horizontal autour des éléments .sml- .med- ou .lrg- vous pouvez également utiliser des modificateurs de décalage tels que .sml-offset-x .med-offset-x .lrg-offset-x
démo
démo
démo
démo
démo
démo

Grille centrée
Utilisation : .is-centered après la class .grid
Ex : <div class="grid is-centered">
Nota : La grille est centrée, pas son contenu.
démo
démo  .is-center
démo  .is-right
démo
démo
démo
démo
<div class="grid is-centered">
    <div class="sml-12 med-12 lrg-12">
        <div class="demo">démo</div>
    </div>
    <div class="sml-12 med-11 lrg-11">
        <div class="demo">démo</div>
    </div>
</div>

Bannières HERO pour mettre en valeur une page
Utilisation : .hero + .is-small .is-medium .is-large .is-extra-large
Custom : .bg-primary .bg-info .bg-success .bg-danger .bg-warning .bg-black...

Titre H1

Un slogan H2


Titre H1

Un slogan H2


Titre H1

Un slogan H2


Titre H1

Un slogan H2


Titre H1

Un slogan H2

<section class="hero is-medium bg-primary">
    <div class="container">
        <h1 class="h2 text-white">Titre H1</h1>
        <h2 class="h3 text-white  fw-300">Un slogan H2</h2>
    </div>
</section>

Votre rendez-vous a été validé

Rendez-vous dans

15 minutes

Serveur : Indiana Jones

Uptime : 347 jours - Service apache - Service MySql - Service Mail

Rendez-vous dans

15 minutes

<section class="hero is-medium bg-primary">
    <div class="container">
        <h1 class="h2 text-white">Titre H1</h1>
        <h2 class="h3 text-white  fw-300">Un slogan H2</h2>
    </div>
</section>

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Contenu de texte

Lorem ipsum dolor sit amet, test link adipiscing elit. This is strong. Nullam dignissim convallis est. Quisque aliquam. This is emphasized. Donec faucibus. Nunc iaculis suscipit dui. 53 = 125. Water is H2O. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. The New York Times (That’s a citation). Underline. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

HTML and CSS are our tools. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. To copy a file type COPY filename. Dinner’s at 5:00. Let’s make that 7. This text has been struck.


Taille spécifique des écritures pour chaque largeur d'écran
6 tailles différentes par largeurs : .fs-3-sml .fs-6-med .fs-4-lrg - 1 = Large, 6 = petite taille.

Le corbeau et le renard

Maître Corbeau, sur un arbre perché,
Tenait en son bec un fromage.
Maître Renard, par l'odeur alléché,
Lui tint à peu près ce langage :
Et bonjour, Monsieur du Corbeau,
Que vous êtes joli ! que vous me semblez beau !
Sans mentir, si votre ramage
Se rapporte à votre plumage,
Vous êtes le Phénix des hôtes de ces bois.
<div class="col-auto">
    <h1 class="fs-3-sml fs-2-med">
        LE CORBEAU ET LE RENARD
    </h1>
    <div class="fs-5-sml fs-3-med">
        Maître Corbeau, sur un arbre perché...
    </div>
</div>
RGAA : Avec la class .rgaa les propriétés d’espacement d'un texte s'adaptent pour faciliter la lecture
Maître Corbeau, sur un arbre perché,
Tenait en son bec un fromage.
Maître Renard, par l'odeur alléché,
Lui tint à peu près ce langage :
Et bonjour, Monsieur du Corbeau,
Que vous êtes joli ! que vous me semblez beau !
Sans mentir, si votre ramage
Se rapporte à votre plumage,
Vous êtes le Phénix des hôtes de ces bois.

liste d'éléments

List Types

Definition List

Definition List Title
This is a definition list division.
Definition
An exact statement or description of the nature, scope, or meaning of something: our definition of what constitutes poetry.

Liste ordonnée

  1. List Item 1
  2. List Item 2
    1. Nested list item A
    2. Nested list item B
  3. List Item 3

Liste non ordonnée

  • List Item 1
  • List Item 2
    • Nested list item A
    • Nested list item B
  • List Item 3

Liste de type alphabétique

  1. List Item 1
  2. List Item 2
    1. Nested list item a
    2. Nested list item b
  3. List Item 3

Tableaux
Table Header 1 Table Header 2 Table Header 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3
<div class="grid">
    <div class="col-auto">
        <table>
            <tbody>
                <tr>
                    <th>Table Header 1</th>
                    <th>Table Header 2</th>
                    <th>Table Header 3</th>
                </tr>
                <tr>
                    <td>Division 1</td>
                    <td>Division 2</td>
                    <td>Division 3</td>
                </tr>
                <tr class="even">
                    <td>Division 1</td>
                    <td>Division 2</td>
                    <td>Division 3</td>
                </tr>
                <tr>
                    <td>Division 1</td>
                    <td>Division 2</td>
                    <td>Division 3</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Table scrollable Header 1 Table scrollable Header 2 Table scrollable Header 3 Table scrollable Header 4 Table scrollable Header 5
Division 1 Division 2 Division 3 Division 4 Division 5
Division 1 Division 2 Division 3 Division 4 Division 5
Division 1 Division 2 Division 3 Division 4 Division 5
<div class="grid">
    <div class="scrollable-table sml-12">
        <table>
            <tbody>
                <tr>
                    <th>Table scrollable Header 1</th>
                    <th>Table scrollable Header 2</th>
                    <th>Table scrollable Header 3</th>
                </tr>
                <tr>
                    <td>Division 1</td>
                    <td>Division 2</td>
                    <td>Division 3</td>
                    <td>Division 4</td>
                    <td>Division 5</td>
                </tr>
                <tr class="even">
                    <td>Division 1</td>
                    <td>Division 2</td>
                    <td>Division 3</td>
                </tr>
                <tr>
                    <td>Division 1</td>
                    <td>Division 2</td>
                    <td>Division 3</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

texte préformaté

Preformatted Text

Typographically, preformatted text is not the same thing as code. Sometimes, a faithful execution of the text requires preformatted text that may not have anything to do with code. Most browsers use Courier and that’s a good default — with one slight adjustment, Courier 10 Pitch over regular Courier for Linux users. For example:

"Beware the Jabberwock, my son!
    The jaws that bite, the claws that catch!
Beware the Jubjub bird, and shun
    The frumious Bandersnatch!"

Code

Code can be presented inline, like <?php echo "This is my first static page"; ?>, or within a <pre> block. Because we have more specific typographic needs for code, we’ll specify Consolas and Monaco ahead of the browser-defined monospace font.

#container {
	float: left;
	margin: 0 -240px 0 0;
	width: 100%;
}

Blockquotes

Vous pouvez utiliser toutes les combinaisons possibles entre les couleurs de fonds et les couleurs de textes.
bg-primay bg-success bg-info bg-light-info text-warning...

Sed cautela nimia in peiores haeserat plagas, ut narrabimus postea, aemulis consarcinantibus insidias graves apud Constantium, cetera medium principem sed siquid auribus eius huius modi quivis infudisset ignotus, acerbum et inplacabilem et in hoc causarum titulo dissimilem sui.
Sed cautela nimia in peiores haeserat plagas, ut narrabimus postea, aemulis consarcinantibus insidias graves apud Constantium, cetera medium principem sed siquid auribus eius huius modi quivis infudisset ignotus, acerbum et inplacabilem et in hoc causarum titulo dissimilem sui.
Sed cautela nimia in peiores haeserat plagas, ut narrabimus postea, aemulis consarcinantibus insidias graves apud Constantium, cetera medium principem sed siquid auribus eius huius modi quivis infudisset ignotus, acerbum et inplacabilem et in hoc causarum titulo dissimilem sui.
Sed cautela nimia in peiores haeserat plagas, ut narrabimus postea, aemulis consarcinantibus insidias graves apud Constantium, cetera medium principem sed siquid auribus eius huius modi quivis infudisset ignotus, acerbum et inplacabilem et in hoc causarum titulo dissimilem sui.
Sed cautela nimia in peiores haeserat plagas, ut narrabimus postea, aemulis consarcinantibus insidias graves apud Constantium, cetera medium principem sed siquid auribus eius huius modi quivis infudisset ignotus, acerbum et inplacabilem et in hoc causarum titulo dissimilem sui.

Prendre rendez-vous

haeserat plagas, ut narrabimus postea, aemulis consarcinantibus insidias graves apud Constantium, cetera medium principem sed siquid auribus eius huius modi quivis infudisset ignotus, acerbum et inplacabilem et in hoc causarum titulo dissimilem sui.

Prendre rendez-vous

haeserat plagas, ut narrabimus postea, aemulis consarcinantibus insidias graves apud Constantium, cetera medium principem sed siquid auribus eius huius modi quivis infudisset ignotus, acerbum et inplacabilem et in hoc causarum titulo dissimilem sui.

Pour information

haeserat plagas, ut narrabimus postea, aemulis consarcinantibus insidias graves apud Constantium, cetera medium principem sed siquid auribus eius huius modi quivis infudisset ignotus, acerbum et inplacabilem et in hoc causarum titulo dissimilem sui.

Pour information

haeserat plagas, ut narrabimus postea, aemulis consarcinantibus insidias graves apud Constantium, cetera medium principem sed siquid auribus eius huius modi quivis infudisset ignotus, acerbum et inplacabilem et in hoc causarum titulo dissimilem sui.

Connexion sécurisée

haeserat plagas, ut narrabimus postea, aemulis consarcinantibus insidias graves apud Constantium, cetera medium principem sed siquid auribus eius huius modi quivis infudisset ignotus, acerbum et inplacabilem et in hoc causarum titulo dissimilem sui.

Connexion sécurisée

haeserat plagas, ut narrabimus postea, aemulis consarcinantibus insidias graves apud Constantium, cetera medium principem sed siquid auribus eius huius modi quivis infudisset ignotus, acerbum et inplacabilem et in hoc causarum titulo dissimilem sui.

Un p'tit café ?

haeserat plagas, ut narrabimus postea, aemulis consarcinantibus insidias graves apud Constantium, cetera medium principem sed siquid auribus eius huius modi quivis infudisset ignotus, acerbum et inplacabilem et in hoc causarum titulo dissimilem sui.

Un p'tit café ?

haeserat plagas, ut narrabimus postea, aemulis consarcinantibus insidias graves apud Constantium, cetera medium principem sed siquid auribus eius huius modi quivis infudisset ignotus, acerbum et inplacabilem et in hoc causarum titulo dissimilem sui.

Attention

haeserat plagas, ut narrabimus postea, aemulis consarcinantibus insidias graves apud Constantium, cetera medium principem sed siquid auribus eius huius modi quivis infudisset ignotus, acerbum et inplacabilem et in hoc causarum titulo dissimilem sui.

Attention

haeserat plagas, ut narrabimus postea, aemulis consarcinantibus insidias graves apud Constantium, cetera medium principem sed siquid auribus eius huius modi quivis infudisset ignotus, acerbum et inplacabilem et in hoc causarum titulo dissimilem sui.

<blockquote class="is-primary">
    <strong>...</strong>...<a href="#">...</a>
</blockquote>

Alertes

.bg-light1 .bg-primary .bg-info .bg-success .bg-warning .bg-danger

×alert : Lorem ipsum dolor sit amet!
×bg-primary : Lorem ipsum dolor sit amet!
×bg-info : Lorem ipsum dolor sit amet!
×bg-success : Lorem ipsum dolor sit amet!
×bg-warning : Lorem ipsum dolor sit amet!
×bg-danger : Lorem ipsum dolor sit amet!
<div class="alert bg-light1 text-primary">
    <strong><a href="#" title="">is-primary</a></strong> : Lorem ipsum dolor sit amet!
</div>

Boutons

Mon lien Mon lien Mon lien Mon lien Mon lien Mon lien Mon lien Mon lien

<a class="button">Mon lien</a>
<a class="button bg-success">Mon lien</a>
<a class="button bg-info">Mon lien</a>
<a class="button bg-warning">Mon lien</a>
<a class="button bg-danger">Mon lien</a>
<a class="button bg-black">Mon lien</a>
<a class="button bg-light1">Mon lien</a>

<a class="button is-primary">
    <i class="feather icon-arrow-right"> </i>Mon lien
</a>
 
<a class="button is-small is-primary">
    <i class="feather icon-arrow-right"> </i>Mon lien
</a>

Textes en couleurs

.text-primary .text-success .text-info .text-warning .text-danger .text-black .text-white

text-primary
text-success
text-info
text-warning
text-danger
text-black
text-primary
text-success
text-info
<div>
   <a class="button is-outline is-dark2"><i class="feather icon-arrow-right"></i></a>
</div>
<div>
   <a class="button is-outline is-small is-primary"><i class="feather icon-arrow-right"></i></a>
</div>

Radio / case à chocher / textarea ...

Champs de saisie

Case à cocher

Case à cocher
Case à cocher désactivée

Bouton radio

Bouton radio
Bouton radio désactivé
<input class="input" type="text" value="Texte">
<input class="input" type="text" placeholder="Texte">
<input class="input" type="text" placeholder="Champ désactivé" disabled>

<label class="label is-dark2">Label</label>
<input class="input" type="checkbox" checked> Case à cocher
<input class="input" type="checkbox" disabled> Case à cocher désactivée

<label class="label">Label</label>
<input class="input" type="radio" name="radio" checked> Bouton radio
<input class="input" type="radio" name="radio" disabled> Bouton radio désactivé

Champ de fichier



Champ de sélection


Zone de texte

<input class="input" type="file">
<input class="input" type="file" disabled>

---

<select>
    <optgroup label="Group 1">
        <option>Option 1</option>
        <option>Option 2</option>
    </optgroup>
    <optgroup label="Group 2">
        <option>Option 1</option>
        <option>Option 2</option>
    </optgroup>
</select>

---

<select class="select" disabled>
    <optgroup label="Optgroup 1">
        <option>Option 1</option>
        <option>Option 2</option>
    </optgroup>
</select>

---

<textarea class="textarea" rows="5"></textarea>
<textarea class="textarea" rows="5" disabled></textarea>
<div class="grid">
    <div class="sml-4">
        <select class="select">
            <option>Choisir une option</option>
            <option>Option 1</option>
            <option>Option 2</option>
        </select>
    </div>

    <div class="sml-4">
        <select class="select" disabled>
            <option>Choisir une option</option>
            <option>Option 1</option>
            <option>Option 2</option>
        </select>
    </div>
</div>

Formulaires

Formulaire basique


<form>
    <fieldset>
        <div class="grid">
            <div class="sml-12">
                <label>Votre nom</label>
                <input class="input" type="text" placeholder="Nom">
            </div>
        </div>
        <div class="grid">
            <div class="sml-12">
                <label>Votre email</label>
                <input class="input" type="email" placeholder="Email">
            </div>
        </div>
        <div class="grid">
            <div class="sml-12">
                <label>Votre message</label>
                <textarea rows="5"></textarea>
            </div>
        </div>
        <div class="grid">
            <div class="sml-12">
                <input class="input is-primary" type="submit" value="Envoyer">
            </div>
        </div>
    </fieldset>
</form>
<form>
    <fieldset>
        <div class="grid">
            <div class="col-auto">
                <label>Votre nom</label>
                <input class="input" type="text" placeholder="Nom">
            </div>
            <div class="col-auto">
                <label>Votre email</label>
                <input class="input" type="email" placeholder="Email">
            </div>
            <div class="col-auto">
                <label>Votre message</label>
                <textarea rows="5"></textarea>
            </div>
        </div>
        <div class="grid">
            <div class="sml-12">
                <input class="input float-right is-primary" type="submit" value="Envoyer">
            </div>
        </div>
    </fieldset>
</form>

Formulaire de connexion

Mot de passe perdu

Mot de passe perdu

<div class="box">
    <div class="content">
        <label>Connexion : </label>
        <input class="input" type="text" placeholder="Login">
        <input class="input mt10" type="password" placeholder="Mot de passe">
        <input class="input mt10 error" type="password" placeholder="Vérification mot de passe">
        <input class="input mt10" type="password" placeholder="Vérification mot de passe" disabled>
        <input class="input mt10 is-success" type="submit" value="Se connecter">
        <input class="input mt10 is-success button is-disabled" type="submit" value="Se connecter">
        <p class="mt10"><a href="#">Mot de passe perdu</a></p>
    </div>
</div>

Tooltip

Affichez une info-bulle positionnée en haut d'un élément bouton, un lien ou une icônes.

<a class="tooltip tooltip-top" href="#">Taille normal<span>...</span></a>
Ou bien une <a class="tooltip tooltip-top is-medium" href="#">Taille moyenne<span>...</span></a>
Ou bien une <a class="tooltip tooltip-top is-large" href="#">Taille large<span>...</span></a>

Barres de progressions

Barre de progression très simple à mettre en place avec l'intégralité des couleurs de fond.
bg-primay bg-success bg-info ...

0%
10%
25%
50%
70%
100%

<div class="grid">
    <div class="col-auto">
        <nav class="navbar">
            <span id="navbar-toggle">
                <i class="icon feather icon-menu"></i>
            </span>
            <a href="#" id="logo"><img src="medias/actiux.svg" alt=""></a>
            <ul id="nav">
                <li class="nav-links"><a href="#">Accueil</a></li>
                <li class="nav-links"><a href="#">Produits</a></li>
                <li class="nav-links"><a href="#">A propos</a></li>
                <li class="nav-links"><a href="#">Contactez-nous</a></li>
                <li class="nav-links"><a href="#">Blog</a></li>
                <li><a class="button"><i class="icon feather icon-arrow-right"> </i>Autre lien</a></li>
            </ul>
        </nav>
    </div>
</div>

Tags
light-framework flexbox design pluxml css html
light-framework flexbox design pluxml css html
light-framework flexbox design pluxml css html
<div class="tags">
    <span class="tag fs-6 bg-light1">light-framework</span>
    <span class="tag fs-6 bg-light1">flexbox</span>
    <span class="tag fs-6 bg-light1">design</span>
    <span class="tag fs-6 bg-light1">pluxml</span>
    <span class="tag fs-6 bg-light1">css</span>
    <span class="tag fs-6 bg-light1">html</span>
</div>
<div class="tags">
    <span class="tag fs-6 bg-light-primary">light-framework</span>
    <span class="tag fs-6 bg-light-success">flexbox</span>
    <span class="tag fs-6 bg-light-info">design</span>
    <span class="tag fs-6 bg-light-warning">pluxml</span>
    <span class="tag fs-6 bg-light-danger">css</span>
    <span class="tag fs-6 bg-light1">html</span>
</div>
<div class="tags">
    <span class="tag fs-6 bg-primary">light-framework</span>
    <span class="tag fs-6 bg-dark2">flexbox</span>
    <span class="tag fs-6 bg-info">design</span>
    <span class="tag fs-6 bg-warning">pluxml</span>
    <span class="tag fs-6 bg-danger">css</span>
    <span class="tag fs-6 bg-success">html</span>
</div>

Responsive oui
HTML 5 oui
PHP 7 oui
Responsive oui
HTML 5 oui
PHP 7 oui
HTML 5 oui
PHP 7 oui
PHP 7 oui
<div class="is-grouped">
    <div class="tags">
        <span class="tag fs-6 bg-light1">Responsive</span>
        <span class="tag fs-6 bg-primary">oui</span>
    </div>

    <div class="tags">
        <span class="tag fs-6 bg-light1">HTML 5</span>
        <span class="tag fs-6 bg-success">oui</span>
    </div>

    <div class="tags">
        <span class="tag fs-6 bg-light1">PHP 7</span>
        <span class="tag fs-6 bg-info">oui</span>
    </div>
</div>

<ul class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">Orange </a></li>
    <li><a href="#">Rose</a></li>
    <li><a href="#">Bleu ciel</a></li>
    <li>Rouge</li>
</ul>

<ul class="breadcrumb arrow">
    <li><a href="#">Home</a></li>
    <li><a href="#">Orange </a></li>
    <li><a href="#">Rose</a></li>
    <li><a href="#">Bleu ciel</a></li>
    <li>Rouge</li>
</ul>

<ul class="breadcrumb dot">
    <li><a href="#">Home</a></li>
    <li><a href="#">Orange </a></li>
    <li><a href="#">Rose</a></li>
    <li><a href="#">Bleu ciel</a></li>
    <li>Rouge</li>
</ul>

<div class="pagination">
    <a href><i class="feather icon-arrow-left"></i></a>
    <a href>1</a>
    <a class="active" href>2</a>
    <a href>3</a>
    <a href>4</a>
    <a href>5</a>
    <a href><i class="feather icon-arrow-right"></i></a>
</div>

<hr>

<div class="pagination is-info">
    <a href><i class="feather icon-arrow-left"></i></a>
    <a href>1</a>
    <a class="active" href>2</a>
    <a href>3</a>
    <a href>4</a>
    <a href>5</a>
    <a href><i class="feather icon-arrow-right"></i></a>
</div>

<hr>

<div class="pagination is-success">
    <a href><i class="feather icon-arrow-left"></i></a>
    <a href>1</a>
    <a class="active" href>2</a>
    <a href>3</a>
    <a href>4</a>
    <a href>5</a>
    <a href><i class="feather icon-arrow-right"></i></a>
</div>

Prices

OFFRE N°1


1 nom de domaine

5 mails

10 Go espace de stockage

BP illimitée


19 € HT / mois

OFFRE N°2


5 noms de domaine

50 mails

100 Go espace de stockage

BP illimitée


39 € HT / mois

OFFRE N°3


10 noms de domaine

100 mails

50 Go espace de stockage

BP illimitée


49 € HT / mois

<div class="grid">
    <div class="sml-12 med-6 lrg-4">
        <div class="box pm0">
            <div class="content text-center">
                <p class="h4">Bronze</p>
                <hr>
                <p class="bg-very-light1 mb5">1 nom de domaine</p>
                <p class="bg-very-light1 mb5">5 mails</p>
                <p class="bg-very-light1 mb5">10 Go espace de stockage</p>
                <p class="bg-very-light1 mb5">BP illimitée</p>
                <hr>
                <p class="h2 fw-700 text-info">19 € HT <span class="fw-300 text-primary fs-6">/ mois</span></p>
                </p>
                <div class="pt10">
                    <a href="#" class='button is-rounded is-info'><i class="feather icon-shopping-cart"> </i>Commander</a>
                </div>
            </div>
        </div>
    </div>

    <div class="sml-12 med-6 lrg-4">
        <div class="box best pm0">
            <div class="content text-center">
                <p class="h4">Gold</p>
                <hr>
                <p class="bg-very-light1 mb5">5 noms de domaine</p>
                <p class="bg-very-light1 mb5">50 mails</p>
                <p class="bg-very-light1 mb5">100 Go espace de stockage</p>
                <p class="bg-very-light1 mb5">BP illimitée</p>
                <hr>
                <p class="h2 fw-700 text-success">39 € HT <span class="fw-300 text-primary fs-6">/ mois</span></p>
                </p>
                <div class="pt10">
                    <a href="#" class='button is-rounded is-success'><i class="feather icon-shopping-cart"> </i>Commander</a>
                </div>
            </div>
        </div>
    </div>


    <div class="sml-12 med-6 lrg-4">
        <div class="box pm0">
            <div class="content text-center">
                <p class="h4">Platine</p>
                <hr>
                <p class="bg-very-light1 mb5">10 noms de domaine</p>
                <p class="bg-very-light1 mb5">100 mails</p>
                <p class="bg-very-light1 mb5">50 Go espace de stockage</p>
                <p class="bg-very-light1 mb5">BP illimitée</p>
                <hr>
                <p class="h2 fw-700 text-info">49 € HT <span class="fw-300 text-primary fs-6">/ mois</span></p>
                </p>
                <div class="pt10">
                    <a href="#" class='button is-rounded is-info'><i class="feather icon-shopping-cart"> </i>Commander</a>
                </div>
            </div>
        </div>
    </div>
</div>

64 Icônes essentielles pour tous vos projets

Les icônes proviennent du projet Feathericons
Feather est une collection d'icônes open source simplement magnifiques.
Chaque icône est conçue sur une grille 24x24 avec un accent mis sur la simplicité, la cohérence et la convivialité.

Utilisez la feuille de style icons.css

Informations

Vous pouvez utiliser d'autres icônes comme la collection exceptionnelle de Font Awesome par exemple, mais pensez avant tout au poids, est-ce vraiment nécessaire de charger 300 icônes pour en utiliser que 20 ?

<i class="icon feather icon-home"></i>
  • .icon-alert-circle
  • .icon-activity
  • .icon-arrow-left
  • .icon-arrow-right
  • .icon-at-sign
  • .icon-calendar
  • .icon-bookmark
  • .icon-camera
  • .icon-check
  • .icon-cast
  • .icon-chevron-down
  • .icon-chevron-right
  • .icon-clock
  • .icon-codepen
  • .icon-corner-up-left
  • .icon-corner-up-right
  • .icon-credit-card
  • .icon-download-cloud
  • .icon-download
  • .icon-droplet
  • .icon-edit-
  • .icon-edit
  • .icon-eye
  • .icon-feather
  • .icon-facebook
  • .icon-film
  • .icon-file
  • .icon-folder
  • .icon-grid
  • .icon-heart
  • .icon-home
  • .icon-github
  • .icon-layers
  • .icon-info
  • .icon-log-in
  • .icon-lock
  • .icon-log-out
  • .icon-mail
  • .icon-map-pin
  • .icon-menu
  • .icon-message-square
  • .icon-monitor
  • .icon-phone
  • .icon-search
  • .icon-server
  • .icon-tag
  • .icon-trash-
  • .icon-twitter
  • .icon-user
  • .icon-users
  • .icon-wifi
  • .icon-cloud
  • .icon-help-circle
  • .icon-shopping-cart
  • .icon-gitlab
  • .icon-book-open
  • .icon-code
  • .icon-database
  • .icon-rss
  • .icon-youtube
  • .icon-twitch
  • .icon-coffee
  • .icon-x