84 | 
85 |
86 | 
87 | 
88 | 
89 | 
90 | 
91 | 
92 | 
93 | 
94 | 
95 | 
96 |
97 | ## Output
98 | 
99 |
--------------------------------------------------------------------------------
/static/formcss.css:
--------------------------------------------------------------------------------
1 | /*custom font*/
2 | @import url(https://fonts.googleapis.com/css?family=Montserrat);
3 |
4 | /*basic reset*/
5 | * {margin: 0; padding: 0;}
6 |
7 | html {
8 | height: 100%;
9 | /*Image only BG fallback*/
10 |
11 | /*background = gradient + image pattern combo*/
12 | background:
13 | linear-gradient(rgba(87, 202, 255, 0.6), rgba(230, 229, 229, 0.863));
14 |
15 |
16 |
17 | background-attachment: fixed;
18 | }
19 | body {
20 | font-family: montserrat, arial, verdana;
21 | }
22 | /*form styles*/
23 | #msform {
24 | width: 710px;
25 | margin: 50px auto;
26 |
27 | position: relative;
28 | }
29 | #msform fieldset {
30 | background: white;
31 | border: 0 none;
32 | border-radius: 3px;
33 | box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
34 | padding: 20px 0px;
35 | box-sizing: content-box;
36 | width: 550px;
37 | margin-left: 90px;
38 |
39 | /*stacking fieldsets above each other*/
40 | position: relative;
41 | }
42 | /*Hide all except first fieldset*/
43 | #msform fieldset:not(:first-of-type) {
44 | display: none;
45 | }
46 | /*inputs*/
47 | #msform input {
48 | padding: 15px;
49 | border: 1px solid #ccc;
50 | border-radius: 3px;
51 | margin-bottom: 10px;
52 | width: 350px;
53 | box-sizing: border-box;
54 | font-family: montserrat;
55 | color: #2C3E50;
56 | font-size: 15px;
57 | word-wrap: break-word;
58 | overflow-y: hidden
59 | }
60 | #msform textarea {
61 | padding: 15px;
62 | border: 1px solid #ccc;
63 | border-radius: 3px;
64 | margin-bottom: 10px;
65 | width: 350px;
66 | box-sizing: border-box;
67 | font-family: montserrat;
68 | color: #2C3E50;
69 | font-size: 15px;
70 | word-wrap: break-word;
71 | overflow-y: hidden
72 | }
73 | #msform label{
74 | font-family: montserrat;
75 | width: 100px;
76 | font-family: montserrat;
77 | color: #2C3E50;
78 | font-size: 16px;
79 | }
80 | #msform .labeldiv{
81 | padding-top: 21px;
82 |
83 | width:110px;
84 | }
85 | /*buttons*/
86 | #msform .action-button {
87 | width: 100px;
88 | background: rgb(14, 128, 235);
89 | font-weight: bold;
90 | color: white;
91 | text-align: center;
92 | border: 0 none;
93 | border-radius: 1px;
94 | cursor: pointer;
95 | padding: 10px 5px;
96 | margin: 10px 5px;
97 | }
98 | #msform .add,#msform .remove {
99 | width: 100px;
100 | background-color: white;
101 | font-weight: bold;
102 | color: rgb(14, 128, 235);
103 | text-align: center;
104 | border-color: rgb(14, 128, 235);
105 | border: 0 none;
106 | border-radius: 1px;
107 | cursor: pointer;
108 | padding: 10px 5px;
109 | margin: 10px 5px;
110 | }
111 |
112 | #msform .action-button:hover, #msform .action-button:focus {
113 | box-shadow: 0 0 0 2px white, 0 0 0 3px rgb(14, 128, 235);
114 | }
115 | /*headings*/
116 | .fs-title {
117 | text-align: center;
118 | font-size: 15px;
119 | text-transform: uppercase;
120 | color: #2C3E50;
121 | margin-bottom: 10px;
122 | }
123 | .fs-subtitle {
124 | font-weight: normal;
125 | font-size: 13px;
126 | color: #666;
127 | margin-bottom: 20px;
128 | text-align: center;
129 | }
130 | /*progressbar*/
131 | #progressbar {
132 | margin-bottom: 30px;
133 | overflow: hidden;
134 | text-align: center;
135 | /*CSS counters to number the steps*/
136 | counter-reset: step;
137 | }
138 | #progressbar li {
139 | list-style-type: none;
140 | color: black;
141 | text-transform: uppercase;
142 | font-size: 8px;
143 | width: 11.11%;
144 | float: left;
145 | position: relative;
146 | }
147 | #progressbar li:before {
148 | content: counter(step);
149 | counter-increment: step;
150 | width: 20px;
151 | line-height: 20px;
152 | display: block;
153 | font-size: 10px;
154 | color: #333;
155 | background: white;
156 | border-radius: 3px;
157 | margin: 0 auto 5px auto;
158 | }
159 | /*progressbar connectors*/
160 | #progressbar li:after {
161 | content: '';
162 | width: 100%;
163 | height: 2px;
164 | background: white;
165 | position: absolute;
166 | left: -50%;
167 | top: 9px;
168 | z-index: -1; /*put it behind the numbers*/
169 | }
170 | #progressbar li:first-child:after {
171 | /*connector not needed before the first step*/
172 | content: none;
173 | }
174 | /*marking active/completed steps green*/
175 | /*The number of the step and the connector before it = green*/
176 | #progressbar li.active:before, #progressbar li.active:after{
177 | background: rgb(14, 128, 235);
178 | color: white;
179 | }
180 | .hide {
181 | display:none;
182 | }
183 | .form{
184 |
185 | }
186 |
187 | .flex-container {
188 | display: flex;
189 | flex-direction: row;
190 | justify-content: center;
191 | }
192 | .fill-width {
193 | flex: 1;
194 | }
195 | .hidden_data{
196 | font-size: 0px;
197 | }
--------------------------------------------------------------------------------
/templates/homepage.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |