Skip to content

Bowling des 3 seines

Le but de ce projet était de réalisé un site web pour vendre des parties de l'immense écran de pub du bowling des 3 seines.

Durant ce projet on m'a envoyé une maquette du site fait à la va vite. J'ai donc du reprendre la maquette et la refaire en un peu mieux directement sur le site web.

Pour rendre le site dynamique j'ai utilisé la librairie AOS pour ajouter des animations sur le site ainsi que Swiper pour afficher des photos de l'écran de pub.

HeadBanner avec des animations AOS

html
  <div class="head_banner">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <div class="head">
            <div class="d-flex justify-content-center">
              <div id="text" data-aos="fade-up" data-aos-duration="900">
                <div class="cry1"></div>
                <div class="cry2"></div>
                <div class="cry3"></div>
                <p class="presentation">COMMUNIQUEZ SUR <b>ÉCRAN GÉANT</b> À TROYES</p>
                
                <h1><span class="main">Affichez-vous sur écran géant</span><br>au <span
                      class="secondary">Bowling des 3 Seine</span>
                </h1>
              </div>
            </div>
            
            <div id="video">
              <video class="d-block video" id="videos" style="object-fit: cover" loop="" muted=""
                     autoplay="" width="100%" height="100%">
                <source src="/image/video.mp4" type="video/mp4">
              </video>
            </div>
          
          
          </div>
        
        
        </div>
        <div class="col-12">
          <div class="arrow">
            <a href="tel:0617563850" class="buttons">06 17 56 38 50</a>
            <div class="d-flex flex-column align-items-center" data-aos="fade-up" data-aos-duration="600">
              <img width="17" src="image/icons/Arrow.svg"/>
              <p class="write">Vous souhaitez vous afficher ?</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>