Aller au contenu
  • Veuillez ne pas poster de message pour but d'insulter, incitation à la haine, propos sexuels et tout autre qui ne respecte pas nos conditions générales !

Login Form - HABBO [HTML, CSS]

Chesterfield

Par Chesterfield
dans CMS & TEMPLATES

 Partager

Messages recommandés

Chesterfield

Chesterfield 48

Posté(e)
Posté(e) (modifié)

Bonjour,

 

Voici un Login Form Habbo's style en html/css fait par mes soins.

 

Pour avoir accès à ce lien, merci de vous connecter.

 

Le code : index.HTML 

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Connexion</title>
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<div class="loginBox">
			<img src="user.png" class="user">
			<h2>connexion</h2>
			<form>
				<input type="text" name="" placeholder="place ton pseudo">
				<input type="password" name="" placeholder="Place ton mot de passe">
				<input type="submit" name="" value="Se connecter">
			</form>
		</div>
	</body>
</html>

Le code : style.CSS 

body
{
	margin: 0;
	padding: 0;
	background: url(bg.gif);
	background-size: cover;
	font-family: sans-serif;
}
.loginBox
{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 300px;
	height: 235px;
	padding: 40px 20px;
	box-sizing: border-box;
	background: rgba(0, 0, 0, 0.38);
}
.user
{
	width: 100px;
	height: 100px;
	border-radius: 50%;
	overflow: hidden;
	position: absolute;
	top: calc(-100px/2);
	left: calc(50% - 50px);
}
h2
{
	margin: 0;
	padding: 0 0 20px;
	color: #fff;
	text-align: center;
}
.loginBox p
{
	margin: 0;
	padding: 0;
	font-weight: bold;
	color: #fff;
}
.loginBox input
{
	width: 100%;
	margin-bottom: 20px;
}
.loginBox input[type="text"],
.loginBox input[type="password"]
{
	border: none;
	border-bottom: 1px solid #fff;
	background: transparent;
	outline: none;
	height: 40px;
	color: #fff;
	font-size: 16px;
}
::placeholder
{
	color: rgba(255,255,255,.5);
}
.loginBox input[type="submit"]
{
	border: none;
	outline: none;
	height: 40px;
	color: #fff;
	font-size: 20px;
	background: #2653ffb3;
	cursor: pointer;
	border-radius: 20px;
}
.loginBox input[type="submit"]:hover
{
	background: #2653ffde;
	color: #262626;
}
.loginBox a
{
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
}

 

Téléchargement - LES IMAGES (mediafire)

 

-

Pour avoir accès à ce lien, merci de vous connecter.

-

-

Pour avoir accès à ce lien, merci de vous connecter.

-

 

LIEN DE TEST :

Pour avoir accès à ce lien, merci de vous connecter.

 

 

Cordialement, Emilio.

Modifié par 乇ﾶﾉしﾉѺ
Lien à poster
Partager sur d’autres sites
  • Responsable modération
MatYou

MatYou 864

Posté(e)
  • Responsable modération
Posté(e)

Merci pour le partage

~ MatYouFR ~

 

+ French Player +

+ Player of Valorant, Battlefield 4 & 5, GTA 5, ETS 2, Rocket League +

+ Streamer on Twitch +

 

signature.png

Lien à poster
Partager sur d’autres sites
  • 4 semaines plus tard...
  • 3 ans plus tard...
  • 3 mois plus tard...
  • 1 mois plus tard...
  • 4 semaines plus tard...

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...