FONTANIL-CORNILLON

Tél : 06 78 26 41 95

Accueil >Page test

- Slider

- Cards

- Ombres

- Modal

- Images

- Textes + images

- Boutons

- Textes

DOCUMENTATION

Le but de cette page est purement technique: elle permet de visualiser la charte graphique afin d'aider au contrôle de son paramétrage et de proposer différentes solutions de mise en page de texte.

Boutons:

Bouton


<a href="#" class="btn">Text</a>

Bouton


<a href="#" class="btn-outline">Text</a>

Bouton


<a href="#" class="btn-outline-2">Text</a>

Plus de détails sur la documentation officielle

Les animations

Animations effet d'entrée :

Pour ajouter une animation, il faudra ajouter la class wow "nom_de_l'animation"

Voir les animations

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores error iusto quas. Aliquam aut beatae blanditiis cupiditate delectus, dolorum esse est nemo neque qui? Asperiores labore laborum molestias suscipit voluptatibus?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque eligendi libero maxime molestiae neque odit praesentium quam quod reiciendis voluptate. Blanditiis, incidunt, sit? Amet dolores est obcaecati, quam qui quo!

Lorem ipsum


<div class="container">
    <div class="row">
        <div class="col-12 col-lg wow slideInLeft">
            <h3>Lorem ipsum</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
        <div class="col-12 col-lg-4 wow tada">
            <img src="https://via.placeholder.com/400" alt="Exemple image">
        </div>
    </div>
    <div class="row">
         <div class="col-12 col-lg-4 wow rollIn">
            <img src="https://via.placeholder.com/400" alt="Exemple image">
        </div>
        <div class="col-12 col-lg wow slideInRight">
            <h3>Lorem ipsum</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
</div>

Pour plus de personnalisation, on peut retarder ou rallonger l'animation avec le code ci-dessous

data-wow-duration : Change le temps d'animation par défaut. (en seconde)
data-wow-delay : Pour retader l'animaion (en seconde)

wow shake avec 3s d'animation


<a href="#" class="btn wow shake" data-wow-duration="3s">Bouton</a>

wow flash avec retard de 2s


<a href="#" class="btn wow flash" data-wow-delay="2s">Bouton</a>

Animation sur les chiffres :

Pour faire une animation ou le chiffre fait un compte à chaque fois qu'il apparaît à l'écran, utilisez le code ci-dessous :

17

Lorem ipsum


<div id="section_counter_count" class="container">
<h3><span"><strong><span class="counter-count">17</span></strong> </span></h3>
<p><span">Lorem ipsum </span></p>
</div>

Animation avant/après :

Pour faire une animation avec deux images et un avant/après, utiliser le code ci-dessous :


<div class="col-12 col-lg-4">
    <div class="slider_avant_apres">
        <div class="slider_avant_apres__before" style="--image-before: url('/images/pagetesttexte.jpg');"></div>
        <div class="slider_avant_apres__separator"></div>
        <div class="slider_avant_apres__after" style="--image-after: url('/images/pagetest.jpg');"></div>
        <input class="slider_avant_apres__range" type="range" min="0" max="100" value="50"/>
    </div>
</div>

Animation slider horizontal :

Pour faire un slider horizontal, utiliser le code ci-dessous :


<div class="container-scrolling-wrapper container-fluid">
    <div class="left-arrow">//permet d'afficher la flèche gauche du slider
        <span class="carousel-control-prev-icon">&nbsp;</span>
    </div>
    <div id="scrolling-wrapper" class="scrolling-wrapper row flex-row flex-nowrap mt-4 pb-4 pt-2" data-argument="300">//data-argument permet de modifier la vitesse du slider
        <div class="col-5">
            <div class="card card-hover card-body" style=" height: 200px; border-radius: 24px; background-color: #4158D0; background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);"></div>
        </div>
        <div class="col-5">
            <div class="card card-hover card-body" style=" height: 200px; border-radius: 24px; background-color: #4158D0; background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);"></div>
        </div>
        <div class="col-5">
            <div class="card card-hover card-body" style=" height: 200px; border-radius: 24px; background-color: #4158D0; background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);"></div>
        </div>
        <div class="col-5">
            <div class="card card-hover card-body" style=" height: 200px; border-radius: 24px; background-color: #4158D0; background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);"></div>
        </div>
        <div class="col-5">
            <div class="card card-hover card-body" style=" height: 200px; border-radius: 24px; background-color: #4158D0; background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);"></div>
        </div>
        </div>
    <div class="right-arrow">//permet d'afficher la flèche droite du slider
        <span class="carousel-control-next-icon">&nbsp;</span>
    </div>
