लॉगिन 1

2739 logicalbug531

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

17 July 2025

3D घूर्णन लॉगिन साइनअप फ़ॉर्म HTML CSS

19 January 2024

इनपुट वैलिडेशन के साथ लॉगिन फॉर्म

10 February 2025

HTML CSS लॉगिन फॉर्म कोड

HTML

CSS

/* Replace with your CSS Code 
(Leave empty if not needed) */

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'poppins', sans-serif;

}

body{

display: flex;

align-items: center;

justify-content: center;

height: 100vh;

background: #24232a;

}

.container{

position: relative;

width: 380px;

height: 420px;

background: #030013;

border-radius: 8px;

overflow: hidden;

}

.container::before{

content: "";

position: absolute;

width: 380px;

height: 420px;

background: linear-gradient(0deg, transparent, #fe03f6, #fe03f6);

top: -50%;

left: -50%;

transform-origin: bottom right;

animation: anime 7s linear infinite;

}

.container::after{

content: "";

position: absolute;

width: 380px;

height: 420px;

background: linear-gradient(0deg, transparent, #2376f5, #2376f5);

top: -50%;

left: -50%;

transform-origin: bottom right;

animation: anime 7s linear infinite;

animation-delay: 3s;

}

@keyframes anime{

100% {

transform: rotate(360deg);

}

.form{

position: absolute;

inset: 3px;

background: #24232a;

border-radius: 8px;

z-index: 10;

padding: 50px 40px;

display: flex;

flex-direction: column;

}

.form h2{

text-align: center;

color: #fe03f6;

letter-spacing: 3px;

}

.box{

position: relative;

width: 300px;

margin-top: 35px;

}

.box input{

width: 100%;

padding: 20px 10px 10px;

border-color: #fe03f6;

background: transparent;

border-top: none;

border-left: none;

border-right: none;

font-size: 18px;

outline: none;

color: #fe03f6;

}

अनुशंसित

3D घूर्णन लॉगिन साइनअप फ़ॉर्म HTML CSS

इनपुट वैलिडेशन के साथ लॉगिन फॉर्म

HTML CSS लॉगिन फॉर्म कोड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS