-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathvh-model-vh-maker.html
43 lines (37 loc) · 15.5 KB
/
vh-model-vh-maker.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html><!-- This site was created in Webflow. http://www.webflow.com --><!-- Last Published: Tue Aug 03 2021 08:54:50 GMT+0000 (Coordinated Universal Time) --><html data-wf-domain="xai-interactive-prototype.webflow.io" data-wf-page="60e5ce1f4b9a1f945c9abc06" data-wf-site="609296896f4d570e2a691eaa"><head><meta charset="utf-8"/><title>vh_model_vh_maker</title><meta content="vh_model_vh_maker" property="og:title"/><meta content="vh_model_vh_maker" property="twitter:title"/><meta content="width=device-width, initial-scale=1" name="viewport"/><meta content="Webflow" name="generator"/><link href="https://uploads-ssl.webflow.com/609296896f4d570e2a691eaa/css/xai-interactive-prototype.webflow.082014461.css" rel="stylesheet" type="text/css"/><script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script><script type="text/javascript">WebFont.load({ google: { families: ["Open Sans:300,300italic,400,400italic,600,600italic,700,700italic,800,800italic"] }});</script><!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif]--><script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script><link href="https://uploads-ssl.webflow.com/img/favicon.ico" rel="shortcut icon" type="image/x-icon"/><link href="https://uploads-ssl.webflow.com/img/webclip.png" rel="apple-touch-icon"/><!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-TJFXFRZ');</script>
<!-- End Google Tag Manager -->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-9REJMWZGZB"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-9REJMWZGZB');
</script></head><body><div class="columns w-row"><div class="column w-col w-col-3"><h1 class="heading">Découvrez <br/>votre prime</h1><p class="paragraph-2">Sur la base de vos informations personnelles et de vos besoins de couverture, nous avons calculé le prix de votre prime pour votre assurance automobile.</p><h1 class="heading-3">Intermédiaire +</h1><div class="div-block-2"><div class="div-block-6"><div class="text-block-8">187.22 €</div><div class="text-block-9">/an</div></div><div class="text-block-3">Paiement annuel</div></div><div class="div-block"><div class="div-block-5"><img src="https://uploads-ssl.webflow.com/609296896f4d570e2a691eaa/6092a4bc250e9e73e7bbb334_check_icon.svg" loading="lazy" alt="check icon" class="image-13"/><div class="list-item risks">Dommages causés à autrui</div></div><div class="div-block-5"><img src="https://uploads-ssl.webflow.com/609296896f4d570e2a691eaa/6092a4bc250e9e73e7bbb334_check_icon.svg" loading="lazy" alt="check icon" class="image-13"/><div class="list-item risks">Dommages tous accidents</div></div><div class="div-block-5"><img src="https://uploads-ssl.webflow.com/609296896f4d570e2a691eaa/6092a4bc250e9e73e7bbb334_check_icon.svg" loading="lazy" alt="check icon" class="image-13"/><div class="list-item risks">Vol & tentative de vol</div></div><div class="div-block-5"><img src="https://uploads-ssl.webflow.com/609296896f4d570e2a691eaa/6092a4bc250e9e73e7bbb334_check_icon.svg" loading="lazy" alt="check icon" class="image-13"/><div class="list-item risks">Bris de glace</div></div><div class="div-block-5"><img src="https://uploads-ssl.webflow.com/609296896f4d570e2a691eaa/6092a4bc250e9e73e7bbb334_check_icon.svg" loading="lazy" alt="check icon" class="image-13"/><div class="list-item risks">Incendies & explosions</div></div><div class="div-block-5"><img src="https://uploads-ssl.webflow.com/609296896f4d570e2a691eaa/6092a4bc49211e44979c976c_cross_icon.svg" loading="lazy" alt="crossed icon" class="image-13"/><div class="list-item risks non-included">Catastrophes technologiques</div></div><div class="div-block-5"><img src="https://uploads-ssl.webflow.com/609296896f4d570e2a691eaa/6092a4bc49211e44979c976c_cross_icon.svg" loading="lazy" alt="crossed icon" class="image-13"/><div class="list-item risks non-included">Tempêtes et événements climatiques exceptionnels</div></div><div class="div-block-5"><img src="https://uploads-ssl.webflow.com/609296896f4d570e2a691eaa/6092a4bc49211e44979c976c_cross_icon.svg" loading="lazy" alt="crossed icon" class="image-13"/><div class="list-item risks non-included">Catastrophes naturelles</div></div></div></div><div class="column-2 w-col w-col-9"><div class="section wf-section"><a href="old-home.html" class="w-inline-block w-clearfix"><img src="https://uploads-ssl.webflow.com/609296896f4d570e2a691eaa/6098e13dafd44b362d2c90ad_arrow-left.svg" loading="lazy" alt="go back icon" class="image-11"/><div class="text-block-7">retour</div></a></div><div class="div-block-3"><h2 class="heading-6">La marque et le modèle de votre véhicule</h2><p>Les informations ci-dessous vous montrent le prix que vous auriez obtenu pour votre prime avec un modèle de voiture différent, toute autre information égale par ailleurs. Notez que toutes les informations relatives à votre véhicule dépendent du modèle et de la marque du véhicule. Par conséquent, ces informations sont données à titre d'exemples pour comprendre l'impact de la marque et du modèle de votre véhicule sur le prix de la prime que vous obtenez, et ne reflètent pas de manière précise la réalité.</p></div><div class="div-block-11"><h4>Votre prix par rapport à la marque et au modèle de votre véhicule</h4></div><div class="div-block-11"><div class="columns-2 w-row"><div class="column-4 w-clearfix w-col w-col-6"><div class="text-block-20">Pour <strong>votre modèle</strong> de véhicule<br/><strong></strong></div><div class="legende-prix">Votre prix<br/><strong></strong></div><div class="feature-value-categorical-data">Toyota - Land Cruiser<strong></strong></div><div class="feature-price-value"><strong>187.22</strong> €</div></div><div class="column-5 w-col w-col-6"><div class="w-form"><form id="email-form" name="email-form" data-name="Email Form" method="get" class="form w-clearfix"><div class="text-block-20 price-example">Pour un <strong>autre modèle</strong> de véhicule, votre prix serait de :</div><select data-name="selection-field" name="selection-field" id="field" class="selection-field w-select"></select><div class="text-block-20 price-search"><strong class="bold-text-2 selection-price"> </strong>€</div></form><div class="w-form-done"><div>Thank you! Your submission has been received!</div></div><div class="w-form-fail"><div>Oops! Something went wrong while submitting the form.</div></div></div></div></div></div><div class="div-block-12"><h4 class="heading-9">Exemples de prix pour d'autres marques et modèles de véhicule (pour votre profil)</h4></div><div class="div-block-11"><div class="columns-3 w-row"><div class="w-col w-col-7"><div class="text-block-20-copy price-example">Le modèle qui vous donne un prix au<strong> plus bas</strong></div><div class="text-block-20 price-example text-block-20-copy">Un modèle qui vous donne un <strong>prix similaire</strong> </div><div class="text-block-20 price-example text-block-20-copy">Le modèle qui vous donne un prix au<strong> plus haut</strong></div></div><div class="w-col w-col-4"><div class="text-block-20 price-example text-block-20-copy">CITROEN - SAXO...........................</div><div class="text-block-20 price-example text-block-20-copy">RENAULT - TWINGO......................</div><div class="text-block-20 price-example text-block-20-copy">MERCEDES BENZ - VINTO............</div></div><div class="w-col w-col-1"><div class="text-block-20 price-example text-block-20-copy">143.91 €</div><div class="text-block-20 price-example text-block-20-copy">183.33 €</div><div class="text-block-20 price-example text-block-20-copy">236.81 €</div></div></div></div><div class="w-dyn-list"><div role="list" class="collection-list-6 w-dyn-items"><div role="listitem" class="w-dyn-item"><div class="selection-item">Sélectionner....</div><div style="color:grey" class="selected-price">0.00</div><div class="selected-color">BFBFBF</div></div><div role="listitem" class="w-dyn-item"><div class="selection-item">AUDI - A4</div><div style="color:green" class="selected-price">180.15</div><div class="selected-color">008000</div></div><div role="listitem" class="w-dyn-item"><div class="selection-item">CITROEN - BERLINGO</div><div style="color:green" class="selected-price">159.41</div><div class="selected-color">008000</div></div><div role="listitem" class="w-dyn-item"><div class="selection-item">CITROEN - C3</div><div style="color:green" class="selected-price">164.20</div><div class="selected-color">008000</div></div><div role="listitem" class="w-dyn-item"><div class="selection-item">CITROEN - SAXO</div><div style="color:green" class="selected-price">143.91</div><div class="selected-color">008000</div></div><div role="listitem" class="w-dyn-item"><div class="selection-item">CITROEN - XSARA</div><div style="color:green" class="selected-price">165.03</div><div class="selected-color">008000</div></div><div role="listitem" class="w-dyn-item"><div class="selection-item">FIAT - PUNTO</div><div style="color:green" class="selected-price">165.03</div><div class="selected-color">008000</div></div><div role="listitem" class="w-dyn-item"><div class="selection-item">FORD - FIESTA</div><div style="color:green" class="selected-price">160.57</div><div class="selected-color">008000</div></div><div role="listitem" class="w-dyn-item"><div class="selection-item">FORD - FOCUS</div><div style="color:green" class="selected-price">157.95</div><div class="selected-color">008000</div></div><div role="listitem" class="w-dyn-item"><div class="selection-item">MINI - MINI</div><div style="color:green" class="selected-price">167.44</div><div class="selected-color">008000</div></div><div role="listitem" class="w-dyn-item"><div class="selection-item">OPEL - CORSA</div><div style="color:green" class="selected-price">160.83</div><div class="selected-color">008000</div></div><div role="listitem" class="w-dyn-item"><div class="selection-item">PEUGEOT - 106</div><div style="color:green" class="selected-price">146.01</div><div class="selected-color">008000</div></div><div role="listitem" class="w-dyn-item"><div class="selection-item">PEUGEOT - 205</div><div style="color:green" class="selected-price">159.10</div><div class="selected-color">008000</div></div><div role="listitem" class="w-dyn-item"><div class="selection-item">PEUGEOT - 206</div><div style="color:green" class="selected-price">175.74</div><div class="selected-color">008000</div></div><div role="listitem" class="w-dyn-item"><div class="selection-item">PEUGEOT - 207</div><div style="color:green" class="selected-price">178.63</div><div class="selected-color">008000</div></div><div role="listitem" class="w-dyn-item"><div class="selection-item">PEUGEOT - 306</div><div style="color:green" class="selected-price">155.94</div><div class="selected-color">008000</div></div><div role="listitem" class="w-dyn-item"><div class="selection-item">PEUGEOT - 307</div><div style="color:green" class="selected-price">165.26</div><div class="selected-color">008000</div></div><div role="listitem" class="w-dyn-item"><div class="selection-item">PEUGEOT - 406</div><div style="color:green" class="selected-price">172.08</div><div class="selected-color">008000</div></div><div role="listitem" class="w-dyn-item"><div class="selection-item">PEUGEOT - PARTNER</div><div style="color:green" class="selected-price">146.74</div><div class="selected-color">008000</div></div><div role="listitem" class="w-dyn-item"><div class="selection-item">RENAULT - CLIO</div><div style="color:green" class="selected-price">168.45</div><div class="selected-color">008000</div></div><div role="listitem" class="w-dyn-item"><div class="selection-item">RENAULT - ESPACE</div><div style="color:green" class="selected-price">183.39</div><div class="selected-color">008000</div></div><div role="listitem" class="w-dyn-item"><div class="selection-item">RENAULT - KANGOO</div><div style="color:green" class="selected-price">146.31</div><div class="selected-color">008000</div></div><div role="listitem" class="w-dyn-item"><div class="selection-item">RENAULT - LAGUNA</div><div style="color:green" class="selected-price">163.09</div><div class="selected-color">008000</div></div><div role="listitem" class="w-dyn-item"><div class="selection-item">RENAULT - MEGANE</div><div style="color:green" class="selected-price">159.04</div><div class="selected-color">008000</div></div><div role="listitem" class="w-dyn-item"><div class="selection-item">RENAULT - MODUS</div><div style="color:green" class="selected-price">174.38</div><div class="selected-color">008000</div></div><div role="listitem" class="w-dyn-item"><div class="selection-item">RENAULT - SCENIC</div><div style="color:green" class="selected-price">173.29</div><div class="selected-color">008000</div></div><div role="listitem" class="w-dyn-item"><div class="selection-item">RENAULT - TWINGO</div><div style="color:green" class="selected-price">183.33</div><div class="selected-color">008000</div></div><div role="listitem" class="w-dyn-item"><div class="selection-item">TOYOTA - LAND CRUISER</div><div style="color:blue" class="selected-price">187.22</div><div class="selected-color">4D4DFA</div></div><div role="listitem" class="w-dyn-item"><div class="selection-item">TOYOTA - YARIS</div><div style="color:green" class="selected-price">180.30</div><div class="selected-color">08000</div></div><div role="listitem" class="w-dyn-item"><div class="selection-item">VOLKSWAGEN - GOLF</div><div style="color:green" class="selected-price">161.10</div><div class="selected-color">008000</div></div><div role="listitem" class="w-dyn-item"><div class="selection-item">VOLKSWAGEN - POLO</div><div style="color:green" class="selected-price">165.48</div><div class="selected-color">08000</div></div></div></div></div></div><script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=609296896f4d570e2a691eaa" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script><script src="https://uploads-ssl.webflow.com/609296896f4d570e2a691eaa/js/webflow.4ec7e4ccd.js" type="text/javascript"></script><!--[if lte IE 9]><script src="//cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif]--><!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TJFXFRZ"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) --><script>
$('.selection-item').each(function(index){
var s = $(this).text();
var price = $('.selected-price').get(index).innerText;
$('.selection-field').append('<option value="'+price+'">'+s+'</option>');
})
$( '.selection-field').change(function() {
var str = "";
var color = "";
$( "select option:selected" ).each(function(index) {
color = "#" + $('.selected-color').get($(this).get(0).index).innerText;
console.log($(this).get(0).index)
console.log(color)
str += $(this).text() + " ";
});
$('.selection-price').text($('.selection-field').val());
$('.selection-price').css('color', color);
})
.change();
</script></body></html>