</div>

Les flèches du slider sont optionnelles, elles peuvent être retirées si besoin

L'élément card-hover permet de faire l'effet hover quand on passe dessus la carte, il peut être réutilisé séparément du slider.

L'attribut data-argument permet de modifier la vitesse du slider au clic sur les flèches, par défaut 200 s'il n'est pas renseigné

Les   dans les spans left and right arrow sont importantes, si elles ne sont pas présentes, les flèches ne s'afficheront pas.

Slider horizontal avec menu :

PRESTA 1
PRESTA 2
PRESTA 3
PRESTA 4

test 1

H3

Texte

test 1

H3

Texte

test 2

H3

Texte

test 3

H3

Texte


<section>
    <div class="project-wrapper my-3">
        <ul id="projectList" class="project-list">
            <li class="project-item mx-2" style="text-align: center; --couleur-active: #00FF00;" data-index="0">PRESTA 1</li>
            <li class="project-item mx-2" style="text-align: center;" data-index="1">PRESTA 2</li>
            <li class="project-item mx-2" style="text-align: center;" data-index="2">PRESTA 3</li>
            <li class="project-item mx-2" style="text-align: center;" data-index="3">PRESTA 4</li>
        </ul>
    </div>
    <div class="gallery-wrapper container">
        <button id="prevBtn" class="nav-btn left" aria-label="Projets précédents" style="--text-color-navbtn: #000; --bg-color-navbtn: #FF0000">‹</button>
        <div id="galleryGrid">
            <div class="project-content" data-index="0">
                <div class="row">
                    <div class="col-lg col-12">
                        <p style="text-align: center;">
                            <img class="img-fluid" src="/images/pagetesttexte.jpg" alt="test 1" width="1458" height="854">
                        </p>
                    </div>
                    <div class="col-lg col-12">
                        <h3><strong>H3</strong></h3>
                        <p>Texte</p>
                    </div>
                </div>
            </div>
            etc...
        </div>
        <button id="nextBtn" class="nav-btn right" aria-label="Projets suivants">›</button>
    </div>
</section>

Utiliser project-list pour le menu slider en mobile et utiliser project-list-fixed pour que le menu soit fixe en mobile
--couleur-active permet de changer la couleur de l'élément actif du menu
--bg-color-navbtn permet de changer la couleur de fond des boutons gauche et droite du slider, par défaut noir
--text-color-navbtn permet de changer la couleur de la fleche des boutons gauche et droite du slider, par défaut blanc

Carousel infini :

Pour faire un carousel infini, utiliser le code ci-dessous :

Titre de la carte 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec volutpat nunc. Nulla facilisis aliquam elementum. Sed elementum magna luctus tellus pretium elementum. Donec ac ante vestibulum, egestas justo id, accumsan felis. Aenean dignissim quam convallis, fermentum sem in, porttitor mi. In congue libero sem, nec pharetra velit molestie vitae. Donec ornare aliquam feugiat. Sed ultricies ac sem a commodo. In semper ipsum mattis suscipit vestibulum. Proin hendrerit egestas porta. Proin in enim luctus, sollicitudin tellus id, euismod risus.6.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec volutpat nunc. Nulla facilisis aliquam elementum. Sed elementum magna luctus tellus pretium elementum. Donec ac ante vestibulum, egestas justo id, accumsan felis. Aenean dignissim quam convallis, fermentum sem in, porttitor mi. In congue libero sem, nec pharetra velit molestie vitae. Donec ornare aliquam feugiat. Sed ultricies ac sem a commodo. In semper ipsum mattis suscipit vestibulum. Proin hendrerit egestas porta. Proin in enim luctus, sollicitudin tellus id, euismod risus.6.

