Create blue box area to organize a form

my goal is to create something like this :enter image description here So an area where I can put a form for authentification or create an account. I already created a form in php which is linked to my database like this

 <form action="connection.php" method="post">
    <div class="form-group">
        <label >Nom</label>
        <input name = nom>
    </div>
    <div class="form-group">
        <label >Prénom</label>
        <input name = prenom>
    </div>
    <div class="form-group">
        <label >Email</label>
        <input name = mail>
    </div>
    <div class="form-group">
        <label >Numéro de telephone</label>
        <input name = tel>
    </div>
    <div class="form-group">
        <label >mot de passe</label>
        <input type=password id="inputPassword" placeholder="Password"">
    </div>
    <button type="submit" class="btn btn-primary" name="add">Creer son compte</button>

function inscription($db,$nom,$prenom,$mail,$tel,$mdp){
    try{
    $request_client = "INSERT INTO client (nom, prenom, mail, tel, mdp) VALUES (:nom, :prename, :email, :phone,:pass);";
    $statement_client = $db->prepare($request_client);
    $statement_client->bindParam(':nom', $nom);
    $statement_client->bindParam(':prename', $prenom);
    $statement_client->bindParam(':email', $mail);
    $statement_client->bindParam(':phone', $tel);
    $statement_client->bindParam(':pass', $mdp);
    $statement_client->execute();
    }
    catch (PDOException $exception)
  {
  error_log('Request error: '.$exception->getMessage());
  return false;
  }
}

Is there something in boostrap or css or even js which can make me creat this blue area ?

Answer

You can do this with CSS, something like:

.blue-box {
  max-width: 450px;
  margin: 1rem auto;
  padding: 1rem;
  background: #3b52a5;
  border-radius: 8px;
  color: #fff;
}

.blue-box .form-group {
  display: flex;
   justify-content: space-between;
  flex-direction: column;
  margin: 0.5rem 0;
}

.blue-box .form-group input {
  padding: 0.75rem 1rem;
  margin-top: 0.25rem;
  border: 1px solid #060537;
  border-radius: 8px;
  background: none;
  outline: none;
  color: #fff;
}

.blue-box button {
  padding: 0.75rem 1rem;
  margin: 0.5rem auto;
  background: #060537;
  border-radius: 8px;
  width: 100%;
  outline: none;
  border: none;
  color: #fff;
}

body {
  background: #7db9ff;
  font-family: sans-serif;
}

<form action="connection.php" method="post" class="blue-box">
    <div class="form-group">
        <label >Nom</label>
        <input name = nom>
    </div>
    <div class="form-group">
        <label >Prénom</label>
        <input name = prenom>
    </div>
    <div class="form-group">
        <label >Email</label>
        <input name = mail>
    </div>
    <div class="form-group">
        <label >Numéro de telephone</label>
        <input name = tel>
    </div>
    <div class="form-group">
        <label >mot de passe</label>
        <input type=password id="inputPassword" placeholder="Password"">
    </div>
    <button type="submit" class="btn btn-primary" name="add">Creer son compte</button>
</form>

Advertisement

Answer