Transparent Login Form HTML CSS<\/title>\n <link rel=\"stylesheet\" href=\"style.css\">\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/5.15.3\/css\/all.min.css\"\/>\n <\/head>\n <body>\n <div class=\"bg-img\">\n <div class=\"content\">\n <header>Login Form<\/header>\n <form action=\"#\">\n <div class=\"field\">\n <span class=\"fa fa-user\"><\/span>\n <input type=\"text\" required placeholder=\"Email or Phone\">\n <\/div>\n <div class=\"field space\">\n <span class=\"fa fa-lock\"><\/span>\n <input type=\"password\" class=\"pass-key\" required placeholder=\"Password\">\n <span class=\"show\">SHOW<\/span>\n <\/div>\n <div class=\"pass\">\n <a href=\"#\">Forgot Password?<\/a>\n <\/div>\n <div class=\"field\">\n <input type=\"submit\" value=\"LOGIN\">\n <\/div>\n <\/form>\n <div class=\"login\">\n Or login with\n <\/div>\n <div class=\"links\">\n <div class=\"facebook\">\n <i class=\"fab fa-facebook-f\"><span>Facebook<\/span><\/i>\n <\/div>\n <div class=\"instagram\">\n <i class=\"fab fa-instagram\"><span>Instagram<\/span><\/i>\n <\/div>\n <\/div>\n <div class=\"signup\">\n Don’t have account?\n <a href=\"#\">Signup Now<\/a>\n <\/div>\n <\/div>\n <\/div>\n <script>\n const pass_field = document.querySelector('.pass-key');\n const showBtn = document.querySelector('.show');\n showBtn.addEventListener('click', function(){\n if(pass_field.type === \"password\"){\n pass_field.type = \"text\";\n showBtn.textContent = \"HIDE\";\n showBtn.style.color = \"#3498db\";\n }else{\n pass_field.type = \"password\";\n showBtn.textContent = \"SHOW\";\n showBtn.style.color = \"#222\";\n }\n });\n <\/script>\n <\/body>\n<\/html>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-8ab95b4 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"8ab95b4\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-86cd342\" data-id=\"86cd342\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-fecb0dd elementor-section-full_width elementor-section-height-full elementor-section-height-default\" data-id=\"fecb0dd\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-wide\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-ec1b790\" data-id=\"ec1b790\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-481f555\" data-id=\"481f555\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Transparent Login Form HTML CSS Login Form SHOW Forgot Password? Or login with Facebook Instagram Don’t have account? Signup Now<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"jetpack_post_was_ever_published":false,"footnotes":""},"class_list":["post-4285","page","type-page","status-publish","hentry"],"jetpack-related-posts":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/caratbook.com\/index.php?rest_route=\/wp\/v2\/pages\/4285","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/caratbook.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/caratbook.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/caratbook.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/caratbook.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4285"}],"version-history":[{"count":11,"href":"https:\/\/caratbook.com\/index.php?rest_route=\/wp\/v2\/pages\/4285\/revisions"}],"predecessor-version":[{"id":4323,"href":"https:\/\/caratbook.com\/index.php?rest_route=\/wp\/v2\/pages\/4285\/revisions\/4323"}],"wp:attachment":[{"href":"https:\/\/caratbook.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4285"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\n\n\n \n \n Transparent Login Form HTML CSS<\/title>\n <link rel=\"stylesheet\" href=\"style.css\">\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/5.15.3\/css\/all.min.css\"\/>\n <\/head>\n <body>\n <div class=\"bg-img\">\n <div class=\"content\">\n <header>Login Form<\/header>\n <form action=\"#\">\n <div class=\"field\">\n <span class=\"fa fa-user\"><\/span>\n <input type=\"text\" required placeholder=\"Email or Phone\">\n <\/div>\n <div class=\"field space\">\n <span class=\"fa fa-lock\"><\/span>\n <input type=\"password\" class=\"pass-key\" required placeholder=\"Password\">\n <span class=\"show\">SHOW<\/span>\n <\/div>\n <div class=\"pass\">\n <a href=\"#\">Forgot Password?<\/a>\n <\/div>\n <div class=\"field\">\n <input type=\"submit\" value=\"LOGIN\">\n <\/div>\n <\/form>\n <div class=\"login\">\n Or login with\n <\/div>\n <div class=\"links\">\n <div class=\"facebook\">\n <i class=\"fab fa-facebook-f\"><span>Facebook<\/span><\/i>\n <\/div>\n <div class=\"instagram\">\n <i class=\"fab fa-instagram\"><span>Instagram<\/span><\/i>\n <\/div>\n <\/div>\n <div class=\"signup\">\n Don’t have account?\n <a href=\"#\">Signup Now<\/a>\n <\/div>\n <\/div>\n <\/div>\n <script>\n const pass_field = document.querySelector('.pass-key');\n const showBtn = document.querySelector('.show');\n showBtn.addEventListener('click', function(){\n if(pass_field.type === \"password\"){\n pass_field.type = \"text\";\n showBtn.textContent = \"HIDE\";\n showBtn.style.color = \"#3498db\";\n }else{\n pass_field.type = \"password\";\n showBtn.textContent = \"SHOW\";\n showBtn.style.color = \"#222\";\n }\n });\n <\/script>\n <\/body>\n<\/html>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-8ab95b4 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"8ab95b4\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-86cd342\" data-id=\"86cd342\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-fecb0dd elementor-section-full_width elementor-section-height-full elementor-section-height-default\" data-id=\"fecb0dd\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-wide\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-ec1b790\" data-id=\"ec1b790\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-481f555\" data-id=\"481f555\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Transparent Login Form HTML CSS Login Form SHOW Forgot Password? Or login with Facebook Instagram Don’t have account? Signup Now<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"jetpack_post_was_ever_published":false,"footnotes":""},"class_list":["post-4285","page","type-page","status-publish","hentry"],"jetpack-related-posts":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/caratbook.com\/index.php?rest_route=\/wp\/v2\/pages\/4285","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/caratbook.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/caratbook.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/caratbook.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/caratbook.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4285"}],"version-history":[{"count":11,"href":"https:\/\/caratbook.com\/index.php?rest_route=\/wp\/v2\/pages\/4285\/revisions"}],"predecessor-version":[{"id":4323,"href":"https:\/\/caratbook.com\/index.php?rest_route=\/wp\/v2\/pages\/4285\/revisions\/4323"}],"wp:attachment":[{"href":"https:\/\/caratbook.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4285"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}