Titre de la carte 2

Titre de la carte 3

Titre de la carte 4

Titre de la carte 5


<div class="carousel-infinite" data-time="3">
    <div class="carousel-infinite-track">
                    <div class="
            carousel-infinite-item
            "
                 style=" width:50%; border-radius: 24px; background-color: #4158D0; background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);">
                 <div class="
            carousel-infinite-item-inner
            card card-hover">
            <h2>1</h2>
            </div>
            </div>
                    <div class="
            carousel-infinite-item
            "
                 style=" width:50%; border-radius: 24px; background-color: #4158D0; background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);">
                 <div class="
            carousel-infinite-item-inner
            card card-hover">
            <h2>2</h2>
            </div>
            </div>
                    <div class="
            carousel-infinite-item
            "
                 style=" width:50%; border-radius: 24px; background-color: #4158D0; background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);">
                 <div class="
            carousel-infinite-item-inner
            card card-hover">
            <h2>3</h2>
            </div>
            </div>
                    <div class="
            carousel-infinite-item
            "
                 style=" width:50%; border-radius: 24px; background-color: #4158D0; background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);">
                 <div class="
            carousel-infinite-item-inner
            card card-hover">
            <h2>4</h2>
            </div>
            </div>
                    <div class="
            carousel-infinite-item
            "
                 style=" width:50%; border-radius: 24px; background-color: #4158D0; background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);">
                 <div class="
            carousel-infinite-item-inner
            card card-hover">
            <h2>5</h2>
            </div>
            </div>
            </div>
    <div class="arrow left btn carousel-prev">
    <span class="carousel-control-prev-icon"> </span>
</div>
<div class="arrow right btn carousel-next">
    <span class="carousel-control-next-icon"> </span>
</div>
</div>

Bien Mettre l'élément ghost cela permet de fixer la hauteur
data-time paramètre en seconde pour le changement automatique des slides,

Slider nouveau design :

Projet 1

Texte

Projet 2

Texte

Projet 3

Texte

1 / 3


<div id="projectCarousel" class="carousel slide">
    <div class="carousel-inner project-rail overflow-visible">
        <div class="carousel-item active">
            <div class="project-card-custom">
                <h3><strong>Projet 1</strong></h3>
                <p>Texte</p>
                <p style="text-align: center;"><a class="btn m-3" href="#">En savoir plus</a></p>
            </div>
        </div>
        <div class="carousel-item">
            <div class="project-card-custom">
                <h3><strong>Projet 2</strong></h3>
                <p>Texte</p>
                <p style="text-align: center;"><a class="btn m-3" href="#">En savoir plus</a></p>
            </div>
        </div>
        <div class="carousel-item">
            <div class="project-card-custom">
                <h3><strong>Projet 3</strong></h3>
                <p>Texte</p>
                <p style="text-align: center;"><a class="btn m-3" href="#">En savoir plus</a></p>
            </div>
        </div>
    </div>
    <div class="d-flex justify-content-center align-items-center mt-5 pt-3">
        <button class="nav-arrow" type="button" data-bs-target="#projectCarousel" data-bs-slide="prev">←
        </button>
        <span class="carousel-counter">1 / 3</span>
        <button class="nav-arrow" type="button" data-bs-target="#projectCarousel" data-bs-slide="next">→
        </button>
    </div>
</div>

Effet parallax


 <div class="inverse parallax" style="--bg-image: url('path-to-image'); --bg-height: 200px;">
 </div>

--bg-image est là pour définir l'url de l'image de fond et --bg-height est la hauteur souhaitée (par défaut si non renseigné 200px).

Effet de scroll à droite ou à gauche au scroll vers le bas :


 <div id="sectionLeftRightScroll" class="sectionLeftRightScroll" style="height: 200px; width:50%">
      <div class="moveLeftRightScroll"
                                        data-move-direction="right"
                                        data-move-speed="6"
                                        style="--bg-image: url('/images/pagetesttexte.jpg')">
      </div>
 </div>

