diff --git a/Basant/index.html b/Basant/index.html new file mode 100644 index 0000000..e395346 --- /dev/null +++ b/Basant/index.html @@ -0,0 +1,32 @@ + + + + + + login page + + + +
+ +
+

Sign in

+
+ + Username + +
+
+ + password + +
+ + +
+
+ + \ No newline at end of file diff --git a/Basant/readme.md b/Basant/readme.md new file mode 100644 index 0000000..20419b4 --- /dev/null +++ b/Basant/readme.md @@ -0,0 +1 @@ +## issue diff --git a/Basant/style.css b/Basant/style.css new file mode 100644 index 0000000..26e9128 --- /dev/null +++ b/Basant/style.css @@ -0,0 +1,182 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'poppins',sans-serif; +} +body{ + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background: #23242a; +} +.box{ + position: relative; + width: 380px; + height: 420px; + background: #1c1c1c; + border-radius: 8px; + overflow: hidden; +} +.box::before{ + content: ''; + position: absolute; + top: -50%; + left: -50%; + width: 380px; + height: 420px; + background: linear-gradient(0deg,transparent,transparent,#45f3ff,#45f3ff,#45f3ff); + z-index: 1; + transform-origin: bottom right; + animation: animate 6s linear infinite; +} +.box::after{ + content: ''; + position: absolute; + top: -50%; + left: -50%; + width: 380px; + height: 420px; + background: linear-gradient(0deg,transparent,transparent,#45f3ff,#45f3ff,#45f3ff); + z-index: 1; + transform-origin: bottom right; + animation: animate 6s linear infinite; + animation-delay: -3s; +} +.borderline{ + position: absolute; + top: 0; + inset:0; +} +.borderline::before{ + content: ''; + position: absolute; + top: -50%; + left: -50%; + width: 380px; + height: 420px; + background: linear-gradient(0deg,transparent,transparent,#ff2770,#ff2770,#ff2770); + z-index: 1; + transform-origin: bottom right; + animation: animate 6s linear infinite; + animation-delay :-1.5s; ; +} +.borderline::after{ + content: ''; + position: absolute; + top: -50%; + left: -50%; + width: 380px; + height: 420px; + background: linear-gradient(0deg,transparent,transparent,#ff2770,#ff2770,#ff2770); + z-index: 1; + transform-origin: bottom right; + animation: animate 6s linear infinite; + animation-delay: -4.5s; ; +} +@keyframes animate { + + 0%{ + transform: rotate(0deg); + } + 100%{ + transform: rotate(360deg); + } +} +.box form{ + position: absolute; + inset: 4px; + background: #222; + padding: 50px 40px; + border-radius: 8px; + z-index: 2; + display: flex; + flex-direction: column; +} +.box form h2{ + color: #fff; + font-weight: 500; + text-align:center ; + letter-spacing: 0.1em; +} +.box form .inputbox{ + position:relative; + width: 300px; + margin-top: 35px; +} +.box form .inputbox input{ + position :relative; + width: 100%; + padding: 20px 10px 10px; + background:transparent ; + outline: none; + border: none; + box-shadow: none; + font-size: 1em; + letter-spacing: 0.05em; + transition: 0.5s; + z-index: 10; +} +.box form .inputbox span{ + position: absolute; + left: 0; + padding: 20px 0px 10px ; + pointer-events: none; + color: #8f8f8f; + font-size: 1em; + letter-spacing: 0.05em; + transition: 0.5s; +} +.box form .inputbox input:valid~span, +.box form .inputbox input:focus~span{ + color: #fff; + font-size: 0.75em; + transform: translateY(-34px); +} +.box form .inputbox i{ + position:absolute; + left: 0; + bottom: 0; + width: 100%; + height: 2px; + background: #fff; + border-radius: 4px; + overflow: hidden; + transition: 0.5s; + pointer-events: none; +} +.box form .inputbox input:valid~span ~ i , +.box form .inputbox input:focus~span ~ i{ +height: 44px; + +} +.box form .links{ + display: flex; + justify-content: space-between; +} +.box form .links a{ + margin: 10px 0; + font-size: 0.75em; + color: #8f8f8f; + text-decoration: none; +} +.box form .links a:hover, +.box form .links a:nth-child(2){ + color: #fff; +} +.box form input[type="submit"]{ + border: none; + outline: none; + padding: 9px 25px; + background: #fff; + cursor: pointer; + font-size: 0.9em; + border-radius: 4px; + font-weight: 600; + width: 100px; + margin-top: 10px; +} +.box form input[type="submit"]:active{ + opacity: 0.8; +} \ No newline at end of file