Webleb - UI Elements - Senarig bir giriş sayfası

HTML

<!DOCTYPE html>

<head>

<title>Secure Login Portal</title>

<style>

/* Root Variables */

:root {

--primary-color: #00BFFF;

--secondary-color: #141414;

--text-color: #FFFFFF;

--input-bg: rgba(255, 255, 255, 0.1);

--button-glow: rgba(0, 191, 255, 0.8);

--background-glow: rgba(0, 191, 255, 0.4);

}

/* General Reset */

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Roboto Mono', monospace;

}

body {

height: 100vh;

display: flex;

align-items: center;

justify-content: center;

background: linear-gradient(to right, #141414, #000000);

overflow: hidden;

color: var(--text-color);

}

.background {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: -1;

background-image: url('https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80');

background-size: cover;

background-position: center;

background-repeat: no-repeat;

filter: blur(5px);

opacity: 0.8;

}

.login-container {

background: rgba(0, 0, 0, 0.8);

padding: 50px;

border-radius: 20px;

text-align: center;

box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);

position: relative;

width: 400px;

animation: fadeIn 1.5s ease-in-out;

}

@keyframes fadeIn {

from {

opacity: 0;

transform: translateY(30px);

}

to {

opacity: 1;

transform: translateY(0);

}

.login-container h1 {

font-size: 36px;

margin-bottom: 30px;

letter-spacing: 2px;

color: var(--primary-color);

text-transform: uppercase;

text-shadow: 0 0 10px var(--button-glow);

}

.input-group {

margin-bottom: 30px;

position: relative;

}

.input-group input {

width: 100%;

padding: 20px;

border: none;

border-radius: 10px;

background: var(--input-bg);

color: var(--text-color);

font-size: 16px;

outline: none;

transition: 0.3s;

box-shadow: 0 0 10px var(--button-glow);

}

.input-group input:focus {

border: 1px solid var(--primary-color);

box-shadow: 0 0 15px var(--button-glow);

}

.input-group label {

position: absolute;

left: 20px;

top: 50%;

transform: translateY(-50%);

color: rgba(255, 255, 255, 0.7);

pointer-events: none;

transition: 0.3s;

text-shadow: 0 0 5px var(--button-glow);

}

.input-group input:focus + label,

.input-group input:valid + label {

top: 0;

font-size: 14px;

color: var(--primary-color);

text-shadow: 0 0 10px var(--button-glow);

}

.login-btn, .signup-btn {

width: 100%;

padding: 20px;

border: none;

border-radius: 10px;

font-size: 18px;

font-weight: bold;

cursor: pointer;

margin-top: 20px;

position: relative;

overflow: hidden;

transition: 0.3s;

background: linear-gradient(90deg, var(--primary-color), #00FFFF);

color: var(--text-color);

box-shadow: 0 0 15px var(--button-glow);

text-shadow: 0 0 10px var(--button-glow);

}

.login-btn:hover {

background: linear-gradient(90deg, #00FFFF, var(--primary-color));

box-shadow: 0 0 20px var(--button-glow);

}

.signup-btn {

background: var(--text-color);

color: var(--primary-color);

text-shadow: 0 0 10px var(--button-glow);

}

.signup-btn:hover {

background: rgba(255, 255, 255, 0.9);

box-shadow: 0 0 20px var(--button-glow);

}

.forgot-password {

display: block;

margin-top: 20px;

font-size: 14px;

text-decoration: none;

color: rgba(255, 255, 255, 0.8);

text-shadow: 0 0 5px var(--button-glow);

}

.forgot-password:hover {

text-decoration: underline;

color: var(--primary-color);

}

</style>

</head>

<body>

<h1>Secure Login</h1>

<form>

<label for="username">Username</label>

</div>

<label for="password">Password</label>

</div>

<a href="#" class="forgot-password">Forgot Password?</a>

</form>

</div>

</body>

</html>

CSS

/* General Reset */

* {

margin: 0;

padding: 0;

box-sizing: border-box;

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

}

body {

height: 100vh;

display: flex;

align-items: center;

justify-content: center;

background: url('1000006351.gif') no-repeat center center fixed;

background-size: cover;

overflow: hidden;

color: var(--text-color);

}

.background {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: -1;

overflow: hidden;

}

.background .circle {

position: absolute;

width: 200px;

height: 200px;

background: var(--primary-color);

opacity: 0.5;

border-radius: 50%;

animation: float 5s infinite ease-in-out alternate;

}

.background .circle:nth-child(1) {

top: 10%;

left: 20%;

animation-delay: 0s;

}

.background .circle:nth-child(2) {

top: 60%;

left: 40%;

animation-delay: 2s;

}

.background .circle:nth-child(3) {

top: 30%;

left: 80%;

animation-delay: 4s;

}

@keyframes float {

to {

transform: translateY(-20px) scale(1.2);

}

/* Login Container */

.login-container {

background: rgba(0, 0, 0, 0.85);

padding: 40px;

border-radius: 15px;

text-align: center;

box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);

position: relative;

width: 400px;

animation: fadeIn 1.5s ease-in-out;

}

@keyframes fadeIn {

from {

opacity: 0;

transform: translateY(30px);

}

to {

opacity: 1;

transform: translateY(0);

}

.login-container h1 {

font-size: 36px;

margin-bottom: 20px;

letter-spacing: 2px;

color: var(--primary-color);

text-transform: uppercase;

}

/* Input Group */

.input-group {

margin-bottom: 20px;

position: relative;

}

.input-group input {

width: 100%;

padding: 15px;

border: none;

border-radius: 5px;

background: var(--input-bg);

color: var(--text-color);

font-size: 16px;

outline: none;

transition: 0.3s;

box-shadow: 0 0 5px var(--button-glow);

}

.input-group input:focus {

border: 1px solid var(--primary-color);

box-shadow: 0 0 10px var(--button-glow);

}

.input-group label {

position: absolute;

left: 15px;

top: 50%;

transform: translateY(-50%);

color: rgba(255, 255, 255, 0.7);

pointer-events: none;

transition: 0.3s;

}

.input-group input:focus + label,

.input-group input:valid + label {

top: 0;

font-size: 12px;

color: var(--primary-color);

}

/* Buttons */

.login-btn, .signup-btn {

width: 100%;

padding: 15px;

border: none;

border-radius: 5px;

font-size: 16px;

font-weight: bold;

cursor: pointer;

margin-top: 10px;

position: relative;

overflow: hidden;

transition: 0.3s;

background: linear-gradient(90deg, var(--primary-color), #ff6161);

color: var(--text-color);

box-shadow: 0 0 10px var(--button-glow);

}

.login-btn:hover {

background: linear-gradient(90deg, #ff6161, var(--primary-color));

box-shadow: 0 0 15px var(--button-glow);

}

.signup-btn {

background: var(--text-color);

color: var(--primary-color);

}

.signup-btn:hover {

background: rgba(255, 255, 255, 0.9);

}

.forgot-password {

display: block;

margin-top: 15px;

font-size: 14px;

text-decoration: none;

color: rgba(255, 255, 255, 0.8);

}

.forgot-password:hover {

text-decoration: underline;

}

</style>

Senarig bir giriş sayfası

Recommended

Mete'nin bir kodu

Metr'nin bir kodu

Mete'nin bir kodu

HTML

CSS

JS

Recommended

Mete'nin bir kodu

Metr'nin bir kodu

Mete'nin bir kodu

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS