Webleb - Extraits de Code - Senarig une page d'accueil

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 une page d'accueil

Recommandé

Page de destination de React Netflix

Un répertoire de page d'accueil alternatif

PAGE DE CHARGEMENT DE NETFLIX

HTML

CSS

JS

Recommandé

Page de destination de React Netflix

Un répertoire de page d'accueil alternatif

PAGE DE CHARGEMENT DE NETFLIX

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS