L'HyperText Markup Language, généralement abrégé HTMLou dans sa dernière version HTML5, est un langage de balisage conçu pour représenter les pages web. Il permet aussi d'écrire de l'hypertexte d'où son nom.
Les feuilles de styles en cascade, généralement appelées CSS de l'anglais Cascading Style Sheets, forment un langage informatique qui décrit la présentation des documents HTML et XML. Les standards définissant CSS sont publiés par le World Wide Web Consortium (W3C).
Dans ce tutoriel je vais vous montrer comment créer un formulaire de contact en utilisant HTML et CSS.
Dans ce tutoriel nous allons voir comment créer un formulaire de connexion avec les médias sociaux ou manuellement.
Aperçu:
1) Le code HTML
<!--DOCTYPE html-->
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Vous pouvez insérer ici votre code CSS -->
</head>
<body>
<h2>Blog CTK --- Formulaire de connexion</h2>
<p>Redimensionnez la fenêtre du navigateur pour voir l'effet réactif.</p>
<div class="container">
<form action="/action_page.php">
<div class="row">
<h2 style="text-align:center">Connexion avec les médias sociaux ou manuellement</h2>
<div class="vl">
<span class="vl-innertext">or</span>
</div>
<div class="col">
<a class="fb btn" href="#">
<i class="fa fa-facebook fa-fw"></i> Se connecter avec Facebook
</a>
<a class="twitter btn" href="#">
<i class="fa fa-twitter fa-fw"></i> Se connecter avec Twitter
</a>
<a class="google btn" href="#"><i class="fa fa-google fa-fw">
</i> Se connecter avec Google
</a>
</div>
<div class="col">
<input type="text" name="username" placeholder="Login" required>
<input type="password" name="password" placeholder="Mot de passe" required>
<input type="submit" value="Se connecter">
</div>
</div>
</form>
</div>
<div class="bottom-container">
<div class="row">
<div class="col">
<a class="btn" href="#" style="color:white">S'inscrire</a>
</div>
<div class="col">
<a class="btn" href="#" style="color:white">Mot de passe oublié?</a>
</div>
</div>
</div>
</body>
</html>
1) Le code CSS
<style>
* {box-sizing: border-box}
.container {
position: relative;
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px 0 30px 0;
}
input,
.btn {
width: 100%;
padding: 12px;
border: none;
border-radius: 4px;
margin: 5px 0;
opacity: 0.85;
display: inline-block;
font-size: 17px;
line-height: 20px;
text-decoration: none;
}
input:hover,
.btn:hover {
opacity: 1;
}
.fb {
background-color: #3B5998;
color: white;
}
.twitter {
background-color: #55ACEE;
color: white;
}
.google {
background-color: #dd4b39;
color: white;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
.col {
float: left;
width: 50%;
margin: auto;
padding: 0 50px;
margin-top: 6px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.vl {
position: absolute;
left: 50%;
transform: translate(-50%);
border: 2px solid #ddd;
height: 175px;
}
.inner {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
background-color: #f1f1f1;
border: 1px solid #ccc;
border-radius: 50%;
padding: 8px 10px;
}
.hide-md-lg {
display: none;
}
.bottom-container {
text-align: center;
background-color: #666;
border-radius: 0px 0px 4px 4px;
}
@media screen and (max-width: 650px) {
.col {
width: 100%;
margin-top: 0;
}
.vl {
display: none;
}
.hide-md-lg {
display: block;
text-align: center;
}
}
</style>
J'espère que cela peut vous aider.... Merci de vous abonner et de laisser un commentaire.
Les feuilles de styles en cascade, généralement appelées CSS de l'anglais Cascading Style Sheets, forment un langage informatique qui décrit la présentation des documents HTML et XML. Les standards définissant CSS sont publiés par le World Wide Web Consortium (W3C).
Dans ce tutoriel je vais vous montrer comment créer un formulaire de contact en utilisant HTML et CSS.
Dans ce tutoriel nous allons voir comment créer un formulaire de connexion avec les médias sociaux ou manuellement.
Aperçu:
1) Le code HTML
Merci Maam
RépondreSupprimerBien. Bonne suite
SupprimerFière de toi grand frère
RépondreSupprimerMerci bcp frère
SupprimerMerci pour le travail que vous faites. Intéressant
RépondreSupprimerJ'ai vraiment bien aimé ce formulaire d'inscription. C'est trop cool.
RépondreSupprimerUn grand merci à vous. Vous m'avez beaucoup aidé.
RépondreSupprimerIntéressant ce tutoriel.
RépondreSupprimerIntéressante. Merci
RépondreSupprimer