WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
HTML
CSS
JS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>infot</title> </head> <body> <div class="bt"> <fieldset> <legend>INFO</legend> <label for="nom">NOM:</label><br><input type="text"><br> <label for="pernom">PERNOM:</label><br><input type="text"><br> <label for="mot">MOT DE PASSE:</label><br><input type="password"><br> <label for="date">DATE:</label><br><input type="date"> </fieldset> <nav> <a href="https://www.google.com/"><img src="data:image/webp;base64,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" ></a> <a href="https://www.facebook.com/"><img src="https://th.bing.com/th/id/OIP.lkR1eCnLcPZ32cYreDUNkgHaHa?w=205&h=205&c=7&r=0&o=7&pid=1.7&rm=3" ></a> <a href="https://www.instagram.com/"><img src="https://th.bing.com/th/id/OIP.kIgAoVfb7NLSj3RXtLxAnAHaFj?w=232&h=180&c=7&r=0&o=7&pid=1.7&rm=3" alt=""></a> </nav> <button>CREE VOTRE COMPTE</button> </div> </body> </html>
body{ margin: 0; background: linear-gradient(45deg,orange,red); } .bt{ width: 400px; border: 3px solid ; border-radius: 20px; background: rgba(0 0 0 0.4); height: 400px; display: block; margin: 20px auto; } img{ width: 30px; border-radius: 50%; } fieldset{ border: none ; margin: 5px; } input { width: 95%; border: 2px solid; padding: 3px; display: block; margin: auto; } nav{ display: flex; align-items: center; justify-content: space-evenly; margin: 10px; } button{ width: 90%; height: 9%; background: linear-gradient(45deg, orange,red); display: block; margin: auto; } /* telephone */ @media (max-width: 600px){ .bt{ width: 70%; display: block; margin: 200px auto; } input{ width: 90%; } button{ width: 90%; } }
/* Replace with your JS Code (Leave empty if not needed) */
Preview
Open Advanced Editor
Publish Code
Full Screen
HTML
CSS
JS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>infot</title> </head> <body> <div class="bt"> <fieldset> <legend>INFO</legend> <label for="nom">NOM:</label><br><input type="text"><br> <label for="pernom">PERNOM:</label><br><input type="text"><br> <label for="mot">MOT DE PASSE:</label><br><input type="password"><br> <label for="date">DATE:</label><br><input type="date"> </fieldset> <nav> <a href="https://www.google.com/"><img src="data:image/webp;base64,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" ></a> <a href="https://www.facebook.com/"><img src="https://th.bing.com/th/id/OIP.lkR1eCnLcPZ32cYreDUNkgHaHa?w=205&h=205&c=7&r=0&o=7&pid=1.7&rm=3" ></a> <a href="https://www.instagram.com/"><img src="https://th.bing.com/th/id/OIP.kIgAoVfb7NLSj3RXtLxAnAHaFj?w=232&h=180&c=7&r=0&o=7&pid=1.7&rm=3" alt=""></a> </nav> <button>CREE VOTRE COMPTE</button> </div> </body> </html>
body{ margin: 0; background: linear-gradient(45deg,orange,red); } .bt{ width: 400px; border: 3px solid ; border-radius: 20px; background: rgba(0 0 0 0.4); height: 400px; display: block; margin: 20px auto; } img{ width: 30px; border-radius: 50%; } fieldset{ border: none ; margin: 5px; } input { width: 95%; border: 2px solid; padding: 3px; display: block; margin: auto; } nav{ display: flex; align-items: center; justify-content: space-evenly; margin: 10px; } button{ width: 90%; height: 9%; background: linear-gradient(45deg, orange,red); display: block; margin: auto; } /* telephone */ @media (max-width: 600px){ .bt{ width: 70%; display: block; margin: 200px auto; } input{ width: 90%; } button{ width: 90%; } }
/* Replace with your JS Code (Leave empty if not needed) */
Preview
Validating your code, please wait...