-
Notifications
You must be signed in to change notification settings - Fork 162
/
index.html
executable file
·126 lines (121 loc) · 6.34 KB
/
index.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
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
116
117
118
119
120
121
122
123
124
125
126
<!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>Fullscreen Form Interface</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">
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.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" />
<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>Project Worksheet</h1>
<div class="codrops-top">
<a class="codrops-icon codrops-icon-prev" href="http://tympanus.net/Development/NotificationStyles/"><span>Previous Demo</span></a>
<a class="codrops-icon codrops-icon-drop" href="http://tympanus.net/codrops/?p=19520"><span>Back to the Codrops Article</span></a>
<a class="codrops-icon codrops-icon-info" href="#"><span>This is a demo for a fullscreen form</span></a>
</div>
</div>
<form id="myform" class="fs-form fs-form-full" autocomplete="off">
<ol class="fs-fields">
<li>
<label class="fs-field-label fs-anim-upper" for="q1">What's your name?</label>
<input class="fs-anim-lower" id="q1" name="q1" type="text" placeholder="Dean Moriarty" required/>
</li>
<li>
<label class="fs-field-label fs-anim-upper" for="q2" data-info="We won't send you spam, we promise...">What's your email address?</label>
<input class="fs-anim-lower" id="q2" name="q2" type="email" placeholder="[email protected]" required/>
</li>
<li data-input-trigger>
<label class="fs-field-label fs-anim-upper" for="q3" data-info="This will help us know what kind of service you need">What's your priority for your new website?</label>
<div class="fs-radio-group fs-radio-custom clearfix fs-anim-lower">
<span><input id="q3b" name="q3" type="radio" value="conversion"/><label for="q3b" class="radio-conversion">Sell things</label></span>
<span><input id="q3c" name="q3" type="radio" value="social"/><label for="q3c" class="radio-social">Become famous</label></span>
<span><input id="q3a" name="q3" type="radio" value="mobile"/><label for="q3a" class="radio-mobile">Mobile market</label></span>
</div>
</li>
<li data-input-trigger>
<label class="fs-field-label fs-anim-upper" data-info="We'll make sure to use it all over">Choose a color for your website.</label>
<select class="cs-select cs-skin-boxes fs-anim-lower">
<option value="" disabled selected>Pick a color</option>
<option value="#588c75" data-class="color-588c75">#588c75</option>
<option value="#b0c47f" data-class="color-b0c47f">#b0c47f</option>
<option value="#f3e395" data-class="color-f3e395">#f3e395</option>
<option value="#f3ae73" data-class="color-f3ae73">#f3ae73</option>
<option value="#da645a" data-class="color-da645a">#da645a</option>
<option value="#79a38f" data-class="color-79a38f">#79a38f</option>
<option value="#c1d099" data-class="color-c1d099">#c1d099</option>
<option value="#f5eaaa" data-class="color-f5eaaa">#f5eaaa</option>
<option value="#f5be8f" data-class="color-f5be8f">#f5be8f</option>
<option value="#e1837b" data-class="color-e1837b">#e1837b</option>
<option value="#9bbaab" data-class="color-9bbaab">#9bbaab</option>
<option value="#d1dcb2" data-class="color-d1dcb2">#d1dcb2</option>
<option value="#f9eec0" data-class="color-f9eec0">#f9eec0</option>
<option value="#f7cda9" data-class="color-f7cda9">#f7cda9</option>
<option value="#e8a19b" data-class="color-e8a19b">#e8a19b</option>
<option value="#bdd1c8" data-class="color-bdd1c8">#bdd1c8</option>
<option value="#e1e7cd" data-class="color-e1e7cd">#e1e7cd</option>
<option value="#faf4d4" data-class="color-faf4d4">#faf4d4</option>
<option value="#fbdfc9" data-class="color-fbdfc9">#fbdfc9</option>
<option value="#f1c1bd" data-class="color-f1c1bd">#f1c1bd</option>
</select>
</li>
<li>
<label class="fs-field-label fs-anim-upper" for="q4">Describe how you imagine your new website</label>
<textarea class="fs-anim-lower" id="q4" name="q4" placeholder="Describe here"></textarea>
</li>
<li>
<label class="fs-field-label fs-anim-upper" for="q5">What's your budget?</label>
<input class="fs-mark fs-anim-lower" id="q5" name="q5" type="number" placeholder="1000" step="100" min="100"/>
</li>
</ol><!-- /fs-fields -->
<button class="fs-submit" type="submit">Send answers</button>
</form><!-- /fs-form -->
</div><!-- /fs-form-wrap -->
<!-- Related demos -->
<div class="related">
<p>If you enjoyed this demo you might also like:</p>
<a href="http://tympanus.net/Development/MinimalForm/">
<img src="img/relatedposts/minimalform1-300x162.png" />
<h3>Minimal Form Interface</h3>
</a>
<a href="http://tympanus.net/Development/ButtonComponentMorph/">
<img src="img/relatedposts/MorphingButtons-300x162.png" />
<h3>Morphing Buttons Concept</h3>
</a>
</div>
</div><!-- /container -->
<script src="js/classie.js"></script>
<script src="js/selectFx.js"></script>
<script src="js/fullscreenForm.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>