xxxxxxxxxx1
<div class="container p-5">2
<form>3
<div class="row m-2">4
<div class="col">5
<div data-mdb-input-init class="form-outline form-white">6
<input type="text" id="form1Example1" class="form-control" aria-describedby="textAnrede"/>7
<label class="form-label" for="form1Example1">Anrede</label>8
</div>9
<div id="textAnrede" class="form-text text-white">10
Firma+Herr/Firma+Frau generieren z.H. Herr/Frau11
</div>12
</div>13
14
<div class="col">15
<div data-mdb-input-init class="form-outline form-white">16
<input type="text" id="form1Example2" class="form-control" />17
<label class="form-label" for="form1Example2">Titel</label>18
</div>19
</div>20
</div>21
<div class="row m-2">22
<div class="col">23
<div data-mdb-input-init class="form-outline form-white">24
<input type="text" id="form1Example1" class="form-control" />25
<label class="form-label" for="form1Example1">Nachname</label>26
</div>27
</div>28
29
<div class="col">30
<div data-mdb-input-init class="form-outline form-white">31
<input type="text" id="form1Example2" class="form-control" />32
<label class="form-label" for="form1Example2">Vorname</label>33
</div>34
</div>35
</div>36
<div class="row m-2">37
<div class="col">38
<div data-mdb-input-init class="form-outline form-white">39
<input type="text" id="form1Example1" class="form-control" aria-describedby="textExample2" />40
<label class="form-label" for="form1Example1">Anschrift/Firmenname</label>41
</div>42
<div id="textExample2" class="form-text text-white">43
Eine Firmenadresse startet mit diesem Feld. 44
</div>45
</div>46
47
<div class="col">48
<div data-mdb-input-init class="form-outline form-white">49
<input type="text" id="form1Example2" class="form-control" />50
<label class="form-label" for="form1Example2">Anschrift weiter 1</label>51
</div>52
</div>53
</div>54
<div class="row m-2">55
<div class="col">56
<div data-mdb-input-init class="form-outline form-white">57
<input type="text" id="form1Example1" class="form-control" />58
<label class="form-label" for="form1Example1">Anschrift weiter 2</label>59
</div>60
</div>61
62
<div class="col">63
</div>64
</div>65
<div class="row m-2">66
<div class="col">67
<div data-mdb-input-init class="form-outline form-white">68
<input type="text" id="form1Example1" class="form-control" />69
<label class="form-label" for="form1Example1">Straße</label>70
</div>71
</div>72
73
<div class="col">74
<div data-mdb-input-init class="form-outline form-white">75
<input type="text" id="form1Example2" class="form-control" />76
<label class="form-label" for="form1Example2">Land</label>77
</div>78
</div>79
</div>80
<div class="row m-2">81
<div class="col">82
<div data-mdb-input-init class="form-outline form-white">83
<input type="number" id="form1Example1" class="form-control" />84
<label class="form-label" for="form1Example1">PLZ</label>85
</div>86
</div>87
88
<div class="col">89
<div data-mdb-input-init class="form-outline form-white">90
<input type="text" id="form1Example2" class="form-control" />91
<label class="form-label" for="form1Example2">Ort</label>92
</div>93
</div>94
</div>95
<div class="row m-2">96
<div class="col">97
<div data-mdb-input-init class="form-outline form-white">98
<input type="tel" id="form1Example1" class="form-control" />99
<label class="form-label" for="form1Example1">Tel. privat 1</label>100
</div>101
</div>102
103
<div class="col">104
<div data-mdb-input-init class="form-outline form-white">105
<input type="tel" id="form1Example2" class="form-control" />106
<label class="form-label" for="form1Example2">Tel. privat 2</label>107
</div>108
</div>109
110
<div class="col">111
<div data-mdb-input-init class="form-outline form-white">112
<input type="tel" id="form1Example1" class="form-control" />113
<label class="form-label" for="form1Example1">Tel dienstl. 1</label>114
</div>115
</div>116
117
<div class="col">118
<div data-mdb-input-init class="form-outline form-white">119
<input type="tel" id="form1Example2" class="form-control" />120
<label class="form-label" for="form1Example2">Tel dienstl. 2</label>121
</div>122
</div>123
</div>124
<div class="row m-2">125
<div class="col">126
<div data-mdb-input-init class="form-outline form-white">127
<input type="tel" id="form1Example1" class="form-control" />128
<label class="form-label" for="form1Example1">Fax privat</label>129
</div>130
</div>131
132
<div class="col">133
<div data-mdb-input-init class="form-outline form-white">134
<input type="tel" id="form1Example2" class="form-control" />135
<label class="form-label" for="form1Example2">Fax dienstl.</label>136
</div>137
</div>138
139
<div class="col">140
<div data-mdb-input-init class="form-outline form-white">141
<input type="tel" id="form1Example1" class="form-control" />142
<label class="form-label" for="form1Example1">Mobil privat</label>143
</div>144
</div>145
146
<div class="col">147
<div data-mdb-input-init class="form-outline form-white">148
<input type="tel" id="form1Example2" class="form-control" />149
<label class="form-label" for="form1Example2">Mobil dienstl.</label>150
</div>151
</div>152
</div>153
<div class="row m-2">154
<div class="col">155
<div data-mdb-input-init class="form-outline form-white">156
<input type="email" id="form1Example1" class="form-control" />157
<label class="form-label" for="form1Example1">Email</label>158
</div>159
</div>160
161
<!-- Password input -->162
<div class="col">163
<div data-mdb-input-init class="form-outline form-white">164
<input type="email" id="form1Example1" class="form-control" />165
<label class="form-label" for="form1Example1">Email 2</label>166
</div>167
</div>168
</div>169
<div class="row m-2">170
<div class="col">171
<div data-mdb-input-init class="form-outline form-white">172
<input type="email" id="form1Example1" class="form-control" />173
<label class="form-label" for="form1Example1">Email 3</label>174
</div>175
</div>176
177
<!-- Password input -->178
<div class="col">179
<div data-mdb-input-init class="form-outline form-white">180
<input type="text" id="form1Example1" class="form-control" aria-describedby="textExample5"/>181
<label class="form-label" for="form1Example1">Namensschild</label>182
</div>183
<div id="textExample5" class="form-text text-white">184
(verkürzter) Firmenname für Badges 185
</div>186
</div>187
</div>188
189
<div class="row m-2">190
<div class="col">191
<div data-mdb-input-init class="form-outline form-white">192
<input type="text" id="form1Example1" class="form-control" aria-describedby="textExample4" />193
<label class="form-label" for="form1Example1">Bemerkung</label>194
</div>195
<div id="textExample4" class="form-text text-white">196
Erläuterung zum Datensatz 197
</div>198
</div>199
200
<div class="col">201
<div data-mdb-input-init class="form-outline form-white">202
<input type="text" id="form1Example2" class="form-control" aria-describedby="textExample3" />203
<label class="form-label" for="form1Example2">Gruppengucker</label>204
</div>205
<div id="textExample3" class="form-text text-white">206
Werte für die folgenden 10 Felder zur Kategorisierung 207
</div>208
</div>209
</div>210
211
<div class="row m-2">212
<div class="col">213
<div data-mdb-input-init class="form-outline form-white">214
<input type="number" id="form1Example2" class="form-control" />215
<label class="form-label" for="form1Example2">Gruppe 1</label>216
</div>217
</div>218
<div class="col">219
<div data-mdb-input-init class="form-outline form-white">220
<input type="number" id="form1Example2" class="form-control" />221
<label class="form-label" for="form1Example2">Gruppe 2</label>222
</div>223
</div>224
<div class="col">225
<div data-mdb-input-init class="form-outline form-white">226
<input type="number" id="form1Example2" class="form-control" />227
<label class="form-label" for="form1Example2">Gruppe 3</label>228
</div>229
</div>230
<div class="col">231
<div data-mdb-input-init class="form-outline form-white">232
<input type="number" id="form1Example2" class="form-control" />233
<label class="form-label" for="form1Example2">Gruppe 4</label>234
</div>235
</div>236
<div class="col">237
<div data-mdb-input-init class="form-outline form-white">238
<input type="number" id="form1Example2" class="form-control" />239
<label class="form-label" for="form1Example2">Gruppe 5</label>240
</div>241
</div>242
</div>243
<div class="row m-2">244
<div class="col">245
<div data-mdb-input-init class="form-outline form-white">246
<input type="number" id="form1Example2" class="form-control" />247
<label class="form-label" for="form1Example2">Gruppe 6</label>248
</div>249
</div>250
<div class="col">251
<div data-mdb-input-init class="form-outline form-white">252
<input type="number" id="form1Example2" class="form-control" />253
<label class="form-label" for="form1Example2">Gruppe 7</label>254
</div>255
</div>256
<div class="col">257
<div data-mdb-input-init class="form-outline form-white">258
<input type="number" id="form1Example2" class="form-control" />259
<label class="form-label" for="form1Example2">Gruppe 8</label>260
</div>261
</div>262
<div class="col">263
<div data-mdb-input-init class="form-outline form-white">264
<input type="number" id="form1Example2" class="form-control" />265
<label class="form-label" for="form1Example2">Gruppe 9</label>266
</div>267
</div>268
<div class="col">269
<div data-mdb-input-init class="form-outline form-white">270
<input type="number" id="form1Example2" class="form-control" />271
<label class="form-label" for="form1Example2">Gruppe 10</label>272
</div>273
</div>274
</div>275
<div class="row m-2">276
<div class="col">277
<div class="form-check">278
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" />279
<label class="form-check-label" for="flexCheckDefault">Adresssperre</label>280
</div>281
</div>282
<div class="col">283
<div data-mdb-input-init class="form-outline form-white">284
<input type="text" id="form1Example2" class="form-control" />285
<label class="form-label" for="form1Example2">erstellt</label>286
</div>287
</div>288
<div class="col">289
<div data-mdb-input-init class="form-outline form-white">290
<input type="text" id="form1Example2" class="form-control" />291
<label class="form-label" for="form1Example2">geändert</label>292
</div>293
</div>294
<div class="col">295
<div data-mdb-input-init class="form-outline form-white">296
<input type="text" id="form1Example2" class="form-control" />297
<label class="form-label" for="form1Example2">geändert von</label>298
</div>299
</div>300
<div class="col">301
<div class="form-check">302
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault2" />303
<label class="form-check-label" for="flexCheckDefault2">E-Mail-Werbung</label>304
</div>305
</div>306
</div>307
308
309
<!-- Submit button -->310
<button data-mdb-ripple-init type="submit" class="btn m-3 btn-danger">Daten abschicken</button>311
</form>312
</div>xxxxxxxxxx1
body {2
background-color: hsl(321, 86.3%, 40.2%);3
background-image: radial-gradient(4
650px circle at 0% 0%,5
hsl(321, 41%, 35%) 15%,6
hsl(321, 41%, 30%) 35%,7
hsl(321, 41%, 20%) 75%,8
hsl(321, 41%, 19%) 80%,9
transparent 100%10
),11
radial-gradient(12
1250px circle at 100% 100%,13
hsl(321, 41%, 45%) 15%,14
hsl(321, 41%, 30%) 35%,15
hsl(321, 41%, 20%) 75%,16
hsl(321, 41%, 19%) 80%,17
transparent 100%18
);19
height: 100vh;20
padding-left: 70px;21
overflow-x: hidden;22
color: #fff;23
}24
@media (max-width: 991.98px) {25
body {26
height: 100%;27
}28
}29
.bg-theme {30
background-color: hsl(321, 41%, 25%);31
}32
.bg-glass {33
background: hsla(0, 0%, 100%, 0.15);34
backdrop-filter: blur(30px);35
}36
.text-muted {37
color: hsl(0, 0%, 80%) !important;38
}39
.text-success {40
color: hsl(144, 100%, 40.9%) !important;41
}42
.text-danger {43
color: hsl(350, 94.3%, 68.4%) !important;44
}45
.border-bottom {46
border-bottom: 1px solid hsl(0, 0%, 50%) !important;47
}48
.badge {49
padding: 5px 10px;50
}1
1
Console errors: 0