Webleb - HTML UI Elements - Senarig uma página inicial

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 uma página inicial

Recomendado

Página de destino da agência de marketing digital

Uma página inicial estranha

PÁGINA DE CARREGAMENTO NETFLIX

HTML

CSS

JS

Recomendado

Página de destino da agência de marketing digital

Uma página inicial estranha

PÁGINA DE CARREGAMENTO NETFLIX

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS