Advertisement
Guest User

Untitled

a guest
Jul 18th, 2018
119
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 22.32 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0" name="viewport">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <meta name="twitter:widgets:theme" content="light">
  8. <meta property="og:title" content="VII EVENTS" />
  9. <meta property="og:type" content="website" />
  10. <meta property="og:image" content="Your-Image-Url" />
  11. <meta property="og:description" content="Your-Page-Description" />
  12. <title>VII EVENTS| EVENEMENTIEL</title>
  13. <link rel="shortcut icon" type="image/x-icon" href="images/theme-mountain-favicon.ico">
  14.  
  15.  
  16. <!-- Font -->
  17. <link href="https://fonts.googleapis.com/css?family=Sacramento" rel="stylesheet">
  18.  
  19. <!-- Css -->
  20. <link rel="stylesheet" href="css/core.min.css" />
  21. <link rel="stylesheet" href="css/skin-resume-one-page.css" />
  22.  
  23. <!--[if lt IE 9]>
  24. <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  25. <![endif]-->
  26.  
  27. </head>
  28. <body class="shop home-page">
  29.  
  30.  
  31.  
  32.  
  33.  
  34.  
  35.  
  36. <!-- Header -->
  37.  
  38. <header class="header header-fixed header-fixed-on-mobile header-transparent" data-bkg-threshold="window-height">
  39. <div class="header-inner">
  40. <div class="row nav-bar">
  41. <div class="column width-12 nav-bar-inner">
  42. <div class="logo">
  43. <div class="logo-inner">
  44. <a href="index.html"><img src="images/resume/Wordmark%20-%20White.svg" alt="VII-EVENTS-Logo" /></a>
  45. <a href="index.html"><img src="images/resume/Wordmark%20-%20White.svg" alt="VIIEVENTS-LOGO" /></a>
  46. </div>
  47. </div>
  48. <nav class="navigation nav-block secondary-navigation nav-right">
  49. <ul>
  50.  
  51.  
  52.  
  53. <!-- Aux Navigation -->
  54. <nav class="navigation nav-block primary-navigation nav-right no-margin-right">
  55. <ul>
  56. <li class="current">
  57. <a href="#Accueil" data-offset="0" class="scroll-link">Accueil</a>
  58. </li>
  59. <li>
  60. <a href="#about" data-offset="10" class="scroll-link">À propos</a>
  61. </li>
  62. <li>
  63. <a href="#prestation" data-offset="-60" class="scroll-link">Prestations</a>
  64. </li>
  65. <li>
  66. <a href="#Avis" data-offset="-50" class="scroll-link">Avis</a>
  67. </li>
  68. <li>
  69. <a href="#Réservation" data-offset="100" class="scroll-link">Réservation</a>
  70. </li>
  71.  
  72. </ul>
  73. </nav>
  74. </div>
  75. </div>
  76. </div>
  77. </header>
  78. <!-- Header End -->
  79. <!-- Fullscreen Slider Section -->
  80. <section id="Accueil" class="section-block featured-media window-height tm-slider-parallax-container">
  81. <div class="tm-slider-container full-width-slider" data-featured-slider data-parallax data-parallax-fade-out data-scale-under="960">
  82. <ul class="tms-slides">
  83. <li class="tms-slide" data-image data-as-bkg-image data-force-fit data-overlay-bkg-color="#00000" data-overlay-bkg-opacity="0.25">
  84. <div class="tms-content">
  85. <div class="tms-content-inner v-align-middle">
  86. <div class="row">
  87. <div class="column width-10 offset-1 pd-20 center">
  88. <h5 class="tms-caption text-uppercase weight-bold color-white mb-10"
  89. data-animate-in="preset:slideInDownShort;duration:900ms;delay:300ms;"
  90. data-no-scale
  91. ></h5>
  92. <div class="clear"></div>
  93. <h1 class="tms-caption title-xlarge text-uppercase lspacing-medium weight-bold color-white mb-10"
  94. data-animate-in="preset:slideInDownShort;duration:200ms;delay:100ms;"
  95. data-no-scale
  96. >Vos évènements sur mesure</h1>
  97. <div class="clear"></div>
  98. <p class="tms-caption font-alt-1 text-xlarge weight-light color-white hide-on-mobile mb-30"
  99. data-animate-in="preset:slideInDownShort;duration:900ms;delay:500ms;"
  100. data-no-scale
  101. ><strong>Dans la région Provences Alpes Côte d'Azur.</strong></p>
  102. </div>
  103. </div>
  104. </div>
  105. </div>
  106. <div class="tms-caption"
  107. data-animate-in="preset:slideInUpShort;duration:1000ms;delay:1000ms;"
  108. data-x="center"
  109. data-y="bottom"
  110. data-offsety="50"
  111. >
  112. <a href="#about" class="icon-circled icon-down-open-mini medium scroll-link border-white bkg-hover-theme color-white color-hover-white no-margins" data-offset="-70"></a>
  113. </div>
  114. <img data-src="images/pictures/cirque.jpg" alt=""/>
  115. </li>
  116. </ul>
  117. </div>
  118. </section>
  119. <!-- Fullscreen Slider Section End -->
  120.  
  121.  
  122.  
  123. <!-- Content -->
  124. <div class="content clearfix">
  125.  
  126.  
  127. <!-- Hero Section 5 -->
  128. <section id="about"
  129. <div class="section-block hero-5 hero-5-3 window-height show-media-column-on-mobile color-charcoal">
  130. <div class="media-column width-6" style="background-image: url(images/restaurant/generic/soiree-bougie.png);"></div>
  131. <div class="row">
  132. <div class="column width-5 offset-7">
  133. <div class="hero-content split-hero-content">
  134. <div class="hero-content-inner horizon" data-animate-in="preset:slideInRightShort;duration:1000ms;" data-threshold="0.5">
  135. <p class="text-uppercase mb-10"><strong>Chaque soirée se doit d'être inoubliable</strong></p>
  136. <h2></h2>
  137. <p class="mb-50">Que vous soyez un particulier ou un professionel, la société VII events se déplace sur l'ensemble de la région Provences-Alpes-Côte d'Azur et vous propose des prestations haut de gamme adaptées à vos attentes et façonnées par vos soins pour faire vivre à vos invités des moments inoubliables:
  138. <ul>
  139. <li>Mariage</li>
  140. <li>Anniversaire</li>
  141. <li>Soirée privée et soirée business</li>
  142. <li>Lancement de produit & Défilé de mode</li>
  143. <li>Comité d'entreprise & Séminaire</li>
  144. <li>Show Dj & Saxo</li>
  145. <li>Musiciens</li>
  146.  
  147. </ul>
  148. Chic et raffinement sont les maîtres mots, n'hésitez plus osez la différence à nos cotés !
  149.  
  150. .</p>
  151. <p class="opacity-05 weight-bold">Cetlyn Burg. </p>
  152. </div>
  153. </div>
  154. </div>
  155. </div>
  156. </div>
  157. </section>
  158. <!-- Hero Section 5 End -->
  159.  
  160. <!-- SERVICES PAGES -->
  161.  
  162. <!-- Custom Feature Columns -->
  163. <section class="section-block replicable-content bkg-grey-ultralight">
  164. <div class="row">
  165. <div class="column width-10 offset-1 center">
  166. <h3 class="mb-50">L'assurance d'un moment parfait</h3>
  167. </div>
  168. </div>
  169. <div class="row flex">
  170. <div class="column width-4">
  171. <div class="feature-column">
  172. <span class="text-medium weight-light font-alt-1 color-theme">01.</span>
  173. <h4 class="mb-30">Prestation chic et raffinée</h4>
  174. <p>Chaque détail compte.<br>
  175. Nous offrons le meilleur cadre à vos invités et nous adaptons à vos besoins personnels les plus insolites pour chaque prestation.
  176. .</p>
  177. </div>
  178. </div>
  179. <div class="column width-4">
  180. <div class="feature-column">
  181. <span class="text-medium weight-light font-alt-1 color-theme">02.</span>
  182. <h4 class="mb-30">Mobile et à l'écoute</h4>
  183. <p>Chaque prestation est réalisée sur mesure et peut être adaptée aux besoins de chacun, nous mettons un accent particulier à ce que vous soyez satisfait </p>
  184. </div>
  185. </div>
  186. <div class="column width-4">
  187. <div class="feature-column">
  188. <span class="text-medium weight-light font-alt-1 color-theme">03.</span>
  189. <h4 class="mb-30">Service flexible et à l'écoute du client</h4>
  190. <p>Haec igitur lex in amicitia sanciatur, ut neque rogemus res turpes nec faciamus rogati. Turpis enim excusatio est et minime accipienda cum in ceteris peccatis, tum si quis contra rem publicam se amici causa fecisse fateatur. Etenim eo loco, Fanni et Scaevola, locati sumus ut nos longe prospicere oporteat futuros casus rei publicae. Deflexit iam aliquantum de spatio curriculoque consuetudo maiorum.</p>
  191. </div>
  192. </div>
  193. </div>
  194. </section>
  195. <!-- Custom Feature Columns End -->
  196. <!-- Hero Section 5 -->
  197. <section id="prestation" class="section-block hero-5 hero-5-1 clear-height right show-media-column-on-mobile bkg-theme">
  198. <div class="media-column width-6 window-height background-none">
  199. <div class="tm-slider-container content-slider window-height" data-animation="slide" data-nav-arrows="false" data-nav-keyboard="false" data-auto-advance data-auto-advance-interval="4000" data-progress-bar="false" data-speed="1000" data-scale-under="0" data-width="722">
  200. <ul class="tms-slides">
  201. <li class="tms-slide" data-image data-as-bkg-image data-force-fit data-as-bkg-image data-animation="slideLeftRight">
  202. <img data-src="images/restaurant/generic/soirée-business.jpg" data-retina src="images/blank.png" alt=""/>
  203. </li>
  204. <li class="tms-slide" data-image data-as-bkg-image data-force-fit data-as-bkg-image data-animation="slideTopBottom">
  205. <img data-src="images/restaurant/generic/soirée-silence.jpg" data-retina src="images/blank.png" alt=""/>
  206. </li>
  207. </ul>
  208. </div>
  209. </div>
  210. <div class="row">
  211. <div class="column width-5">
  212. <div class="hero-content split-hero-content">
  213. <div class="hero-content-inner left center-on-mobile horizon" data-animate-in="preset:fadeIn;duration:1300ms;" data-threshold="0.5">
  214. <div class="color-white">
  215. <h2 class="mb-30"><p style="color: #cce062">Découvrez nos concepts</h2>
  216. <p class="lead">Soirée</p>
  217. </p>
  218. </div>
  219. <p class="color-white opacity-06">
  220. <ul>
  221. <li>Soirée silence :</li> Un casque sans fil, trois Deejays différents qui mixent des sons en live sur un même lieu en simultané, un résultat inattendu !</p>
  222. <li>Show Dj & Saxo:</li>
  223. Un saxo qui joue en live aux côtés d'un Deejay à la programmation électronique et moderne
  224. <br>
  225.  
  226. <li>Comité d'entreprise et séminaire:</li>
  227. VIIEVENTS la solution pour organiser vos évènements professionnels avec une préstation livrée clé en main. Notre réseau au service de votre évènement pour un rendu sans faille
  228. </div>
  229. </div>
  230. </div>
  231. </div>
  232. </section>
  233.  
  234. <!-- Hero Section 5 End -->
  235. <!-- Hero Section 5 -->
  236. <section class="section-block hero-5 hero-5-1 clear-height show-media-column-on-mobile bkg-white">
  237. <div class="media-column width-6 window-height background-none">
  238. <div class="tm-slider-container content-slider window-height" data-animation="slide" data-nav-arrows="false" data-nav-keyboard="false" data-auto-advance data-auto-advance-interval="4000" data-progress-bar="false" data-speed="1000" data-scale-under="0" data-width="722">
  239. <ul class="tms-slides">
  240. <li class="tms-slide" data-image data-as-bkg-image data-force-fit data-as-bkg-image data-animation="scaleOut">
  241. <img data-src="images/restaurant/generic/img_0558.jpg" data-retina src="images/blank.png" alt=""/>
  242. </li>
  243. <li class="tms-slide" data-image data-as-bkg-image data-force-fit data-as-bkg-image data-animation="slideLeftRight">
  244. <img data-src="images/restaurant/generic/img_0559.jpg" data-retina src="images/blank.png" alt=""/>
  245. </li>
  246. </ul>
  247. </div>
  248. </div>
  249. <div class="row">
  250. <div class="column width-5 push-7">
  251. <div class="hero-content split-hero-content">
  252. <div class="hero-content-inner center-on-mobile horizon" data-animate-in="preset:fadeIn;duration:1300ms;" data-threshold="0.5">
  253. <h2 class="mb-30">Iceland Fjords</h2>
  254. <p class="lead">6 Nights/7 Days all inclusive with airfare.</p>
  255. <p class="opacity-06">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>
  256.  
  257. </div>
  258. </div>
  259. </div>
  260. </div>
  261. </section>
  262. <!-- Hero Section 5 End -->
  263. <!-- Testimonials SLIDER -->
  264. <!-- Testimonial Slider -->
  265. <section id="Avis"
  266. <div class="section-block">
  267. <div class="row full-width collapse">
  268. <div class="column width-12 center">
  269. <h3 class="mb-50">Nos clients nous adorent</h3>
  270. <div class="tm-slider-container testimonial-slider" data-nav-dark>
  271. <ul class="tms-slides">
  272. <li class="tms-slide" data-image>
  273. <div class="tms-content-scalable">
  274. <div class="row full-width no-margins">
  275. <div class="column width-8 offset-2">
  276. <blockquote class="avatar large center">
  277. <span>
  278.  
  279. </span>
  280. <p>Excellent DJ, il a su nous mettre à l’aise et répondre a toutes nos attentes. Professionnel qui sait faire rimer ambiance et élégance, nous tenions a vous remercier d’avoir fait de notre mariage un moment inoubliable ! Nous recommandons sans retenue VII Events pour l’ensemble de la prestation 5 étoiles.
  281. <cite>Jessica & Admir</cite>
  282. </p>
  283. </blockquote>
  284. </div>
  285. </div>
  286. </div>
  287. </li>
  288.  
  289. <li class="tms-slide" data-image>
  290. <div class="tms-content-scalable">
  291. <div class="row full-width no-margins">
  292. <div class="column width-8 offset-2">
  293. <blockquote class="avatar large center">
  294. <span>
  295.  
  296. </span>
  297. <p>Une prestation très professionnelle, une ambiance conviviale pour une musique au top qui s'adapte à tous les goûts. Alors vous n'avez plus à hésiter ! ! !
  298. <cite>Gallego--Chazal Mathis il y a un mois
  299.  
  300. </cite>
  301. </p>
  302. </blockquote>
  303. </div>
  304. </div>
  305. </div>
  306. </li>
  307. <li class="tms-slide" data-image>
  308. <div class="tms-content-scalable">
  309. <div class="row full-width no-margins">
  310. <div class="column width-8 offset-2">
  311. <blockquote class="avatar large center">
  312. <span>
  313.  
  314. </span>
  315. <p>Bonsoir ,,une soirée inoubliable j'ai été heureuse de faire ta connaissance merci beaucoup pour cette formidable soirée merci. ..a recommande à tout le monde. ...VALERIE
  316. <cite>Valerie</cite>
  317. </p>
  318. </blockquote>
  319. </div>
  320. </ul>
  321. </div>
  322. </div>
  323. </div>
  324. </div>
  325. </section>
  326. <!-- Testimonial Slider End -->
  327.  
  328.  
  329.  
  330. <!-- Profile -->
  331. <!-- Profile -->
  332. <section id="À propos">
  333.  
  334.  
  335.  
  336.  
  337.  
  338.  
  339.  
  340. <!-- About Section -->
  341. <!-- Content -->
  342. <div class="content clearfix">
  343.  
  344.  
  345.  
  346.  
  347.  
  348. <!-- About Section End -->
  349.  
  350.  
  351.  
  352.  
  353.  
  354.  
  355. <!-- CONTACTEZ NOUS INTRO -->
  356. <!-- Intro Title -->
  357. <div class="section-block intro-title-2">
  358. <div class="row">
  359. <div class="column width-10 offset-1 center">
  360. <div class="title-container">
  361. <div class="title-container-inner color-white">
  362. <h1 class="title-large mb-30">Contactez nous.</h1>
  363. </div>
  364. </div>
  365. </div>
  366. </div>
  367. </div>
  368. <!-- Intro Title End -->
  369. <!-- CONTACTEZ NOUS INTRO -->>
  370.  
  371.  
  372.  
  373. <!-- Hero 5 Section -->
  374. <section id="contact" class="section-block hero-5 hero-5-3 clear-height show-media-column-on-mobile replicable-content bkg-white">
  375. <div class="media-column width-4"></div>
  376. <div class="row">
  377. <div class="column width-4 color-white">
  378. <h3>Contact</h3>
  379. </div>
  380. <div class="column width-8">
  381. <div class="hero-content split-hero-content">
  382. <div class="hero-content-inner left">
  383. <p class="mb-50 lead"></p>
  384. <div class="contact-form-container">
  385. <form class="contact-form" action="php/send-email.php" method="post" novalidate>
  386. <div class="row">
  387. <div class="column width-6">
  388. <div class="field-wrapper">
  389. <input type="text" name="fname" class="form-fname form-element no-padding-left no-padding-right" placeholder="Prénom*" tabindex="1" required>
  390. </div>
  391. </div>
  392. <div class="column width-6">
  393. <div class="field-wrapper">
  394. <input type="text" name="lname" class="form-lname form-element no-padding-left no-padding-right" placeholder="Nom" tabindex="2">
  395. </div>
  396. </div>
  397. <div class="column width-6">
  398. <div class="field-wrapper">
  399. <input type="email" name="email" class="form-email form-element no-padding-left no-padding-right" placeholder="Adresse e-mail*" tabindex="3" required>
  400. </div>
  401. </div>
  402. <div class="column width-6">
  403. <div class="field-wrapper">
  404. <div class="form-select form-element no-padding-left no-padding-right">
  405. <select name="budget" class="no-padding-left no-padding-right" tabindex="5">
  406. <option selected="selected" value="">Budget estimé</option>
  407. <option value="">$500-$1000</option>
  408. <option value="">$1000-$2000</option>
  409. <option value="">$2000-$3500</option>
  410. <option value="">$5000+</option>
  411. </select>
  412. </div>
  413. </div>
  414. </div>
  415. <div class="column width-6">
  416. <input type="text" name="honeypot" class="form-honeypot form-element">
  417. </div>
  418. </div>
  419. <div class="row">
  420. <div class="column width-12">
  421. <div class="field-wrapper">
  422. <textarea name="message" class="form-message form-element no-padding-left no-padding-right" placeholder="Message*" tabindex="5" required></textarea>
  423. </div>
  424. <input type="submit" value="Envoyer" class="form-submit button bkg-theme border-hover-theme color-white color-hover-charcoal">
  425. </div>
  426. </div>
  427. </form>
  428. <div class="form-response"></div>
  429. </div>
  430. </div>
  431. </div>
  432. </div>
  433. </div>
  434. </section>
  435. <!-- Hero 5 Section End -->
  436.  
  437.  
  438.  
  439.  
  440.  
  441. <!-- Logo Section 1 -->
  442. <div class="section-block logos-1 pt-50">
  443. <div class="row">
  444. <div class="column width-12 center">
  445. <h6 class="mb-20 text-uppercase weight-bold color-grey-light"><strong>Partenaires</strong>:</h6>
  446. <div class="row content-grid-6 opacity-07">
  447. <div class="grid-item">
  448. <a href="#">
  449. <img src="images/restaurant/generic/chateau-rochegude.jpeg" alt=""/>
  450. </a>
  451. </div>
  452. <div class="grid-item">
  453. <a href="#">
  454. <img src="images/restaurant/generic/logo-index-julie.png" alt=""/>
  455. </a>
  456. </div>
  457. <div class="grid-item">
  458. <a href="#">
  459. <img src="images/restaurant/generic/DOMAINE-mejan.png" alt=""/>
  460. </a>
  461. </div>
  462. <div class="grid-item">
  463. <a href="#">
  464. <img src="images/restaurant/generic/logo-meffre-traiteur-dark.png" alt=""/>
  465. </a>
  466. </div>
  467. <div class="grid-item">
  468. <a href="#">
  469. <img src="images/restaurant/generic/logo-bercai%20copie.png" alt=""/>
  470. </a>
  471. </div>
  472.  
  473. </div>
  474. </div>
  475. </div>
  476. </div>
  477. <!-- Logo Section 1 End -->
  478. <!-- Footer -->
  479. <footer class="footer">
  480. <div class="footer-top">
  481. <div class="row flex">
  482. <div class="column width-6 left center-on-mobile">
  483. <div class="widget">
  484. <h4 class="widget-title"><strong>VII EVENTS</strong>&trade; by Cetlyn Burg</h4>
  485. </div>
  486. </div>
  487. <div class="column width-6 right">
  488. <div class="widget">
  489. <ul class="social-list list-horizontal center-on-mobile">
  490. <li><a href="#"><span class="icon-twitter-with-circle medium"></span></a></li>
  491. <li><a href="#"><span class="icon-facebook-with-circle medium"></span></a></li>
  492. <li><a href="#"><span class="icon-dribbble-with-circle medium"></span></a></li>
  493. <li><a href="#"><span class="icon-instagram-with-circle medium"></span></a></li>
  494. </ul>
  495. </div>
  496. </div>
  497. </div>
  498. </div>
  499. <div class="footer-bottom">
  500. <div class="row">
  501. <div class="column width-12">
  502. <div class="footer-bottom-inner">
  503. <p class="copyright pull-left">&copy; VII EVENTS. All Rights Reserved.</p>
  504. <a href="#" class="scroll-to-top pull-right" data-no-hide>Top</a>
  505. </div>
  506. </div>
  507. </div>
  508. </div>
  509. </footer>
  510. <!-- Footer End -->
  511.  
  512.  
  513.  
  514. </body>
  515. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement