| Current Path : /home/atelierpru/paris/squelettes/ |
| Current File : /home/atelierpru/paris/squelettes/home.html |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
[(#REM) Cf.: http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
]<!--[if lt IE 7 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js ie ie6"> <![endif]-->
<!--[if IE 7 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js ie ie7"> <![endif]-->
<!--[if IE 8 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js ie ie8"> <![endif]-->
<!--[if IE 9 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js ie ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Stack Multipurpose HTML Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Site Description Here">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/stack-interface.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/socicon.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/lightbox.min.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/flickity.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/iconsmind.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/jquery.steps.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/theme.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/font-rubiklato.css" rel="stylesheet" type="text/css" media="all" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:200,300,400,400i,500,600,700%7CMerriweather:300,300i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700%7CRubik:300,400,500" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script type='text/javascript'>/*<![CDATA[*/(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement);/*]]>*/</script>
<title>[(#NOM_SITE_SPIP|textebrut)][ - (#SLOGAN_SITE_SPIP|textebrut)]</title>
[<meta name="description" content="(#DESCRIPTIF_SITE_SPIP|couper{150}|attribut_html)" />]
<INCLURE{fond=inclure/head} />
<link href="css/custom.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body class=" ">
<a id="start"></a>
<div class="nav-container ">
<div class="bar bar--sm visible-xs">
<div class="container">
<div class="row">
<div class="col-3 col-md-2">
<a href="index.html">
<img class="logo logo-dark" alt="logo" src="img/logo-dark.png" />
<h1 class="spip_logo_site">[(#LOGO_SITE_SPIP|image_reduire{224,96})]</h1>
</a>
</div>
<div class="col-9 col-md-10 text-right">
<a href="#" class="hamburger-toggle" data-toggle-class="#menu2;hidden-xs hidden-sm">
<i class="icon icon--sm stack-interface stack-menu"></i>
</a>
</div>
</div>
<!--end of row-->
</div>
<!--end of container-->
</div>
<!--end bar-->
<nav id="menu2" class="bar bar-2 hidden-xs .bar.bg--dark bar--absolute" data-scroll-class='100vh:pos-fixed'>
<div class="container">
<div class="row">
<div class="col-lg-2 text-center text-left-sm hidden-xs order-lg-2">
<div class="bar__module">
<a href="index.html">
<h1 class="spip_logo_site">[(#LOGO_SITE_SPIP|image_reduire{224,96})]</h1>
</a>
</div>
<!--end module-->
</div>
<div class="col-lg-5 order-lg-1">
<div class="bar__module">
<ul class="menu-horizontal text-left">
<BOUCLE_nav(RUBRIQUES) {racine} {par num titre, titre} {id_rubrique!=5}>
<li class="dropdown">
<span class="dropdown__trigger"><a href="#URL_RUBRIQUE">#TITRE</a></span>
<div class="dropdown__container">
<div class="container">
<div class="row">
<div class="col-md-12 dropdown__content dropdown__content--lg">
<div class="pos-absolute col-lg-5 imagebg hidden-sm hidden-xs" data-overlay="4">
<div class="background-image-holder">
<img alt="background" src="img/dropdown-1.jpg" />
</div>
<div class="container pos-vertical-center pl-5">
<div class="row">
<div class="col-lg-8">
<img alt="Logo" src="img/logo-light.png" class="image--xxs" />
<span class="h2 color--white">Beautiful, modular sites in moments.</span>
<a href="#" class="btn btn--primary type--uppercase">
<span class="label">$18 USD.</span>
<span class="btn__text">
Purchase Stack Now
</span>
</a>
</div>
</div>
<!--end of row-->
</div>
</div>
<div class="row justify-content-end">
<div class="col-lg-6">
<div class="row">
<div class="col-lg-4">
<h5>Industries</h5>
<ul class="menu-vertical">
<li>
<a href="home-accommodation.html">
Accommodation
</a>
</li>
<li>
<a href="home-construction.html">
Construction
</a>
</li>
<li>
<a href="home-coworking.html">
Coworking
</a>
</li>
<li>
<a href="home-drone-photography.html">
Drone Photography
</a>
</li>
<li>
<a href="home-education.html">
Education
</a>
</li>
<li>
<a href="home-event.html">
Event
</a>
</li>
<li>
<a href="home-fitness.html">
Fitness
</a>
</li>
<li>
<a href="home-health-insurance.html">
Insurance
</a>
</li>
<li>
<a href="home-knowledge-base.html">
Knowledge Base
</a>
</li>
<li>
<a href="home-musician.html">
Musician
</a>
</li>
<li>
<a href="home-nonprofit.html">
Nonprofit
</a>
</li>
<li>
<a href="home-political.html">
Political
</a>
</li>
<li>
<a href="home-restaurant.html">
Restaurant
</a>
</li>
<li>
<a href="home-recruitment.html">
Recruitment
</a>
</li>
<li>
<a href="home-tourism.html">
Tourism
</a>
</li>
<li>
<a href="home-wedding.html">
Wedding
</a>
</li>
</ul>
</div>
</ul>
</div>
<!--end dropdown content-->
</div>
<!--end row-->
</div>
</div>
<!--end dropdown container-->
</li>
</BOUCLE_nav>
</ul>
</div>
<!--end module-->
</div>
</div>
<!--end of row-->
</div>
<!--end of container-->
</nav>
<!--end bar-->
</div>
<div class="main-container">
<section class="cover height-100 text-center imagebg parallax" data-overlay="1">
<div class="background-image-holder">
<img alt="background" src="../IMG/jpg/surelevation-01c.jpg" /> />
</div>
<div class="container pos-vertical-center">
<div class="row">
<div class="col-md-12">
<div class="background-image-holder">
<img alt="background" src="../IMG/jpg/surelevation-01c.jpg" /> />
</div>
<div class="typed-headline">
<span class="h1 inline-block">Nous finançons intégralement études + travaux...</span>
</div>
<div class="modal-instance block">
<div class="video-play-icon modal-trigger"></div>
<div class="modal-container">
<div class="modal-content bg-dark" data-width="60%" data-height="60%">
<iframe data-src="https://www.youtube.com/embed/6p45ooZOOPo?autoplay=1" allowfullscreen="allowfullscreen"></iframe>
</div>
<!--end of modal-content-->
</div>
<!--end of modal-container-->
</div>
<!--end of modal instance-->
<a class="btn btn--primary type--uppercase" href="#">
<span class="label">$18 USD.</span>
<span class="btn__text">
Purchase Now
</span>
</a>
<span class="block type--fine-print">or
<a href="index.html">view the demos</a>
</span>
</div>
</div>
<!--end of row-->
</div>
<!--end of container-->
</section>
<section class="text-center">
<div class="container">
<div class="row">
<div class="col-md-10 col-lg-8">
<span class="h1">Create smart, responsive websites.</span>
<p class="lead">
Build lean, beautiful websites with a clean and contemporary look to suit a range of purposes — From product launch to portfolio showcase.
</p>
<a class="btn btn--primary type--uppercase" href="#">
<span class="btn__text">
Try Builder Now
</span>
</a>
</div>
</div>
<!--end of row-->
</div>
<!--end of container-->
</section>
<section class="height-80 parallax imagebg">
<div class="background-image-holder">
<img alt="background" src="img/landing-14.jpg" />
</div>
</section>
<section class="text-center bg--dark unpad--bottom">
<div class="container">
<div class="row">
<div class="col-md-10 col-lg-8">
<span class="h1">High-end design. Entry-level price.</span>
<p class="lead">
Achieve an elegant, professional look for your website while avoiding the expense of traditional web design — yours for $18USD.
</p>
<a class="btn btn--primary type--uppercase" href="index.html">
<span class="btn__text">
View More Demos
</span>
</a>
</div>
</div>
<!--end of row-->
</div>
<!--end of container-->
<img alt="Image" src="img/landing-12.jpg" />
</section>
<section class="text-center">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-10 col-lg-8">
<h2>Features you'll actually use.</h2>
<p class="lead">
Whether you’re building a welcome mat for your SaaS or a clean, corporate portfolio, Stack has your design needs covered.
</p>
</div>
</div>
<!--end of row-->
</div>
<!--end of container-->
</section>
<section class=" ">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="feature feature-4 boxed boxed--lg boxed--border">
<i class="icon icon-Hand-Touch"></i>
<h4>Interactive Elements</h4>
<hr>
<p>
With rich modal and notification functionality and a robust suite of options, Stack makes building feature-heavy pages simple and enjoyable.
</p>
<a class="btn btn--primary" href="#">
<span class="btn__text">
Learn More
</span>
</a>
</div>
<!--end feature-->
</div>
<div class="col-md-4">
<div class="feature feature-4 boxed boxed--lg boxed--border">
<i class="icon icon-Hour"></i>
<h4>Save Development Time</h4>
<hr>
<p>
Drastically reduce the time it takes to move from initial concept to production-ready with Stack and Variant Page Builder. Your clients will love you for it!
</p>
<a class="btn btn--primary" href="#">
<span class="btn__text">
Learn More
</span>
</a>
</div>
<!--end feature-->
</div>
<div class="col-md-4">
<div class="feature feature-4 boxed boxed--lg boxed--border">
<i class="icon icon-Life-Safer"></i>
<h4>Friendly Support</h4>
<hr>
<p>
Our customers love the comfort that comes with six-months free support. Our dedicated support forum makes interacting with us hassle-free and efficient.
</p>
<a class="btn btn--primary" href="#">
<span class="btn__text">
Learn More
</span>
</a>
</div>
<!--end feature-->
</div>
</div>
<!--end of row-->
</div>
<!--end of container-->
</section>
<section class="text-center bg--secondary">
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10">
<div class="slider" data-paging="true">
<ul class="slides">
<li>
<div class="testimonial">
<img alt="Image" src="img/avatar-round-3.png" class="image--sm" />
<span class="h3">
“There's a feeling of structure that you can't find in other templates — Stack has become my default template.”
</span>
<h5>Sam Briggs</h5>
<span>Envato Customer</span>
</div>
</li>
<li>
<div class="testimonial">
<img alt="Image" src="img/avatar-round-4.png" class="image--sm" />
<span class="h3">
“Variant has been a massive plus for my workflow — I can now get live mockups out in a matter of hours, my clients really love it.”
</span>
<h5>Rob Vasquez</h5>
<span>Interface Designer — Yoke</span>
</div>
</li>
<li>
<div class="testimonial">
<img alt="Image" src="img/avatar-round-1.png" class="image--sm" />
<span class="h3">
“We’ve been using Stack to prototype designs quickly and efficiently. Needless to say we’re hugely impressed by the style and value.”
</span>
<h5>Maguerite Holland</h5>
<span>Interface Designer — Yoke</span>
</div>
</li>
</ul>
</div>
</div>
</div>
<!--end of row-->
</div>
<!--end of container-->
</section>
<section class="text-center ">
<div class="container">
<div class="row mb-4 justify-content-center">
<h2>Over 20,000 satisfied Medium Rare customers</h2>
</div>
<form class="row justify-content-center" action="//mrare.us8.list-manage.com/subscribe/post?u=77142ece814d3cff52058a51f&id=f300c9cce8" data-success="Thanks for signing up. Please check your inbox for a confirmation email." data-error="Please provide your email address and agree to the terms.">
<div class="col-lg-6 col-md-8">
<input class="validate-required validate-email" type="text" name="EMAIL" placeholder="Enter your email for our monthly newsletter" />
</div>
<div class="col-lg-2 col-md-4">
<button type="submit" class="btn btn--primary">Subscribe Now</button>
</div>
<div class="col-md-12 text-center">
<input class="validate-required" type="checkbox" name="group[13737][1]" />
<span>I have read and agree to the
<a href="#">terms and conditions</a>
</span>
</div>
<div style="position: absolute; left: -5000px;" aria-hidden="true">
<input type="text" name="b_77142ece814d3cff52058a51f_f300c9cce8" tabindex="-1" value="">
</div>
</form>
</div>
<!--end of container-->
</section>
<footer class="text-center space--sm footer-5 bg--dark ">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="heading-block">
<ul class="list-inline list--hover">
<li>
<a href="#">
<span>Our Company</span>
</a>
</li>
<li>
<a href="#">
<span>Locations</span>
</a>
</li>
<li>
<a href="#">
<span>Products</span>
</a>
</li>
<li>
<a href="#">
<span>Work With Us</span>
</a>
</li>
</ul>
</div>
<div>
<ul class="social-list list-inline list--hover">
<li>
<a href="#">
<i class="socicon socicon-google icon icon--xs"></i>
</a>
</li>
<li>
<a href="#">
<i class="socicon socicon-twitter icon icon--xs"></i>
</a>
</li>
<li>
<a href="#">
<i class="socicon socicon-facebook icon icon--xs"></i>
</a>
</li>
<li>
<a href="#">
<i class="socicon socicon-instagram icon icon--xs"></i>
</a>
</li>
</ul>
</div>
<div>
<span class="type--fine-print">Made in Melbourne</span>
<img alt="Image" class="flag" src="img/flag-2.png" />
</div>
<div>
<span class="type--fine-print">©
<span class="update-year"></span> Stack Inc.</span>
<a class="type--fine-print" href="#">Privacy Policy</a>
<a class="type--fine-print" href="#">Legal</a>
</div>
</div>
</div>
<!--end of row-->
</div>
<!--end of container-->
</footer>
</div>
<!--<div class="loader"></div>-->
<a class="back-to-top inner-link" href="#start" data-scroll-class="100vh:active">
<i class="stack-interface stack-up-open-big"></i>
</a>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/flickity.min.js"></script>
<script src="js/easypiechart.min.js"></script>
<script src="js/parallax.js"></script>
<script src="js/typed.min.js"></script>
<script src="js/datepicker.js"></script>
<script src="js/isotope.min.js"></script>
<script src="js/ytplayer.min.js"></script>
<script src="js/lightbox.min.js"></script>
<script src="js/granim.min.js"></script>
<script src="js/jquery.steps.min.js"></script>
<script src="js/countdown.min.js"></script>
<script src="js/twitterfetcher.min.js"></script>
<script src="js/spectragram.min.js"></script>
<script src="js/smooth-scroll.min.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>