ShareMyCode.io
Partagez un extrait de code en quelques secondes.
ShareMyCode.io
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
</head>
<style>
h1{
margin-left: 300px ;
}
body{
background-color: blanchedalmond;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
/*partie d enregistrement*/
div.main{
background-color: rgb(238, 144, 67);
width: 500px;
height: 210px;
margin-left: 200px;
padding: 10px;
}
table{
border-spacing: 20px 15px;
margin-left: 8px;
}
label{
margin-top: 10px;
}
input{
padding: 10px;
border-radius: 10px;
width: 200px;
border: none;
}
input:hover{
background-color: rgb(48, 45, 45);
color: beige;
}
button{
justify-content: center;
width: 400px;
margin-left: 60px;
padding: 5px;
border-radius: 7px;
background-color: black;
color: white;
border: 1px solid white;
}
button:hover{
background-color: rgb(2, 83, 36);
border: none;
}
/*recherche*/
.seach{
background-color: rgb(230, 226, 226);
width: 500px;
margin-left: 200px;
margin-top: 20px;
}
/*afficher les contacts*/
.affiche{
margin-left: 200px;
margin-top: 10px;
}
p{
margin: 3px;
}
.affiche{
margin-left: 190px;
}
.three{
margin-top: 10px;
}
.two, .three{
width: 520px;
border-radius: 10px;
background-color: rgb(248, 181, 94);
font-size: 10px;
}
</style>
</head>
<body>
<h1>Gestionaire de contacts</h1>
<!-- enregister le contact -->
<div class="main">
<p style="text-align: center;color: rgb(250, 249, 246);">Ajouter un contact</p>
<form>
<table>
<tr>
<td>
<label for="">Nom</label><br>
<input type="text" id="text" placeholder="Nom" required>
<br>
</td>
<td>
<label for="">Telephone</label><br>
<input type="number" id="telephone" placeholder="Telephone" required>
<br>
</td>
</tr>
<tr>
<td>
<label for="">Prenom</label><br>
<input type="text" id="prenom" placeholder="Prenom" required>
<br>
</td>
<td>
<label for="">Email</label><br>
<input type="email" id="email" placeholder="Email" required>
</td>
</tr>
</table>
</form>
<button>Ajouter ce contact</button>
</div>
<!--recherche-->
<input class="seach" type="text" id="text" placeholder="Recherche contact">
<!--affichage des contacts-->
<div class="affiche">
<table class="two">
<div class="sous">
<tr>
<td> <p>Tatiana Vivuya</p>
<p><i class="fa-solid fa-phone" style="color: rgb(37, 34, 201);"></i>0994302061</p>
<p><i class="fa-regular fa-envelope" style="color: rgb(38, 44, 175);"></i>tatianavgmail.com</p></td>
<td><i class="fa-solid fa-xmark" style="color: rgb(223, 18, 18);"></i></td>
</div>
</table>
<table class="three">
<div class="sous">
<tr>
<td><p>Tarcile Kavira</p>
<p><i class="fa-solid fa-phone" style="color: rgb(38, 44, 175);"></i>0986753424</p>
<p><i class="fa-regular fa-envelope" style="color: rgb(38, 44, 175);"></i>tarcilegmail.com</p>
</td>
<td><i class="fa-solid fa-xmark" style="color:rgb(223, 18, 18);"></i>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>