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

HTML

CSS

<!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>

/* 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>

Validating your code, please wait...

HTML

CSS

<!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>

/* 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>