Webleb - fragmentos de código - Senarig una página de inicio

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 una página de inicio

Recomendado

Un código de andres.stahr

Formulario de inicio de sesión HTML CSS

Formulario de inicio de sesión animado

HTML

CSS

JS

Recomendado

Un código de andres.stahr

Formulario de inicio de sesión HTML CSS

Formulario de inicio de sesión animado

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS