diff --git a/css/forms.css b/css/forms.css
index 7691920..cc7273d 100644
--- a/css/forms.css
+++ b/css/forms.css
@@ -1,5 +1,5 @@
.login-box{
- background: linear-gradient(#141e30, #243b55);
+ background: black;
border-radius: 10px;
padding: 40px;
box-sizing: border-box;
@@ -28,9 +28,9 @@
border: none;
border-bottom: 1px solid #fff;
outline: none;
- background: transparent;
+ background: black;
}
-.login-box .user-box label {
+.login-box .user-box label{
position: absolute;
top:0;
left: 0;
@@ -42,10 +42,10 @@
}
.login-box .user-box input:focus ~ label,
-.login-box .user-box input:valid ~ label {
+.login-box .user-box input:valid ~ label{
top: -20px;
left: 0;
- color: #03e9f4;
+ color: #fff;
font-size: 12px;
}
@@ -53,7 +53,7 @@
position: relative;
display: inline-block;
padding: 10px 20px;
- color: #03e9f4;
+ color: #fff;
font-size: 16px;
text-decoration: none;
text-transform: uppercase;
@@ -63,8 +63,8 @@
letter-spacing: 4px
}
-.login-box a:hover {
- background: #03e9f4;
+.login-box a:hover{
+ background: black;
color: #fff;
border-radius: 5px;
box-shadow: 0 0 5px #03e9f4,
@@ -73,88 +73,87 @@
0 0 100px #03e9f4;
}
-.login-box a span {
+.login-box a span{
position: absolute;
display: block;
}
-.login-box a span:nth-child(1) {
+.login-box a span:nth-child(1){
top: 0;
left: -100%;
width: 100%;
height: 2px;
- background: linear-gradient(90deg, transparent, #03e9f4);
+ background: black;
animation: btn-anim1 1s linear infinite;
}
-@keyframes btn-anim1 {
- 0% {
+@keyframes btn-anim1{
+ 0%{
left: -100%;
}
- 50%,100% {
+ 50%,100%{
left: 100%;
}
}
-.login-box a span:nth-child(2) {
+.login-box a span:nth-child(2){
top: -100%;
right: 0;
width: 2px;
height: 100%;
- background: linear-gradient(180deg, transparent, #03e9f4);
+ background: black;
animation: btn-anim2 1s linear infinite;
animation-delay: .25s
}
-@keyframes btn-anim2 {
- 0% {
+@keyframes btn-anim2{
+ 0%{
top: -100%;
}
- 50%,100% {
+ 50%,100%{
top: 100%;
}
}
-.login-box a span:nth-child(3) {
+.login-box a span:nth-child(3){
bottom: 0;
right: -100%;
width: 100%;
height: 2px;
- background: linear-gradient(270deg, transparent, #03e9f4);
+ background: black;
animation: btn-anim3 1s linear infinite;
animation-delay: .5s
}
-@keyframes btn-anim3 {
- 0% {
+@keyframes btn-anim3{
+ 0%{
right: -100%;
}
- 50%,100% {
+ 50%,100%{
right: 100%;
}
}
-.login-box a span:nth-child(4) {
+.login-box a span:nth-child(4){
bottom: -100%;
left: 0;
width: 2px;
height: 100%;
- background: linear-gradient(360deg, transparent, #03e9f4);
+ background: black;
animation: btn-anim4 1s linear infinite;
animation-delay: .75s
}
-@keyframes btn-anim4 {
- 0% {
+@keyframes btn-anim4{
+ 0%{
bottom: -100%;
}
- 50%,100% {
+ 50%,100%{
bottom: 100%;
}
}
-/*James K Jose */
-.form-jkj form {
+.form-jkj form{
margin:10% auto 0 auto;
padding:30px;
width:400px;
@@ -164,19 +163,19 @@
border-radius:10px;
}
-.form-jkj label {
+.form-jkj label{
font-size:14px;
color:darkgray;
cursor:pointer;
}
.form-jkj label,
-.form-jkj form input {
+.form-jkj form input{
float:left;
clear:both;
}
-.form-jkj input {
+.form-jkj input{
margin:15px 0;
padding:15px 10px;
width:100%;
@@ -195,11 +194,11 @@
}
.form-jkj input[type=text]:focus,
-.form-jkj input[type="password"]:focus {
+.form-jkj input[type="password"]:focus{
border-color:cornflowerblue;
}
-.form-jkj input[type=submit] {
+.form-jkj input[type=submit]{
padding:15px 50px;
width:auto;
background:#1abc9c;
@@ -216,16 +215,16 @@
transition:0.2s ease all;
}
-.form-jkj input[type=submit]:hover {
+.form-jkj input[type=submit]:hover{
opacity:0.8;
}
-.form-jkj input[type="submit"]:active {
+.form-jkj input[type="submit"]:active{
opacity:0.4;
}
.forgot,
-.register {
+.register{
margin:10px;
float:left;
clear:left;
@@ -235,10 +234,10 @@
}
.forgot:hover,
-.register:hover {
+.register:hover{
color:darkgray;
}
-.jkj {
- background-color: #f79533;
-}
\ No newline at end of file
+.jkj{
+ background: black;
+}
diff --git a/index.html b/index.html
index 758886a..babb46c 100644
--- a/index.html
+++ b/index.html
@@ -1,100 +1,90 @@
-
-
+
+
-
-
- Css Components
-
-
+
+ Css Component
+
+
+
-
-
-
-
-
+
+
+
+ < link rel=" stylesheet " href="css/assets/magic.css" />
-
-
-