3D Login page

3,599 angrybird76

Remix Open In Editor Fullscreen Discuss Publish Your Code

3D Login page

Recommended

13 May 2025

Roblox Login Page HTML CSS

13 October 2026

3D Stunt Car Racing WebGL Game in HTML and JavaScript

25 April 2023

Responsive Login Form

HTML

CSS

body {
    font-family: Arial, sans-serif;
    background-color: #0e7bad;
}

.container {
    width: 640px;
    margin: 100px auto;
    perspective: 1000px;
}

.login-form {
    position: relative;
    width: 100%;
    height: 400px;
    background-color: #1154ac;
    border: 1px solid #125fb8;
    border-radius: 10px;
    box-shadow: #109e34;
    transform: rotateY(0deg);
    transition: transform 0.5s;
}

.login-form:hover {
    transform: rotateY(30deg);
}

h1 {
    margin-top: 0;
    font-size: 24px;
    font-weight: bold;
    color: #000000;
}

form {
    padding: 35px;
}

input[type="text"], input[type="password"] {
    width: 100%;
    height: 40px;
    margin-bottom: 20px;
    padding: 8px;
    border: 1px solid #000508;
    border-radius: 5px;
}

button[type="submit"] {
    width: 100%;
    height: 40px;
    background-color: #4CAF50;
    color: #109e34;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button[type="submit"]:hover {
    background-color: #3e8e41;
}

.progress-bar {
    width: 100%;
    height: 10px;
    background-color: #0b72a1;
    border-radius: 5px;
}

.progress {
    width: 50%;
    height: 10px;
    background-color: #021b3f;
    border-radius: 5px;
}
/* Replace with your CSS Code 
(Leave empty if not needed) */

JS