--bg-image est là pour définir l'url de l'image.
data-move-direction est là pour définir la direction du scroll (right ou left), par défaut : right.
data-move-speed est là pour définir la vitesse du scroll, plus le chiffre est grand plus le scroll est lent, par défaut : 5.

Effet de bandeau tournant à l'infini


                                    <div class="scrolling-banner pause-on-hover" style="--duration: 10s --direction: right;">
                                        <div class="scrolling-track">

                                            <div class="scrolling-item">💡 Carte 1</div>
                                            <div class="scrolling-item">🖼️ Image 2</div>
                                            <div class="scrolling-item">✍️ Texte 3</div>
                                            <div class="scrolling-item">🎨 Carte 4</div>
                                            <div class="scrolling-item">🌟 Élément 5</div>
                                        </div>
                                    </div>

--duration est une variable permettant de choisir la vitesse du bandeau réaliser en secondes. optionnel
--direction est une variable qui prend pour valeur soit left soit right elle permet de choisir le sens où va le bandeau. optionnel, Elle est de base en left
pause-on-hover permet quand l'utilisateur à la souris sur le bandeau que le bandeau s'arrète. optionnel
Dans le div du scrolling-item vous pouvez mettre n'importe quel composant.
--item-height donne la hauteur des items, par défaut 100px.

Collapse

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi corporis eligendi enim expedita facilis hic ipsam iusto maxime modi obcaecati officia optio, porro provident quo quos repellat similique, voluptate! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi consectetur dolorem enim error harum labore minima molestias nam necessitatibus nihil nisi perspiciatis quaerat, quam quibusdam quisquam reprehenderit similique sunt.


<button class="btn oldcollapse">Texte</button>
<div class="oldcollapse-content">
    Le contenu que je veux faire apparaître
</div>

Cards avec ombre au survol:

Titre

Some quick example text to build on the card title and make up the bulk of the card's content.

Titre

Some quick example text to build on the card title and make up the bulk of the card's content.

Titre

Some quick example text to build on the card title and make up the bulk of the card's content.


<div class="container">
    <div class="row">
        <div class="col-12 col-lg">
            <div class="card shadow">
                <img class="card-img-top" src="lien_image.png" alt="">
                <div class="card-body">
                    <div class="card-title">Titre</div>
                    <p class="card-text">Description.</p>
                    <a href="#" class="btn btn-primary">Voir plus</a>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg">
            <div class="card shadow">
                <img class="card-img-top" src="lien_image.png alt=""">
                <div class="card-body">
                    <div class="card-title">Titre</div>
                    <p class="card-text">Description.</p>
                    <a href="#" class="btn btn-primary">Voir plus</a>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg">
            <div class="card shadow">
                <img class="card-img-top" src="lien_image.png alt=""">
                <div class="card-body">
                    <div class="card-title">Titre</div>
                    <p class="card-text">Description.</p>
                    <a href="#" class="btn btn-primary">Voir plus</a>
                </div>
            </div>
        </div>
    </div>
</div>

Cards avec texte et animation au survol:

Description de l'image. Vous pouvez ajouter des informations supplémentaires ici.


<div class="custom-card">
      <img src="/images/pagetest.jpg" class="img-fluid" alt="img">
           <div class="description">
              <p>Description de l'image. Vous pouvez ajouter des informations supplémentaires ici.</p>
           </div>
      <div>
</div>

Container de cards qui passe en scroll horizontal en mobile :

Description de l'image. Vous pouvez ajouter des informations supplémentaires ici.


<div class="cards-wrapper">
  <div class="col-lg-4">
    <div class="custom-card">
          <img src="/images/pagetest.jpg" class="img-fluid" alt="img">
               <div class="description">
                  <p>Description de l'image. Vous pouvez ajouter des informations supplémentaires ici.</p>
               </div>
          <div>
    </div>
  <div>
  <div class="col-lg-4">
    <div class="custom-card">
          <img src="/images/pagetest.jpg" class="img-fluid" alt="img">
               <div class="description">
                  <p>Description de l'image. Vous pouvez ajouter des informations supplémentaires ici.</p>
               </div>
          <div>
    </div>
  <div>
  <div class="col-lg-4">
    <div class="custom-card">
          <img src="/images/pagetest.jpg" class="img-fluid" alt="img">
               <div class="description">
                  <p>Description de l'image. Vous pouvez ajouter des informations supplémentaires ici.</p>
               </div>
          <div>
    </div>
  <div>
</div>

Titre

Sous titre

Some quick example text to build on the card title and make up the bulk of the card's content.


<div class="image-text-container">
    <div style="grid-column: 1 / 13; grid-row: 1 / 6;">
        <img src="/images/2020-refonte/artisan-pageoffre.webp" alt="nos solutions">
    </div>
    <div class="bg-white p-3 p-md-5" style="grid-column: 10 / 21; grid-row: 2 / 5;">
        <h2>Titre</h2>
        <h3>Sous titre</h3>
        <p>
            Some quick example text to build on the card title and make up the bulk of the card's content.
        </p>
        <a href="#" class="btn btn-primary">Voir plus</a>
    </div>
</div>

Pour le positionnement des éléments, on utilise un quadrillage de 20 colonnes et 10 lignes.
grid-column: [debut] / [fin] permet de définir sur quelles colonnes s'étend l'élément (de 1 à 20), soit 5% à chaque fois
grid-row: [debut] / [fin] permet de définir sur quelles lignes s'étend l'élément (de 1 à 10), , soit 10% à chaque fois

Composant Card Read More avec un petite animation qui monte

🧤

Un titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tortor nisi, auctor vitae ex semper, interdum venenatis nulla.


<div class="custom-card-underline"
     style="width: 35%; --footer-height: 64px;--footer-bg: #c850c0;--readmore-color: #ffffff;">
    <div class="d-flex justify-content-between align-items-center px-3 pt-3">
        <div>🧤</div>
        <div class="text-muted fw-bold fs-4">02</div>
    </div>
    <div class="card-body">
        <h3 class="card-title card-animated">Un titre</h3>
        <p class="card-text card-animated">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tortor nisi,
            auctor vitae ex semper, interdum venenatis nulla.
        </p>
    </div>
    <a href="#" class="card-readmore">
        <span class="read-more-btn">Read More</span>
    </a>
</div>

--footer-height permet de définir la hauteur du footer de la card
--footer-bg permet de définir la couleur de fond du footer de la card
--readmore-color permet de définir la couleur du texte du bouton Read More
card-animated

Ombres personnalisées:

box-shadow-1

box-shadow-2

box-shadow-3

Modal:


                    <!-- Button pour faire apparaitre la modal -->
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalCenter">
                    Voir modal
                    </button>

                    <!-- Modal -->
                    <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered" role="document">
                            <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
                                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                Le contenu à afficher....
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer
                            </div>
                            </div>
                        </div>
                        </div>
                    </div>

Effets sur images

Zoom



<div class="zoom d-flex justify-content-center">
    <div class="p-3">
        <img src="..." class="img-fluid" alt="img25">
    </div>
</div>

Rotation



<div class="rotate d-flex justify-content-center">
    <div class="p-3">
        <img src="..." class="img-fluid" alt="img25">
    </div>
</div>

Zoom arrière



<div class="zoom-out d-flex justify-content-center">
    <div class="p-3">
        <img src="..." class="img-fluid" alt="img25">
    </div>
</div>

Rotation inverse



<div class="rotate-zoom-out d-flex justify-content-center">
    <div class="p-3">
        <img src="..." class="img-fluid" alt="img25">
    </div>
</div>

Noir et blanc



<div class="grayscale d-flex justify-content-center">
    <div class="p-3">
        <img src="..." class="img-fluid" alt="img25">
    </div>
</div>

Opacité



<div class="opacity1 d-flex justify-content-center">
    <div class="p-3">
        <img src="..." class="img-fluid" alt="img25">
    </div>
</div>

Contraste



<div class="contrast d-flex justify-content-center">
    <div class="p-3">
        <img src="..." class="img-fluid" alt="img25">
    </div>
</div>

Zoom ou dé-zoom à l'apparition de l'image


<div id="zoom-image-container" >
    <img src="..." class="zoom-image" data-zoom-factor="1" data-divisor-speed="2000" data-zoom-direction="in">
</div>

Le champ data-zoom-factor est le facteur de zoom de base (1 = 100%). Par défaut si cette donnée n'est pas présente, c'est 1.2.
Le champ data-divisor-speed permet de régler la vitesse de zoom plus la valeur est grande plus le zoom sera lent. Par défaut si cette donnée n'est pas présente, c'est 2000.
Le champ data-zoom-direction est la direction du zoom (in = zoom, out = dé-zoom). Par défaut si cette donnée n'est pas présente, c'est out.
Si on utilise le zoom in, afin de partir de l'image de base, il faut avoir une valeur de facteur de zoom de base à 1, pour partir de l'image de base et zoomer au scroll vers le bas.

Effets texte/image

Changement de texte au survol

Premier texte

Texte au survol (et un peu plus long)



<div class="overlay">
    <a href="">
        <img src="..." class="img-fluid" alt="img25">
        <div class="normal">
            <class="text" style="color:#fafafa;--sizen:2rem;">Premier texte</div>
        </div>
        <div class="hover">
            <div class="text" style="color:#f7d723;--sizeh:1.5rem;">Texte au survol (et un peu plus long)</div>
        </div>
    </a>
</div>

Changement de texte au survol + contraste image

Premier texte

Texte au survol (et un peu plus long)



<div class="overlay-contrast">
    <a href="">
        <img src="..." class="img-fluid" alt="img25">
        <div class="normal">
            <class="text" style="color:#fafafa;--sizecn:2rem;">Premier texte</div>
        </div>
        <div class="hover">
            <div class="text" style="color:#f7d723;--sizech:1.5rem;">Texte au survol (et un peu plus long)</div>
        </div>
    </a>
</div>

Changement de texte au survol + opacité colorée image

Premier texte

Texte au survol (et un peu plus long)



<div class="overlay-color" style="background-color:#9b59b6;;">
    <a href="">
        <img src="..." class="img-fluid" alt="img25">
        <div class="normal">
            <class="text" style="color:#fafafa;--sizecon:2rem;">Premier texte</div>
        </div>
        <div class="hover">
            <div class="text" style="color:#f7d723;--sizecoh:1.5rem;">Texte au survol (et un peu plus long)</div>
        </div>
    </a>
</div>

Effets bloc texte

Changement de texte toutes les 3 secondes

Bonjour hello salut ciao a bientot



                                    <div id="wordComponents data-time=1">
                                        <div class="word-display">
                                            <div id="word1" class="word" style="color:#03b1fc"></div>
                                            <div id="word2" class="word" style="color:#03b1fc"></div>
                                        </div>

                                        <div class="word-list">
                                            <span class="word-item">Bonjour</span>
                                            <span class="word-item">hello</span>
                                            <span class="word-item">salut</span>
                                            <span class="word-item">ciao</span>
                                            <span class="word-item">a bientot</span>
                                        </div>
                                    </div>

                                    
                                        data-time permet de choisir combien de temps en seconde, on change de mot

Scroll en 2 temps :

Lorem ipsum


    <div class="row">
        <div class="leftscroll col-lg col-12 p-0" style="overflow: hidden; height: fit-content; --entete-hauteur: 100px;">
            <img class="img-fluid" src="/images/pagetesttexte.jpg" alt="photo test" width="700"
            height="960" style="display: block; height: 600px; width: 960px; object-fit: cover;">
        </div>
        <div class="rightscroll col-lg col-12">
            <div class="contentscroll">
                Ta div de droite ici
            </div>
        </div>
    </div>

Effets boutons

Changement de texte au survol

Devis gratuit Démarrez maintenant



<a class="btn bouton-text px-3 py-2" href="#">

        <span class="normal">
            Devis gratuit
        </span>
        <span class="hover">
            Démarrez maintenant
        </span>
</a>

Changement de texte au survol largeur fixe

Devis gratuit Démarrez maintenant



<a class="btn bouton-textfixe px-3 py-2" href="#">

        <span class="normal">
            Devis gratuit
        </span>
        <span class="hover">
            Démarrez maintenant
        </span>
</a>

Changement de couleurs/formes au survol

Bouton 1


<a class="btn-effect btn-effect-1" href="#"
  style="--bg-color: #f39c12; --border-radius: 40px;
      --bg-color-hover: #6c5ce7; --border-radius-hover: 12px;"
    Bouton 1
</a>

--bg-color permet de définir la couleur de fond de base du bouton, par défaut blanc
--border-radius permet de définir le border-radius de base du bouton, par défaut 8px
--text-color permet de définir la couleur du texte de base du bouton, par défaut noir
--bg-color-hover permet de définir la couleur de fond au survol du bouton
--border-radius-hover permet de définir le border-radius au survol du bouton
--text-color-hover permet de définir la couleur du texte au survol du bouton

Animation au survol

Bouton Pulse Bouton Slide Bouton Shadow

Bouton Rotation Bouton Fill



<a class="btn-effect btn-effect-pulse" href="#" style="--bg-color: #f39c12; --bg-color-rgb: 243, 156, 18;--text-color: #fff;">
    Bouton pulse
</a>
<a class="btn-effect btn-effect-slide" href="#" style="--bg-color: #6c5ce7; --bg-color-hover: #00cec9; --text-color: #fff;">
    Bouton slide
</a>
<a class="btn-effect btn-effect-shadow" href="#" style="--bg-color: #f39c12; --bg-color-shadow: #a66b08; --text-color: #fff;">
    Bouton shadow
</a>
<a class="btn-effect btn-effect-rotation" href="#" style="--bg-color: #f39c12; --text-color: #fff;">
    Bouton rotation
</a>
<a class="btn-effect btn-effect-fill" href="#" style="--bg-color: #3ae374; --text-color: #3ae374;">
    Bouton fill
</a>

Les paramètre pour les couleurs et le texte sont les mêmes que pour le bouton 1 pour le texte et la couleur de fond. Les paramètres spécifiques sont :
--bg-color-rgb pour le bouton pulse, il s'agit de la couleur de fond en rgb (sans le rgb())
--bg-color-shadow pour le bouton shadow, il s'agit de la couleur de l'ombre

Habillage textes

Soulignement rainbow

Voici un soulignement arc-en-ciel que l'on peut insérer dans un texte



<h3>
    Voici un soulignement <span class="rainbow" style="--color1:#29d0be;--color2:#ff5959;--color3:#e1f549">arc-en-ciel</span> que l'on peut insérer dans un texte
</h3>

Encadrement

Je suis un texte encadré.



<h5>
    Je suis un texte <span class="frame" style="--color1:#29d0be;">encadré</span> .
</h5>

Encadrement

Je suis un texte encadré dégradé.



<h5>
    Je suis un texte <span class="frame" style="--color1:#29d0be;--color2:#ff5959;--color3:#e1f549;">encadré dégradé</span> .
</h5>

Texte qui passe avec un voir plus en mobile :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Lire ↓


<div class="text-collapse-container has-gradient "
     data-max-lines="3"
     data-always-active="true"
>
  <div class="text-collapse-content collapsed"
    style="-webkit-line-clamp: unset; max-height: 67.5px; opacity: 1;">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
                                        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                                        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                                        irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                                        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                                        deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus
                                        error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
                                        ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta
                                        sunt explicabo.</p>
  </div>
  <div class="text-collapse-degrade"> </div>
  <span class="collapse-indicator" style="opacity: 1;">
     <span>Lire ↓</span> 
  </span>
</div>

data-max-lines permet de définir le nombre de lignes maximum avant le voir plus
data-always-active permet de forcer l'effet même sur grand écran
La classe has-gradient permet d'avoir un dégradé en bas du texte data-breakpoint permet de définir le breakpoint en dessous duquel l'effet s'active (par défaut 768px) :
sm pour 576, md pour 768, lg pour 992, xl pour 1200, xxl pour 1400.
La classe no-gradient permet de ne pas avoir de dégradé en bas du texte.

A'Z RENOVATION - 1 bis Rue de la verrerie 38120 FONTANIL-CORNILLON - -

Page Twitter Page Facebook Profil Instagram

Mentions légales et confidentialité Sommaire
N° Siret : 441 282 118 00070 - N° TVA intra : FR66441282118