{"id":7002,"date":"2022-04-26T09:00:00","date_gmt":"2022-04-26T07:00:00","guid":{"rendered":"https:\/\/webdeasy.de\/?p=7002"},"modified":"2024-05-31T16:38:07","modified_gmt":"2024-05-31T14:38:07","slug":"css-forms","status":"publish","type":"post","link":"https:\/\/webdeasy.de\/en\/css-forms\/","title":{"rendered":"33 beautiful CSS Forms (Designs)"},"content":{"rendered":"\n<p class=\"has-drop-cap\">CSS Forms should not only serve their practical purpose, but can also look very nice on the side! A list of very descriptive forms can be found here!<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>On many websites and web applications you will encounter form fields. Sometimes they are just simple entries, like a search field or age query. But if you have a whole collection of these fields, they are called forms.<\/p>\n\n\n\n<p>Everyone knows the very simple ones, but can it be a little more fancy? Yes? Great! Because I have made myself on the search and have (in my opinion) very beautiful, user-friendly but also not quite plain forms out and would like to present them to you here.<\/p>\n\n\n\n<p class=\"info-notice info\">The pens shown are licensed with MIT. You can find more info about your own use on the <a href=\"https:\/\/blog.codepen.io\/documentation\/licensing\/\" target=\"_blank\" rel=\"noreferrer noopener\">Codepen Blog<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"1-bootstrap-multistep-form\">#1 Bootstrap MultiStep Form<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"594\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"qrJWpG\" data-user=\"designify-me\" style=\"height: 594px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"\">\n  Bootstrap MultiStep Form<\/a> by Petia (<a href=\"https:\/\/codepen.io\/designify-me\">@designify-me<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAuthor<br>\n\t\t\t\t<span class=\"second-line\">designify-me<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tCoded with<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS (Bootstrap), JS (jQuery, Bootstrap, jQuery Ease)<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/designify-me\/pen\/qrJWpG\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-658\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" id=\"1-bootstrap-multistep-form\">#2 Panda Login<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"668\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"NxqKoY\" data-user=\"vineethtrv\" style=\"height: 668px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/vineethtrv\/pen\/NxqKoY\">\n  Panda Login<\/a> by Vineeth.TR (<a href=\"https:\/\/codepen.io\/vineethtrv\">@vineethtrv<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAuthor<br>\n\t\t\t\t<span class=\"second-line\">Vineeth.TR<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tCoded with<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS (SCSS), JS (jQuery)<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/vineethtrv\/pen\/NxqKoY\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-659\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" id=\"1-bootstrap-multistep-form\">#3 Snake highlight<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"491\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"EQXjOR\" data-user=\"ainalem\" style=\"height: 491px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/ainalem\/pen\/EQXjOR\">\n  Snake highlight<\/a> by Mikael Ainalem (<a href=\"https:\/\/codepen.io\/ainalem\">@ainalem<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAuthor<br>\n\t\t\t\t<span class=\"second-line\">Mikael Ainalem<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tCoded with<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS, JS (anime.js)<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/ainalem\/pen\/EQXjOR\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-660\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" id=\"1-bootstrap-multistep-form\">#4 Step by Step Form Interaction<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"471\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"XbXVRg\" data-user=\"balapa\" style=\"height: 471px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/balapa\/pen\/XbXVRg\">\n  Step by Step Form Interaction<\/a> by balapa (<a href=\"https:\/\/codepen.io\/balapa\">@balapa<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAuthor<br>\n\t\t\t\t<span class=\"second-line\">balapa<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tCoded with<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS, JS (jQuery)<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/balapa\/pen\/XbXVRg\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" id=\"1-bootstrap-multistep-form\">#5 Credit Card Form &#8211; VueJs<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"847\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"YzzNGeR\" data-user=\"JavaScriptJunkie\" style=\"height: 847px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/JavaScriptJunkie\/pen\/YzzNGeR\">\n  Credit Card Form &#8211; VueJs<\/a> by Muhammed Erdem (<a href=\"https:\/\/codepen.io\/JavaScriptJunkie\">@JavaScriptJunkie<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAuthor<br>\n\t\t\t\t<span class=\"second-line\">Muhammed Erdem<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tCoded with<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS (SCSS), JS (Vue, Vue The Mask)<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/JavaScriptJunkie\/pen\/YzzNGeR\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-661\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" id=\"1-bootstrap-multistep-form\">#6 Multi Step Form with Progress Bar<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"553\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"nPOZZR\" data-user=\"atakan\" style=\"height: 553px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/atakan\/pen\/nPOZZR\">\n  Multi Step Form with Progress Bar using jQuery and CSS3<\/a> by Atakan Goktepe (<a href=\"https:\/\/codepen.io\/atakan\">@atakan<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAuthor<br>\n\t\t\t\t<span class=\"second-line\">Atakan Goktepe<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tCoded with<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS, JS (jQuery, jQuery Ease)<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/atakan\/pen\/nPOZZR\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" id=\"1-bootstrap-multistep-form\">#7 Day 001 Login Form<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"766\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"ZGvPLo\" data-user=\"khadkamhn\" style=\"height: 766px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/khadkamhn\/pen\/ZGvPLo\">\n  Day 001 Login Form<\/a> by Mohan Khadka (<a href=\"https:\/\/codepen.io\/khadkamhn\">@khadkamhn<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAuthor<br>\n\t\t\t\t<span class=\"second-line\">Mohan Khadka<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tCoded with<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/khadkamhn\/pen\/ZGvPLo\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-662\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" id=\"1-bootstrap-multistep-form\">#8 Credit Card Payment Form<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"477\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"YONMEa\" data-user=\"quinlo\" style=\"height: 477px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/quinlo\/pen\/YONMEa\">\n  Credit Card Payment Form<\/a> by Adam Quinlan (<a href=\"https:\/\/codepen.io\/quinlo\">@quinlo<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAuthor<br>\n\t\t\t\t<span class=\"second-line\">Adam Quilan<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tCoded with<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS, JS (imask)<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/quinlo\/pen\/YONMEa\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-663\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" id=\"1-bootstrap-multistep-form\">#9 Interactive Form<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"349\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"eZJGpP\" data-user=\"epilande\" style=\"height: 349px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/epilande\/pen\/eZJGpP\">\n  Interactive Form<\/a> by Emmanuel Pilande (<a href=\"https:\/\/codepen.io\/epilande\">@epilande<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAuthor<br>\n\t\t\t\t<span class=\"second-line\">Emmanuel Pilande<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tCoded with<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS (SCSS)<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/epilande\/pen\/eZJGpP\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-664\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" id=\"1-bootstrap-multistep-form\">#10 Material Login Form<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"915\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"RPBdgM\" data-user=\"andytran\" style=\"height: 915px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/andytran\/pen\/RPBdgM\">\n  Material Login Form<\/a> by Andy Tran (<a href=\"https:\/\/codepen.io\/andytran\">@andytran<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAuthor<br>\n\t\t\t\t<span class=\"second-line\">Andy Tran<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tCoded with<br>\n\t\t\t\t\t<span class=\"second-line\">HTML (Pug), CSS (SCSS), JS (jQuery)<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/andytran\/pen\/RPBdgM\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-665\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" id=\"1-bootstrap-multistep-form\">#11 Login Form &#8211; Modal<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"692\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"GpyKLM\" data-user=\"andytran\" style=\"height: 692px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/andytran\/pen\/GpyKLM\">\n  Login Form &#8211; Modal<\/a> by Andy Tran (<a href=\"https:\/\/codepen.io\/andytran\">@andytran<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAuthor<br>\n\t\t\t\t<span class=\"second-line\">Andy Tran<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tCoded with<br>\n\t\t\t\t\t<span class=\"second-line\">HTML (Pug), CSS (SCSS), JS (jQuery)<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/andytran\/pen\/GpyKLM\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" id=\"1-bootstrap-multistep-form\">#12 Form Design<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"639\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"mdYOGv\" data-user=\"Timurtek\" style=\"height: 639px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/Timurtek\/pen\/mdYOGv\">\n  Form Design<\/a> by Timurtek Bizel (<a href=\"https:\/\/codepen.io\/Timurtek\">@Timurtek<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAuthor<br>\n\t\t\t\t<span class=\"second-line\">Timurtek Bizel<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tCoded with<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS, JS (jQuery)<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/Timurtek\/pen\/mdYOGv\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-666\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" id=\"1-bootstrap-multistep-form\">#13 Basic hotel booking form<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"460\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"dypKKb\" data-user=\"andiio\" style=\"height: 460px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/andiio\/pen\/dypKKb\">\n  Basic hotel booking form<\/a> by Andi Dysart (<a href=\"https:\/\/codepen.io\/andiio\">@andiio<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAuthor<br>\n\t\t\t\t<span class=\"second-line\">Andi Dysart<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tCoded with<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS (SCSS), JS (jQuery, jQuery UI Autocomplete)<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/andiio\/pen\/dypKKb\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" id=\"1-bootstrap-multistep-form\">#14 Interactive Sign Up Form<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"377\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"LNEQod\" data-user=\"rkpasia\" style=\"height: 377px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/rkpasia\/pen\/LNEQod\">\n  Interactive Sign Up Form<\/a> by Riccardo Pasianotto (<a href=\"https:\/\/codepen.io\/rkpasia\">@rkpasia<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAuthor<br>\n\t\t\t\t<span class=\"second-line\">Riccardo Pasianotto<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tCoded with<br>\n\t\t\t\t\t<span class=\"second-line\">HTML (Pug), CSS (SCSS), JS (jQuery)<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/rkpasia\/pen\/LNEQod\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" id=\"1-bootstrap-multistep-form\">#15 Login Form<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"458\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"ALOeBL\" data-user=\"dervondenbergen\" style=\"height: 458px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/dervondenbergen\/pen\/ALOeBL\">\n  Login Form 1<\/a> by Felix De Montis (<a href=\"https:\/\/codepen.io\/dervondenbergen\">@dervondenbergen<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAuthor<br>\n\t\t\t\t<span class=\"second-line\">Felix De Montis<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tCoded with<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/dervondenbergen\/pen\/ALOeBL\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"16-minimalistic-form\">#16 Minimalistic Form<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"605\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"pojoPR\" data-user=\"matmarsiglio\" style=\"height: 605px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/matmarsiglio\/pen\/pojoPR\">\n  MINIMALISTIC FORM<\/a> by Matheus Marsiglio (<a href=\"https:\/\/codepen.io\/matmarsiglio\">@matmarsiglio<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAuthor<br>\n\t\t\t\t<span class=\"second-line\">matmarsiglio<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tCoded with<br>\n\t\t\t\t\t<span class=\"second-line\">HTML (Pug), CSS (Sass), JS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/matmarsiglio\/pen\/pojoPR\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-667\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"17-react-signup-form-example\">#17 React signup form example<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"743\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"pvKYZG\" data-user=\"mikepro4\" style=\"height: 743px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/mikepro4\/pen\/pvKYZG\">\n  React signup form example<\/a> by Mikhail Proniushkin (<a href=\"https:\/\/codepen.io\/mikepro4\">@mikepro4<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAuthor<br>\n\t\t\t\t<span class=\"second-line\"><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"18-3d-login-form-concept\">#18 3D login form concept<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"429\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"RVRYeb\" data-user=\"jenning\" style=\"height: 429px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/jenning\/pen\/RVRYeb\">\n  3D login form concept<\/a> by Jenning (<a href=\"https:\/\/codepen.io\/jenning\">@jenning<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAuthor<br>\n\t\t\t\t<span class=\"second-line\">jenning<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tCoded with<br>\n\t\t\t\t\t<span class=\"second-line\">HTML (Pug), CSS (Sass), JS (jQuery)<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/jenning\/pen\/RVRYeb\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"19-unfolding-login-form\">#19 Unfolding Login Form<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"504\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"bGpWXm\" data-user=\"hans\" style=\"height: 504px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/hans\/pen\/bGpWXm\">\n  Unfolding Login Form<\/a> by Hans Engebretsen (<a href=\"https:\/\/codepen.io\/hans\">@hans<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAuthor<br>\n\t\t\t\t<span class=\"second-line\">hans<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tCoded with<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS (SCSS), JS (jQuery)<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/hans\/pen\/bGpWXm\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-668\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"20-log-in-form-css-2017\">#20 Log In Form CSS 2017<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"624\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"LLVaqx\" data-user=\"linux\" style=\"height: 624px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/linux\/pen\/LLVaqx\">\n  Log In Form CSS  2017<\/a> by Omar Dsooky (<a href=\"https:\/\/codepen.io\/linux\">@linux<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAuthor<br>\n\t\t\t\t<span class=\"second-line\">linux<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/linux\/pen\/LLVaqx\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"21-log-in-sign-up\">#21 Log in \/ Sign up<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"566\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"QErqyE\" data-user=\"Anna_Batura\" style=\"height: 566px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/Anna_Batura\/pen\/QErqyE\">\n  Log in \/ Sign up<\/a> by @BrawadaCom (<a href=\"https:\/\/codepen.io\/Anna_Batura\">@Anna_Batura<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAuthor<br>\n\t\t\t\t<span class=\"second-line\">Anna_Batura<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tCoded with<br>\n\t\t\t\t\t<span class=\"second-line\">HTML (Slim), CSS (Sass), JS (jQuery)<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/Anna_Batura\/pen\/QErqyE\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"22-login-form-with-floating-placeholder-and-light-button\">#22 Login Form with floating placeholder and light button<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"527\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"LYpPWda\" data-user=\"soufiane-khalfaoui-hassani\" style=\"height: 527px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/soufiane-khalfaoui-hassani\/pen\/LYpPWda\">\n  Login Form with floating placeholder and light button<\/a> by Soufiane Khalfaoui HaSsani (<a href=\"https:\/\/codepen.io\/soufiane-khalfaoui-hassani\">@soufiane-khalfaoui-hassani<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAuthor<br>\n\t\t\t\t<span class=\"second-line\">soufiane-khalfaoui-hassani<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tCoded with<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/soufiane-khalfaoui-hassani\/pen\/LYpPWda\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"23-double-slider-sign-in-up-form\">#23 Double slider Sign in\/up Form<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"700\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"vPKWjd\" data-user=\"FlorinPop17\" style=\"height: 700px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/FlorinPop17\/pen\/vPKWjd\">\n  Weekly Coding Challenge #1 &#8211;  Double slider Sign in\/up Form &#8211; Desktop Only<\/a> by Florin Pop (<a href=\"https:\/\/codepen.io\/FlorinPop17\">@FlorinPop17<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAuthor<br>\n\t\t\t\t<span class=\"second-line\">FlorinPop17<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tCoded with<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS, JS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/FlorinPop17\/pen\/vPKWjd\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"24-login\">#24 Login<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"392\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"nbpKWV\" data-user=\"marcobiedermann\" style=\"height: 392px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/marcobiedermann\/pen\/nbpKWV\">\n  Login<\/a> by Marco Biedermann (<a href=\"https:\/\/codepen.io\/marcobiedermann\">@marcobiedermann<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAuthor<br>\n\t\t\t\t<span class=\"second-line\">marcobiedermann<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tCoded with<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS (PostCSS)<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/marcobiedermann\/pen\/nbpKWV\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"25-log-in-sign-up-pure-css\">#25 Log In\/Sign Up &#8211; pure css<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"684\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"KKVQpVP\" data-user=\"ig_design\" style=\"height: 684px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/ig_design\/pen\/KKVQpVP\">\n  Log In \/ Sign Up &#8211; pure css &#8211; #12<\/a> by Ivan Grozdic (<a href=\"https:\/\/codepen.io\/ig_design\">@ig_design<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAuthor<br>\n\t\t\t\t<span class=\"second-line\">ig_design<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tCoded with<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/ig_design\/pen\/KKVQpVP\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-669\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"26-slide-sign-in-sign-up-form\">#26 Slide Sign In\/Sign Up form<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"567\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"LYNVyPL\" data-user=\"danielarlert\" style=\"height: 567px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/danielarlert\/pen\/LYNVyPL\">\n  Slide Sign In\/Sign Up form<\/a> by Daniel (<a href=\"https:\/\/codepen.io\/danielarlert\">@danielarlert<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAuthor<br>\n\t\t\t\t<span class=\"second-line\">danielarlert<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tCoded with<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS, JS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/danielarlert\/pen\/LYNVyPL\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-670\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"27-form-switch-animation-2023\">#27 Form Switch Animation (2023)<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"715\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"XWyBpre\" data-user=\"suez\" style=\"height: 715px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/suez\/pen\/XWyBpre\">\n  Form Switch Animation (2023)<\/a> by Nikolay Talanov (<a href=\"https:\/\/codepen.io\/suez\">@suez<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAuthor<br>\n\t\t\t\t<span class=\"second-line\">suez<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tCoded with<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS (SCSS), JS (TypeScript)<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/suez\/pen\/XWyBpre\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-671\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"28-flat-login-form\">#28 Flat Login Form<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"606\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"PwoQgO\" data-user=\"andytran\" style=\"height: 606px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/andytran\/pen\/PwoQgO\">\n  Flat Login Form 3.0<\/a> by Andy Tran (<a href=\"https:\/\/codepen.io\/andytran\">@andytran<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAuthor<br>\n\t\t\t\t<span class=\"second-line\">andytran<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tCoded with<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS (SCSS), JS (jQuery)<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/andytran\/pen\/PwoQgO\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-672\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"29-responsive-signup-login-form\">#29 Responsive Signup\/Login form<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"692\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"JbJzZv\" data-user=\"Mhmdhasan\" style=\"height: 692px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/Mhmdhasan\/pen\/JbJzZv\">\n  Responsive Signup\/Login form<\/a> by Mohamed Hasan (<a href=\"https:\/\/codepen.io\/Mhmdhasan\">@Mhmdhasan<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAuthor<br>\n\t\t\t\t<span class=\"second-line\">Mhmdhasan<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tCoded with<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS (Sass), Bootstrap, JS (jQuery)<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/Mhmdhasan\/pen\/JbJzZv\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"30-material-bootstrap-wizard\">#30 Material Bootstrap Wizard<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"787\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"EgVBXa\" data-user=\"creativetim\" style=\"height: 787px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/creativetim\/pen\/EgVBXa\">\n  Material Bootstrap Wizard<\/a> by Creative Tim (<a href=\"https:\/\/codepen.io\/creativetim\">@creativetim<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAuthor<br>\n\t\t\t\t<span class=\"second-line\">creativetim<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tCoded with<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS, JS (jQuery)<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/creativetim\/pen\/EgVBXa\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-673\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"31-login-register-form\">#31 Login, Register Form<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"525\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"qBKKBR\" data-user=\"vikasverma93\" style=\"height: 525px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/vikasverma93\/pen\/qBKKBR\">\n  Login, Register form<\/a> by Vikas Verma (<a href=\"https:\/\/codepen.io\/vikasverma93\">@vikasverma93<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAuthor<br>\n\t\t\t\t<span class=\"second-line\">vikasverma93<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tCoded with<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS, JS (jQuery)<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/vikasverma93\/pen\/qBKKBR\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"32-login-signup-form-animatino\">#32 Login\/signup form animatino<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"669\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"eVMMgO\" data-user=\"shayanea\" style=\"height: 669px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/shayanea\/pen\/eVMMgO\">\n  login\/signup form animation<\/a> by Shayan (<a href=\"https:\/\/codepen.io\/shayanea\">@shayanea<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAuthor<br>\n\t\t\t\t<span class=\"second-line\">shayanea<\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tCoded with<br>\n\t\t\t\t\t<span class=\"second-line\">HTML, CSS (SCSS), JS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"https:\/\/codepen.io\/shayanea\/pen\/eVMMgO\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t\t\t<div id=\"ezoic-pub-ad-placeholder-674\"><\/div>\n\t\t\t<\/div>\n\n\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"33-step-by-step-register-form\">#33 Step by step register form<\/h2>\n\n\n\n<p style=\"display: none;\" class=\"codepen-not-loaded\" data-height=\"303\" data-theme-id=\"dark\" data-default-tab=\"result\" data-slug-hash=\"EPNxPv\" data-user=\"JeromeRenders\" style=\"height: 303px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/JeromeRenders\/pen\/EPNxPv\">\n  Step by step register form<\/a> by Jerome Renders (<a href=\"https:\/\/codepen.io\/JeromeRenders\">@JeromeRenders<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n\t<div class=\"codepen-info-container\">\n\t\t<div class=\"col\">\n\t\t\t<p class=\"discriminator pen-author\">\n\t\t\t\tAuthor<br>\n\t\t\t\t<span class=\"second-line\"><\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"discriminator tech-stack\">\n\t\t\t\t\tCoded with<br>\n\t\t\t\t\t<span class=\"second-line\">HTML (Pug), CSS (Sass), JS<\/span>\n\t\t\t\t<\/p>\n\t\t\t<\/div>\n\t\t\t\t\t\t\t<div class=\"col\">\n\t\t\t\t<p class=\"custom-margin\"><a class=\"outline-btn\" title=\"Get code\" href=\"\" target=\"_blank\">\n\t\t\t\t\t\t<svg width=\"800px\" height=\"800px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t\t\t\t\t\t\t<path d=\"M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M13.9868 5L12.9934 8.70743M11.8432 13L10.0132 19.8297\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t\t<path d=\"M7.00005 7.82959L5.30358 9.35641C3.76102 10.7447 2.98975 11.4389 2.98975 12.3296C2.98975 13.2203 3.76102 13.9145 5.30358 15.3028L7.00005 16.8296\" stroke=\"#1C274C\" stroke-width=\"1.5\" stroke-linecap=\"round\" \/>\n\t\t\t\t\t\t<\/svg>\n\t\t\t\t\t\t<span>Get code<\/span>\n\t\t\t\t\t<\/a><\/p>\n\t\t\t<\/div>\n\t\t\t<\/div>\n\t<div class=\"webdeasy-cab\">\n\t\t\t<\/div>\n\n\n\n\n\n<p>Which form did you like the most? If you also published an awesome Form on Codepen, feel free to let me know so I can expand this list! \ud83d\ude42<\/p>\n\n\n\n<p class=\"info-notice info\">Note: All forms are all published on <a href=\"https:\/\/codepen.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">codepen.io<\/a> and <span style=\"text-decoration: underline;\">not<\/span> by me.<\/p>\n\n\n\n<p>Not enough yet? Then this could be something for you:<\/p>\n\n\n<div class=\"post-container post-preview-container nw1200 category-shortcut \">\n<div class=\"entry-item\" id=\"post-9809\">\n\t<div class=\"post-entry\">\n\t\t\n\n\t\t\n\t\t<a onClick=\"_paq.push(['trackEvent', 'Link', 'Click', 'Category (image) Excerpt for &quot;30+ CSS Cards&quot;']);\" href=\"https:\/\/webdeasy.de\/css-cards\/\" class=\"header-container shorter \" title=\"30+ CSS Cards\" style=\"background-image: url(https:\/\/webdeasy.de\/wp-content\/uploads\/2024\/07\/css-cards-350x150.jpg)\"><\/a>\n\t\t<div class=\"content-container shorter\">\n\t\t\t<span><a onClick=\"_paq.push(['trackEvent', 'Link', 'Click', 'Category (headline) Excerpt for &quot;30+ CSS Cards&quot;']);\" title=\"30+ CSS Cards\" href=\"https:\/\/webdeasy.de\/css-cards\/\">30+ CSS Cards<\/a><\/span>\t\t<\/div>\n\t<\/div>\n<\/div>\n<div class=\"entry-item\" id=\"post-8780\">\n\t<div class=\"post-entry\">\n\t\t\n\n\t\t\n\t\t<a onClick=\"_paq.push(['trackEvent', 'Link', 'Click', 'Category (image) Excerpt for &quot;30 CSS Background Pattern&quot;']);\" href=\"https:\/\/webdeasy.de\/css-background-pattern\/\" class=\"header-container shorter \" title=\"30 CSS Background Pattern\" style=\"background-image: url(https:\/\/webdeasy.de\/wp-content\/uploads\/2023\/08\/css-background-pattern-1-350x150.jpg)\"><\/a>\n\t\t<div class=\"content-container shorter\">\n\t\t\t<span><a onClick=\"_paq.push(['trackEvent', 'Link', 'Click', 'Category (headline) Excerpt for &quot;30 CSS Background Pattern&quot;']);\" title=\"30 CSS Background Pattern\" href=\"https:\/\/webdeasy.de\/css-background-pattern\/\">30 CSS Background Pattern<\/a><\/span>\t\t<\/div>\n\t<\/div>\n<\/div>\n<div class=\"entry-item\" id=\"post-6931\">\n\t<div class=\"post-entry\">\n\t\t\n\n\t\t\n\t\t<a onClick=\"_paq.push(['trackEvent', 'Link', 'Click', 'Category (image) Excerpt for &quot;33 CSS Formulare (Design Inspirationen)&quot;']);\" href=\"https:\/\/webdeasy.de\/css-formulare\/\" class=\"header-container shorter \" title=\"33 CSS Formulare (Design Inspirationen)\" style=\"background-image: url(https:\/\/webdeasy.de\/wp-content\/uploads\/2022\/02\/css-forms-350x150.jpg)\"><\/a>\n\t\t<div class=\"content-container shorter\">\n\t\t\t<span><a onClick=\"_paq.push(['trackEvent', 'Link', 'Click', 'Category (headline) Excerpt for &quot;33 CSS Formulare (Design Inspirationen)&quot;']);\" title=\"33 CSS Formulare (Design Inspirationen)\" href=\"https:\/\/webdeasy.de\/css-formulare\/\">33 CSS Formulare (Design Inspirationen)<\/a><\/span>\t\t<\/div>\n\t<\/div>\n<\/div>\n<div class=\"entry-item\" id=\"post-4919\">\n\t<div class=\"post-entry\">\n\t\t\n\n\t\t\n\t\t<a onClick=\"_paq.push(['trackEvent', 'Link', 'Click', 'Category (image) Excerpt for &quot;15 geniale CSS Hamburger Menus (+ Animationen)&quot;']);\" href=\"https:\/\/webdeasy.de\/css-hamburger-menus\/\" class=\"header-container shorter \" title=\"15 geniale CSS Hamburger Menus (+ Animationen)\" style=\"background-image: url(https:\/\/webdeasy.de\/wp-content\/uploads\/2021\/11\/css-hamburger-menus-350x150.jpg)\"><\/a>\n\t\t<div class=\"content-container shorter\">\n\t\t\t<span><a onClick=\"_paq.push(['trackEvent', 'Link', 'Click', 'Category (headline) Excerpt for &quot;15 geniale CSS Hamburger Menus (+ Animationen)&quot;']);\" title=\"15 geniale CSS Hamburger Menus (+ Animationen)\" href=\"https:\/\/webdeasy.de\/css-hamburger-menus\/\">15 geniale CSS Hamburger Menus (+ Animationen)<\/a><\/span>\t\t<\/div>\n\t<\/div>\n<\/div>\n<div class=\"entry-item\" id=\"post-3771\">\n\t<div class=\"post-entry\">\n\t\t\n\n\t\t\n\t\t<a onClick=\"_paq.push(['trackEvent', 'Link', 'Click', 'Category (image) Excerpt for &quot;60 CSS Ladeanimationen&quot;']);\" href=\"https:\/\/webdeasy.de\/css-ladeanimationen\/\" class=\"header-container shorter \" title=\"60 CSS Ladeanimationen\" style=\"background-image: url(https:\/\/webdeasy.de\/wp-content\/uploads\/2020\/10\/loading-animations-350x150.jpg)\"><\/a>\n\t\t<div class=\"content-container shorter\">\n\t\t\t<span><a onClick=\"_paq.push(['trackEvent', 'Link', 'Click', 'Category (headline) Excerpt for &quot;60 CSS Ladeanimationen&quot;']);\" title=\"60 CSS Ladeanimationen\" href=\"https:\/\/webdeasy.de\/css-ladeanimationen\/\">60 CSS Ladeanimationen<\/a><\/span>\t\t<\/div>\n\t<\/div>\n<\/div>\n<div class=\"entry-item\" id=\"post-3444\">\n\t<div class=\"post-entry\">\n\t\t\n\n\t\t\n\t\t<a onClick=\"_paq.push(['trackEvent', 'Link', 'Click', 'Category (image) Excerpt for &quot;35 HTML 404 Seiten Templates&quot;']);\" href=\"https:\/\/webdeasy.de\/html-css-404-seiten-templates\/\" class=\"header-container shorter \" title=\"35 HTML 404 Seiten Templates\" style=\"background-image: url(https:\/\/webdeasy.de\/wp-content\/uploads\/2020\/06\/404-pages-350x150.jpg)\"><\/a>\n\t\t<div class=\"content-container shorter\">\n\t\t\t<span><a onClick=\"_paq.push(['trackEvent', 'Link', 'Click', 'Category (headline) Excerpt for &quot;35 HTML 404 Seiten Templates&quot;']);\" title=\"35 HTML 404 Seiten Templates\" href=\"https:\/\/webdeasy.de\/html-css-404-seiten-templates\/\">35 HTML 404 Seiten Templates<\/a><\/span>\t\t<\/div>\n\t<\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>CSS Forms should not only serve their practical purpose, but can also look very nice on the side! A list of very descriptive forms can [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":6998,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[249,584],"tags":[],"class_list":["post-7002","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-en","category-css-collection-en","entry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>33 beautiful CSS Forms (Designs)<\/title>\n<meta name=\"description\" content=\"CSS forms serve their practical purpose - and by the way, they can also look damn good: A top selection can be found here!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webdeasy.de\/en\/css-forms\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"33 beautiful CSS Forms (Designs)\" \/>\n<meta property=\"og:description\" content=\"CSS forms serve their practical purpose - and by the way, they can also look damn good: A top selection can be found here!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webdeasy.de\/en\/css-forms\/\" \/>\n<meta property=\"og:site_name\" content=\"webdeasy.de\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-26T07:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-31T14:38:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webdeasy.de\/wp-content\/uploads\/2022\/02\/css-forms.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1400\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Lorenz\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webdeasy\" \/>\n<meta name=\"twitter:site\" content=\"@webdeasy\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Lorenz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"4\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"TechArticle\",\"@id\":\"https:\\\/\\\/webdeasy.de\\\/en\\\/css-forms\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webdeasy.de\\\/en\\\/css-forms\\\/\"},\"author\":{\"name\":\"Lorenz\",\"@id\":\"https:\\\/\\\/webdeasy.de\\\/#\\\/schema\\\/person\\\/42d507baee923988d706529843341fd7\"},\"headline\":\"33 beautiful CSS Forms (Designs)\",\"datePublished\":\"2022-04-26T07:00:00+00:00\",\"dateModified\":\"2024-05-31T14:38:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/webdeasy.de\\\/en\\\/css-forms\\\/\"},\"wordCount\":1259,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/webdeasy.de\\\/#\\\/schema\\\/person\\\/42d507baee923988d706529843341fd7\"},\"image\":{\"@id\":\"https:\\\/\\\/webdeasy.de\\\/en\\\/css-forms\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webdeasy.de\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/css-forms.jpg\",\"articleSection\":[\"CSS\",\"CSS Collections\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/webdeasy.de\\\/en\\\/css-forms\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/webdeasy.de\\\/en\\\/css-forms\\\/\",\"url\":\"https:\\\/\\\/webdeasy.de\\\/en\\\/css-forms\\\/\",\"name\":\"33 beautiful CSS Forms (Designs)\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webdeasy.de\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/webdeasy.de\\\/en\\\/css-forms\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/webdeasy.de\\\/en\\\/css-forms\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webdeasy.de\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/css-forms.jpg\",\"datePublished\":\"2022-04-26T07:00:00+00:00\",\"dateModified\":\"2024-05-31T14:38:07+00:00\",\"description\":\"CSS forms serve their practical purpose - and by the way, they can also look damn good: A top selection can be found here!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/webdeasy.de\\\/en\\\/css-forms\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/webdeasy.de\\\/en\\\/css-forms\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/webdeasy.de\\\/en\\\/css-forms\\\/#primaryimage\",\"url\":\"https:\\\/\\\/webdeasy.de\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/css-forms.jpg\",\"contentUrl\":\"https:\\\/\\\/webdeasy.de\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/css-forms.jpg\",\"width\":1400,\"height\":600},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/webdeasy.de\\\/en\\\/css-forms\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/webdeasy.de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\\\/\\\/webdeasy.de\\\/en\\\/category\\\/css-en\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"33 beautiful CSS Forms (Designs)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/webdeasy.de\\\/#website\",\"url\":\"https:\\\/\\\/webdeasy.de\\\/\",\"name\":\"webdeasy.de\",\"description\":\"Backend-Development, DevOps &amp; Co.\",\"publisher\":{\"@id\":\"https:\\\/\\\/webdeasy.de\\\/#\\\/schema\\\/person\\\/42d507baee923988d706529843341fd7\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/webdeasy.de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/webdeasy.de\\\/#\\\/schema\\\/person\\\/42d507baee923988d706529843341fd7\",\"name\":\"Lorenz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/webdeasy.de\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/cropped-webdeasy-logo-3.png\",\"url\":\"https:\\\/\\\/webdeasy.de\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/cropped-webdeasy-logo-3.png\",\"contentUrl\":\"https:\\\/\\\/webdeasy.de\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/cropped-webdeasy-logo-3.png\",\"width\":190,\"height\":190,\"caption\":\"Lorenz\"},\"logo\":{\"@id\":\"https:\\\/\\\/webdeasy.de\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/cropped-webdeasy-logo-3.png\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/webdeasy\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"33 beautiful CSS Forms (Designs)","description":"CSS forms serve their practical purpose - and by the way, they can also look damn good: A top selection can be found here!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webdeasy.de\/en\/css-forms\/","og_locale":"de_DE","og_type":"article","og_title":"33 beautiful CSS Forms (Designs)","og_description":"CSS forms serve their practical purpose - and by the way, they can also look damn good: A top selection can be found here!","og_url":"https:\/\/webdeasy.de\/en\/css-forms\/","og_site_name":"webdeasy.de","article_published_time":"2022-04-26T07:00:00+00:00","article_modified_time":"2024-05-31T14:38:07+00:00","og_image":[{"width":1400,"height":600,"url":"https:\/\/webdeasy.de\/wp-content\/uploads\/2022\/02\/css-forms.jpg","type":"image\/jpeg"}],"author":"Lorenz","twitter_card":"summary_large_image","twitter_creator":"@webdeasy","twitter_site":"@webdeasy","twitter_misc":{"Verfasst von":"Lorenz","Gesch\u00e4tzte Lesezeit":"4\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"TechArticle","@id":"https:\/\/webdeasy.de\/en\/css-forms\/#article","isPartOf":{"@id":"https:\/\/webdeasy.de\/en\/css-forms\/"},"author":{"name":"Lorenz","@id":"https:\/\/webdeasy.de\/#\/schema\/person\/42d507baee923988d706529843341fd7"},"headline":"33 beautiful CSS Forms (Designs)","datePublished":"2022-04-26T07:00:00+00:00","dateModified":"2024-05-31T14:38:07+00:00","mainEntityOfPage":{"@id":"https:\/\/webdeasy.de\/en\/css-forms\/"},"wordCount":1259,"commentCount":1,"publisher":{"@id":"https:\/\/webdeasy.de\/#\/schema\/person\/42d507baee923988d706529843341fd7"},"image":{"@id":"https:\/\/webdeasy.de\/en\/css-forms\/#primaryimage"},"thumbnailUrl":"https:\/\/webdeasy.de\/wp-content\/uploads\/2022\/02\/css-forms.jpg","articleSection":["CSS","CSS Collections"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webdeasy.de\/en\/css-forms\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webdeasy.de\/en\/css-forms\/","url":"https:\/\/webdeasy.de\/en\/css-forms\/","name":"33 beautiful CSS Forms (Designs)","isPartOf":{"@id":"https:\/\/webdeasy.de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webdeasy.de\/en\/css-forms\/#primaryimage"},"image":{"@id":"https:\/\/webdeasy.de\/en\/css-forms\/#primaryimage"},"thumbnailUrl":"https:\/\/webdeasy.de\/wp-content\/uploads\/2022\/02\/css-forms.jpg","datePublished":"2022-04-26T07:00:00+00:00","dateModified":"2024-05-31T14:38:07+00:00","description":"CSS forms serve their practical purpose - and by the way, they can also look damn good: A top selection can be found here!","breadcrumb":{"@id":"https:\/\/webdeasy.de\/en\/css-forms\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webdeasy.de\/en\/css-forms\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/webdeasy.de\/en\/css-forms\/#primaryimage","url":"https:\/\/webdeasy.de\/wp-content\/uploads\/2022\/02\/css-forms.jpg","contentUrl":"https:\/\/webdeasy.de\/wp-content\/uploads\/2022\/02\/css-forms.jpg","width":1400,"height":600},{"@type":"BreadcrumbList","@id":"https:\/\/webdeasy.de\/en\/css-forms\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webdeasy.de\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/webdeasy.de\/en\/category\/css-en\/"},{"@type":"ListItem","position":3,"name":"33 beautiful CSS Forms (Designs)"}]},{"@type":"WebSite","@id":"https:\/\/webdeasy.de\/#website","url":"https:\/\/webdeasy.de\/","name":"webdeasy.de","description":"Backend-Development, DevOps &amp; Co.","publisher":{"@id":"https:\/\/webdeasy.de\/#\/schema\/person\/42d507baee923988d706529843341fd7"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webdeasy.de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":["Person","Organization"],"@id":"https:\/\/webdeasy.de\/#\/schema\/person\/42d507baee923988d706529843341fd7","name":"Lorenz","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/webdeasy.de\/wp-content\/uploads\/2019\/09\/cropped-webdeasy-logo-3.png","url":"https:\/\/webdeasy.de\/wp-content\/uploads\/2019\/09\/cropped-webdeasy-logo-3.png","contentUrl":"https:\/\/webdeasy.de\/wp-content\/uploads\/2019\/09\/cropped-webdeasy-logo-3.png","width":190,"height":190,"caption":"Lorenz"},"logo":{"@id":"https:\/\/webdeasy.de\/wp-content\/uploads\/2019\/09\/cropped-webdeasy-logo-3.png"},"sameAs":["https:\/\/x.com\/webdeasy"]}]}},"_links":{"self":[{"href":"https:\/\/webdeasy.de\/wp-json\/wp\/v2\/posts\/7002","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webdeasy.de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdeasy.de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdeasy.de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webdeasy.de\/wp-json\/wp\/v2\/comments?post=7002"}],"version-history":[{"count":3,"href":"https:\/\/webdeasy.de\/wp-json\/wp\/v2\/posts\/7002\/revisions"}],"predecessor-version":[{"id":9390,"href":"https:\/\/webdeasy.de\/wp-json\/wp\/v2\/posts\/7002\/revisions\/9390"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webdeasy.de\/wp-json\/wp\/v2\/media\/6998"}],"wp:attachment":[{"href":"https:\/\/webdeasy.de\/wp-json\/wp\/v2\/media?parent=7002"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdeasy.de\/wp-json\/wp\/v2\/categories?post=7002"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdeasy.de\/wp-json\/wp\/v2\/tags?post=7002"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}