diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..d83cd5c --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +commit.bat \ No newline at end of file diff --git a/admin/index.html b/admin/index.html deleted file mode 100644 index 35e1d41..0000000 --- a/admin/index.html +++ /dev/null @@ -1,59 +0,0 @@ - - - - - - - - - CodePen - Animated Login Form using Html & CSS Only - - - - - - - -
- -
- -
- -

Sign In

- -
- -
- - Username - -
- -
- - Password - -
- - - -
- - - -
- -
- -
- -
- -
- - - - \ No newline at end of file diff --git a/admin/style.css b/admin/style.css deleted file mode 100644 index 67b2989..0000000 --- a/admin/style.css +++ /dev/null @@ -1,182 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap'); -* -{ - margin: 0; - padding: 0; - box-sizing: border-box; - font-family: 'Quicksand', sans-serif; -} -body -{ - display: flex; - justify-content: center; - align-items: center; - min-height: 100vh; - background: #000; -} -section -{ - position: absolute; - width: 100vw; - height: 100vh; - display: flex; - justify-content: center; - align-items: center; - gap: 2px; - flex-wrap: wrap; - overflow: hidden; -} -section::before -{ - content: ''; - position: absolute; - width: 100%; - height: 100%; - background: linear-gradient(#000,#0f0,#000); - animation: animate 5s linear infinite; -} -@keyframes animate -{ - 0% - { - transform: translateY(-100%); - } - 100% - { - transform: translateY(100%); - } -} -section span -{ - position: relative; - display: block; - width: calc(6.25vw - 2px); - height: calc(6.25vw - 2px); - background: #181818; - z-index: 2; - transition: 1.5s; -} -section span:hover -{ - background: #0f0; - transition: 0s; -} - -section .signin -{ - position: absolute; - width: 400px; - background: #222; - z-index: 1000; - display: flex; - justify-content: center; - align-items: center; - padding: 40px; - border-radius: 4px; - box-shadow: 0 15px 35px rgba(0,0,0,9); -} -section .signin .content -{ - position: relative; - width: 100%; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - gap: 40px; -} -section .signin .content h2 -{ - font-size: 2em; - color: #0f0; - text-transform: uppercase; -} -section .signin .content .form -{ - width: 100%; - display: flex; - flex-direction: column; - gap: 25px; -} -section .signin .content .form .inputBox -{ - position: relative; - width: 100%; -} -section .signin .content .form .inputBox input -{ - position: relative; - width: 100%; - background: #333; - border: none; - outline: none; - padding: 25px 10px 7.5px; - border-radius: 4px; - color: #fff; - font-weight: 500; - font-size: 1em; -} -section .signin .content .form .inputBox i -{ - position: absolute; - left: 0; - padding: 15px 10px; - font-style: normal; - color: #aaa; - transition: 0.5s; - pointer-events: none; -} -.signin .content .form .inputBox input:focus ~ i, -.signin .content .form .inputBox input:valid ~ i -{ - transform: translateY(-7.5px); - font-size: 0.8em; - color: #fff; -} -.signin .content .form .links -{ - position: relative; - width: 100%; - display: flex; - justify-content: space-between; -} -.signin .content .form .links a -{ - color: #fff; - text-decoration: none; -} -.signin .content .form .links a:nth-child(2) -{ - color: #0f0; - font-weight: 600; -} -.signin .content .form .inputBox input[type="submit"] -{ - padding: 10px; - background: #0f0; - color: #000; - font-weight: 600; - font-size: 1.35em; - letter-spacing: 0.05em; - cursor: pointer; -} -input[type="submit"]:active -{ - opacity: 0.6; -} -@media (max-width: 900px) -{ - section span - { - width: calc(10vw - 2px); - height: calc(10vw - 2px); - } -} -@media (max-width: 600px) -{ - section span - { - width: calc(20vw - 2px); - height: calc(20vw - 2px); - } -} \ No newline at end of file