Scribd
Upload
26 views4 pages

Login HTML Test

This document is an HTML template for a login page featuring a video background. It includes a login form with fields for username and password, a login button, and a prompt for signing up. The page is styled with CSS to create a visually appealing layout and uses jQuery for potential interactive functionality.

Uploaded by

ouardiniyassine
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
26 views4 pages

Login HTML Test

This document is an HTML template for a login page featuring a video background. It includes a login form with fields for username and password, a login button, and a prompt for signing up. The page is styled with CSS to create a visually appealing layout and uses jQuery for potential interactive functionality.

Uploaded by

ouardiniyassine
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

<!

DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Login</title>

<style>

body {

padding: 0;

margin: 0;

.vid-container {

position: relative;

height: 100vh;

overflow: hidden;

.bgvid {

position: absolute;

top: 0;

left: 0;

width: 100vw;

height: 100vh;

z-index: -1;

.inner-container {

width: 400px;

height: 400px;

position: absolute;

top: calc(50vh - 200px);

left: calc(50vw - 200px);

overflow: hidden;
z-index: 1;

.bgvid.inner {

top: calc(-50vh + 200px);

left: calc(-50vw + 200px);

</svg>#blur");

-webkit-filter: blur(10px);

-ms-filter: blur(10px);

-o-filter: blur(10px);

filter: blur(10px);

.box {

position: absolute;

height: 100%;

width: 100%;

font-family: Helvetica;

color: #fff;

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

padding: 30px 0;

.box h1 {

text-align: center;

margin: 30px 0;

font-size: 30px;

.box input {

display: block;

width: 300px;

margin: 20px auto;

padding: 15px;

background: rgba(0,0,0,0.2);
color: #fff;

border: 0;

.box input:focus,

.box input:active,

.box button:focus,

.box button:active {

outline: none;

.box button {

background: #2ecc71;

border: 0;

color: #fff;

padding: 10px;

font-size: 20px;

width: 330px;

margin: 20px auto;

display: block;

cursor: pointer;

.box button:active {

background: #27ae60;

.box p {

font-size: 14px;

text-align: center;

.box p span {

cursor: pointer;

color: #666;

}
</style>

</head>

<body>

<div class="vid-container">

<iframe class="bgvid" src="https://www.youtube.com/embed/XO9ZmoyV6ps?


autoplay=1&mute=1&loop=1&playlist=XO9ZmoyV6ps" frameborder="0" allow="autoplay; encrypted-
media" allowfullscreen></iframe>

<div class="inner-container">

<div class="box">

<h1>Login</h1>

<input type="text" placeholder="Username"/>

<input type="text" placeholder="Password"/>

<button>Login</button>

<p>Not a member? <span>Sign Up</span></p>

</div>

</div>

</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

<script src="js/index.js"></script>

</body>

</html>

You might also like