I am trying to align center text inside a label tag for a login page to make it look better on mobile devices, but can’t figure it out. I have seen lots of questions asking how to align a label tag in the center on StackOverflow and Sitepoint and lots of other sites, but none of them works for me. Here is my code (There is PHP, but just ignore it):
<!DOCTYPE html>
<html>
<head>
<title>Signup || Learn Alien Code</title>
<link rel="stylesheet" href="signlog-css\style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<meta charset="UTF-8">
<meta name="description" content="Learn coding for free or a very low price!">
<meta name="keywords" content="learn coding,coding,code">
<meta name="author" content="Samuel Hart">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="alien.jpg">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<script src="https://kit.fontawesome.com/22a4115590.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
</head>
<body id="body">
<!--<div class="container">-->
<h2>Learn Alien Code<br>
<a href="index.php">
<div class="css-zcxndt css-1tyndxa css-1igu0u1 css-k008qs"><div class="css-zcxndt css-1tyndxa css-19suvlm css-k008qs"><div class="css-1l1io5o"></div></div><div class="css-1s0pkok"></div><div style="transform: scale(1);"><svg style="margin-top:0;" width="300" height="80" viewBox="0 0 389.6800231933594 62.4429931640625" class="css-1j8o68f"><defs id="SvgjsDefs2887"><linearGradient id="SvgjsLinearGradient2894"><stop id="SvgjsStop2895" stop-color="#8f5e25" offset="0"></stop><stop id="SvgjsStop2896" stop-color="#fbf4a1" offset="0.5"></stop><stop id="SvgjsStop2897" stop-color="#8f5e25" offset="1"></stop></linearGradient><linearGradient id="SvgjsLinearGradient2898"><stop id="SvgjsStop2899" stop-color="#8f5e25" offset="0"></stop><stop id="SvgjsStop2900" stop-color="#fbf4a1" offset="0.5"></stop><stop id="SvgjsStop2901" stop-color="#8f5e25" offset="1"></stop></linearGradient><linearGradient id="SvgjsLinearGradient2902"><stop id="SvgjsStop2903" stop-color="#8f5e25" offset="0"></stop><stop id="SvgjsStop2904" stop-color="#fbf4a1" offset="0.5"></stop><stop id="SvgjsStop2905" stop-color="#8f5e25" offset="1"></stop></linearGradient></defs><g id="SvgjsG2888" featurekey="symbolFeature-0" transform="matrix(1,0,0,1,0,-18.788999557495117)" fill="url(#SvgjsLinearGradient2894)"><g xmlns="http://www.w3.org/2000/svg"><g><path d="M97.938,68.771h-6.316V20.81c0-1.115-0.905-2.021-2.021-2.021H10.399c-1.115,0-2.021,0.906-2.021,2.021v47.961H2.062 C0.924,68.771,0,69.694,0,70.832v2.084c0,0.103,0.008,0.204,0.022,0.306c0.527,3.521,3.348,7.447,7.159,7.922 c0.083,0.01,0.169,0.017,0.252,0.017l84.51,0.071h0.003c4.404,0,7.604-4.197,8.041-8.085c0.009-0.075,0.013-0.152,0.013-0.23 v-2.084C100,69.694,99.076,68.771,97.938,68.771z M12.42,22.831h75.16v45.939H59.985c-0.133,0-0.262,0.016-0.386,0.04H41.16 c-0.128-0.025-0.261-0.04-0.396-0.04H12.42V22.831z M91.948,77.107L7.586,77.036c-1.461-0.261-3.024-2.16-3.434-4.143h35.086 c0.702,1.246,2.017,2.085,3.519,2.085h15.233c1.502,0,2.816-0.839,3.52-2.085h34.35C95.538,74.926,93.854,77.107,91.948,77.107z M38.84,37.498c-0.814-0.814-2.133-0.814-2.947,0l-8.689,8.689c-0.814,0.814-0.814,2.133,0,2.948l8.689,8.688 c0.407,0.407,0.94,0.611,1.474,0.611s1.066-0.204,1.474-0.611c0.814-0.813,0.814-2.133,0-2.947l-7.216-7.215l7.216-7.216 C39.654,39.631,39.654,38.312,38.84,37.498z M59.361,57.823c0.406,0.407,0.939,0.611,1.474,0.611c0.533,0,1.066-0.204,1.474-0.611 l8.688-8.688c0.814-0.814,0.814-2.133,0-2.948l-8.688-8.689c-0.814-0.814-2.134-0.814-2.947,0c-0.814,0.814-0.814,2.133,0,2.947 l7.215,7.216l-7.215,7.215C58.547,55.69,58.547,57.01,59.361,57.823z M41.793,62.275c0.299,0.148,0.617,0.22,0.931,0.22 c0.765,0,1.5-0.422,1.866-1.152l12.506-25.011c0.515-1.03,0.098-2.281-0.933-2.796c-1.029-0.513-2.281-0.098-2.797,0.932 L40.861,59.479C40.346,60.509,40.763,61.76,41.793,62.275z"></path></g></g></g><g id="SvgjsG2889" featurekey="nameFeature-0" transform="matrix(0.6523157078231601,0,0,0.6523157078231601,117.70384840985605,2.633398542342741)" fill="url(#SvgjsLinearGradient2898)"><path d="M6.88 11.68 l0 25.2 l12.96 0 l0 3.12 l-16.32 0 l0 -28.32 l3.36 0 z M31.48 20.8 q4.16 0 6.5 2.62 t2.38 7.42 l0 0.76 l-15.12 0 q0.24 2.6 1.96 4.28 t4.2 1.72 q3.8 0 5.92 -2.84 l2.36 1.84 q-1.48 1.92 -3.48 2.9 t-4.8 0.98 q-4.28 0 -6.88 -2.78 t-2.64 -7.06 q0 -4.24 2.66 -7 t6.94 -2.84 z M37 28.96 q-0.12 -2.44 -1.58 -3.86 t-4.1 -1.42 q-2.4 0 -4.04 1.36 t-2.04 3.92 l11.76 0 z M52.400000000000006 20.8 q4.08 0 5.94 1.92 t1.9 5.8 l0 8.4 q0 1.2 0.28 3.08 l-3 0 q-0.2 -0.36 -0.2 -2.8 l-0.08 0 q-2.12 3.2 -6.16 3.28 q-3.08 0 -5.02 -1.54 t-1.94 -4.02 q0 -3.4 2.8 -4.98 t8.76 -1.58 l1.44 0 l0 -0.52 q0 -4.08 -4.64 -4.16 q-3.36 0 -5.56 2.04 l-1.96 -2.04 q2.88 -2.8 7.44 -2.88 z M47.480000000000004 34.6 q0 3.16 4.12 3.24 q2.44 0 3.98 -1.56 t1.54 -4.56 l0 -0.72 l-3.44 0 q-2.76 0 -4.46 0.88 t-1.74 2.72 z M75.16 20.8 q0.72 0 1.28 0.2 l-0.2 3.16 q-0.88 -0.24 -1.68 -0.24 q-2.72 0 -4.1 1.78 t-1.38 5.02 l0 9.28 l-3.12 0 l0 -14.56 q0 -0.56 -0.16 -4.16 l2.96 0 q0.08 2.8 0.08 3.08 l0.08 0 q0.76 -1.6 2.46 -2.58 t3.78 -0.98 z M89.24 20.8 q3.52 0 5.32 2.04 t1.8 5.44 l0 11.72 l-3.12 0 l0 -11.36 q0 -2.16 -1 -3.54 t-3.28 -1.42 q-2.88 0 -4.34 1.9 t-1.46 5.26 l0 9.16 l-3.12 0 l0 -14.56 q0 -0.2 -0.16 -4.16 l2.96 0 q0.08 2.8 0.08 3.08 l0.08 0 q0.76 -1.6 2.46 -2.58 t3.78 -0.98 z M126.32 11.68 l12.04 28.32 l-3.92 0 l-2.88 -6.96 l-14.16 0 l-2.92 6.96 l-3.8 0 l12.48 -28.32 l3.16 0 z M124.6 16 l-5.88 13.92 l11.56 0 l-5.6 -13.92 l-0.08 0 z M144.96 9.760000000000002 l0 30.24 l-3.12 0 l0 -30.24 l3.12 0 z M153 11.68 q0.92 0 1.6 0.66 t0.68 1.62 q0 1 -0.64 1.64 t-1.64 0.64 t-1.64 -0.64 t-0.64 -1.64 q0 -0.96 0.68 -1.62 t1.6 -0.66 z M154.56 21.28 l0 18.72 l-3.12 0 l0 -18.72 l3.12 0 z M169.27999999999997 20.8 q4.16 0 6.5 2.62 t2.38 7.42 l0 0.76 l-15.12 0 q0.24 2.6 1.96 4.28 t4.2 1.72 q3.8 0 5.92 -2.84 l2.36 1.84 q-1.48 1.92 -3.48 2.9 t-4.8 0.98 q-4.28 0 -6.88 -2.78 t-2.64 -7.06 q0 -4.24 2.66 -7 t6.94 -2.84 z M174.79999999999998 28.96 q-0.12 -2.44 -1.58 -3.86 t-4.1 -1.42 q-2.4 0 -4.04 1.36 t-2.04 3.92 l11.76 0 z M192.2 20.8 q3.52 0 5.32 2.04 t1.8 5.44 l0 11.72 l-3.12 0 l0 -11.36 q0 -2.16 -1 -3.54 t-3.28 -1.42 q-2.88 0 -4.34 1.9 t-1.46 5.26 l0 9.16 l-3.12 0 l0 -14.56 q0 -0.2 -0.16 -4.16 l2.96 0 q0.08 2.8 0.08 3.08 l0.08 0 q0.76 -1.6 2.46 -2.58 t3.78 -0.98 z M229.68 10.96 q3.32 0 5.88 1.18 t4.12 3.26 l-2.92 2.12 q-1.28 -1.72 -3.16 -2.58 t-3.92 -0.86 q-4.52 0 -7.62 3.44 t-3.18 8.32 q0 5.04 3.08 8.38 t7.72 3.38 q5.08 0 8.2 -3.96 l2.52 2.12 q-3.72 4.96 -10.72 4.96 q-6.2 0 -10.26 -4.28 t-4.14 -10.6 q0 -6.32 4.1 -10.56 t10.3 -4.32 z M253.44 20.8 q4.36 0 7.12 2.7 t2.88 7.14 q0 4.28 -2.8 7.02 t-7.2 2.82 q-4.4 0 -7.16 -2.78 t-2.84 -7.06 q0 -4.32 2.8 -7.06 t7.2 -2.78 z M246.8 30.64 q0 3.08 1.86 4.98 t4.78 1.98 q2.92 0 4.76 -1.94 t1.88 -5.02 q0 -3.04 -1.86 -5 t-4.82 -1.96 q-2.88 0 -4.72 1.94 t-1.88 5.02 z M286.96 9.760000000000002 l0 30.24 l-3.12 0 l0 -3.32 l-0.08 0 q-0.96 1.8 -2.92 2.8 t-4.28 1 q-3.96 0 -6.62 -2.82 t-2.74 -7.02 q0 -4.28 2.74 -7.04 t7.1 -2.8 q4.04 0 6.72 3.2 l0.08 0 l0 -14.24 l3.12 0 z M270.56 30.64 q0 3.08 1.86 5 t4.78 1.96 q2.92 0 4.74 -1.92 t1.9 -5.04 q0 -3.04 -1.86 -5 t-4.82 -1.96 q-2.88 0 -4.7 1.94 t-1.9 5.02 z M301.24 20.8 q4.16 0 6.5 2.62 t2.38 7.42 l0 0.76 l-15.12 0 q0.24 2.6 1.96 4.28 t4.2 1.72 q3.8 0 5.92 -2.84 l2.36 1.84 q-1.48 1.92 -3.48 2.9 t-4.8 0.98 q-4.28 0 -6.88 -2.78 t-2.64 -7.06 q0 -4.24 2.66 -7 t6.94 -2.84 z M306.76 28.96 q-0.12 -2.44 -1.58 -3.86 t-4.1 -1.42 q-2.4 0 -4.04 1.36 t-2.04 3.92 l11.76 0 z"></path></g><g id="SvgjsG2890" featurekey="sloganFeature-0" transform="matrix(1,0,0,1,119.76000022888184,33.25999975204468)" fill="url(#SvgjsLinearGradient2902)"><path d="M15.44 5.92 l4.68 0 l0 0.22 c-1.74 0 -1.96 0.48 -3.5 4.78 l-3.2 9.08 l-0.24 0 l-3.2 -9.02 l-2.94 9.02 l-0.26 0 l-4.58 -12.32 c-0.52 -1.36 -1.2 -1.54 -1.96 -1.54 l0 -0.22 l4.9 0 l0 0.22 c-1.76 0 -1.44 1.22 -1.36 1.42 l3.72 10.4 l2.36 -7.3 l-1 -2.98 c-0.52 -1.36 -1.2 -1.54 -1.94 -1.54 l0 -0.22 l4.88 0 l0 0.22 c-1.78 0 -1.42 1.22 -1.36 1.42 l3.5 10.46 l2.44 -7.14 c0.86 -2.86 1.56 -4.74 -0.94 -4.74 l0 -0.22 z M30.799999999999997 8.64 l0 8.64 c0 1.64 -0.02 2.22 1.02 2.5 l0 0.22 l-3.2 0 l0 -0.22 c0.54 -0.2 0.62 -0.64 0.62 -2.5 l0 -3.88 l-5.82 0 l0 3.88 c0 2.24 0.08 2.3 0.64 2.5 l0 0.22 l-3.24 0 l0 -0.22 c1.06 -0.28 1.06 -0.46 1.06 -2.5 l0 -8.64 c0 -1.92 -0.1 -2.34 -1.06 -2.52 l0 -0.2 l3.24 0 l0 0.2 c-0.56 0.18 -0.64 0.38 -0.64 2.52 l0 4.44 l5.82 0 l0 -4.44 c0 -2.14 -0.06 -2.34 -0.62 -2.52 l0 -0.2 l3.2 0 l0 0.2 c-0.94 0.18 -1.02 0.38 -1.02 2.52 z M42.099999999999994 15.940000000000001 l0.22 0 l0 4.06 l-9.44 0 l0 -0.22 c0.84 0 1.02 -0.56 1.02 -1.92 l0 -10.12 c0 -1.24 -0.14 -1.6 -1.02 -1.6 l0 -0.22 l9.18 0 l0 3.5 l-0.22 0 c-0.1 -3.24 -2.58 -3.28 -5.02 -3.28 l-1.28 0 l0 6.64 l1.6 0 c0.8 0 2.48 -0.02 2.54 -1.98 l0.22 0 l0 4.2 l-0.22 0 c-0.06 -1.98 -1.78 -2 -2.54 -2 l-1.6 0 l0 6.78 l1.02 0 c2.68 0 5.34 0.14 5.54 -3.84 z M51.72 9.74 c0 -3.74 -1.96 -3.6 -4.2 -3.6 l-0.62 0 l0 7.16 l0.62 0 c2.44 0 4.2 0.02 4.2 -3.56 z M55.5 19.78 l0 0.22 l-1.36 0 c-2.08 0 -1.88 -0.02 -2.9 -4.36 c-0.5 -2.12 -2.62 -2.12 -3.4 -2.12 l-0.94 0 l0 4.56 c0 1.4 0.36 1.7 1.2 1.7 l0 0.22 l-3.82 0 l0 -0.22 c0.86 0 1.14 -0.24 1.14 -2.1 l0 -10.14 c0 -1.24 -0.26 -1.4 -1.14 -1.4 l0 -0.22 l3.24 0 c3.98 0 5.9 0.48 5.9 3.82 c0 2.84 -1.6 3.62 -3.64 3.68 c1.34 0.14 2.58 -0.08 3.66 4.68 c0.34 1.54 1.54 1.64 2.06 1.68 z M65.36 15.940000000000001 l0.22 0 l0 4.06 l-9.44 0 l0 -0.22 c0.84 0 1.02 -0.56 1.02 -1.92 l0 -10.12 c0 -1.24 -0.14 -1.6 -1.02 -1.6 l0 -0.22 l9.18 0 l0 3.5 l-0.22 0 c-0.1 -3.24 -2.58 -3.28 -5.02 -3.28 l-1.28 0 l0 6.64 l1.6 0 c0.8 0 2.48 -0.02 2.54 -1.98 l0.22 0 l0 4.2 l-0.22 0 c-0.06 -1.98 -1.78 -2 -2.54 -2 l-1.6 0 l0 6.78 l1.02 0 c2.68 0 5.34 0.14 5.54 -3.84 z M79.98 5.92 l4.72 0 l0 0.22 c-1.04 0 -1.62 -0.02 -3.82 4.38 l-1.66 3.34 l0 3.98 c0 1.76 0.6 1.94 1.44 1.94 l0 0.22 l-4.18 0 l0 -0.22 c0.84 0 1.4 -0.18 1.4 -1.94 l0 -3.72 c-2.94 -5.2 -3.7 -6.44 -3.7 -6.44 c-0.9 -1.54 -1.34 -1.5 -2.06 -1.56 l0 -0.2 l4.5 0 l0 0.2 c-0.62 0 -1.82 -0.04 -0.46 2.26 l3 5.16 l1.62 -3.3 c1.02 -2.06 1.82 -4.1 -0.8 -4.1 l0 -0.22 z M96.62 13.059999999999999 c0 -5.48 -2.18 -7.1 -4.54 -7.1 c-2.38 0 -4.58 1.62 -4.58 7.1 c0 5.5 2.2 6.9 4.58 6.9 c2.36 0 4.54 -1.4 4.54 -6.9 z M98.38000000000001 13.059999999999999 c0 3.98 -1.9 7.12 -6.3 7.12 s-6.3 -3.14 -6.3 -7.12 c0 -3.96 1.9 -7.32 6.3 -7.32 s6.3 3.36 6.3 7.32 z M105.64 20.18 c-2.52 0 -4.48 -1.66 -4.48 -4.92 l0 -7.4 c0 -1.42 -0.44 -1.72 -1.32 -1.72 l0 -0.22 l4.3 0 l0 0.22 c-0.86 0 -1.46 0.12 -1.46 1.76 l0 7.54 c0 2.56 1.48 4 3.8 4 c2.3 0 3.76 -1.52 3.76 -4.12 l0 -5.18 c0 -2.84 -0.08 -4 -2.2 -4 l0 -0.22 l4.76 0 l0 0.22 c-2.42 0 -2.34 1.16 -2.34 4 l0 5.18 c0.02 3.24 -2 4.86 -4.82 4.86 z M128.04 15.66 l0.2 0 l0 4.34 l-9.28 0 l0 -0.22 c0.86 0 0.94 -0.7 0.94 -2.06 l0 -9.94 c0 -1.22 -0.24 -1.66 -1.1 -1.66 l0 -0.2 l3.96 0 l0 0.2 c-0.86 0 -1.28 0.34 -1.28 1.78 l0 11.88 l0.72 0 c3.22 0.02 5.66 0 5.84 -4.12 z M139.68 15.940000000000001 l0.22 0 l0 4.06 l-9.44 0 l0 -0.22 c0.84 0 1.02 -0.56 1.02 -1.92 l0 -10.12 c0 -1.24 -0.14 -1.6 -1.02 -1.6 l0 -0.22 l9.18 0 l0 3.5 l-0.22 0 c-0.1 -3.24 -2.58 -3.28 -5.02 -3.28 l-1.28 0 l0 6.64 l1.6 0 c0.8 0 2.48 -0.02 2.54 -1.98 l0.22 0 l0 4.2 l-0.22 0 c-0.06 -1.98 -1.78 -2 -2.54 -2 l-1.6 0 l0 6.78 l1.02 0 c2.68 0 5.34 0.14 5.54 -3.84 z M144.9 15.34 l5.26 0 l-2.72 -7.02 z M154.6 19.78 l0 0.22 l-3.98 0 l0 -0.22 c0.84 0 1.06 -0.64 0.34 -2.32 l-0.72 -1.9 l-5.4 0 c-0.84 2.4 -1.52 4.26 1.08 4.22 l0 0.22 l-4.24 0 l0 -0.22 c0.88 0 1.38 -0.22 3 -4.76 l3.3 -9.1 l0.14 0 c1.22 2.94 4.86 12.14 4.86 12.14 c0.64 1.6 1.04 1.68 1.62 1.72 z M162.78 9.74 c0 -3.74 -1.96 -3.6 -4.2 -3.6 l-0.62 0 l0 7.16 l0.62 0 c2.44 0 4.2 0.02 4.2 -3.56 z M166.56 19.78 l0 0.22 l-1.36 0 c-2.08 0 -1.88 -0.02 -2.9 -4.36 c-0.5 -2.12 -2.62 -2.12 -3.4 -2.12 l-0.94 0 l0 4.56 c0 1.4 0.36 1.7 1.2 1.7 l0 0.22 l-3.82 0 l0 -0.22 c0.86 0 1.14 -0.24 1.14 -2.1 l0 -10.14 c0 -1.24 -0.26 -1.4 -1.14 -1.4 l0 -0.22 l3.24 0 c3.98 0 5.9 0.48 5.9 3.82 c0 2.84 -1.6 3.62 -3.64 3.68 c1.34 0.14 2.58 -0.08 3.66 4.68 c0.34 1.54 1.54 1.64 2.06 1.68 z M176.14 5.92 l5.54 0 l0 0.2 c-2.82 0 -2.76 1.94 -2.76 4.72 l0 9.16 l-0.42 0 l-8.4 -10.96 l0 6 c0 2.66 0 4.74 2.58 4.74 l0 0.22 l-5.64 0 l0 -0.22 c2.82 0 2.84 -2.04 2.84 -4.74 l0 -6.26 l-0.84 -1.1 c-1.28 -1.6 -1.86 -1.52 -2.38 -1.56 l0 -0.2 l3.1 0 l8.94 11.76 l0 -6.84 c0 -2.78 0 -4.72 -2.56 -4.72 l0 -0.2 z M187.21999999999997 5.92 l11.78 0 l0 3.28 l-0.22 0 c-0.04 -3.06 -2.92 -3.08 -3.34 -3.08 l-1.58 0 l0 12.18 c0 1.3 0.48 1.48 1.32 1.48 l0 0.22 l-4.16 0 l0 -0.22 c0.84 0 1.32 -0.18 1.32 -1.48 l0 -12.18 l-1.58 0 c-0.92 0 -3.3 0.02 -3.34 3.08 l-0.2 0 l0 -3.28 z M211.03999999999996 13.059999999999999 c0 -5.48 -2.18 -7.1 -4.54 -7.1 c-2.38 0 -4.58 1.62 -4.58 7.1 c0 5.5 2.2 6.9 4.58 6.9 c2.36 0 4.54 -1.4 4.54 -6.9 z M212.79999999999995 13.059999999999999 c0 3.98 -1.9 7.12 -6.3 7.12 s-6.3 -3.14 -6.3 -7.12 c0 -3.96 1.9 -7.32 6.3 -7.32 s6.3 3.36 6.3 7.32 z M230.67999999999998 15.879999999999999 l0.22 0 l0.2 3.06 c-1.48 0.98 -2.48 1.24 -4.62 1.24 c-4.08 0 -6.94 -2.54 -6.94 -7.22 c0 -4.76 2.86 -7.22 6.94 -7.22 c2.06 0 3.36 0.2 4.62 1.22 l-0.2 3.06 l-0.22 0 c-0.28 -3.6 -2.92 -4.06 -4.2 -4.06 c-2.02 0 -4.9 0.68 -4.9 7 c0 6.46 2.94 7 4.9 7 c1.22 0 4.08 -0.6 4.2 -4.08 z M243.59999999999997 13.059999999999999 c0 -5.48 -2.18 -7.1 -4.54 -7.1 c-2.38 0 -4.58 1.62 -4.58 7.1 c0 5.5 2.2 6.9 4.58 6.9 c2.36 0 4.54 -1.4 4.54 -6.9 z M245.35999999999996 13.059999999999999 c0 3.98 -1.9 7.12 -6.3 7.12 s-6.3 -3.14 -6.3 -7.12 c0 -3.96 1.9 -7.32 6.3 -7.32 s6.3 3.36 6.3 7.32 z M256.97999999999996 12.98 c0 -6.58 -3.52 -6.84 -5.84 -6.84 l-0.88 0 l0 13.64 l0.88 0 c2.24 0 5.84 0.04 5.84 -6.8 z M258.85999999999996 12.98 c0 6.16 -3.74 7.02 -7.72 7.02 l-3.82 0 l0 -0.22 c0.86 0 1.28 -0.62 1.28 -1.98 l0 -9.72 c0 -1.24 -0.4 -1.94 -1.28 -1.94 l0 -0.22 l3.82 0 c3.98 0 7.72 1.2 7.72 7.06 z M269.69999999999993 15.940000000000001 l0.22 0 l0 4.06 l-9.44 0 l0 -0.22 c0.84 0 1.02 -0.56 1.02 -1.92 l0 -10.12 c0 -1.24 -0.14 -1.6 -1.02 -1.6 l0 -0.22 l9.18 0 l0 3.5 l-0.22 0 c-0.1 -3.24 -2.58 -3.28 -5.02 -3.28 l-1.28 0 l0 6.64 l1.6 0 c0.8 0 2.48 -0.02 2.54 -1.98 l0.22 0 l0 4.2 l-0.22 0 c-0.06 -1.98 -1.78 -2 -2.54 -2 l-1.6 0 l0 6.78 l1.02 0 c2.68 0 5.34 0.14 5.54 -3.84 z"></path></g></svg></div></div>
</a>
<small>Where you learn code</small>
</h2>
<h3 align="center">Signup or <a href="login.php">click here to login</a><br>and <a href="index.php#pricing">click here to see out plans and pricing</a></h3>
<div id="gSignInWrapper" align="center">
<div id="customBtn" class="customGPlusSignIn">
<span class="icon"><img src="imgs/Google-512.png" width="40" height="40"></span>
<span class="buttonText"><b>Login with Google</b><br></span>
</div>
</div>
<h4 align="center">Or</h4>
<form action="signup.inc.php" method="POST" align="center">
<div class="group" style="margin-top:25px;">
<input type="text" name="first" required class="inspdislin">
<span class="inspdislin">
<i class="far fa-id-card"></i>
</span>
<span class="highlight"></span>
<span class="bar"></span>
<div class="centerlabel"><label>First Name</label></div>
</div>
<div class="group">
<input type="text" name="last" required class="inspdislin">
<span class="inspdislin">
<i class="far fa-id-card"></i>
</span>
<span class="highlight"></span>
<span class="bar"></span>
<div class="centerlabel"><label>Last Name</label></div>
</div>
<div class="group">
<input type="text" name="uid" required class="inspdislin">
<span class="inspdislin">
<i class="far fa-id-card"></i>
</span>
<span class="highlight"></span>
<span class="bar"></span>
<div><label>Username</label></div>
</div align="center">
<div class="group">
<input type="email" name="email" required class="inspdislin">
<span class="inspdislin">
<i class="far fa-envelope"></i>
</span>
<span class="highlight"></span>
<span class="bar"></span>
<div class="centerlabel"><label>Email</label></div>
</div>
<div class="group">
<input type="password" name="pwd" required class="inspdislin" id="pwd">
<span class="inspdislin">
<i class="far fa-eye pwdt" onclick="pwdtog()" id="pwdtog"></i>
<i class="fas fa-key"></i>
</span>
<span class="highlight"></span>
<span class="bar"></span>
<div class="centerlabel"><label>Password</label></div>
</div>
<div class="group">
<input type="password" name="cpwd" required class="inspdislin" id="cpwd">
<span class="inspdislin">
<i class="far fa-eye pwdt" id="cpwdtog" onclick="cpwdtog()"></i>
<i class="fas fa-key"></i>
</span>
<span class="highlight"></span>
<span class="bar"></span>
<div class="centerlabel"><label>Comfirm Password</label></div>
</div>
<div class="centerlabel"><lable id="plan-lable" for="plan">Plan (<a href="index.php#pricing">Click here to see plan and pricing</a>):</lable><div><br>
<select name="plan" id="plan">
<option value="basic">Basic Alien Coder</option>
<option value="good">Good Alien Coder</option>
<option value="beast">Beast Alien Code</option>
</select>
<button type="submit" id="signup-submit" style="margin-left:503px;">Signup</button>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://apis.google.com/js/platform.js?onload=onLoadGoogleCallback" async defer></script>
<script>
var googleUser = {};
function pwdtog() {
var tog = $('#pwdtog');
var input = $("#pwd");
if (input.attr("type") == "password") {
input.attr("type", "text");
} else {
input.attr("type", "password");
}
if (tog.attr("class") == "fas fa-eye-slash") {
tog.attr("class", "far fa-eye");
} else {
tog.attr("class", "fas fa-eye-slash");
}
}
function cpwdtog() {
var tog = $('#cpwdtog');
var input = $("#cpwd");
if (input.attr("type") == "password") {
input.attr("type", "text");
} else {
input.attr("type", "password");
}
if (tog.attr("class") == "fas fa-eye-slash") {
tog.attr("class", "far fa-eye");
} else {
tog.attr("class", "fas fa-eye-slash");
}
}
document.querySelector('#signup-submit').onmousemove = e => {
const x = e.pageX - e.target.offsetLeft;
const y = e.pageY - e.target.offsetTop;
e.target.style.setProperty('--x', `${x}px`);
e.target.style.setProperty('--y', `${y}px`);
};
/*var element = new Image;
var devtoolsOpen = false;
element.__defineGetter__("id", function() {
devtoolsOpen = true; // This only executes when devtools is open.
});
setInterval(function() {
devtoolsOpen = false;
console.log(element);
if (devtoolsOpen == true) {
document.getElementById('body').innerHTML = "<h1 align='center' style='color:red;'>Please close dev tools and refresh the page</h1>";
}
}, 1000);*/
$(window).load(function() {
/*var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
console.log('User signed out.');
});*/
var startApp = function() {
gapi.load('auth2', function(){
// Retrieve the singleton for the GoogleAuth library and set up the client.
auth2 = gapi.auth2.init({
client_id: 'key.apps.googleusercontent.com',
cookiepolicy: 'single_host_origin',
// Request scopes in addition to 'profile' and 'email'
//scope: 'additional_scope'
});
attachSignin(document.getElementById('customBtn'));
});
}
startApp();
function attachSignin(element) {
console.log(element.id);
auth2.attachClickHandler(element, {},
function(googleUser) {
var profile = googleUser.getBasicProfile();
var id_token = googleUser.getAuthResponse().id_token;
var id = profile.getId(); // Do not send to your backend! Use an ID token instead.
var fname = profile.getName();
var lname = profile.getFamilyName();
var img = profile.getImageUrl();
var email = profile.getEmail();
var uid = fname + '_' + lname + Math.floor(Math.random());
var form = "<form style='visibility:hidden;' id='test123' method='POST' action='googlesignup.php'><input type='hidden' name='fname' value='" + fname + "'><input type='hidden' name='lname' value='" + lname + "'><input type='hidden' name='img' value='" + img + "'><input type='hidden' name='email' value='" + email + "'><input type='hidden' name='uid' value='" + uid + "'><input type='hidden' name='idtoken' value='"+ id_token + "'></form>";
$('body').append(form);
$('#test123').submit();
}, function(error) {
alert("There was a error: " + error);
});
}
});
</script>
<?php
if (isset($_GET['error'])) {
if ($_GET['error'] == "notallfilled") {
echo "<h4 align='center' class='error'>Please fillout everything!</h4>";
} elseif ($_GET['error'] == "uidoremail-taken") {
echo "<h4 align='center' class='error'>The username or email is taken!</h4>";
} elseif ($_GET['error'] == "pwd-not-macth") {
echo "<h4 align='center' class='error'>Passwords do not macth!</h4>";
} elseif ($_GET['error'] == "error") {
echo "<h4 align='center' class='error'>There was an error. Please try again!</h4>";
} elseif ($_GET['error'] == "uidchar") {
echo "<h4 align='center' class='error'>Your username cann't have special characters!</h4>";
} elseif ($_GET['error'] == "nchar") {
echo "<h4 align='center' class='error'>Your frist or last name cann't have numbers or special characters!</h4>";
} elseif ($_GET['error'] == "guidoremail-taken") {
echo "<h4 align='center' class='error'>The email associated google account has been task! Please try again with another google account!</h4>";
}
}
?>
<!--</div>-->
</body>
</html>
and here is my scss:
* {
box-sizing:border-box;
}
/* basic stylings ------------------------------------------ */
/*.container {
font-family:'Roboto';
width:600px;
margin:30px auto 0;
display:block;
background:#FFF;
padding:10px 50px 50px;
}*/
h2 {
text-align:center;
margin-bottom:50px;
}
h2 small {
font-weight:normal;
color:#888;
display:block;
}
.footer { text-align:center; }
.footer a { color:#53B2C8; }
/* form starting stylings ------------------------------- */
.group {
position:relative;
margin-bottom:45px;
//margin-left:420px;
}
#plan {
//margin-left:500px;
margin-bottom:20px;
margin-top:20px;
}
.centerlabel {
text-align: center;
}
/*#plan-lable {
margin-left:420px;
}*/
/*label {
text-align: center;
display: block;
}*/
.fas, .far {
font-size:20px;
margin-bottom:0;
}
.inspdislin {
display:inline;
}
input {
font-size:18px;
padding:10px 10px 10px 5px;
display:block;
width:300px;
border:none;
border-bottom:1px solid #757575;
font-family: 'Roboto', sans-serif;
}
input:focus { outline:none; }
/* LABEL ======================================= */
label {
color:#999;
font-size:18px;
font-weight:normal;
position:absolute;
pointer-events:none;
left:5px;
top:10px;
//text-align: center;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
/* active state */
input:focus ~ label, input:valid ~ label {
top:-20px;
font-size:14px;
color:#00d95a;
}
/* BOTTOM BARS ================================= */
.bar { position:relative; display:block; width:300px; }
.bar:before, .bar:after {
content:'';
height:2px;
width:0;
bottom:1px;
position:absolute;
background:#00d95a;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
.bar:before {
left:50%;
}
.bar:after {
right:50%;
}
/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
width:50%;
}
/* HIGHLIGHTER ================================== */
.highlight {
position:absolute;
height:60%;
width:100px;
top:25%;
left:0;
pointer-events:none;
opacity:0.5;
}
/* active state */
input:focus ~ .highlight {
-webkit-animation:inputHighlighter 0.3s ease;
-moz-animation:inputHighlighter 0.3s ease;
animation:inputHighlighter 0.3s ease;
}
a {
text-decoration: underline;
}
#signup-submit {
border-radius: 100px;
width: 100px;
width: 150px;
height: 40px;
border: none;
background-color: #00b01d;
background-image: linear-gradient(#59ff00, #00c947);
}
#signup-submit:hover {
position: relative;
appearance: none;
background: #00d423;
border: none;
color: white;
font-size: 1.2em;
cursor: pointer;
outline: none;
overflow: hidden;
color: black;
&::before {
--size: 0;
content: '';
position: absolute;
left: var(--x);
top: var(--y);
width: var(--size);
height: var(--size);
background: radial-gradient(circle closest-side, #006e2c, transparent);
transform: translate(-50%, -50%);
transition: width .2s ease, height .2s ease;
}
&:hover::before {
--size: 400px;
}
}
.pwdt:hover {
cursor:pointer;
}
.error {
color: red;
margin-top: 20px;
}
select {
outline: none;
border: 1px solid black;
width: 130px;
height: 20px;
display: inline-block;
}
#plan-lable {
font-size: 21px;
}
#customBtn {
display: inline-block;
background: white;
color: #444;
width: 190px;
border: 1px solid #4285f4;
box-shadow: 1px 1px 1px grey;
white-space: nowrap;
}
#customBtn:hover {
cursor: pointer;
-webkit-box-shadow: 0 0 15px #4285f4;
}
span.label {
font-family: serif;
font-weight: normal;
}
span.icon {
display: inline-block;
vertical-align: middle;
width: 35px;
height: 42px;
}
span.buttonText {
display: inline-block;
vertical-align: middle;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
font-size: 17px;
font-weight: bold;
/* Use the Roboto font that is loaded in the <head> */
font-family: 'Roboto', sans-serif;
background-color: #4285f4;
color: #fff;
}
/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
from { background:#00d95a; }
to { width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
from { background:#00d95a; }
to { width:0; background:transparent; }
}
@keyframes inputHighlighter {
from { background:#00d95a; }
to { width:0; background:transparent; }
}
Is there a way I cloud make the text in the label (and the span one with the highlight class) tag align?