-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
115 lines (101 loc) · 8.06 KB
/
index.html
File metadata and controls
115 lines (101 loc) · 8.06 KB
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TreeGeneration</title>
<meta name="description" content="Fullscreen Form Interface: A distraction-free form concept with fancy animations" />
<meta name="keywords" content="fullscreen form, css animations, distraction-free, web design" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.5.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<link rel="stylesheet" type="text/css" href="css/cs-select.css" />
<link rel="stylesheet" type="text/css" href="css/cs-skin-boxes.css" />
<link rel="stylesheet" type="text/css" href="css/icons.css" />
<script src="js/modernizr.custom.js"></script>
</head>
<body>
<div class="container">
<div class="fs-form-wrap" id="fs-form-wrap">
<div class="fs-title">
<h1 ><a style="color:white; text-decoration:none;font-size:40px" href="index2.html">TreeGeneration</a></h1>
</div>
<form id="myform" class="fs-form fs-form-full" autocomplete="off">
<ol class="fs-fields">
<li data-input-trigger>
<label class="fs-field-label fs-anim-upper" for="q1">Que pensez-vous de cet évènement?</label>
<!-- Icons: 'Linecons' generated by IcoMoon.io, Designer Sergey Shmidt, License CC BY-SA 3.0 -->
<div class="fs-radio-group fs-radio-custom clearfix fs-anim-lower">
<div class="row icon-container">
<div class="col-box">
<div class="icon-box">
<svg version="1.1" viewbox="-20 -20 160 160" x="0px" xmlns="http://www.w3.org/2000/svg" y="0px">
<g></g>
<path d="M60 0c-22.785 0-41.25 18.465-41.25 41.25 0 15.116 13.83 31.136 18.866 45.206 7.511 20.981 6.679 33.544 22.384 33.544 15.938 0 14.869-12.502 22.384-33.457 5.051-14.1 18.866-30.293 18.866-45.293 0-22.785-18.473-41.25-41.25-41.25zM69.72 101.91l-18.593 2.321c-0.664-1.92-1.376-4.166-2.243-7.099-0.011-0.038-0.026-0.079-0.034-0.116l23.205-2.899c-0.33 1.106-0.683 2.269-0.99 3.311-0.491 1.684-0.93 3.146-1.346 4.481zM47.76 93.405c-0.683-2.257-1.451-4.635-2.306-7.155h29.123c-0.461 1.346-0.922 2.696-1.32 3.971l-25.496 3.184zM60 112.5c-3.799 0-5.546-0.439-7.489-4.688l15.892-1.991c-2.303 6.203-3.979 6.679-8.404 6.679zM77.52 78.75h-34.999c-1.867-4.050-4.11-8.1-6.322-12.064-4.894-8.756-9.949-17.813-9.949-25.436 0-18.611 15.139-33.75 33.75-33.75 18.611 0 33.75 15.139 33.75 33.75 0 7.568-5.063 16.672-9.96 25.481-2.19 3.949-4.418 7.991-6.27 12.019zM60 18.75c1.031 0 1.875 0.84 1.875 1.875s-0.84 1.875-1.875 1.875c-10.339 0-18.75 8.411-18.75 18.75 0 1.035-0.84 1.875-1.875 1.875-1.035 0-1.875-0.84-1.875-1.875 0-12.409 10.091-22.5 22.5-22.5z" fill="#3b3f45" fill="#fff" id="i1" stroke="#3b3f45" stroke-miterlimit="10" stroke-miterlimit="10" stroke-width="2"></path></svg>
</div>
<input id="q1a" name="q1" type="radio" value="1"/>
<label for="q1a" class="radio-conversion">Magnifique</label>
</div>
<div class="col-box">
<div class="icon-box">
<svg version="1.1" viewbox="-20 -20 160 160" x="0px" xmlns="http://www.w3.org/2000/svg" y="0px">
<path d="M101.25 18.735l-82.5 0.015c-2.074 0-3.75 1.661-3.75 3.735v52.5c0 2.074 1.676 3.75 3.75 3.75h82.5c2.074 0 3.75-1.676 3.75-3.75v-52.5c0-2.074-1.676-3.75-3.75-3.75zM101.25 75h-82.5v-52.515h82.5v52.515zM108.75 3.75h-97.5c-6.214 0-11.25 5.033-11.25 11.25v75c0 6.203 5.018 11.227 11.213 11.243h37.538v4.564l-23.407 3.041c-1.672 0.416-2.843 1.916-2.843 3.638 0 2.074 1.676 3.75 3.75 3.75h67.5c2.074 0 3.75-1.676 3.75-3.75 0-1.721-1.17-3.221-2.843-3.641l-23.407-3.037v-4.564h37.537c6.195-0.015 11.213-5.040 11.213-11.243v-75c0-6.217-5.040-11.25-11.25-11.25zM112.5 90c0 2.066-1.684 3.75-3.75 3.75h-97.5c-2.070 0-3.75-1.684-3.75-3.75v-75c0-2.070 1.68-3.75 3.75-3.75h97.5c2.066 0 3.75 1.68 3.75 3.75v75z" fill="#3b3f45" id="i2" stroke="#3b3f45" stroke-miterlimit="10" stroke-width="2"></path></svg>
</div>
<input id="q1b" name="q1" type="radio" value="2"/>
<label for="q1b" class="radio-conversion">Pas interessant</label>
</div>
<div class="col-box">
<div class="icon-box">
<svg version="1.1" viewbox="-20 -20 160 160" x="0px" xmlns="http://www.w3.org/2000/svg" y="0px">
<g></g>
<path d="M117.803 28.444l-22.5-22.5c-1.406-1.406-3.319-2.194-5.303-2.194h-78.75c-6.202 0-11.25 5.044-11.25 11.25v90c0 6.203 5.048 11.25 11.25 11.25h97.5c6.203 0 11.25-5.047 11.25-11.25v-71.25c0-1.991-0.791-3.9-2.197-5.306zM112.5 105c0 2.074-1.676 3.75-3.75 3.75h-97.5c-2.074 0-3.75-1.676-3.75-3.75v-90c0-2.074 1.676-3.75 3.75-3.75h75v15h-0.007c0 6.214 5.040 11.25 11.25 11.25h15.007v67.5zM101.243 33.75h-3.75c-4.133 0-7.5-3.364-7.5-7.5h0.007v-15l22.5 22.5h-11.257zM58.125 30c-1.035 0-1.875-0.836-1.875-1.875s0.84-1.875 1.875-1.875h18.75c1.031 0 1.875 0.84 1.875 1.875s-0.844 1.875-1.875 1.875h-18.75zM58.125 41.25c-1.035 0-1.875-0.84-1.875-1.875s0.84-1.875 1.875-1.875h18.75c1.031 0 1.875 0.84 1.875 1.875s-0.844 1.875-1.875 1.875h-18.75zM56.25 50.625c0-1.039 0.84-1.875 1.875-1.875h45c1.031 0 1.875 0.84 1.875 1.875s-0.844 1.875-1.875 1.875h-45c-1.035 0-1.875-0.84-1.875-1.875zM103.125 71.25c1.031 0 1.875 0.836 1.875 1.875 0 1.031-0.844 1.875-1.875 1.875h-86.25c-1.035 0-1.875-0.844-1.875-1.875 0-1.039 0.84-1.875 1.875-1.875h86.25zM103.125 82.5c1.031 0 1.875 0.836 1.875 1.875 0 1.031-0.844 1.875-1.875 1.875h-86.25c-1.035 0-1.875-0.844-1.875-1.875 0-1.039 0.84-1.875 1.875-1.875h86.25zM103.125 93.75c1.031 0 1.875 0.836 1.875 1.875 0 1.031-0.844 1.875-1.875 1.875h-86.25c-1.035 0-1.875-0.844-1.875-1.875 0-1.039 0.84-1.875 1.875-1.875h86.25zM103.125 60c1.031 0 1.875 0.84 1.875 1.875s-0.844 1.875-1.875 1.875h-86.25c-1.035 0-1.875-0.836-1.875-1.875s0.84-1.875 1.875-1.875h86.25zM18.75 52.5h26.25c2.074 0 3.75-1.676 3.75-3.75v-22.5c0-2.074-1.676-3.75-3.75-3.75h-26.25c-2.074 0-3.75 1.676-3.75 3.75v22.5c0 2.070 1.676 3.75 3.75 3.75zM22.5 30h18.75v15h-18.75v-15z" fill="#3b3f45" fill="#fff" id="i3" stroke="#3b3f45" stroke-miterlimit="10" stroke-miterlimit="10" stroke-width="2"></path></svg>
</div>
<input id="q1c" name="q1" type="radio" value="3"/>
<label for="q1c" class="radio-conversion">Heu..</label>
</div>
</div>
</div>
</li>
</ol><!-- /fs-fields -->
</section>
<button class="fs-submit" type="submit">Envoyez</button>
</form><!-- /fs-form -->
</div><!-- /fs-form-wrap -->
</div><!-- /container -->
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script src="js/classie.js"></script>
<script src="js/selectFx.js"></script>
<script src="js/fullscreenForm.js"></script>
<script src="js/mo.min.js"></script>
<script src="js/animate.js"></script>
<script>
(function() {
var formWrap = document.getElementById( 'fs-form-wrap' );
[].slice.call( document.querySelectorAll( 'select.cs-select' ) ).forEach( function(el) {
new SelectFx( el, {
stickyPlaceholder: false,
onChange: function(val){
document.querySelector('span.cs-placeholder').style.backgroundColor = val;
}
});
} );
new FForm( formWrap, {
onReview : function() {
classie.add( document.body, 'overview' ); // for demo purposes only
}
} );
})();
</script>
</body>
</html>