diff --git a/css/form.css b/css/form.css new file mode 100644 index 0000000..49d6638 --- /dev/null +++ b/css/form.css @@ -0,0 +1,181 @@ +:root { + --c-text-primary: #282a32; + --c-text-secondary: #686b87; + --c-text-action: #404089; + --c-accent-primary: #434ce8; + --c-border-table: rgba(67, 76, 232, 0.2); + --c-background-table: #e0ebfc; + --c-border-primary: #eff1f6; + --c-background-primary: #ffffff; + --c-background-secondary: #fdfcff; + --c-background-tertiary: #ecf3fe; + --c-background-quaternary: #ccced4; +} + +.login-box { + position: absolute; + top: 50%; + left: 50%; + width: 100%; + padding: 40px; + transform: translate(-50%, -50%); + background: var(--c-background-primary); + box-sizing: border-box; + box-shadow: 0 15px 25px rgba(0,0,0,.6); + border-radius: 10px; +} + + +.login-box .user-box { + position: relative; +} + +.login-box .user-box input { + width: 100%; + padding: 10px 0; + font-size: 16px; + color: var(--c-accent-primary); + margin-bottom: 30px; + border: none; + border-bottom: 1px solid var(--c-text-action); + outline: none; + background: transparent; +} +.login-box .user-box label { + position: absolute; + top:0; + left: 0; + padding: 10px 0; + font-size: 16px; + color: var(--c-text-action); + pointer-events: none; + transition: .5s; +} + +.login-box .user-box label{ + top: -20px; + left: 0; + color: var(--c-text-action); + font-size: 12px; +} + +.login-box form a { + position: relative; + display: inline-block; + padding: 10px 20px; + color: var(--c-accent-primary); + font-size: 16px; + text-decoration: none; + text-transform: uppercase; + overflow: hidden; + transition: .5s; + margin-top: 40px; + letter-spacing: 4px +} + +.login-box a:hover { + background: var(--c-accent-primary); + color: #fff; +} + +#deletar:hover{ + background-color: red; + color: #fff +} + +.login-box a span { + position: absolute; + display: block; +} + +.login-box a span:nth-child(1) { + top: 0; + left: -100%; + width: 100%; + height: 2px; + background: linear-gradient(90deg, transparent, #03e9f4); + animation: btn-anim1 1s linear infinite; +} + +@keyframes btn-anim1 { + 0% { + left: -100%; + } + 50%,100% { + left: 100%; + } +} + +.login-box a span:nth-child(2) { + top: -100%; + right: 0; + width: 2px; + height: 100%; + background: linear-gradient(180deg, transparent, #03e9f4); + animation: btn-anim2 1s linear infinite; + animation-delay: .25s +} + +@keyframes btn-anim2 { + 0% { + top: -100%; + } + 50%,100% { + top: 100%; + } +} + +.login-box a span:nth-child(3) { + bottom: 0; + right: -100%; + width: 100%; + height: 2px; + background: linear-gradient(270deg, transparent, #03e9f4); + animation: btn-anim3 1s linear infinite; + animation-delay: .5s +} + +.form-footer{ + display: flex; + justify-content: space-between; +} +.login-box span{ + color: #282a32; +} +.close{ + position:absolute; + right: 10px; + top: 10px; + background-color: var(--c-background-primary); + color:#282a32; + font-size: larger; + font-weight: 200; +} + +@keyframes btn-anim3 { + 0% { + right: -100%; + } + 50%,100% { + right: 100%; + } +} + +.login-box a span:nth-child(4) { + bottom: -100%; + left: 0; + width: 2px; + height: 100%; + background: linear-gradient(360deg, transparent, #03e9f4); + animation: btn-anim4 1s linear infinite; + animation-delay: .75s +} + +@keyframes btn-anim4 { + 0% { + bottom: -100%; + } + 50%,100% { + bottom: 100%; + } +} diff --git a/css/home.css b/css/home.css index 3bd3649..ce27432 100644 --- a/css/home.css +++ b/css/home.css @@ -962,14 +962,11 @@ textarea{ .form{ position:absolute; - left:25%; - right:25%; - width: 50%; - height:min-content; - top:5%; - bottom:5%; - padding: 20px; - font-size: 20px; + left:50%; + top: 50%; + transform: translate(-50%, -50%); + width:70%; + height:fit-content; box-shadow: 0px 0px 3px #000; border:0px; border-radius: 10px; diff --git a/home.html b/home.html index 09012a7..8f09ce8 100644 --- a/home.html +++ b/home.html @@ -1,328 +1,339 @@ - - +
- - -